From 52f62014f90435ba19e5dbe579e64f0e48f8c142 Mon Sep 17 00:00:00 2001 From: WBHarry Date: Mon, 14 Jul 2025 22:19:56 +0200 Subject: [PATCH] Styling improvements --- lang/en.json | 2 +- .../sheets-configs/activeEffectConfig.mjs | 59 ++++++------------- styles/less/ux/autocomplete/autocomplete.less | 32 +++++----- 3 files changed, 35 insertions(+), 58 deletions(-) diff --git a/lang/en.json b/lang/en.json index 78db7e7a..c85c41f3 100755 --- a/lang/en.json +++ b/lang/en.json @@ -1115,7 +1115,7 @@ }, "Rules": { "damageReduction": { - "increasePerArmorMark": "Armor Block Per Mark", + "increasePerArmorMark": "Damage Reduction per Armor Slot", "maxArmorMarkedBonus": "Max Armor Used", "maxArmorMarkedStress": "Max Armor Used With Stress", "stress": { diff --git a/module/applications/sheets-configs/activeEffectConfig.mjs b/module/applications/sheets-configs/activeEffectConfig.mjs index b704b195..1d2787ec 100644 --- a/module/applications/sheets-configs/activeEffectConfig.mjs +++ b/module/applications/sheets-configs/activeEffectConfig.mjs @@ -5,38 +5,18 @@ export default class DhActiveEffectConfig extends foundry.applications.sheets.Ac super(options); const ignoredActorKeys = ['config', 'DhEnvironment']; - const actorAttributes = Object.keys(game.system.api.models.actors).reduce((acc, key) => { + this.changeChoices = Object.keys(game.system.api.models.actors).reduce((acc, key) => { if (!ignoredActorKeys.includes(key)) { const model = game.system.api.models.actors[key]; const attributes = CONFIG.Token.documentClass.getTrackedAttributes(model); - acc[game.i18n.localize(model.metadata.label)] = CONFIG.Token.documentClass.getTrackedAttributeChoices( - attributes, - model - ); + const group = game.i18n.localize(model.metadata.label); + const choices = CONFIG.Token.documentClass + .getTrackedAttributeChoices(attributes, model) + .map(x => ({ ...x, group: group })); + acc.push(...choices); } return acc; - }, {}); - console.log(actorAttributes); - - // const allowedItemKeys = ['DHArmor']; - // const itemAttributes = Object.keys(game.system.api.models.items).reduce((acc, key) => { - // if(allowedItemKeys.includes(key)) { - // const model = game.system.api.models.items[key]; - // acc[game.i18n.localize(model.metadata.label)] = CONFIG.Token.documentClass.getTrackedAttributes(model); - // } - // return acc; - // }, {}); - - // this.selectChoices = [ - // ...Object.keys(actorAttributes).flatMap(name => { - // const attribute = actorAttributes[name]; - // return { group: name, label: attribute, value: attribute }; - // }), - // ...Object.keys(itemAttributes).flatMap(name => { - // const attribute = itemAttributes[name]; - // return { group: name, label: attribute, value: attribute }; - // }) - // ]; + }, []); } static DEFAULT_OPTIONS = { @@ -69,17 +49,17 @@ export default class DhActiveEffectConfig extends foundry.applications.sheets.Ac _attachPartListeners(partId, htmlElement, options) { super._attachPartListeners(partId, htmlElement, options); - const selectChoices = this.selectChoices; + const changeChoices = this.changeChoices; htmlElement.querySelectorAll('.effect-change-input').forEach(element => { autocomplete({ input: element, fetch: function (text, update) { if (!text) { - update(selectChoices); + update(changeChoices); } else { text = text.toLowerCase(); - var suggestions = selectChoices.filter(n => n.label.toLowerCase().includes(text)); + var suggestions = changeChoices.filter(n => n.label.toLowerCase().includes(text)); update(suggestions); } }, @@ -87,19 +67,14 @@ export default class DhActiveEffectConfig extends foundry.applications.sheets.Ac const label = game.i18n.localize(item.label); const matchIndex = label.toLowerCase().indexOf(search); - const base = document.createElement('div'); - base.textContent = label.slice(0, matchIndex); + const beforeText = label.slice(0, matchIndex); + const matchText = label.slice(matchIndex, matchIndex + search.length); + const after = label.slice(matchIndex + search.length, label.length); - const matchText = document.createElement('div'); - matchText.textContent = label.slice(matchIndex, matchIndex + search.length); - matchText.classList.add('matched'); + const element = document.createElement('li'); + element.innerHTML = `${beforeText}${matchText ? `${matchText}` : ''}${after}`; - const after = document.createElement('div'); - after.textContent = label.slice(matchIndex + search.length, label.length); - - base.insertAdjacentElement('beforeend', matchText); - base.insertAdjacentElement('beforeend', after); - return base; + return element; }, renderGroup: function (label) { const itemElement = document.createElement('div'); @@ -107,7 +82,7 @@ export default class DhActiveEffectConfig extends foundry.applications.sheets.Ac return itemElement; }, onSelect: function (item) { - element.value = item.value; + element.value = `system.${item.value}`; }, click: e => e.fetch(), minLength: 0 diff --git a/styles/less/ux/autocomplete/autocomplete.less b/styles/less/ux/autocomplete/autocomplete.less index 04f11bef..57fc3815 100644 --- a/styles/less/ux/autocomplete/autocomplete.less +++ b/styles/less/ux/autocomplete/autocomplete.less @@ -1,16 +1,22 @@ .theme-light .autocomplete { - background-image: url('../assets/parchments/dh-parchment-dark.png'); + background-image: url('../assets/parchments/dh-parchment-light.png'); + color: black; } .autocomplete { padding: 2px; border-width: 0 1px 1px 1px; border-style: solid; - border-color: light-dark(@dark-blue, @beige); + border-color: light-dark(@dark, @beige); border-radius: 6px; - color: light-dark(@beige, @dark); - background-image: url('../assets/parchments/dh-parchment-light.png'); + background-image: url('../assets/parchments/dh-parchment-dark.png'); z-index: 200; + max-height: 400px !important; + overflow-y: auto; + font-style: @font-body; + display: flex; + flex-direction: column; + gap: 2px; .group { font-weight: bold; @@ -18,22 +24,18 @@ padding-left: 8px; } - div[role='option'] { - font-size: 14; - padding-left: 16px; + li[role='option'] { + font-size: 14px; + padding-left: 10px; cursor: pointer; - display: flex; &:hover { - background: light-dark(@beige-50, @dark-blue); - color: light-dark(@dark, @beige); + background-color: light-dark(@dark, @beige); + color: light-dark(@beige, var(--color-dark-3)); } - .matched { - font-weight: bold; - } - - &.selected { + > div { + white-space: nowrap; } } }