diff --git a/module/data/Item/Weapon.mjs b/module/data/Item/Weapon.mjs index 06460f9..dd23042 100644 --- a/module/data/Item/Weapon.mjs +++ b/module/data/Item/Weapon.mjs @@ -59,7 +59,12 @@ export class WeaponData extends foundry.abstract.TypeDataModel { // #region Sheet Data getFormFields(ctx) { const fields = [ - { type: `set`, label: `Traits` }, + { + type: `string-set`, + label: `RipCrypt.common.traits`, + path: `system.traits`, + value: this.traitString, + }, { type: `integer`, label: `Short Range` }, { type: `integer`, label: `Long Range` }, { type: `integer`, label: `Damage` }, diff --git a/module/handlebarHelpers/inputs/formFields.mjs b/module/handlebarHelpers/inputs/formFields.mjs index 0ddd6b5..16ca51e 100644 --- a/module/handlebarHelpers/inputs/formFields.mjs +++ b/module/handlebarHelpers/inputs/formFields.mjs @@ -1,5 +1,7 @@ +import { stringSet } from "./string-set.mjs"; + const inputTypes = { - set: displayOnly, + "string-set": stringSet, integer: displayOnly, bar: displayOnly, dropdown: displayOnly, @@ -10,11 +12,11 @@ function displayOnly(input) { return `
${input.label}
`; }; -export function formFields(inputs) { +export function formFields(inputs, opts) { let htmlString = ``; for (const input of inputs) { if (inputTypes[input.type] == null) { continue }; - htmlString += inputTypes[input.type](input); + htmlString += inputTypes[input.type](input, opts.data.root); }; return htmlString; }; diff --git a/module/handlebarHelpers/inputs/string-set.mjs b/module/handlebarHelpers/inputs/string-set.mjs new file mode 100644 index 0000000..c8dfe76 --- /dev/null +++ b/module/handlebarHelpers/inputs/string-set.mjs @@ -0,0 +1,25 @@ +import { localizer } from "../../utils/Localizer.mjs"; + +export function stringSet(input, data) { + const label = localizer(input.label); + + if (!data.meta.editable) { + return `
+ ${label} + ${input.value} +
`; + }; + + return `
+ + +
`; +}; diff --git a/templates/Apps/AllItemSheetV1/style.css b/templates/Apps/AllItemSheetV1/style.css index aae921a..8e73f7b 100644 --- a/templates/Apps/AllItemSheetV1/style.css +++ b/templates/Apps/AllItemSheetV1/style.css @@ -2,6 +2,11 @@ --input-height: 1rem; --col-gap: 8px; + --string-tags-tag-text: var(--header-text); + --string-tags-tag-background: var(--header-background); + --string-tags-add-text: white; + --string-tags-add-background: var(--accent-1); + display: grid; grid-template-rows: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); @@ -13,6 +18,11 @@ > :nth-child(odd) { background: var(--alt-row-background); color: var(--alt-row-text); + + --string-tags-tag-text: var(--header-text); + --string-tags-tag-background: var(--header-background); + --string-tags-add-text: var(--button-text); + --string-tags-add-background: var(--button-background); } label, .label { @@ -25,7 +35,15 @@ font-weight: bold; } - .input-group { - display: contents; + [data-input-type="string-set"] { + padding: 2px 4px; + display: flex; + flex-direction: row; + column-gap: var(--col-gap); + grid-row: span 2; + + label, .label { + padding: 0; + } } } diff --git a/templates/css/common.css b/templates/css/common.css index 175d7a9..d234f59 100644 --- a/templates/css/common.css +++ b/templates/css/common.css @@ -5,6 +5,7 @@ @import url("./elements/lists.css"); @import url("./elements/select.css"); @import url("./elements/span.css"); +@import url("./elements/string-tags.css"); @import url("./elements/table.css"); .ripcrypt { diff --git a/templates/css/elements/string-tags.css b/templates/css/elements/string-tags.css new file mode 100644 index 0000000..bd1bc31 --- /dev/null +++ b/templates/css/elements/string-tags.css @@ -0,0 +1,28 @@ +.ripcrypt string-tags { + --input-background: var(--string-tags-input-background); + + display: grid; + grid-template-columns: 1fr min-content; + grid-template-rows: repeat(2, minmax(0, 1fr)); + + padding: 2px; + border: var(--string-tags-border); + + .tags { + grid-column: 1 / -1; + } + + .tag { + background: var(--tag-background, var(--header-background)); + color: var(--tag-text, var(--header-text)); + padding: 2px 4px; + } + + button.icon.icon { + font-family: var(--font-awesome); + background: var(--string-tags-add-background); + color: var(--string-tags-add-text); + width: 30px; + border-radius: 4px; + } +} diff --git a/templates/css/themes/dark.css b/templates/css/themes/dark.css index 9c0c05d..1f92f66 100644 --- a/templates/css/themes/dark.css +++ b/templates/css/themes/dark.css @@ -7,6 +7,9 @@ --base-text: white; --base-background: black; + --header-text: black; + --header-background: var(--accent-3); + --section-header-text: white; --section-header-background: var(--accent-1); @@ -19,4 +22,11 @@ --button-background: black; --button-text: var(--accent-3); + + /* Additional Variables */ + --string-tags-border: inherit; + --string-tags-tag-background: inherit; + --string-tags-tag-text: inherit; + --string-tags-add-background: inherit; + --string-tags-add-text: var(--accent-3); }