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

lang/en.json

@@ -677,6 +677,10 @@
                     "name": "Dice Set"
                 }
             },
+            "SelectAction": {
+                "selectType": "Select Action Type",
+                "selectAction": "Select Action"
+            },
             "Traits": {
                 "agility": {
                     "name": "Agility",

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'

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;

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'

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,

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,

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;
+            }
+        }
+    }
+}

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);
+            }
+        }
+    }
+}

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);
-        }
     }
 }

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';

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);
+    }
 }

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);
         }
     }
 

styles/less/global/sheet.less

@@ -4,8 +4,8 @@
 
 // Theme handling
 .appTheme({
-    background: @semi-transparent-dark-blue;
+    background: @dark-blue-60;
-    backdrop-filter: blur(9px);
+    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;

styles/less/sheets-settings/adversary-settings/experiences.less

@@ -5,6 +5,7 @@
     .tab.experiences {
         .add-experience-btn {
             width: 100%;
+            height: 38px;
             margin-bottom: 12px;
         }
 

styles/less/sheets-settings/adversary-settings/features.less

@@ -10,6 +10,7 @@
 
         .add-feature-btn {
             width: 100%;
+            height: 38px;
             margin-bottom: 12px;
         }
 

styles/less/sheets-settings/environment-settings/adversaries.less

@@ -10,6 +10,7 @@
 
         .add-action-btn {
             width: 100%;
+            height: 38px;
             margin-bottom: 12px;
         }
 

styles/less/sheets-settings/environment-settings/features.less

@@ -10,6 +10,7 @@
 
         .add-feature-btn {
             width: 100%;
+            height: 38px;
             margin-bottom: 12px;
         }
 

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;
 

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>
+        <li class="action-item">
-            <label>
+            <input type="radio" name="type" value="{{id}}" {{#if (eq @index 0)}}checked{{/if}}>
-                {{! TODO: remove dh-icon}}
+            <span class="label">{{localize name}}</span>
-                <dh-icon class="dh-icon fas {{icon}}"></dh-icon>
-                <span>{{localize name}}</span>
-                <input type="radio" name="type" value="{{id}}" {{#if (eq @index 0)}}checked{{/if}}>
-            </label>
         </li>
     {{/each}}
     </ul>

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>
+        <li class="action-item">
-            <label>
+            <input type="radio" name="actionId" value="{{_id}}" {{#if (eq @index 0)}}checked{{/if}}>
-                <dh-icon><img src="{{ img }}"></dh-icon>
+            <span class="label">{{ name }}</span>
-                <span>{{ name }}</span>
-                <input type="radio" name="actionId" value="{{_id}}" {{#if (eq @index 0)}}checked{{/if}}>
-            </label>
         </li>
     {{/each}}
     </ul>

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>
+        <input type="text" value="{{extraFormula}}" name="extraFormula" placeholder="Situational Bonus">
-        <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|}}
+    <button class="submit-btn" data-action="submitRoll">
-        <div class="form-group">
+        <i class="fa-solid fa-dice"></i>
-            <label><strong>{{damage.description}}</strong></label>
+        <span class="label">Roll</span>
-            <div class="form-fields">
+    </button>
-                <label>Enabled</label>
+</section>
-                <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>