diff --git a/module/applications/sheets-configs/action-config.mjs b/module/applications/sheets-configs/action-config.mjs index 61ce3fd7..a230eadd 100644 --- a/module/applications/sheets-configs/action-config.mjs +++ b/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) }); diff --git a/styles/daggerheart.css b/styles/daggerheart.css index fcae3193..116a34d3 100755 --- a/styles/daggerheart.css +++ b/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; diff --git a/styles/less/global/elements.less b/styles/less/global/elements.less index fcf9d353..bd06441b 100755 --- a/styles/less/global/elements.less +++ b/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; } } diff --git a/styles/less/global/inventory-fieldset-items.less b/styles/less/global/inventory-fieldset-items.less index 1cbc9353..46343c0a 100644 --- a/styles/less/global/inventory-fieldset-items.less +++ b/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; diff --git a/styles/less/global/tab-form-footer.less b/styles/less/global/tab-form-footer.less index 3607d463..14794204 100644 --- a/styles/less/global/tab-form-footer.less +++ b/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; diff --git a/templates/actionTypes/cost.hbs b/templates/actionTypes/cost.hbs index 9ff589a3..62ca5644 100644 --- a/templates/actionTypes/cost.hbs +++ b/templates/actionTypes/cost.hbs @@ -1,21 +1,15 @@ -