enhance consumable and miscellaneous sheets (#68)

module/applications/_module.mjs

@@ -2,12 +2,12 @@ export { default as DhpPCSheet } from './sheets/pc.mjs';
 export { default as DhpAdversarySheet } from './sheets/adversary.mjs';
 export { default as DhpClassSheet } from './sheets/class.mjs';
 export { default as DhpSubclass } from './sheets/subclass.mjs';
-export { default as DhpFeatureSheet } from './sheets/feature.mjs';
+export { default as DhpFeatureSheet } from './sheets/items/feature.mjs';
 export { default as DhpDomainCardSheet } from './sheets/domainCard.mjs';
 export { default as DhpAncestry } from './sheets/ancestry.mjs';
 export { default as DhpCommunity } from './sheets/community.mjs';
-export { default as DhpMiscellaneous } from './sheets/miscellaneous.mjs';
+export { default as DhpMiscellaneous } from './sheets/items/miscellaneous.mjs';
-export { default as DhpConsumable } from './sheets/consumable.mjs';
+export { default as DhpConsumable } from './sheets/items/consumable.mjs';
 export { default as DhpWeapon } from './sheets/weapon.mjs';
 export { default as DhpArmor } from './sheets/armor.mjs';
 export { default as DhpChatMessage } from './chatMessage.mjs';

module/applications/sheets/consumable.mjs

@@ -1,56 +0,0 @@
-// import DhpApplicationMixin from '../daggerheart-sheet.mjs';
-
-// export default class ConsumableSheet extends DhpApplicationMixin(ItemSheet) {
-//     static documentType = "consumable";
-
-//     /** @override */
-//     static get defaultOptions() {
-//         return foundry.utils.mergeObject(super.defaultOptions, {
-//             classes: ["daggerheart", "sheet", "consumable"],
-//             width: 480,
-//             height: 'auto',
-//         });
-//     }
-
-//     /** @override */
-//     getData() {
-//         const context = super.getData();
-
-//         return context;
-//     }
-// }
-
-import DaggerheartSheet from './daggerheart-sheet.mjs';
-
-const { ItemSheetV2 } = foundry.applications.sheets;
-export default class ConsumableSheet extends DaggerheartSheet(ItemSheetV2) {
-    static DEFAULT_OPTIONS = {
-        tag: 'form',
-        classes: ['daggerheart', 'sheet', 'consumable'],
-        position: { width: 480 },
-        form: {
-            handler: this.updateForm,
-            submitOnChange: true,
-            closeOnSubmit: false
-        }
-    };
-
-    static PARTS = {
-        form: {
-            id: 'feature',
-            template: 'systems/daggerheart/templates/sheets/consumable.hbs'
-        }
-    };
-
-    async _prepareContext(_options) {
-        const context = await super._prepareContext(_options);
-        context.document = this.document;
-
-        return context;
-    }
-
-    static async updateForm(event, _, formData) {
-        await this.document.update(formData.object);
-        this.render();
-    }
-}

module/applications/sheets/daggerheart-sheet.mjs

@@ -69,5 +69,14 @@ export default function DhpApplicationMixin(Base) {
         }
 
         _onDrop(event) {}
+
+        _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' : '';
+            }
+
+            return tabs;
+        }
     };
 }

module/applications/sheets/items/consumable.mjs

@@ -0,0 +1,57 @@
+import DaggerheartSheet from '../daggerheart-sheet.mjs';
+
+const { ItemSheetV2 } = foundry.applications.sheets;
+export default class ConsumableSheet extends DaggerheartSheet(ItemSheetV2) {
+    static DEFAULT_OPTIONS = {
+        tag: 'form',
+        classes: ['daggerheart', 'sheet', 'dh-style', 'consumable'],
+        position: { width: 550 },
+        form: {
+            handler: this.updateForm,
+            submitOnChange: true,
+            closeOnSubmit: false
+        }
+    };
+
+    static PARTS = {
+        header: { template: 'systems/daggerheart/templates/sheets/items/consumable/header.hbs' },
+        tabs: { template: 'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs' },
+        description: { template: 'systems/daggerheart/templates/sheets/global/tabs/tab-description.hbs' },
+        settings: {
+            template: 'systems/daggerheart/templates/sheets/items/consumable/settings.hbs',
+            scrollable: ['.settings']
+        }
+    };
+
+    static TABS = {
+        description: {
+            active: true,
+            cssClass: '',
+            group: 'primary',
+            id: 'description',
+            icon: null,
+            label: 'DAGGERHEART.Sheets.Feature.Tabs.Description'
+        },
+        settings: {
+            active: false,
+            cssClass: '',
+            group: 'primary',
+            id: 'settings',
+            icon: null,
+            label: 'DAGGERHEART.Sheets.Feature.Tabs.Settings'
+        }
+    };
+
+    async _prepareContext(_options) {
+        const context = await super._prepareContext(_options);
+        context.document = this.document;
+        context.tabs = super._getTabs(this.constructor.TABS);
+
+        return context;
+    }
+
+    static async updateForm(event, _, formData) {
+        await this.document.update(formData.object);
+        this.render();
+    }
+}

