From 40820988dad054b4a81689b3c17929f66256a56b Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Sat, 26 Jul 2025 10:51:55 -0600 Subject: [PATCH 1/7] Add my typical options helper for ease of use --- module/handlebarsHelpers/_index.mjs | 2 ++ module/handlebarsHelpers/options.mjs | 34 ++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+) create mode 100644 module/handlebarsHelpers/options.mjs diff --git a/module/handlebarsHelpers/_index.mjs b/module/handlebarsHelpers/_index.mjs index d0923e8..b613f61 100644 --- a/module/handlebarsHelpers/_index.mjs +++ b/module/handlebarsHelpers/_index.mjs @@ -1,5 +1,7 @@ import { filePath } from "../consts.mjs"; +import { options } from "./options.mjs"; export default { systemFilePath: filePath, + "taf-options": options, }; diff --git a/module/handlebarsHelpers/options.mjs b/module/handlebarsHelpers/options.mjs new file mode 100644 index 0000000..664aaa6 --- /dev/null +++ b/module/handlebarsHelpers/options.mjs @@ -0,0 +1,34 @@ +/** + * @typedef {object} Option + * @property {string} [label] + * @property {string|number} value + * @property {boolean} [disabled] + */ + +/** + * @param {string | number} selected The selected value + * @param {Array`, + ); + }; + return new Handlebars.SafeString(htmlOptions.join(`\n`)); +}; From 7796c829625ce8e7b2afc12d72c087206626194d Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Sat, 26 Jul 2025 10:52:55 -0600 Subject: [PATCH 2/7] Move the prompt wrapper into each block partial so that those which don't need it can leave it out --- templates/Ask/inputs.hbs | 4 +--- templates/Ask/inputs/checkbox.hbs | 26 ++++++++++++++------------ templates/Ask/inputs/details.hbs | 2 +- templates/Ask/inputs/input.hbs | 26 ++++++++++++++------------ 4 files changed, 30 insertions(+), 28 deletions(-) diff --git a/templates/Ask/inputs.hbs b/templates/Ask/inputs.hbs index f5bdac4..36c1ea9 100644 --- a/templates/Ask/inputs.hbs +++ b/templates/Ask/inputs.hbs @@ -5,8 +5,6 @@

{{/if}} {{#each inputs as | i |}} -
- {{> (concat (systemFilePath "templates/Ask/inputs/" ) i.type ".hbs") i}} -
+ {{> (concat (systemFilePath "templates/Ask/inputs/" ) i.type ".hbs") i}} {{/each}} diff --git a/templates/Ask/inputs/checkbox.hbs b/templates/Ask/inputs/checkbox.hbs index cdca5e1..ce8fd88 100644 --- a/templates/Ask/inputs/checkbox.hbs +++ b/templates/Ask/inputs/checkbox.hbs @@ -1,12 +1,14 @@ - - +
+ + +
diff --git a/templates/Ask/inputs/details.hbs b/templates/Ask/inputs/details.hbs index fec6878..f84af5d 100644 --- a/templates/Ask/inputs/details.hbs +++ b/templates/Ask/inputs/details.hbs @@ -1,3 +1,3 @@ -

+

{{{ details }}}

diff --git a/templates/Ask/inputs/input.hbs b/templates/Ask/inputs/input.hbs index 196b12d..98922df 100644 --- a/templates/Ask/inputs/input.hbs +++ b/templates/Ask/inputs/input.hbs @@ -1,12 +1,14 @@ - - +
+ + +
From ce65e3a516d34d583870d43608ae2e591319f18f Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Sat, 26 Jul 2025 10:53:37 -0600 Subject: [PATCH 3/7] Add an error block and validation to help ensure users know when they messed up the block type --- module/apps/Ask.mjs | 22 +++++++++++++++++----- styles/Apps/Ask.css | 13 ++++++++++++- templates/Ask/inputs/error.hbs | 3 +++ 3 files changed, 32 insertions(+), 6 deletions(-) create mode 100644 templates/Ask/inputs/error.hbs diff --git a/module/apps/Ask.mjs b/module/apps/Ask.mjs index 472cfbf..3aa2a5d 100644 --- a/module/apps/Ask.mjs +++ b/module/apps/Ask.mjs @@ -2,6 +2,14 @@ import { __ID__, filePath } from "../consts.mjs"; const { HandlebarsApplicationMixin, ApplicationV2 } = foundry.applications.api; +const validInputTypes = [ + `checkbox`, + `details`, + `error`, + `input`, + `select`, +]; + export class Ask extends HandlebarsApplicationMixin(ApplicationV2) { static DEFAULT_OPTIONS = { tag: `dialog`, @@ -32,11 +40,7 @@ export class Ask extends HandlebarsApplicationMixin(ApplicationV2) { static PARTS = { inputs: { template: filePath(`templates/Ask/inputs.hbs`), - templates: [ - filePath(`templates/Ask/inputs/checkbox.hbs`), - filePath(`templates/Ask/inputs/details.hbs`), - filePath(`templates/Ask/inputs/input.hbs`), - ], + templates: validInputTypes.map(type => filePath(`templates/Ask/inputs/${type}.hbs`)), }, controls: { template: filePath(`templates/Ask/controls.hbs`), @@ -69,6 +73,14 @@ export class Ask extends HandlebarsApplicationMixin(ApplicationV2) { } = {}) { super(options); this.alwaysUseAnswerObject = alwaysUseAnswerObject; + + for (const input of inputs) { + if (!validInputTypes.includes(input.type)) { + input.details = `Invalid input type provided: ${input.type}`; + input.type = `error`; + }; + }; + this._inputs = inputs; this._description = description; this._userOnCancel = onCancel; diff --git a/styles/Apps/Ask.css b/styles/Apps/Ask.css index f0fb24e..f7bb78e 100644 --- a/styles/Apps/Ask.css +++ b/styles/Apps/Ask.css @@ -36,8 +36,19 @@ p { margin: 0; - grid-column: 1 / -1; text-indent: 1em; + + &.error { + font-size: 1.1rem; + padding: 6px 8px; + box-shadow: 0 0 10px var(--color-shadow-dark); + color: var(--color-text-light-1); + border-radius: 5px; + text-align: center; + background: var(--color-level-error-bg); + border: 1px solid var(--color-level-error); + text-indent: 0; + } } input[type="checkbox"] { diff --git a/templates/Ask/inputs/error.hbs b/templates/Ask/inputs/error.hbs new file mode 100644 index 0000000..6fb1086 --- /dev/null +++ b/templates/Ask/inputs/error.hbs @@ -0,0 +1,3 @@ +

+ {{ details }} +

\ No newline at end of file From 1cdf03fe361172ce8daa5974034177d0bdd291b1 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Sat, 26 Jul 2025 10:54:06 -0600 Subject: [PATCH 4/7] Add the handlebars for the select block --- templates/Ask/inputs/select.hbs | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 templates/Ask/inputs/select.hbs diff --git a/templates/Ask/inputs/select.hbs b/templates/Ask/inputs/select.hbs new file mode 100644 index 0000000..9d64e34 --- /dev/null +++ b/templates/Ask/inputs/select.hbs @@ -0,0 +1,13 @@ +
+ + +
From fe022b2d43ca3fcd32a9c1c06973b68a89b2bb73 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Sat, 26 Jul 2025 11:03:17 -0600 Subject: [PATCH 5/7] Remove unused CSS reset --- styles/resets/inputs.css | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 styles/resets/inputs.css diff --git a/styles/resets/inputs.css b/styles/resets/inputs.css deleted file mode 100644 index aa6e6b7..0000000 --- a/styles/resets/inputs.css +++ /dev/null @@ -1,5 +0,0 @@ -.taf > .window-content { - button, input { - all: initial; - } -} From 08fb6768adbcdbf13d24faca3fa9a00f02d27d80 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Sat, 26 Jul 2025 11:06:05 -0600 Subject: [PATCH 6/7] Add a divider block type --- module/apps/Ask.mjs | 1 + styles/elements/hr.css | 7 +++++++ styles/main.css | 4 ++++ styles/resets/hr.css | 3 +++ templates/Ask/inputs/divider.hbs | 1 + 5 files changed, 16 insertions(+) create mode 100644 styles/elements/hr.css create mode 100644 styles/resets/hr.css create mode 100644 templates/Ask/inputs/divider.hbs diff --git a/module/apps/Ask.mjs b/module/apps/Ask.mjs index 3aa2a5d..f3d009a 100644 --- a/module/apps/Ask.mjs +++ b/module/apps/Ask.mjs @@ -5,6 +5,7 @@ const { HandlebarsApplicationMixin, ApplicationV2 } = foundry.applications.api; const validInputTypes = [ `checkbox`, `details`, + `divider`, `error`, `input`, `select`, diff --git a/styles/elements/hr.css b/styles/elements/hr.css new file mode 100644 index 0000000..2f87ec9 --- /dev/null +++ b/styles/elements/hr.css @@ -0,0 +1,7 @@ +.taf > .window-content hr { + height: 1px; + background: rebeccapurple; + border-radius: 0; + margin: 0; + padding: 0; +} diff --git a/styles/main.css b/styles/main.css index bf6264b..45fc73d 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,11 +1,15 @@ @layer resets, themes, elements, components, partials, apps, exceptions; +/* Resets */ +@import url("./resets/hr.css") layer(resets); + /* Themes */ @import url("./themes/dark.css") layer(themes); @import url("./themes/light.css") layer(themes); /* Elements */ @import url("./elements/headers.css") layer(elements); +@import url("./elements/hr.css") layer(elements); @import url("./elements/input.css") layer(elements); @import url("./elements/p.css") layer(elements); @import url("./elements/prose-mirror.css") layer(elements); diff --git a/styles/resets/hr.css b/styles/resets/hr.css new file mode 100644 index 0000000..2ab3970 --- /dev/null +++ b/styles/resets/hr.css @@ -0,0 +1,3 @@ +.taf > .window-content hr { + all: initial; +} diff --git a/templates/Ask/inputs/divider.hbs b/templates/Ask/inputs/divider.hbs new file mode 100644 index 0000000..e123ba7 --- /dev/null +++ b/templates/Ask/inputs/divider.hbs @@ -0,0 +1 @@ +
From daa88fb272b6caf19ad67ab1ff71e556dc43633b Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Sat, 26 Jul 2025 22:36:37 -0600 Subject: [PATCH 7/7] Add better styling for checkboxes to make them more distinct --- styles/elements/input.css | 50 +++++++++++++++++++++++++++++++++++++++ styles/main.css | 1 + styles/resets/inputs.css | 8 +++++++ 3 files changed, 59 insertions(+) create mode 100644 styles/resets/inputs.css diff --git a/styles/elements/input.css b/styles/elements/input.css index 9b72811..4c6c747 100644 --- a/styles/elements/input.css +++ b/styles/elements/input.css @@ -3,4 +3,54 @@ --input-height: 2.5rem; font-size: 1.75rem; } + + &[type="checkbox"] { + --checkbox-checked-color: var(--color-warm-1); + width: var(--checkbox-size); + height: var(--checkbox-size); + background: var(--input-background-color); + border: 2px solid var(--color-cool-3); + position: relative; + border-radius: 4px; + cursor: pointer; + + &::before, &::after { + display: none; + } + + &:focus-visible { + outline: 2px solid var(--checkbox-checked-color); + outline-offset: 3px; + } + + &:checked::after { + display: block; + position: absolute; + inset: 4px; + z-index: 1; + content: ""; + border-radius: 4px; + background: var(--checkbox-checked-color); + cursor: pointer; + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + + &::before { + display: block; + position: absolute; + inset: 0; + content: ""; + background: var(--color-level-error-bg); + border-radius: 2px; + cursor: not-allowed; + } + + &::after { + cursor: not-allowed; + } + } + } } diff --git a/styles/main.css b/styles/main.css index 45fc73d..16de3e5 100644 --- a/styles/main.css +++ b/styles/main.css @@ -2,6 +2,7 @@ /* Resets */ @import url("./resets/hr.css") layer(resets); +@import url("./resets/inputs.css") layer(resets); /* Themes */ @import url("./themes/dark.css") layer(themes); diff --git a/styles/resets/inputs.css b/styles/resets/inputs.css new file mode 100644 index 0000000..0a7928f --- /dev/null +++ b/styles/resets/inputs.css @@ -0,0 +1,8 @@ +.taf > .window-content { + input[type="checkbox"] { + all: initial; + &::after, &::before { + all: initial; + } + } +}