Design/action settings dialog style (#274)

* Action Setting Dialog style

* fix small style details in action config application

* requested changes

---------

Co-authored-by: moliloo <dev.murilobrito@gmail.com>

module/applications/sheets-configs/action-config.mjs

@@ -9,10 +9,17 @@ export default class DHActionConfig extends DaggerheartSheet(ApplicationV2) {
         this.openSection = null;
     }
 
+    get title() {
+        return `${game.i18n.localize('DAGGERHEART.Sheets.TABS.settings')}: ${this.action.name}`;
+    }
+
     static DEFAULT_OPTIONS = {
         tag: 'form',
-        id: 'daggerheart-action',
-        classes: ['daggerheart', 'views', 'action'],
+        classes: ['daggerheart', 'dh-style', 'dialog'],
+        window: {
+            icon: 'fa-solid fa-wrench',
+            resizable: false
+        },
         position: { width: 600, height: 'auto' },
         actions: {
             toggleSection: this.toggleSection,
@@ -32,21 +39,59 @@ export default class DHActionConfig extends DaggerheartSheet(ApplicationV2) {
     };
 
     static PARTS = {
-        form: {
+        header: {
+            id: 'header',
+            template: 'systems/daggerheart/templates/sheets-settings/action-settings/header.hbs'
+        },
+        tabs: { template: 'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs' },
+        base: {
+            id: 'base',
+            template: 'systems/daggerheart/templates/sheets-settings/action-settings/base.hbs'
+        },
+        configuration: {
+            id: 'configuration',
+            template: 'systems/daggerheart/templates/sheets-settings/action-settings/configuration.hbs'
+        },
+        effect: {
+            id: 'effect',
+            template: 'systems/daggerheart/templates/sheets-settings/action-settings/effect.hbs'
+        }
+        /* form: {
             id: 'action',
             template: 'systems/daggerheart/templates/config/action.hbs'
+        } */
+    };
+
+    static TABS = {
+        base: {
+            active: true,
+            cssClass: '',
+            group: 'primary',
+            id: 'base',
+            icon: null,
+            label: 'Base'
+        },
+        config: {
+            active: false,
+            cssClass: '',
+            group: 'primary',
+            id: 'config',
+            icon: null,
+            label: 'Configuration'
+        },
+        effect: {
+            active: false,
+            cssClass: '',
+            group: 'primary',
+            id: 'effect',
+            icon: null,
+            label: 'Effect'
         }
     };
 
     static CLEAN_ARRAYS = ['damage.parts', 'cost', 'effects'];
 
-    _getTabs() {
-        const tabs = {
-            base: { active: true, cssClass: '', group: 'primary', id: 'base', icon: null, label: 'Base' },
-            config: { active: false, cssClass: '', group: 'primary', id: 'config', icon: null, label: 'Configuration' },
-            effect: { active: false, cssClass: '', group: 'primary', id: 'effect', icon: null, label: 'Effect' }
-        };
-
+    _getTabs(tabs) {
         for (const v of Object.values(tabs)) {
             v.active = this.tabGroups[v.group] ? this.tabGroups[v.group] === v.id : v.active;
             v.cssClass = v.active ? 'active' : '';
@@ -59,7 +104,7 @@ export default class DHActionConfig extends DaggerheartSheet(ApplicationV2) {
         const context = await super._prepareContext(_options, 'action');
         context.source = this.action.toObject(false);
         context.openSection = this.openSection;
-        context.tabs = this._getTabs();
+        context.tabs = this._getTabs(this.constructor.TABS);
         context.config = CONFIG.DH;
         if (!!this.action.effects) context.effects = this.action.effects.map(e => this.action.item.effects.get(e._id));
         if (this.action.damage?.hasOwnProperty('includeBase') && this.action.type === 'attack')
@@ -130,7 +175,7 @@ export default class DHActionConfig extends DaggerheartSheet(ApplicationV2) {
 
     static addElement(event) {
         const data = this.action.toObject(),
-            key = event.target.closest('.action-category-data').dataset.key;
+            key = event.target.closest('[data-key]').dataset.key;
         if (!this.action[key]) return;
         data[key].push({});
         this.constructor.updateForm.bind(this)(null, null, { object: foundry.utils.flattenObject(data) });
@@ -139,7 +184,7 @@ export default class DHActionConfig extends DaggerheartSheet(ApplicationV2) {
     static removeElement(event) {
         event.stopPropagation();
         const data = this.action.toObject(),
-            key = event.target.closest('.action-category-data').dataset.key,
+            key = event.target.closest('[data-key]').dataset.key,
             index = event.target.dataset.index;
         data[key].splice(index, 1);
         this.constructor.updateForm.bind(this)(null, null, { object: foundry.utils.flattenObject(data) });

styles/daggerheart.css

@@ -5718,10 +5718,24 @@ body.theme-light.application.daggerheart.dialog {
 .application.dh-style fieldset.flex .inline-child {
   flex: 1;
 }
-.application.dh-style fieldset.flex .checkbox {
+.application.dh-style fieldset .list-w-img {
+  padding: 5px;
+}
+.application.dh-style fieldset .list-w-img label {
+  flex: 1;
+}
+.application.dh-style fieldset .list-w-img img {
+  width: 2rem;
+  height: 2rem;
+}
+.application.dh-style fieldset .checkbox {
   display: flex;
   align-items: center;
   gap: 20px;
+  align-self: end;
+}
+.application.dh-style fieldset .fas.fa-trash {
+  align-self: end;
 }
 .application.dh-style fieldset.one-column {
   display: flex;
@@ -5729,6 +5743,14 @@ body.theme-light.application.daggerheart.dialog {
   align-items: start;
   gap: 10px;
   min-height: 64px;
+  flex: 1;
+}
+.application.dh-style fieldset.one-column > .one-column {
+  width: 100%;
+}
+.application.dh-style fieldset.one-column .nest-inputs fieldset {
+  flex: 1;
+  width: 100%;
 }
 .application.dh-style fieldset.two-columns {
   display: grid;
@@ -5759,6 +5781,11 @@ body.theme-light.application.daggerheart.dialog {
 .application.dh-style fieldset input[type='number']:hover {
   outline: 2px solid light-dark(#222, #efe6d8);
 }
+.application.dh-style fieldset[disabled],
+.application.dh-style fieldset select[disabled],
+.application.dh-style fieldset input[disabled] {
+  opacity: 0.5;
+}
 .application.dh-style fieldset .nest-inputs {
   display: flex;
   align-items: center;
@@ -5773,6 +5800,22 @@ body.theme-light.application.daggerheart.dialog {
   font-weight: bold;
   font-size: smaller;
 }
+.application.dh-style fieldset:has(.list-w-img) {
+  gap: 0;
+}
+.application.dh-style fieldset:has(+ .fas.fa-trash) {
+  border-bottom-right-radius: 0;
+}
+.application.dh-style fieldset .fas.fa-trash {
+  color: darkred;
+  border-radius: 0 6px 6px 0;
+  border-color: light-dark(#18162e, #f3c267);
+  border-width: 2px;
+  border-style: groove;
+  border-left-width: 0;
+  padding: 5px;
+  margin-left: -7px;
+}
 .application.dh-style .two-columns {
   display: grid;
   grid-template-columns: 1fr 2fr;

styles/less/global/elements.less

@@ -89,11 +89,18 @@
             box-shadow: none;
         }
 
-        & option {
+        & option,
+        & optgroup {
             color: @beige;
             background-color: @dark-blue;
             border-radius: 6px;
         }
+
+        &:disabled {
+            opacity: 0.6;
+            outline: 2px solid transparent;
+            cursor: not-allowed;
+        }
     }
 
     p {
@@ -148,10 +155,16 @@
             .inline-child {
                 flex: 1;
             }
-            .checkbox {
-                display: flex;
-                align-items: center;
-                gap: 20px;
+        }
+
+        .list-w-img {
+            padding: 5px;
+            label {
+                flex: 1;
+            }
+            img {
+                width: 2rem;
+                height: 2rem;
             }
         }
 
@@ -161,6 +174,10 @@
             align-items: start;
             gap: 10px;
             min-height: 64px;
+            flex: 1;
+            > .one-column {
+                width: 100%;
+            }
         }
 
         &.two-columns {
@@ -196,11 +213,29 @@
             }
         }
 
+        &[disabled],
+        select[disabled],
+        input[disabled] {
+            opacity: 0.5;
+        }
+
         .nest-inputs {
             display: flex;
             align-items: center;
             width: 100%;
             gap: 5px;
+
+            .btn {
+                padding-top: 15px;
+            }
+
+            .image {
+                height: 40px;
+                width: 40px;
+                object-fit: cover;
+                border-radius: 6px;
+                border: none;
+            }
         }
 
         .form-group {
@@ -210,6 +245,19 @@
                 font-weight: bold;
                 font-size: smaller;
             }
+
+            &.checkbox {
+                width: fit-content;
+
+                .form-fields {
+                    height: 32px;
+                    align-content: center;
+                }
+            }
+        }
+
+        &:has(.list-w-img) {
+            gap: 0;
         }
     }
 

styles/less/global/inventory-fieldset-items.less

@@ -7,6 +7,7 @@
         flex-direction: column;
         gap: 10px;
         align-items: center;
+        width: 100%;
     }
     .card-list {
         display: flex;

styles/less/global/tab-form-footer.less

@@ -2,8 +2,6 @@
     .tab-form-footer {
         display: flex;
         padding: 0 10px;
-        position: relative;
-        bottom: -32px;
 
         button {
             flex: 1;

templates/actionTypes/cost.hbs

@@ -1,21 +1,15 @@
-<fieldset class="action-category">
-    <legend class="action-category-label" data-action="toggleSection" data-section="cost">
-        <div>Cost</div>
+<fieldset class="one-column" data-key="cost">
+    <legend>
+        Cost
+        <a><i class="fa-solid fa-plus icon-button" data-action="addElement"></i></a>
     </legend>
-    <div class="action-category-data open" data-key="cost">
-        <div class="fas fa-plus icon-button" data-action="addElement"></div>
-        {{#each source as |cost index|}}
-            <fieldset>
-                <div class="multi-display">
-                    {{formField ../fields.type choices=(@root.disableOption index ../fields.type.choices ../source) label="Resource" value=cost.type name=(concat "cost." index ".type") localize=true}}
-                    {{formField ../fields.value label="Value" value=cost.value name=(concat "cost." index ".value")}}
-                </div>
-                <div class="multi-display">
-                    {{formField ../fields.scalable label="Scalable" value=cost.scalable name=(concat "cost." index ".scalable")}}
-                    {{formField ../fields.step label="Step" value=cost.step name=(concat "cost." index ".step")}}
-                </div>
-                <div class="fas fa-trash" data-action="removeElement" data-index="{{index}}"></div>
-            </fieldset>
-        {{/each}}
-    </div>
+    {{#each source as |cost index|}}
+        <div class="nest-inputs">
+            {{formField ../fields.scalable label="Scalable" value=cost.scalable name=(concat "cost." index ".scalable") classes="checkbox"}}
+            {{formField ../fields.type choices=(@root.disableOption index ../fields.type.choices ../source) label="Resource" value=cost.type name=(concat "cost." index ".type") localize=true}}
+            {{formField ../fields.value label="Amount" value=cost.value name=(concat "cost." index ".value")}}
+            {{formField ../fields.step label="Step" value=cost.step name=(concat "cost." index ".step") disabled=(not cost.scalable)}}
+            <a class="btn" data-tooltip="{{localize "DAGGERHEART.Tooltip.delete"}}" data-action="removeElement" data-index="{{index}}"><i class="fas fa-trash"></i></a>
+        </div>
+    {{/each}}
 </fieldset>

templates/actionTypes/damage.hbs

@@ -1,14 +1,12 @@
 
-<fieldset class="flex wrap">
-    <legend>Damage</legend>
-    {{#unless (eq path 'system.attack.')}}
-    <div class="fas fa-plus icon-button" data-action="addDamage"></div>
-    {{/unless}}
+<fieldset class="one-column">
+    <legend>
+        Damage
+        {{#unless (eq path 'system.attack.')}}<a><i class="fa-solid fa-plus icon-button" data-action="addDamage"></i></a>{{/unless}}
+    </legend>
     {{#unless @root.isNPC}}
         {{#if @root.hasBaseDamage}}
-            <div>
-                {{formField @root.fields.damage.fields.includeBase value=@root.source.damage.includeBase label="Include Item Damage" name="damage.includeBase" }}
-            </div>
+            {{formField @root.fields.damage.fields.includeBase value=@root.source.damage.includeBase label="Include Item Damage" name="damage.includeBase" classes="checkbox" }}
         {{/if}}
     {{/unless}}
     {{#each source.parts as |dmg index|}}
@@ -18,37 +16,41 @@
             {{#if dmg.value.custom.enabled}}
                 {{formField ../fields.value.fields.custom.fields.formula value=dmg.value.custom.formula name=(concat ../path "damage.parts." index ".value.custom.formula") localize=true}}
             {{else}}
-                {{formField ../fields.value.fields.flatMultiplier value=dmg.value.flatMultiplier name=(concat ../path "damage.parts." index ".value.flatMultiplier") label="Multiplier" classes="inline-child" }}
-                {{formField ../fields.value.fields.dice value=dmg.value.dice name=(concat ../path "damage.parts." index ".value.dice") classes="inline-child"}}
-                {{formField ../fields.value.fields.bonus value=dmg.value.bonus name=(concat ../path "damage.parts." index ".value.bonus") localize=true classes="inline-child"}}
+                <div class="nest-inputs">
+                    {{formField ../fields.value.fields.flatMultiplier value=dmg.value.flatMultiplier name=(concat ../path "damage.parts." index ".value.flatMultiplier") label="Multiplier" classes="inline-child" }}
+                    {{formField ../fields.value.fields.dice value=dmg.value.dice name=(concat ../path "damage.parts." index ".value.dice") classes="inline-child"}}
+                    {{formField ../fields.value.fields.bonus value=dmg.value.bonus name=(concat ../path "damage.parts." index ".value.bonus") localize=true classes="inline-child"}}
+                </div>
             {{/if}}
             {{formField ../fields.type value=dmg.type name=(concat ../path "damage.parts." index ".type") localize=true}}
         {{else}}
             {{#with (@root.getRealIndex index) as | realIndex |}}
-                <fieldset{{#if dmg.base}} disabled{{/if}}>
-                    {{#if (and (not @root.isNPC) @root.hasRoll (not dmg.base))}}
-                        {{formField ../../fields.resultBased value=dmg.resultBased name=(concat "damage.parts." realIndex ".resultBased") localize=true}}
-                    {{/if}}
-                    {{#if (and (not @root.isNPC) @root.hasRoll (not dmg.base) dmg.resultBased)}}
-                        <fieldset>
-                            <legend>
-                                <div>With Hope</div>
-                            </legend>
-                            {{> formula fields=../../fields.value.fields type=../../fields.type dmg=dmg source=dmg.value target="value" realIndex=realIndex}}
-                        </fieldset>
-                        <fieldset>
-                            <legend>
-                                <div>With Fear</div>
-                            </legend>
-                            {{> formula fields=../../fields.valueAlt.fields type=../../fields.type dmg=dmg source=dmg.valueAlt target="valueAlt" realIndex=realIndex}}
-                        </fieldset>
-                    {{else}}
-                        {{> formula fields=../../fields.value.fields type=../fields.type dmg=dmg source=dmg.value target="value" realIndex=realIndex}}
-                    {{/if}}
-                    {{formField ../../fields.type value=dmg.type name=(concat "damage.parts." realIndex ".type") localize=true}}
-                    <input type="hidden" name="damage.parts.{{realIndex}}.base" value="{{dmg.base}}">
+                <div class="nest-inputs">
+                    <fieldset{{#if dmg.base}} disabled{{/if}} class="one-column">
+                        {{#if (and (not @root.isNPC) @root.hasRoll (not dmg.base))}}
+                            {{formField ../../fields.resultBased value=dmg.resultBased name=(concat "damage.parts." realIndex ".resultBased") localize=true classes="checkbox"}}
+                        {{/if}}
+                        {{#if (and (not @root.isNPC) @root.hasRoll (not dmg.base) dmg.resultBased)}}
+                            <div class="nest-inputs">
+                                <fieldset>
+                                    <legend>With Hope</legend>
+                                    {{> formula fields=../../fields.value.fields type=../../fields.type dmg=dmg source=dmg.value target="value" realIndex=realIndex}}
+                                </fieldset>
+                                <fieldset>
+                                    <legend>With Fear</legend>
+                                    {{> formula fields=../../fields.valueAlt.fields type=../../fields.type dmg=dmg source=dmg.valueAlt target="valueAlt" realIndex=realIndex}}
+                                </fieldset>
+                            </div>
+                        {{else}}
+                            <fieldset{{#if dmg.base}} disabled{{/if}}>
+                                {{> formula fields=../../fields.value.fields type=../fields.type dmg=dmg source=dmg.value target="value" realIndex=realIndex}}
+                            </fieldset>
+                        {{/if}}
+                        {{formField ../../fields.type value=dmg.type name=(concat "damage.parts." realIndex ".type") localize=true}}
+                        <input type="hidden" name="damage.parts.{{realIndex}}.base" value="{{dmg.base}}">
+                    </fieldset>
                     {{#unless dmg.base}}<div class="fas fa-trash" data-action="removeDamage" data-index="{{realIndex}}"></div>{{/unless}}
-                </fieldset>
+                </div>
             {{/with}}
         {{/if}}
     {{/each}}
@@ -56,12 +58,12 @@
 
 {{#*inline "formula"}}
         {{#unless dmg.base}}
-            {{formField fields.custom.fields.enabled value=source.custom.enabled name=(concat "damage.parts." realIndex "." target ".custom.enabled")}}
+            {{formField fields.custom.fields.enabled value=source.custom.enabled name=(concat "damage.parts." realIndex "." target ".custom.enabled") classes="checkbox"}}
         {{/unless}}
         {{#if source.custom.enabled}}
             {{formField fields.custom.fields.formula value=source.custom.formula name=(concat "damage.parts." realIndex "." target ".custom.formula") localize=true}}
         {{else}}
-            <div class="multi-display">
+            <div class="nest-inputs">
                 {{formField fields.multiplier value=source.multiplier name=(concat "damage.parts." realIndex "." target ".multiplier") localize=true}}
                 {{#if (eq source.multiplier 'flat')}}{{formField fields.flatMultiplier value=source.flatMultiplier name=(concat "damage.parts." realIndex ".flatMultiplier") }}{{/if}}
                 {{formField fields.dice value=source.dice name=(concat "damage.parts." realIndex "." target ".dice")}}

templates/actionTypes/effect.hbs

@@ -1,35 +1,23 @@
-<fieldset class="action-category">
-    <legend class="action-category-label" data-action="toggleSection" data-section="effects">
-        <div>Effects</div>
+<fieldset class="one-column" data-key="effects">
+    <legend>
+        Effects
+        <a><i class="fa-solid fa-plus icon-button" data-action="addEffect"></i></a>
     </legend>
-    <div class="action-category-data open" data-key="effects">
-        <div class="fas fa-plus icon-button" data-action="addEffect"></div>
-        {{!-- {{#each @root.effects as | effect index | }}
-            <fieldset>
-                <div class="multi-display">
-                    <div class="form-group">
-                        <img src="{{img}}">
-                        <label data-action="editEffect">{{name}}</label>
-                        <div class="fas fa-trash" data-action="removeEffect" data-index="{{index}}"></div>
-                    </div>
-                    {{formfield }}
-                </div>
-            </fieldset>
-        {{/each}} --}}
+    <ul class="items-list">
         {{#each source as | effect index |}}
-            <fieldset data-effect-id="{{effect._id}}">
-                <div class="multi-display">
-                    {{#with (@root.getEffectDetails effect._id) as | details |}}
-                        <div class="form-group" data-action="editEffect">
-                            <img src="{{img}}">
-                            <label>{{name}}</label>
-                            <div class="fas fa-trash" data-action="removeEffect" data-index="{{index}}"></div>
-                        </div>
-                    {{/with}}
-                    <input type="hidden" name="effects.{{index}}._id" value="{{effect._id}}">
-                    {{formField ../fields.onSave value=effect.onSave name=(concat "effects." index ".onSave")}}
+            <div class="inventory-item" data-effect-id="{{effect._id}}" data-action="editEffect">
+                {{#with (@root.getEffectDetails effect._id) as | details |}}
+                        <img class="item-img" src="{{img}}">
+                    <div class="item-label">
+                        <span class="item-name">{{name}}</span>
+                    </div>
+                {{/with}}
+                <input type="hidden" name="effects.{{index}}._id" value="{{effect._id}}">
+                {{#if @root.source.save.trait}}{{formInput ../fields.onSave value=effect.onSave name=(concat "effects." index ".onSave") dataset=(object tooltip="Applied even if save succeeded" tooltipDirection="UP")}}{{/if}}
+                <div class="controls">
+                    <a data-tooltip="{{localize "DAGGERHEART.Tooltip.delete"}}" data-action="removeEffect" data-index="{{index}}"><i class="fas fa-trash"></i></a>
                 </div>
-            </fieldset>
+            </div>
         {{/each}}
-    </div>
+    </ul>
 </fieldset>

templates/actionTypes/range-target.hbs

@@ -1,18 +1,12 @@
-<fieldset class="action-category">
-    <legend class="action-category-label" data-action="toggleSection" data-section="range">
-        <div>Range{{#if fields.target}} & Target{{/if}}</div>
-    </legend>
-    <div class="action-category-data open">
-        {{formField fields.range value=source.range label="Range" name=(concat path "range") localize=true}}
-    </div>
+<fieldset class="one-column">
+    <legend>Range{{#if fields.target}} & Target{{/if}}</legend>
+    {{formField fields.range value=source.range label="Range" name=(concat path "range") localize=true}}
     {{#if fields.target}}
-    <div class="action-category-data open">
-        <div class="multi-display">
-            {{#if (and source.target.type (not (eq source.target.type 'self')))}}
-                {{ formField fields.target.amount value=source.target.amount label="Amount" name=(concat path "target.amount") }}
-            {{/if}}
-            {{ formField fields.target.type value=source.target.type label="Target" name=(concat path "target.type") localize=true }}
-        </div>
+    <div class="nest-inputs">
+        {{#if (and source.target.type (not (eq source.target.type 'self')))}}
+            {{ formField fields.target.amount value=source.target.amount label="Amount" name=(concat path "target.amount") }}
+        {{/if}}
+        {{ formField fields.target.type value=source.target.type label="Target" name=(concat path "target.type") localize=true }}
     </div>
     {{/if}}
 </fieldset>

templates/actionTypes/roll.hbs

@@ -1,31 +1,24 @@
-<fieldset class="action-category">
-    <legend class="action-category-label" data-action="toggleSection" data-section="roll">
-        <div>Roll</div>
-    </legend>
-    <div class="action-category-data open">
-        {{#if @root.isNPC}}
-            {{formField fields.bonus label="Bonus" name="roll.bonus" value=source.bonus}}
+<fieldset class="one-column">
+    <legend>Roll</legend>
+    {{#if @root.isNPC}}
+        {{formField fields.bonus label="Bonus" name="roll.bonus" value=source.bonus}}
+        {{formField fields.advState label= "Advantage State" name="roll.advState" value=source.advState localize=true}}
+    {{else}}
+        {{formField fields.type label="Type" name="roll.type" value=source.type localize=true}}
+        {{#if (eq source.type "diceSet")}}
+            <div class="nest-inputs">
+                {{formField fields.diceRolling.fields.multiplier name="roll.diceRolling.multiplier" value=source.diceRolling.multiplier localize=true}}
+                {{#if (eq source.diceRolling.multiplier 'flat')}}{{formField fields.diceRolling.fields.flatMultiplier value=source.diceRolling.flatMultiplier name="roll.diceRolling.flatMultiplier" }}{{/if}}
+                {{formField fields.diceRolling.fields.dice name="roll.diceRolling.dice" value=source.diceRolling.dice}}
+                {{formField fields.diceRolling.fields.compare name="roll.diceRolling.compare" value=source.diceRolling.compare localize=true}}
+                {{formField fields.diceRolling.fields.treshold name="roll.diceRolling.treshold" value=source.diceRolling.treshold localize=true}}
+            </div>
         {{else}}
-            {{formField fields.type label="Type" name="roll.type" value=source.type localize=true}}
-            {{#if (eq source.type "diceSet")}}
-                <div class="multi-display">
-                    {{formField fields.diceRolling.fields.multiplier name="roll.diceRolling.multiplier" value=source.diceRolling.multiplier localize=true}}
-                    {{#if (eq source.diceRolling.multiplier 'flat')}}{{formField fields.diceRolling.fields.flatMultiplier value=source.diceRolling.flatMultiplier name="roll.diceRolling.flatMultiplier" }}{{/if}}
-                    {{formField fields.diceRolling.fields.dice name="roll.diceRolling.dice" value=source.diceRolling.dice}}
-                </div>
-                <div class="multi-display">
-                    {{formField fields.diceRolling.fields.compare name="roll.diceRolling.compare" value=source.diceRolling.compare localize=true}}
-                    {{formField fields.diceRolling.fields.treshold name="roll.diceRolling.treshold" value=source.diceRolling.treshold localize=true}}
-                </div>
-            {{else}}
-                <div class="multi-display">
-                    {{formField fields.trait label="Trait" name="roll.trait" value=source.trait localize=true disabled=(not source.type)}}
-                    {{formField fields.difficulty label="Difficulty" name="roll.difficulty" value=source.difficulty disabled=(not source.type)}}
-                </div>
-            {{/if}}
+            <div class="nest-inputs">
+                {{formField fields.trait label="Trait" name="roll.trait" value=source.trait localize=true disabled=(not source.type)}}
+                {{formField fields.difficulty label="Difficulty" name="roll.difficulty" value=source.difficulty disabled=(not source.type)}}
+                {{formField fields.advState label= "Advantage State" name="roll.advState" value=source.advState localize=true}}
+            </div>
         {{/if}}
-        {{#unless (eq source.type "diceSet")}}
-            {{formField fields.advState label= "Advantage State" name="roll.advState" value=source.advState localize=true}}
-        {{/unless}}
-    </div>
+    {{/if}}
 </fieldset>

templates/actionTypes/save.hbs

@@ -1,10 +1,6 @@
-<fieldset class="action-category">
-    <legend class="action-category-label" data-action="toggleSection" data-section="roll">
-        <div>Save</div>
-    </legend>
-    <div class="action-category-data open">
-        {{formField fields.trait label="Trait" name="save.trait" value=source.trait localize=true}}
-        {{formField fields.difficulty label="Difficulty" name="save.difficulty" value=source.difficulty disabled=(not source.trait)}}
-        {{formField fields.damageMod label="Damage on Save" name="save.damageMod" value=source.damageMod localize=true disabled=(not source.trait)}}
-    </div>
+<fieldset class="flex">
+    <legend>Save</legend>
+    {{formField fields.trait label="Trait" name="save.trait" value=source.trait localize=true}}
+    {{formField fields.difficulty label="Difficulty" name="save.difficulty" value=source.difficulty disabled=(not source.trait)}}
+    {{formField fields.damageMod label="Damage on Save" name="save.damageMod" value=source.damageMod localize=true disabled=(not source.trait)}}
 </fieldset>

templates/actionTypes/target.hbs

@@ -1,8 +0,0 @@
-<fieldset class="action-category">
-    <legend class="action-category-label" data-action="toggleSection" data-section="target">
-        <div>Target</div>
-    </legend>
-    <div class="action-category-data open">
-        {{formField targetField.type label="Target" name="target" rootId=partId localize=true}}
-    </div>
-</fieldset>

templates/actionTypes/uses.hbs

@@ -1,12 +1,8 @@
-<fieldset class="action-category">
-    <legend class="action-category-label" data-action="toggleSection" data-section="uses">
-        <div>Uses</div>
-    </legend>
-    <div class="action-category-data open">
-        <div class="multi-display">
-            {{formField fields.value label="Value" value=source.value name="uses.value" rootId=partId}}
-            {{formField fields.max label="Max" value=source.max name="uses.max" rootId=partId}}
-        </div>
-        {{formField fields.recovery label="Recovery" value=source.recovery name="uses.recovery" rootId=partId localize=true}}
+<fieldset class="one-column">
+    <legend>Uses</legend>
+    <div class="nest-inputs">
+        {{formField fields.value label="Spent" value=source.value name="uses.value" rootId=partId}}
+        {{formField fields.max label="Max" value=source.max name="uses.max" rootId=partId}}
     </div>
+    {{formField fields.recovery label="Recovery" value=source.recovery name="uses.recovery" rootId=partId localize=true}}
 </fieldset>

templates/config/action.hbs

@@ -1,50 +0,0 @@
-<div>
-    <header>
-        <nav class="sheet-tabs tabs">
-            {{#each tabs as |tab|}}
-                <a class="{{tab.cssClass}}" data-action="tab" data-group="{{tab.group}}" data-tab="{{tab.id}}">
-                    <i class="{{tab.icon}}"></i>
-                    <label>{{localize tab.label}}</label>
-                </a>
-            {{/each}}
-        </nav>
-    </header>
-    <section>
-        <div class="tab {{this.tabs.base.cssClass}}" data-group="primary" data-tab="base">
-            <fieldset class="action-category">
-                <legend class="action-category-label" data-action="toggleSection" data-section="identity">
-                    <div>Identity</div>
-                </legend>
-                <div class="action-category-data open">
-                    {{formField fields.name value=source.name label="Name" name="name"}}
-                    {{formField fields.img value=source.img label="Icon" name="img"}}
-                    {{formField fields.actionType value=source.actionType label="Type" name="actionType" localize=true}}
-                    {{formField fields.chatDisplay value=source.chatDisplay name="chatDisplay"}}
-                </div>
-            </fieldset>
-            <fieldset class="action-category">
-                <legend class="action-category-label" data-action="toggleSection" data-section="identity">
-                    <div>Description</div>
-                </legend>
-                <div class="action-category-data open">
-                    {{formInput fields.description value=source.description name="description" }}
-                </div>
-            </fieldset>
-        </div>
-        <div class="tab {{this.tabs.config.cssClass}}" data-group="primary" data-tab="config">
-            {{> 'systems/daggerheart/templates/actionTypes/uses.hbs' fields=fields.uses.fields source=source.uses}}
-            {{> 'systems/daggerheart/templates/actionTypes/cost.hbs' fields=fields.cost.element.fields source=source.cost}}
-            {{#if fields.target}}{{> 'systems/daggerheart/templates/actionTypes/range-target.hbs' fields=(object range=fields.range target=fields.target.fields) source=(object target=source.target range=source.range)}}{{/if}}
-        </div>
-        <div class="tab {{this.tabs.effect.cssClass}}" data-group="primary" data-tab="effect">
-            {{#if fields.roll}}{{> 'systems/daggerheart/templates/actionTypes/roll.hbs' fields=fields.roll.fields source=source.roll}}{{/if}}
-            {{#if fields.save}}{{> 'systems/daggerheart/templates/actionTypes/save.hbs' fields=fields.save.fields source=source.save}}{{/if}}
-            {{#if fields.damage}}{{> 'systems/daggerheart/templates/actionTypes/damage.hbs' fields=fields.damage.fields.parts.element.fields source=source.damage}}{{/if}}
-            {{#if fields.healing}}{{> 'systems/daggerheart/templates/actionTypes/healing.hbs' fields=fields.healing.fields source=source.healing}}{{/if}}
-            {{#if fields.resource}}{{> 'systems/daggerheart/templates/actionTypes/resource.hbs' fields=fields.resource.fields source=source.resource}}{{/if}}
-            {{#if fields.documentUUID}}{{> 'systems/daggerheart/templates/actionTypes/uuid.hbs' fields=fields.documentUUID source=source.documentUUID}}{{/if}}
-            {{#if fields.effects}}{{> 'systems/daggerheart/templates/actionTypes/effect.hbs' fields=fields.effects.element.fields source=source.effects}}{{/if}}
-            {{#if fields.beastform}}{{> 'systems/daggerheart/templates/actionTypes/beastform.hbs' fields=fields.effects.element.fields source=source.beastform}}{{/if}}
-        </div>
-    </section>
-</div>

templates/sheets-settings/action-settings/base.hbs

@@ -0,0 +1,17 @@
+<section 
+    class="tab {{this.tabs.base.cssClass}}"
+    data-group="primary"
+    data-tab="base"
+>
+    <fieldset class="one-column">
+        <legend>Identity</legend>
+        {{formField fields.name value=source.name label="Name" name="name"}}
+        {{formField fields.img value=source.img label="Icon" name="img"}}
+        {{formField fields.actionType value=source.actionType label="Type" name="actionType" localize=true}}
+        {{formField fields.chatDisplay value=source.chatDisplay name="chatDisplay" classes="checkbox"}}
+    </fieldset>
+    <fieldset class="action-category">
+        <legend>Description</legend>
+        {{formInput fields.description value=source.description name="description" }}
+    </fieldset>
+</section>

templates/sheets-settings/action-settings/configuration.hbs

@@ -0,0 +1,9 @@
+<section 
+    class="tab {{this.tabs.config.cssClass}}"
+    data-group="primary"
+    data-tab="config"
+>
+    {{> 'systems/daggerheart/templates/actionTypes/uses.hbs' fields=fields.uses.fields source=source.uses}}
+    {{> 'systems/daggerheart/templates/actionTypes/cost.hbs' fields=fields.cost.element.fields source=source.cost}}
+    {{> 'systems/daggerheart/templates/actionTypes/range-target.hbs' fields=(object range=fields.range target=fields.target.fields) source=(object target=source.target range=source.range)}}
+</section>

templates/sheets-settings/action-settings/effect.hbs

@@ -0,0 +1,14 @@
+<section 
+    class="tab {{this.tabs.effect.cssClass}}"
+    data-group="primary"
+    data-tab="effect"
+>
+    {{#if fields.roll}}{{> 'systems/daggerheart/templates/actionTypes/roll.hbs' fields=fields.roll.fields source=source.roll}}{{/if}}
+    {{#if fields.save}}{{> 'systems/daggerheart/templates/actionTypes/save.hbs' fields=fields.save.fields source=source.save}}{{/if}}
+    {{#if fields.damage}}{{> 'systems/daggerheart/templates/actionTypes/damage.hbs' fields=fields.damage.fields.parts.element.fields source=source.damage}}{{/if}}
+    {{#if fields.healing}}{{> 'systems/daggerheart/templates/actionTypes/healing.hbs' fields=fields.healing.fields source=source.healing}}{{/if}}
+    {{#if fields.resource}}{{> 'systems/daggerheart/templates/actionTypes/resource.hbs' fields=fields.resource.fields source=source.resource}}{{/if}}
+    {{#if fields.documentUUID}}{{> 'systems/daggerheart/templates/actionTypes/uuid.hbs' fields=fields.documentUUID source=source.documentUUID}}{{/if}}
+    {{#if fields.effects}}{{> 'systems/daggerheart/templates/actionTypes/effect.hbs' fields=fields.effects.element.fields source=source.effects}}{{/if}}
+    {{#if fields.beastform}}{{> 'systems/daggerheart/templates/actionTypes/beastform.hbs' fields=fields.effects.element.fields source=source.beastform}}{{/if}}
+</section>

templates/sheets-settings/action-settings/header.hbs

@@ -0,0 +1,3 @@
+<header class="dialog-header">
+    <h1>{{source.name}}</h1>
+</header>