module/applications/sheets/items/feature.mjs

@@ -1,6 +1,6 @@
-import DaggerheartAction from '../../data/action.mjs';
+import DaggerheartAction from '../../../data/action.mjs';
-import DaggerheartActionConfig from '../config/Action.mjs';
+import DaggerheartActionConfig from '../../config/Action.mjs';
-import DaggerheartSheet from './daggerheart-sheet.mjs';
+import DaggerheartSheet from '../daggerheart-sheet.mjs';
 
 const { ItemSheetV2 } = foundry.applications.sheets;
 export default class FeatureSheet extends DaggerheartSheet(ItemSheetV2) {
@@ -48,48 +48,40 @@ export default class FeatureSheet extends DaggerheartSheet(ItemSheetV2) {
         }
     };
 
-    _getTabs() {
+    static TABS = {
-        const tabs = {
+        description: {
-            description: {
+            active: true,
-                active: true,
+            cssClass: '',
-                cssClass: '',
+            group: 'primary',
-                group: 'primary',
+            id: 'description',
-                id: 'description',
+            icon: null,
-                icon: null,
+            label: 'DAGGERHEART.Sheets.Feature.Tabs.Description'
-                label: 'DAGGERHEART.Sheets.Feature.Tabs.Description'
+        },
-            },
+        actions: {
-            actions: {
+            active: false,
-                active: false,
+            cssClass: '',
-                cssClass: '',
+            group: 'primary',
-                group: 'primary',
+            id: 'actions',
-                id: 'actions',
+            icon: null,
-                icon: null,
+            label: 'DAGGERHEART.Sheets.Feature.Tabs.Actions'
-                label: 'DAGGERHEART.Sheets.Feature.Tabs.Actions'
+        },
-            },
+        settings: {
-            settings: {
+            active: false,
-                active: false,
+            cssClass: '',
-                cssClass: '',
+            group: 'primary',
-                group: 'primary',
+            id: 'settings',
-                id: 'settings',
+            icon: null,
-                icon: null,
+            label: 'DAGGERHEART.Sheets.Feature.Tabs.Settings'
-                label: 'DAGGERHEART.Sheets.Feature.Tabs.Settings'
+        },
-            },
+        effects: {
-            effects: {
+            active: false,
-                active: false,
+            cssClass: '',
-                cssClass: '',
+            group: 'primary',
-                group: 'primary',
+            id: 'effects',
-                id: 'effects',
+            icon: null,
-                icon: null,
+            label: 'DAGGERHEART.Sheets.Feature.Tabs.Effects'
-                label: 'DAGGERHEART.Sheets.Feature.Tabs.Effects'
-            }
-        };
-        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' : '';
         }
-
+    };
-        return tabs;
-    }
 
     _attachPartListeners(partId, htmlElement, options) {
         super._attachPartListeners(partId, htmlElement, options);
@@ -99,7 +91,7 @@ export default class FeatureSheet extends DaggerheartSheet(ItemSheetV2) {
     async _prepareContext(_options) {
         const context = await super._prepareContext(_options);
         context.document = this.document;
-        context.tabs = this._getTabs();
+        context.tabs = super._getTabs(this.constructor.TABS);
         context.generalConfig = SYSTEM.GENERAL;
         context.itemConfig = SYSTEM.ITEM;
         context.properties = SYSTEM.ACTOR.featureProperties;

module/applications/sheets/items/miscellaneous.mjs

@@ -20,14 +20,14 @@
 //     }
 // }
 
-import DaggerheartSheet from './daggerheart-sheet.mjs';
+import DaggerheartSheet from '../daggerheart-sheet.mjs';
 
 const { ItemSheetV2 } = foundry.applications.sheets;
 export default class MiscellaneousSheet extends DaggerheartSheet(ItemSheetV2) {
     static DEFAULT_OPTIONS = {
         tag: 'form',
-        classes: ['daggerheart', 'sheet', 'miscellaneous'],
+        classes: ['daggerheart', 'sheet', 'dh-style', 'miscellaneous'],
-        position: { width: 400 },
+        position: { width: 550 },
         form: {
             handler: this.updateForm,
             submitOnChange: true,
@@ -36,15 +36,38 @@ export default class MiscellaneousSheet extends DaggerheartSheet(ItemSheetV2) {
     };
 
     static PARTS = {
-        form: {
+        header: { template: 'systems/daggerheart/templates/sheets/items/miscellaneous/header.hbs' },
-            id: 'feature',
+        tabs: { template: 'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs' },
-            template: 'systems/daggerheart/templates/sheets/miscellaneous.hbs'
+        description: { template: 'systems/daggerheart/templates/sheets/global/tabs/tab-description.hbs' },
+        settings: {
+            template: 'systems/daggerheart/templates/sheets/items/miscellaneous/settings.hbs',
+            scrollable: ['.settings']
+        }
+    };
+
+    static TABS = {
+        description: {
+            active: true,
+            cssClass: '',
+            group: 'primary',
+            id: 'description',
+            icon: null,
+            label: 'DAGGERHEART.Sheets.Feature.Tabs.Description'
+        },
+        settings: {
+            active: false,
+            cssClass: '',
+            group: 'primary',
+            id: 'settings',
+            icon: null,
+            label: 'DAGGERHEART.Sheets.Feature.Tabs.Settings'
         }
     };
 
     async _prepareContext(_options) {
         const context = await super._prepareContext(_options);
         context.document = this.document;
+        context.tabs = super._getTabs(this.constructor.TABS);
 
         return context;
     }

styles/daggerheart.css

@@ -2985,10 +2985,13 @@ div.daggerheart.views.multiclass {
   outline: 2px solid light-dark(#222, #efe6d8);
 }
 .application.sheet.dh-style input[type='checkbox']:checked::after {
-  color: light-dark(#18162e, #f3c267);
+  color: light-dark(#222, #f3c267);
+}
+.application.sheet.dh-style input[type='checkbox']:checked::before {
+  color: light-dark(transparent, #18162e);
 }
 .application.sheet.dh-style input[type='checkbox']::before {
-  color: light-dark(#f3c267, #18162e);
+  color: light-dark(#222, #efe6d8);
 }
 .application.sheet.dh-style button {
   background: light-dark(transparent, #f3c267);

styles/less/global/elements.less

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

templates/sheets/consumable.hbs

@@ -1,36 +0,0 @@
-<div>
-    <header class="flexcol">
-        <div class="title-container">
-            <img class="flex0" src="{{document.img}}" data-edit="img" data-action="onEditImage" title="{{document.name}}" height="64" width="64"/>
-            <div class="title-name">
-                {{formInput fields.name value=source.name rootId=partId}}
-            </div>
-        </div>
-    </header>
-
-    <section class="sheet-body">
-        <div class="flexrow item-container">
-            <div class="item-sidebar">
-                {{formField systemFields.quantity value=source.system.quantity label=(localize "DAGGERHEART.Sheets.Consumable.Quantity") }}
-                {{formField systemFields.consumeOnUse value=source.system.consumeOnUse label=(localize "DAGGERHEART.Sheets.Consumable.ConsumeOnUse")}}
-                {{!-- <div class="form-group">
-                    <label>{{localize "DAGGERHEART.Sheets.Consumable.Quantity"}}</label>
-                    <div class="form-fields">
-                        <input type="text" name="system.quantity" value="{{item.system.quantity}}" data-dtype="Number" />
-                    </div>
-                </div> --}}
-                {{!-- <div class="form-group flexrow">
-                    <label>{{localize "DAGGERHEART.Sheets.Consumable.ConsumeOnUse"}}</label>
-                    <div class="form-fields flex0">
-                        <input type="checkbox" name="system.consumeOnUse" {{checked item.system.consumeOnUse}} />
-                    </div>
-                </div> --}}
-            </div>
-             <div>
-                <h2 class="flex-col-centered">{{localize "DAGGERHEART.General.Description"}}</h2>
-                {{formInput systemFields.description value=source.system.description enriched=source.system.description localize=true toggled=true}}
-                {{!-- {{editor item.system.description target="system.description" button=true}} --}}
-            </div>
-        </div>
-    </section>
-</div> 

templates/sheets/items/consumable/header.hbs

@@ -0,0 +1,10 @@
+<header class='item-sheet-header'>
+    <img class='profile' src='{{source.img}}' data-action='editImage' data-edit='img' />
+    <div class='item-info'>
+        <line-div></line-div>
+        <h1 class='item-name'><input type='text' name='name' value='{{source.name}}' /></h1>
+        <div class='item-description'>
+            <h3>{{localize 'TYPES.Item.consumable'}}</h3>
+        </div>
+    </div>
+</header>

templates/sheets/items/consumable/settings.hbs

@@ -0,0 +1,14 @@
+<section
+    class='tab {{tabs.settings.cssClass}} {{tabs.settings.id}}'
+    data-tab='{{tabs.settings.id}}'
+    data-group='{{tabs.settings.group}}'
+>
+    <fieldset class="two-columns">
+        <legend>{{localize tabs.settings.label}}</legend>
+        <span>{{localize "DAGGERHEART.Sheets.Consumable.Quantity"}}</span>
+        {{formField systemFields.quantity value=source.system.quantity}}
+
+        <span>{{localize "DAGGERHEART.Sheets.Consumable.ConsumeOnUse"}}</span>
+        {{formField systemFields.consumeOnUse value=source.system.consumeOnUse}}
+    </fieldset>
+</section>

templates/sheets/items/miscellaneous/header.hbs

@@ -0,0 +1,10 @@
+<header class='item-sheet-header'>
+    <img class='profile' src='{{source.img}}' data-action='editImage' data-edit='img' />
+    <div class='item-info'>
+        <line-div></line-div>
+        <h1 class='item-name'><input type='text' name='name' value='{{source.name}}' /></h1>
+        <div class='item-description'>
+            <h3>{{localize 'TYPES.Item.miscellaneous'}}</h3>
+        </div>
+    </div>
+</header>

templates/sheets/items/miscellaneous/settings.hbs

@@ -0,0 +1,11 @@
+<section
+    class='tab {{tabs.settings.cssClass}} {{tabs.settings.id}}'
+    data-tab='{{tabs.settings.id}}'
+    data-group='{{tabs.settings.group}}'
+>
+    <fieldset class="two-columns">
+        <legend>{{localize tabs.settings.label}}</legend>
+        <span>{{localize "DAGGERHEART.Sheets.Miscellaneous.Quantity"}}</span>
+        {{formField systemFields.quantity value=source.system.quantity}}
+    </fieldset>
+</section>

templates/sheets/miscellaneous.hbs

@@ -1,29 +0,0 @@
-<div>
-    <header class="flexcol">
-        <div class="title-container">
-            <img class="flex0" src="{{source.img}}" data-edit="img" data-action="onEditImage" title="{{source.name}}" height="64" width="64"/>
-            <div class="title-name">
-                {{formInput fields.name value=source.name rootId=partId}}
-            </div>
-        </div>
-    </header>
-
-    <section class="sheet-body">
-        <div class="flexrow item-container">
-            <div class="item-sidebar">
-                {{formField systemFields.quantity value=source.system.quantity label=(localize "DAGGERHEART.Sheets.Miscellaneous.Quantity")}}
-                {{!-- <div class="form-group">
-                    <label>{{localize "DAGGERHEART.Sheets.Miscellaneous.Quantity"}}</label>
-                    <div class="form-fields">
-                        <input type="text" name="system.quantity" value="{{item.system.quantity}}" data-dtype="Number" />
-                    </div>
-                </div> --}}
-            </div>
-             <div>
-                <h2 class="flex-col-centered">{{localize "DAGGERHEART.General.Description"}}</h2>
-                {{formInput systemFields.description value=source.system.description enriched=source.system.description localize=true toggled=true}}
-                {{!-- {{editor item.system.description target="system.description" button=true}} --}}
-            </div>
-        </div>
-    </section>
-</div>