cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-01-15 13:11:08 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixed overflow layout and added confirmation on countdown removal

Browse source
This commit is contained in:
WBHarry 2025-06-21 14:39:23 +02:00
parent 2299141442
commit 81cda222da
5 changed files with 107 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

2
lang/en.json
View file

@ -1054,6 +1054,8 @@
}, },
"NewCountdown": "New Countdown", "NewCountdown": "New Countdown",
"AddCountdown": "Add Countdown", "AddCountdown": "Add Countdown",
"RemoveCountdownTitle": "Remove Countdown",
"RemoveCountdownText": "Are you sure you want to remove the countdown: {name}?",
"Title": "{type} Countdowns", "Title": "{type} Countdowns",
"Types": { "Types": {
"narrative": "Narrative", "narrative": "Narrative",

14
module/applications/countdowns.mjs
View file

@ -18,6 +18,7 @@ class Countdowns extends HandlebarsApplicationMixin(ApplicationV2) {
static DEFAULT_OPTIONS = { static DEFAULT_OPTIONS = {
classes: ['daggerheart', 'dh-style', 'countdown'], classes: ['daggerheart', 'dh-style', 'countdown'],
tag: 'form', tag: 'form',
position: { width: 740, height: 700 },
window: { window: {
frame: true, frame: true,
title: 'Countdowns', title: 'Countdowns',
@ -34,7 +35,8 @@ class Countdowns extends HandlebarsApplicationMixin(ApplicationV2) {
static PARTS = { static PARTS = {
countdowns: { countdowns: {
template: 'systems/daggerheart/templates/views/countdowns.hbs' template: 'systems/daggerheart/templates/views/countdowns.hbs',
scrollable: ['.expanded-view']
} }
}; };
@ -148,6 +150,16 @@ class Countdowns extends HandlebarsApplicationMixin(ApplicationV2) {
static async removeCountdown(_, target) { static async removeCountdown(_, target) {
const countdownSetting = game.settings.get(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.Countdowns); const countdownSetting = game.settings.get(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.Countdowns);
const countdownName = countdownSetting[this.basePath].countdowns[target.dataset.countdown].name;
const confirmed = await foundry.applications.api.DialogV2.confirm({
window: {
title: game.i18n.localize('DAGGERHEART.Countdown.RemoveCountdownTitle')
},
content: game.i18n.format('DAGGERHEART.Countdown.RemoveCountdownText', { name: countdownName })
});
if (!confirmed) return;
await countdownSetting.updateSource({ [`${this.basePath}.countdowns.-=${target.dataset.countdown}`]: null }); await countdownSetting.updateSource({ [`${this.basePath}.countdowns.-=${target.dataset.countdown}`]: null });
await game.settings.set(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.Countdowns, countdownSetting.toObject()); await game.settings.set(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.Countdowns, countdownSetting.toObject());

67
styles/countdown.less
View file

@ -1,4 +1,6 @@
.daggerheart.dh-style.countdown { .daggerheart.dh-style.countdown {
overflow: hidden;
fieldset { fieldset {
align-items: center; align-items: center;
margin-top: 5px; margin-top: 5px;
@ -19,7 +21,7 @@
&.minimized { &.minimized {
height: auto !important; height: auto !important;
max-height: unset !important; max-height: unset !important;
max-width: 600px !important; max-width: 740px !important;
width: auto !important; width: auto !important;
.window-content { .window-content {
@ -69,28 +71,53 @@
display: none; display: none;
} }
.countdown-container { .window-content {
display: flex; > div {
align-items: center; height: 100%;
gap: 16px;
img { .expanded-view {
width: 150px; height: 100%;
height: 150px;
cursor: pointer;
}
.countdown-inner-container {
display: flex;
flex-direction: column;
gap: 4px;
.countdown-value-container {
display: flex; display: flex;
gap: 4px; flex-direction: column;
input { .countdowns-container {
max-width: 80px; display: flex;
gap: 8px;
flex-wrap: wrap;
overflow: auto;
max-height: 100%;
.countdown-fieldset {
width: 340px;
height: min-content;
.countdown-container {
display: flex;
align-items: center;
gap: 16px;
img {
width: 150px;
height: 150px;
cursor: pointer;
}
.countdown-inner-container {
display: flex;
flex-direction: column;
gap: 4px;
.countdown-value-container {
display: flex;
gap: 4px;
input {
max-width: 80px;
}
}
}
}
}
} }
} }
} }

34
styles/daggerheart.css
View file

@ -3191,6 +3191,9 @@ div.daggerheart.views.multiclass {
#resources:has(.fear-bar) { #resources:has(.fear-bar) {
min-width: 200px; min-width: 200px;
} }
.daggerheart.dh-style.countdown {
overflow: hidden;
}
.daggerheart.dh-style.countdown fieldset { .daggerheart.dh-style.countdown fieldset {
align-items: center; align-items: center;
margin-top: 5px; margin-top: 5px;
@ -3208,7 +3211,7 @@ div.daggerheart.views.multiclass {
.daggerheart.dh-style.countdown.minimized { .daggerheart.dh-style.countdown.minimized {
height: auto !important; height: auto !important;
max-height: unset !important; max-height: unset !important;
max-width: 600px !important; max-width: 740px !important;
width: auto !important; width: auto !important;
} }
.daggerheart.dh-style.countdown.minimized .window-content { .daggerheart.dh-style.countdown.minimized .window-content {
@ -3247,26 +3250,45 @@ div.daggerheart.views.multiclass {
.daggerheart.dh-style.countdown .hidden { .daggerheart.dh-style.countdown .hidden {
display: none; display: none;
} }
.daggerheart.dh-style.countdown .countdown-container { .daggerheart.dh-style.countdown .window-content > div {
height: 100%;
}
.daggerheart.dh-style.countdown .window-content > div .expanded-view {
height: 100%;
display: flex;
flex-direction: column;
}
.daggerheart.dh-style.countdown .window-content > div .expanded-view .countdowns-container {
display: flex;
gap: 8px;
flex-wrap: wrap;
overflow: auto;
max-height: 100%;
}
.daggerheart.dh-style.countdown .window-content > div .expanded-view .countdowns-container .countdown-fieldset {
width: 340px;
height: min-content;
}
.daggerheart.dh-style.countdown .window-content > div .expanded-view .countdowns-container .countdown-fieldset .countdown-container {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; gap: 16px;
} }
.daggerheart.dh-style.countdown .countdown-container img { .daggerheart.dh-style.countdown .window-content > div .expanded-view .countdowns-container .countdown-fieldset .countdown-container img {
width: 150px; width: 150px;
height: 150px; height: 150px;
cursor: pointer; cursor: pointer;
} }
.daggerheart.dh-style.countdown .countdown-container .countdown-inner-container { .daggerheart.dh-style.countdown .window-content > div .expanded-view .countdowns-container .countdown-fieldset .countdown-container .countdown-inner-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
} }
.daggerheart.dh-style.countdown .countdown-container .countdown-inner-container .countdown-value-container { .daggerheart.dh-style.countdown .window-content > div .expanded-view .countdowns-container .countdown-fieldset .countdown-container .countdown-inner-container .countdown-value-container {
display: flex; display: flex;
gap: 4px; gap: 4px;
} }
.daggerheart.dh-style.countdown .countdown-container .countdown-inner-container .countdown-value-container input { .daggerheart.dh-style.countdown .window-content > div .expanded-view .countdowns-container .countdown-fieldset .countdown-container .countdown-inner-container .countdown-value-container input {
max-width: 80px; max-width: 80px;
} }
.daggerheart.dh-style.setting fieldset { .daggerheart.dh-style.setting fieldset {

31
templates/views/countdowns.hbs
View file

@ -1,23 +1,26 @@
<div> <div>
<div class="expanded-view {{#if minimized}}hidden{{/if}}"> <div class="expanded-view {{#if minimized}}hidden{{/if}}">
<div class="flexrow"><button data-action="addCountdown">{{localize "DAGGERHEART.Countdown.AddCountdown"}}</button></div> <div class="flexrow"><button data-action="addCountdown">{{localize "DAGGERHEART.Countdown.AddCountdown"}}</button></div>
{{#each source.countdowns}}
<fieldset>
<legend>{{this.name}} <a><i class="fa-solid fa-trash icon-button" data-action="removeCountdown" data-countdown="{{@key}}"></i></a></legend>
<div class="countdown-container"> <div class="countdowns-container">
<img src="{{this.img}}" data-action='editImage' data-countdown="{{@key}}" /> {{#each source.countdowns}}
<div class="countdown-inner-container"> <fieldset class="countdown-fieldset">
{{formGroup @root.countdownFields.name name=(concat @root.base ".countdowns." @key ".name") value=this.name localize=true}} <legend>{{this.name}} <a><i class="fa-solid fa-trash icon-button" data-action="removeCountdown" data-countdown="{{@key}}"></i></a></legend>
<div class="countdown-value-container">
{{formGroup @root.countdownFields.progress.fields.current name=(concat @root.base ".countdowns." @key ".progress.current") value=this.progress.current localize=true}} <div class="countdown-container">
{{formGroup @root.countdownFields.progress.fields.max name=(concat @root.base ".countdowns." @key ".progress.max") value=this.progress.max localize=true}} <img src="{{this.img}}" data-action='editImage' data-countdown="{{@key}}" />
<div class="countdown-inner-container">
{{formGroup @root.countdownFields.name name=(concat @root.base ".countdowns." @key ".name") value=this.name localize=true}}
<div class="countdown-value-container">
{{formGroup @root.countdownFields.progress.fields.current name=(concat @root.base ".countdowns." @key ".progress.current") value=this.progress.current localize=true}}
{{formGroup @root.countdownFields.progress.fields.max name=(concat @root.base ".countdowns." @key ".progress.max") value=this.progress.max localize=true}}
</div>
{{formGroup @root.countdownFields.progress.fields.type.fields.value name=(concat @root.base ".countdowns." @key ".progress.type.value") value=this.progress.type.value localize=true localize=true}}
</div> </div>
{{formGroup @root.countdownFields.progress.fields.type.fields.value name=(concat @root.base ".countdowns." @key ".progress.type.value") value=this.progress.type.value localize=true localize=true}}
</div> </div>
</div> </fieldset>
</fieldset> {{/each}}
{{/each}} </div>
</div> </div>
<div class="minimized-view {{#if (not minimized)}}hidden{{/if}}"> <div class="minimized-view {{#if (not minimized)}}hidden{{/if}}">
{{#each source.countdowns}} {{#each source.countdowns}}