fix style problems in bottom sheets and enhance damage and action dialogs (#325)

2026-01-12 03:31:07 +01:00 · 2025-07-12 09:44:14 -03:00 · 2025-07-12 09:44:14 -03:00 · dee398347f
commit dee398347f
parent b6195127fe
21 changed files with 129 additions and 70 deletions
--- a/lang/en.json
+++ b/lang/en.json
@ -677,6 +677,10 @@
                    "name": "Dice Set"
                }
            },
+            "SelectAction": {
+                "selectType": "Select Action Type",
+                "selectAction": "Select Action"
+            },
            "Traits": {
                "agility": {
                    "name": "Agility",
--- a/module/applications/dialogs/costSelectionDialog.mjs
+++ b/module/applications/dialogs/costSelectionDialog.mjs
@ -11,7 +11,7 @@ export default class CostSelectionDialog extends HandlebarsApplicationMixin(Appl

    static DEFAULT_OPTIONS = {
        tag: 'form',
-        classes: ['daggerheart', 'views', 'damage-selection'],
+        classes: ['daggerheart', 'dialog', 'dh-style', 'views', 'damage-selection'],
        position: {
            width: 400,
            height: 'auto'
--- a/module/applications/dialogs/damageDialog.mjs
+++ b/module/applications/dialogs/damageDialog.mjs
@ -11,11 +11,14 @@ export default class DamageDialog extends HandlebarsApplicationMixin(Application
    static DEFAULT_OPTIONS = {
        tag: 'form',
        id: 'roll-selection',
-        classes: ['daggerheart', 'views', 'damage-selection'],
+        classes: ['daggerheart', 'dialog', 'dh-style', 'views', 'damage-selection'],
        position: {
            width: 400,
            height: 'auto'
        },
+        window: {
+            icon: 'fa-solid fa-dice'
+        },
        actions: {
            submitRoll: this.submitRoll
        },
@ -34,9 +37,15 @@ export default class DamageDialog extends HandlebarsApplicationMixin(Application
        }
    };

+    get title() {
+        return game.i18n.localize('DAGGERHEART.EFFECTS.ApplyLocations.damageRoll.name');
+    }
+
    async _prepareContext(_options) {
        const context = await super._prepareContext(_options);
-        context.title = this.config.title;
+        context.title = this.config.title
+            ? this.config.title
+            : game.i18n.localize('DAGGERHEART.EFFECTS.ApplyLocations.damageRoll.name');
        context.extraFormula = this.config.extraFormula;
        context.formula = this.roll.constructFormula(this.config);
        return context;
--- a/module/applications/dialogs/damageSelectionDialog.mjs
+++ b/module/applications/dialogs/damageSelectionDialog.mjs
@ -23,7 +23,7 @@ export default class DamageSelectionDialog extends HandlebarsApplicationMixin(Ap

    static DEFAULT_OPTIONS = {
        tag: 'form',
-        classes: ['daggerheart', 'views', 'damage-selection'],
+        classes: ['daggerheart', 'dialog', 'dh-style', 'views', 'damage-selection'],
        position: {
            width: 400,
            height: 'auto'
--- a/module/applications/sheets/items/feature.mjs
+++ b/module/applications/sheets/items/feature.mjs
@ -61,12 +61,17 @@ export default class FeatureSheet extends DHBaseItemSheet {
    static async selectActionType() {
        const content = await foundry.applications.handlebars.renderTemplate(
                'systems/daggerheart/templates/actionTypes/actionType.hbs',
-                { types: CONFIG.DH.ACTIONS.actionTypes }
+                {
+                    types: CONFIG.DH.ACTIONS.actionTypes,
+                    itemName: game.i18n.localize('DAGGERHEART.CONFIG.SelectAction.selectType')
+                }
            ),
-            title = 'Select Action Type';
+            title = game.i18n.localize('DAGGERHEART.CONFIG.SelectAction.selectType');
+        console.log(this.document);

        return foundry.applications.api.DialogV2.prompt({
            window: { title },
+            classes: ['daggerheart', 'dh-style'],
            content,
            ok: {
                label: title,
--- a/module/documents/item.mjs
+++ b/module/documents/item.mjs
@ -80,12 +80,16 @@ export default class DHItem extends foundry.documents.Item {
    async selectActionDialog(prevEvent) {
        const content = await foundry.applications.handlebars.renderTemplate(
                'systems/daggerheart/templates/dialogs/actionSelect.hbs',
-                { actions: this.system.actionsList }
+                {
+                    actions: this.system.actionsList,
+                    itemName: this.name
+                }
            ),
-            title = 'Select Action';
+            title = game.i18n.localize('DAGGERHEART.CONFIG.SelectAction.selectAction');

        return foundry.applications.api.DialogV2.prompt({
            window: { title },
+            classes: ['daggerheart', 'dh-style'],
            content,
            ok: {
                label: title,
--- a/styles/less/dialog/actions/action-list.less
+++ b/styles/less/dialog/actions/action-list.less
@ -0,0 +1,19 @@
+@import '../../utils/fonts.less';
+
+.application.daggerheart.dh-style {
+    .actions-list {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+
+        .action-item {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+
+            .label {
+                font-family: @font-body;
+            }
+        }
+    }
+}
--- a/styles/less/dialog/damage-selection/sheet.less
+++ b/styles/less/dialog/damage-selection/sheet.less
@ -0,0 +1,20 @@
+@import '../../utils/colors.less';
+
+.daggerheart.dialog.dh-style.views.damage-selection {
+    .damage-section-container {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+
+        input[type='text'],
+        input[type='number'] {
+            color: light-dark(@dark, @beige);
+            outline: 2px solid transparent;
+            transition: all 0.3s ease;
+
+            &:hover {
+                outline: 2px solid light-dark(@dark, @beige);
+            }
+        }
+    }
+}
--- a/styles/less/dialog/dice-roll/roll-selection.less
+++ b/styles/less/dialog/dice-roll/roll-selection.less
@ -114,15 +114,5 @@
                }
            }
        }
-
-        .formula-label {
-            font-family: @font-body;
-            font-style: normal;
-            font-weight: 500;
-            font-size: 14px;
-            line-height: 17px;
-
-            color: light-dark(@dark, @beige);
-        }
    }
 }
--- a/styles/less/dialog/index.less
+++ b/styles/less/dialog/index.less
@ -4,6 +4,10 @@
@import './level-up/summary-container.less';
@import './level-up/tiers-container.less';

+@import './actions/action-list.less';
+
+@import './damage-selection/sheet.less';
+
@import './downtime/downtime-container.less';

@import './beastform/beastform-container.less';
--- a/styles/less/global/dialog.less
+++ b/styles/less/global/dialog.less
@ -1,5 +1,6 @@
@import '../utils/colors.less';
@import '../utils/fonts.less';
+@import '../utils/mixin.less';

 .appTheme({
    &.dialog {
@ -40,4 +41,19 @@
            }
        }
    }
+
+    .submit-btn {
+        width: 100%;
+        height: 38px;
+    }
+
+    .formula-label {
+        font-family: @font-body;
+        font-style: normal;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 17px;
+
+        color: light-dark(@dark, @beige);
+    }
 }
--- a/styles/less/global/elements.less
+++ b/styles/less/global/elements.less
@ -35,15 +35,16 @@
        }
    }

-    input[type='checkbox'] {
+    input[type='checkbox'],
+    input[type='radio'] {
        &:checked::after {
-            color: light-dark(@dark, @golden);
+            color: light-dark(@dark-40, @golden);
        }
        &:checked::before {
-            color: light-dark(transparent, @dark-blue);
+            color: light-dark(@dark-40, @golden-40);
        }
        &::before {
-            color: light-dark(@dark, @beige);
+            color: light-dark(@dark-40, @golden-40);
        }
    }

--- a/styles/less/global/sheet.less
+++ b/styles/less/global/sheet.less
@ -4,8 +4,8 @@

 // Theme handling
 .appTheme({
-    background: @semi-transparent-dark-blue;
-    backdrop-filter: blur(9px);
+    background: @dark-blue-60;
+    backdrop-filter: blur(10px);
 }, {
    background: url('../assets/parchments/dh-parchment-light.png') no-repeat center;
 });
@ -44,6 +44,8 @@
        top: -36px;
        min-height: -webkit-fill-available;
        transition: opacity 0.3s ease;
+        padding-bottom: 20px;
+        margin-bottom: -36px;

        .tab {
            padding: 0 10px;
--- a/styles/less/sheets-settings/adversary-settings/experiences.less
+++ b/styles/less/sheets-settings/adversary-settings/experiences.less
@ -5,6 +5,7 @@
    .tab.experiences {
        .add-experience-btn {
            width: 100%;
+            height: 38px;
            margin-bottom: 12px;
        }

--- a/styles/less/sheets-settings/adversary-settings/features.less
+++ b/styles/less/sheets-settings/adversary-settings/features.less
@ -10,6 +10,7 @@

        .add-feature-btn {
            width: 100%;
+            height: 38px;
            margin-bottom: 12px;
        }

--- a/styles/less/sheets-settings/environment-settings/adversaries.less
+++ b/styles/less/sheets-settings/environment-settings/adversaries.less
@ -10,6 +10,7 @@

        .add-action-btn {
            width: 100%;
+            height: 38px;
            margin-bottom: 12px;
        }

--- a/styles/less/sheets-settings/environment-settings/features.less
+++ b/styles/less/sheets-settings/environment-settings/features.less
@ -10,6 +10,7 @@

        .add-feature-btn {
            width: 100%;
+            height: 38px;
            margin-bottom: 12px;
        }

--- a/styles/less/utils/colors.less
+++ b/styles/less/utils/colors.less
@ -25,10 +25,12 @@
@dark-blue-10: #18162e10;
@dark-blue-40: #18162e40;
@dark-blue-50: #18162e50;
+@dark-blue-60: #18162e60;
@semi-transparent-dark-blue: rgba(24, 22, 46, 0.33);

@dark: #222;
@dark-15: #22222215;
+@dark-40: #22222240;

@deep-black: #0e0d15;

--- a/templates/actionTypes/actionType.hbs
+++ b/templates/actionTypes/actionType.hbs
@ -1,13 +1,12 @@
 <form id="action-type-select">
-    <ul class="unlist list-select">
+    <header class="dialog-header">
+        <h1>{{itemName}}</h1>
+    </header>
+    <ul class="actions-list">
    {{#each types}}
-        <li>
-            <label>
-                {{! TODO: remove dh-icon}}
-                <dh-icon class="dh-icon fas {{icon}}"></dh-icon>
-                <span>{{localize name}}</span>
+        <li class="action-item">
            <input type="radio" name="type" value="{{id}}" {{#if (eq @index 0)}}checked{{/if}}>
-            </label>
+            <span class="label">{{localize name}}</span>
        </li>
    {{/each}}
    </ul>
--- a/templates/dialogs/actionSelect.hbs
+++ b/templates/dialogs/actionSelect.hbs
@ -1,12 +1,12 @@
 <form id="item-action-select">
-    <ul class="unlist list-select">
+    <header class="dialog-header">
+        <h1>{{itemName}}</h1>
+    </header>
+    <ul class="actions-list">
    {{#each actions}}
-        <li>
-            <label>
-                <dh-icon><img src="{{ img }}"></dh-icon>
-                <span>{{ name }}</span>
+        <li class="action-item">
            <input type="radio" name="actionId" value="{{_id}}" {{#if (eq @index 0)}}checked{{/if}}>
-            </label>
+            <span class="label">{{ name }}</span>
        </li>
    {{/each}}
    </ul>
--- a/templates/dialogs/dice-roll/damageSelection.hbs
+++ b/templates/dialogs/dice-roll/damageSelection.hbs
@ -1,33 +1,13 @@
-<div>
+<section class="damage-section-container">
+    <header class="dialog-header">
+        <h1>{{title}}</h1>
+    </header>
+    <span class="formula-label"><b>Formula:</b> {{@root.formula}}</span>
    <div class="form-group">
-        <label><strong>{{title}}</strong></label>
-        <div class="form-fields">
-            {{!-- <input type="text" value="{{formula}}" disabled /> --}}
-            <div>{{@root.formula}}</div>
-        </div>
-        <div>
        <input type="text" value="{{extraFormula}}" name="extraFormula" placeholder="Situational Bonus">
    </div>
-    </div>
-    {{!-- {{#each bonusDamage as |damage index|}}
-        <div class="form-group">
-            <label><strong>{{damage.description}}</strong></label>
-            <div class="form-fields">
-                <label>Enabled</label>
-                <input style="align-self: baseline;" type="checkbox" name="bonusDamage.{{index}}.initiallySelected" {{checked damage.initiallySelected}} />
-                {{#if (and damage.initiallySelected damage.hopeIncrease)}}
-
-                    <label>Hope</label>
-                    <div class="hope-container">
-                        <i data-action="decreaseHopeUse" data-index="{{index}}" class="fa-solid fa-caret-left icon-button {{#if (eq damage.hopeUses 0)}}disabled{{/if}}"></i>
-                        <div>{{damage.hopeUses}}</div>
-                        <i data-action="increaseHopeUse" data-index="{{index}}" class="fa-solid fa-caret-right icon-button {{#if (eq ../hopeUsed ../hope)}}disabled{{/if}}"></i>
-                    </div>
-                {{/if}}
-            </div>
-        </div>
-    {{/each}} --}}
-    <footer>
-        <button data-action="submitRoll">Roll</button>
-    </footer>
-</div>
+    <button class="submit-btn" data-action="submitRoll">
+        <i class="fa-solid fa-dice"></i>
+        <span class="label">Roll</span>
+    </button>
+</section>