From df9e4f7a3b0372b5acf9f2ce42f3b93f59ef59bd Mon Sep 17 00:00:00 2001 From: Phil Date: Wed, 14 Jul 2021 00:44:27 +0100 Subject: [PATCH 01/18] Adds new settings menu for configuring a custom theme. Adds a new ThemeConfig class for the new settings menu. Adds a new template for the custom theme app. --- .../Configuration/ThemeConfiguration.ts | 17 +++++++++ src/module/helper/Settings.ts | 13 ++++++- system/templates/apps/theme-config.hbs | 37 +++++++++++++++++++ 3 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 src/module/components/Configuration/ThemeConfiguration.ts create mode 100644 system/templates/apps/theme-config.hbs diff --git a/src/module/components/Configuration/ThemeConfiguration.ts b/src/module/components/Configuration/ThemeConfiguration.ts new file mode 100644 index 00000000..9fe5647f --- /dev/null +++ b/src/module/components/Configuration/ThemeConfiguration.ts @@ -0,0 +1,17 @@ +export class ThemeConfig extends FormApplication { + static get defaultOptions() { + return mergeObject(super.defaultOptions, { + title: "Theme Configuration", + id: "themeConfig", + template: "/systems/fatex/templates/apps/theme-config.hbs", + width: 500, + height: "auto", + closeOnSubmit: true, + } as BaseEntitySheet.Options) + } + + // @ts-ignore + async _updateObject(event, formData) { + return; + } +} diff --git a/src/module/helper/Settings.ts b/src/module/helper/Settings.ts index e7d82797..1071913e 100644 --- a/src/module/helper/Settings.ts +++ b/src/module/helper/Settings.ts @@ -1,5 +1,16 @@ +import { ThemeConfig } from "../components/Configuration/ThemeConfiguration"; + export class FateXSettings { static registerSettings() { + game.settings.registerMenu("fatex", "theme", { + name: "Theme Settings", + label: "Configure Theme", + hint: "Allows a user to select custom color schemes for the FateX interface.", + icon: "fas fa-cog", + type: ThemeConfig, + restricted: false + }); + game.settings.register("fatex", "enableAlphaFeatures", { name: game.i18n.localize("FAx.Settings.System.Alpha.Name"), hint: game.i18n.localize("FAx.Settings.System.Alpha.Hint"), @@ -9,4 +20,4 @@ export class FateXSettings { default: false, }); } -} +} \ No newline at end of file diff --git a/system/templates/apps/theme-config.hbs b/system/templates/apps/theme-config.hbs new file mode 100644 index 00000000..40ec33bc --- /dev/null +++ b/system/templates/apps/theme-config.hbs @@ -0,0 +1,37 @@ +
+
+ +
+ + +
+
+ +
+ +
+ + +
+
+
From 675b2cd5313ff33d6ca1cdc6f5a2a2fe1e9b3c51 Mon Sep 17 00:00:00 2001 From: Phil Date: Wed, 14 Jul 2021 02:55:17 +0100 Subject: [PATCH 02/18] Standardises the colour variables as hexadecimal. Adds a new sheet background colour SCSS variable which links to a new custom property. Makes use of transparent in the headline linear gradients to better enable theming. Updates all uses of the sheet-background SCSS variable with the new fatex-sheet-background-color variable. --- src/styles/abstract/mixins.scss | 6 +++--- src/styles/abstract/variables.scss | 9 +++++---- src/styles/base/foundry-ui.scss | 2 +- src/styles/components/actions.scss | 6 +++--- src/styles/components/checkbox.scss | 2 +- src/styles/components/dialog.scss | 2 +- src/styles/components/headline.scss | 4 ++-- src/styles/components/inline-tabs.scss | 2 +- src/styles/components/input.scss | 2 +- src/styles/components/radio.scss | 2 +- src/styles/components/scrollbar.scss | 2 +- src/styles/components/sheet/sheet.scss | 2 +- src/styles/components/slider.scss | 2 +- src/styles/components/tabs/tab-navigation.scss | 2 +- src/styles/fatex.scss | 2 +- src/styles/legacy/chat.scss | 2 +- src/styles/utils/padding.scss | 3 --- src/styles/utils/spacing.scss | 11 +++++++++++ 18 files changed, 36 insertions(+), 27 deletions(-) delete mode 100644 src/styles/utils/padding.scss create mode 100644 src/styles/utils/spacing.scss diff --git a/src/styles/abstract/mixins.scss b/src/styles/abstract/mixins.scss index 04c24dec..0a59ad47 100644 --- a/src/styles/abstract/mixins.scss +++ b/src/styles/abstract/mixins.scss @@ -3,7 +3,7 @@ position: absolute; top: -1px; left: -1px; - border-top: $size solid #f1f2f6; + border-top: $size solid $fatex-sheet-background-color; border-right: $size solid transparent; } @@ -12,7 +12,7 @@ position: absolute; top: -1px; right: -1px; - border-top: $size solid #f1f2f6; + border-top: $size solid $fatex-sheet-background-color; border-left: $size solid transparent; } @@ -21,7 +21,7 @@ position: absolute; bottom: -1px; right: -1px; - border-bottom: $size solid #f1f2f6; + border-bottom: $size solid $fatex-sheet-background-color; border-left: $size solid transparent; } diff --git a/src/styles/abstract/variables.scss b/src/styles/abstract/variables.scss index 941881f7..a7a2922b 100644 --- a/src/styles/abstract/variables.scss +++ b/src/styles/abstract/variables.scss @@ -2,16 +2,16 @@ $component-padding: 10px; // Colors -$primary-color: rgba(47, 53, 66, 1); +$primary-color: #2f3542; -$sheet-background: rgb(241, 242, 246); +$sheet-background: #f1f2f6; $message-background: transparentize($primary-color, 0.7); $primary-text-color: #191813; $light-text-color: #fff; -$caution-color: rgb(242, 22, 40); -$shadow-color: rgb(160, 160, 160); +$caution-color: #f21628; +$shadow-color: #a0a0a0; // Fonts $primary-font: "Montserrat", sans-serif; @@ -21,3 +21,4 @@ $fatex-header-color: var(--fatex-header-color, $primary-color); $fatex-header-text-color: var(--fatex-header-text-color, $light-text-color); $fatex-primary-color: var(--fatex-primary-color, $primary-color); +$fatex-sheet-background-color: var(--fatex-sheet-background-color, $sheet-background); diff --git a/src/styles/base/foundry-ui.scss b/src/styles/base/foundry-ui.scss index db831129..3602592d 100644 --- a/src/styles/base/foundry-ui.scss +++ b/src/styles/base/foundry-ui.scss @@ -8,6 +8,6 @@ #chat-controls div.roll-type-select select, .sidebar-tab .directory-header .header-search input, #chat-form .cm-s-easymde { - background: $sheet-background; + background: $fatex-sheet-background-color; color: var(--fatex-primary-text-color, $primary-text-color); } diff --git a/src/styles/components/actions.scss b/src/styles/components/actions.scss index 6c6a0598..e98d25e9 100644 --- a/src/styles/components/actions.scss +++ b/src/styles/components/actions.scss @@ -58,7 +58,7 @@ gap: 0; font-size: 16px; color: $fatex-primary-color; - text-shadow: 1px -1px 1px $sheet-background; + text-shadow: 1px -1px 1px $fatex-sheet-background-color; } &__icon { @@ -92,12 +92,12 @@ .fatex-js-edit-mode { .fatex-actions--headline, .fatex-actions--skill { - background: linear-gradient(90deg, rgba(47, 53, 66, 0) 0%, #2f3542 33%, #2f3542 100%); + background: linear-gradient(90deg, transparent, $fatex-primary-color 33%, $fatex-primary-color 100%); } .fatex-actions--item, .fatex-actions--section-heading { - background: linear-gradient(90deg, transparentize($sheet-background, 1) 0%, $sheet-background 33%, $sheet-background 100%); + background: linear-gradient(90deg, transparent 0%, $fatex-sheet-background-color 33%, $fatex-sheet-background-color 100%); } .fatex-actions__icon { diff --git a/src/styles/components/checkbox.scss b/src/styles/components/checkbox.scss index 3bff4c0a..a8f0bc76 100644 --- a/src/styles/components/checkbox.scss +++ b/src/styles/components/checkbox.scss @@ -14,7 +14,7 @@ transform: translate(-60%, -40%); font-weight: 900; font-size: 24px; - text-shadow: 1px 1px 1px $sheet-background; + text-shadow: 1px 1px 1px $fatex-sheet-background-color; } &__icon { diff --git a/src/styles/components/dialog.scss b/src/styles/components/dialog.scss index 91fd004a..eb207c9c 100644 --- a/src/styles/components/dialog.scss +++ b/src/styles/components/dialog.scss @@ -7,7 +7,7 @@ .window-content { padding: $component-padding; - background: $sheet-background; + background: $fatex-sheet-background-color; } .dialog-buttons { diff --git a/src/styles/components/headline.scss b/src/styles/components/headline.scss index a3914958..09a3bd30 100644 --- a/src/styles/components/headline.scss +++ b/src/styles/components/headline.scss @@ -51,7 +51,7 @@ z-index: 100; transform: translate(-25px, 0px); font-weight: 900; - color: $sheet-background; + color: $fatex-sheet-background-color; -webkit-text-stroke: 2px $fatex-primary-color; text-shadow: initial; @@ -59,7 +59,7 @@ left: initial; right: 100%; font-size: 24px; - text-shadow: 1px 1px 1px $sheet-background; + text-shadow: 1px 1px 1px $fatex-sheet-background-color; transform: translate(15px, -7px); } diff --git a/src/styles/components/inline-tabs.scss b/src/styles/components/inline-tabs.scss index 2e0b7b04..7e8b4256 100644 --- a/src/styles/components/inline-tabs.scss +++ b/src/styles/components/inline-tabs.scss @@ -14,7 +14,7 @@ &.active { background: $fatex-primary-color; - color: $sheet-background; + color: $fatex-sheet-background-color; border: none; } } diff --git a/src/styles/components/input.scss b/src/styles/components/input.scss index 86d6548c..1ef2fca8 100644 --- a/src/styles/components/input.scss +++ b/src/styles/components/input.scss @@ -40,7 +40,7 @@ input[type="text"].fatex-text-input { font-weight: 900; font-size: 24px; color: $fatex-primary-color; - text-shadow: 1px 1px 1px $sheet-background; + text-shadow: 1px 1px 1px $fatex-sheet-background-color; } &__label { diff --git a/src/styles/components/radio.scss b/src/styles/components/radio.scss index 8b3e8c99..51170a71 100644 --- a/src/styles/components/radio.scss +++ b/src/styles/components/radio.scss @@ -44,7 +44,7 @@ color: $fatex-primary-color; font-weight: 900; font-size: 24px; - text-shadow: 1px 1px 1px $sheet-background; + text-shadow: 1px 1px 1px $fatex-sheet-background-color; &--active { background: none; diff --git a/src/styles/components/scrollbar.scss b/src/styles/components/scrollbar.scss index 888df085..ce250015 100644 --- a/src/styles/components/scrollbar.scss +++ b/src/styles/components/scrollbar.scss @@ -16,7 +16,7 @@ :root { scrollbar-width: thin !important; - scrollbar-color: $primary-color $sheet-background !important; + scrollbar-color: $primary-color $fatex-sheet-background-color !important; } input[type="range"]::-webkit-slider-thumb { diff --git a/src/styles/components/sheet/sheet.scss b/src/styles/components/sheet/sheet.scss index 5550d27e..b55351cd 100644 --- a/src/styles/components/sheet/sheet.scss +++ b/src/styles/components/sheet/sheet.scss @@ -15,7 +15,7 @@ .window-content { padding: 0; - background: $sheet-background; + background: $fatex-sheet-background-color; overflow-y: hidden; } diff --git a/src/styles/components/slider.scss b/src/styles/components/slider.scss index 4124f0c8..399e839e 100644 --- a/src/styles/components/slider.scss +++ b/src/styles/components/slider.scss @@ -8,7 +8,7 @@ font-size: 24px; font-weight: 900; text-align: center; - text-shadow: 1px 1px 1px $sheet-background; + text-shadow: 1px 1px 1px $fatex-sheet-background-color; background: none; border: none; } diff --git a/src/styles/components/tabs/tab-navigation.scss b/src/styles/components/tabs/tab-navigation.scss index 2cabb98b..3a9a96c7 100644 --- a/src/styles/components/tabs/tab-navigation.scss +++ b/src/styles/components/tabs/tab-navigation.scss @@ -43,7 +43,7 @@ &.active, &:hover { font-weight: bold; - background: $sheet-background; + background: $fatex-sheet-background-color; border: 1px solid $fatex-primary-color; border-right: 0; opacity: 1; diff --git a/src/styles/fatex.scss b/src/styles/fatex.scss index 9a60b950..86f8216d 100644 --- a/src/styles/fatex.scss +++ b/src/styles/fatex.scss @@ -10,6 +10,6 @@ @import "utils/disabled"; @import "utils/effects"; -@import "utils/padding"; @import "utils/position"; @import "utils/sizing"; +@import "utils/spacing"; diff --git a/src/styles/legacy/chat.scss b/src/styles/legacy/chat.scss index 1efb197d..435e7f93 100644 --- a/src/styles/legacy/chat.scss +++ b/src/styles/legacy/chat.scss @@ -33,7 +33,7 @@ transform: translate(-25px, 0px); font-weight: 900; font-size: 24px; - color: $sheet-background; + color: $fatex-sheet-background-color; -webkit-text-stroke: 2px $fatex-primary-color; text-shadow: initial; } diff --git a/src/styles/utils/padding.scss b/src/styles/utils/padding.scss deleted file mode 100644 index a0226363..00000000 --- a/src/styles/utils/padding.scss +++ /dev/null @@ -1,3 +0,0 @@ -.fatex-u-padding-std { - padding: $component-padding; -} diff --git a/src/styles/utils/spacing.scss b/src/styles/utils/spacing.scss new file mode 100644 index 00000000..773c05bf --- /dev/null +++ b/src/styles/utils/spacing.scss @@ -0,0 +1,11 @@ +.fatex-u-padding-std { + padding: $component-padding; +} + +.fatex-u-mb-l { + margin-bottom: 2 * $component-padding; +} + +.fatex-u-mt-std { + margin-top: $component-padding; +} From 7c78e1f487905834cfccc8f7783588305661d117 Mon Sep 17 00:00:00 2001 From: Phil Date: Wed, 14 Jul 2021 03:27:01 +0100 Subject: [PATCH 03/18] Modifies the scrollbar styles so that only FateX sheets and apps are affected. Removes a selector targeting the chat text area. Adds a new selector to target the chat header line. Adds a new SCSS variable for the scrollbar pill colour. --- src/styles/abstract/variables.scss | 1 + src/styles/base/foundry-ui.scss | 4 ++-- src/styles/components/desk.scss | 1 - src/styles/components/scrollbar.scss | 12 ++++++------ 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/styles/abstract/variables.scss b/src/styles/abstract/variables.scss index a7a2922b..64a5ff29 100644 --- a/src/styles/abstract/variables.scss +++ b/src/styles/abstract/variables.scss @@ -22,3 +22,4 @@ $fatex-header-text-color: var(--fatex-header-text-color, $light-text-color); $fatex-primary-color: var(--fatex-primary-color, $primary-color); $fatex-sheet-background-color: var(--fatex-sheet-background-color, $sheet-background); +$fatex-scrollbar-color: var(--fatex-scrollbar-color, $primary-color); diff --git a/src/styles/base/foundry-ui.scss b/src/styles/base/foundry-ui.scss index 3602592d..6dc5207a 100644 --- a/src/styles/base/foundry-ui.scss +++ b/src/styles/base/foundry-ui.scss @@ -4,10 +4,10 @@ .window-app .window-content, #chat-log .message, -#chat-form textarea, #chat-controls div.roll-type-select select, .sidebar-tab .directory-header .header-search input, -#chat-form .cm-s-easymde { +#chat-form .cm-s-easymde, +.chat-message .message-header { background: $fatex-sheet-background-color; color: var(--fatex-primary-text-color, $primary-text-color); } diff --git a/src/styles/components/desk.scss b/src/styles/components/desk.scss index e01bb934..54451736 100644 --- a/src/styles/components/desk.scss +++ b/src/styles/components/desk.scss @@ -19,7 +19,6 @@ &__content { grid-area: content; overflow-y: auto; - scrollbar-width: thin; &--app { padding: $component-padding; diff --git a/src/styles/components/scrollbar.scss b/src/styles/components/scrollbar.scss index ce250015..8c704186 100644 --- a/src/styles/components/scrollbar.scss +++ b/src/styles/components/scrollbar.scss @@ -1,22 +1,22 @@ -::-webkit-scrollbar { +.fatex ::-webkit-scrollbar { width: 6px; } -::-webkit-scrollbar-track { +.fatex ::-webkit-scrollbar-track { box-shadow: 0 0 1px #999 inset; border-radius: 4px; } -::-webkit-scrollbar-thumb { +.fatex ::-webkit-scrollbar-thumb { outline: none; border-radius: 3px; - background: $primary-color !important; + background: $fatex-scrollbar-color !important; border: 0; } -:root { +.fatex * { scrollbar-width: thin !important; - scrollbar-color: $primary-color $fatex-sheet-background-color !important; + scrollbar-color: $fatex-scrollbar-color $fatex-sheet-background-color !important; } input[type="range"]::-webkit-slider-thumb { From 1e7fd23d238a5723a104ffabc212980c4afe7f09 Mon Sep 17 00:00:00 2001 From: Phil Date: Wed, 14 Jul 2021 03:28:27 +0100 Subject: [PATCH 04/18] Adds the default styles to the FatexConfig object for all of the elements which currently have CSS custom properties. --- src/config.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/config.ts b/src/config.ts index ca0e2cd8..8a2160cb 100644 --- a/src/config.ts +++ b/src/config.ts @@ -42,6 +42,9 @@ export interface FatexConfig { global: { useMarkdown: boolean; + defaultStyles: { + [key: string]: string; + } }; } @@ -73,5 +76,12 @@ export const FateX: FatexConfig = { }, global: { useMarkdown: false, + defaultStyles: { + headerBackgroundColor: "#2f3542", + headerTextColor: "#ffffff", + primarySheetColor: "#2f3542", + sheetBackgroundColor: "#f1f2f6", + scrollbarColor: "#2f3542" + } }, }; From 849e026e238b71560326a006a585914ef9668ef5 Mon Sep 17 00:00:00 2001 From: Phil Date: Wed, 14 Jul 2021 03:36:35 +0100 Subject: [PATCH 05/18] Adds a basic implementation of the getData method in the ThemeConfig class. Temporarily disables type checking on the ThemeConfiguration file. Updates the theme-config template to use initial values provided by the ThemeConfig class. Adds currently non-functional buttons for saving a theme, reverting to the default, and closing without making changes. --- .../Configuration/ThemeConfiguration.ts | 11 +- system/templates/apps/theme-config.hbs | 146 ++++++++++++++---- 2 files changed, 124 insertions(+), 33 deletions(-) diff --git a/src/module/components/Configuration/ThemeConfiguration.ts b/src/module/components/Configuration/ThemeConfiguration.ts index 9fe5647f..61617014 100644 --- a/src/module/components/Configuration/ThemeConfiguration.ts +++ b/src/module/components/Configuration/ThemeConfiguration.ts @@ -1,3 +1,5 @@ +// @ts-nocheck + export class ThemeConfig extends FormApplication { static get defaultOptions() { return mergeObject(super.defaultOptions, { @@ -10,8 +12,15 @@ export class ThemeConfig extends FormApplication { } as BaseEntitySheet.Options) } - // @ts-ignore async _updateObject(event, formData) { return; } + + getData(options?: Application.RenderOptions): FormApplication.Data, FormApplication.Options> { + return mergeObject(super.getData(options), CONFIG.FateX.global.defaultStyles); + } + + async close(options?: FormApplication.CloseOptions): Promise { + await super.close(options); + } } diff --git a/system/templates/apps/theme-config.hbs b/system/templates/apps/theme-config.hbs index 40ec33bc..59d20714 100644 --- a/system/templates/apps/theme-config.hbs +++ b/system/templates/apps/theme-config.hbs @@ -1,37 +1,119 @@
-
- -
- - +
+

Header Styles

+ +
+ +
+ + +
-
-
- -
- - +
+ +
+ + +
-
+ + +
+

Other Sheet Styles

+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+
+ +
+ + + +
From 893f26b1ecbc1c7b95a9af929a9b9a6bf89741e2 Mon Sep 17 00:00:00 2001 From: Phil Date: Wed, 14 Jul 2021 05:20:12 +0100 Subject: [PATCH 06/18] Adds the current defined custom properties to the global config so that they can be easily referenced. Updates the getData method in the ThemeConfiguration, allowing it to set the current values for the colour pickers to the values of defined custom properties. If the custom properties are not set, the system falls back to the default styles defined in the global config. --- src/config.ts | 18 +++++++++---- .../Configuration/ThemeConfiguration.ts | 25 ++++++++++++++++++- 2 files changed, 37 insertions(+), 6 deletions(-) diff --git a/src/config.ts b/src/config.ts index 8a2160cb..3e5b5071 100644 --- a/src/config.ts +++ b/src/config.ts @@ -44,7 +44,8 @@ export interface FatexConfig { useMarkdown: boolean; defaultStyles: { [key: string]: string; - } + }; + customProperties: string[] }; } @@ -80,8 +81,15 @@ export const FateX: FatexConfig = { headerBackgroundColor: "#2f3542", headerTextColor: "#ffffff", primarySheetColor: "#2f3542", - sheetBackgroundColor: "#f1f2f6", - scrollbarColor: "#2f3542" - } - }, + scrollbarColor: "#2f3542", + sheetBackgroundColor: "#f1f2f6" + }, + customProperties: [ + "--fatex-header-color", + "--fatex-header-text-color", + "--fatex-primary-color", + "--fatex-scrollbar-color", + "--fatex-sheet-background-color" + ] + } }; diff --git a/src/module/components/Configuration/ThemeConfiguration.ts b/src/module/components/Configuration/ThemeConfiguration.ts index 61617014..433e53cb 100644 --- a/src/module/components/Configuration/ThemeConfiguration.ts +++ b/src/module/components/Configuration/ThemeConfiguration.ts @@ -17,7 +17,30 @@ export class ThemeConfig extends FormApplication { } getData(options?: Application.RenderOptions): FormApplication.Data, FormApplication.Options> { - return mergeObject(super.getData(options), CONFIG.FateX.global.defaultStyles); + const customPropertyValues = Object.values($(":root").css(CONFIG.FateX.global.customProperties)); + const componentNames = Object.keys(CONFIG.FateX.global.defaultStyles); + + // Create a new object where the custom property values are assigned to keys + // matching the component names used in the templates and default styles config. + const customProperties = Object.assign( + ...componentNames.map( + (componentName, i) => ({ [componentName]: customPropertyValues[i] }) + ) + ); + + // Filter out any custom properties which are currently undefined. + const definedCustomProperties = Object.fromEntries( + Object.entries(customProperties).filter(([_, value]) => value !== undefined) + ) + + // Create a new object where the default styles fill in any values not defined + // by CSS custom properties. + const currentValues = mergeObject( + CONFIG.FateX.global.defaultStyles, + definedCustomProperties + ); + + return mergeObject(super.getData(options), currentValues); } async close(options?: FormApplication.CloseOptions): Promise { From a319d9ec44f90554718933ce2edfd52d7267d46c Mon Sep 17 00:00:00 2001 From: Phil Date: Wed, 14 Jul 2021 06:11:47 +0100 Subject: [PATCH 07/18] Adds a new property to the colour selectors indicating the associated css Custom Property. Will be revisiting this, as I don't like that custom properties are defined in three places. Implements the activateListeners method on the ThemeConfig class. Adds an onChange method to update custom properties in real time as the user selects new colours. These changes currently do not persist after reload. --- .../Configuration/ThemeConfiguration.ts | 15 ++++++++++++++- system/templates/apps/theme-config.hbs | 5 +++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/module/components/Configuration/ThemeConfiguration.ts b/src/module/components/Configuration/ThemeConfiguration.ts index 433e53cb..bd9cb080 100644 --- a/src/module/components/Configuration/ThemeConfiguration.ts +++ b/src/module/components/Configuration/ThemeConfiguration.ts @@ -16,6 +16,11 @@ export class ThemeConfig extends FormApplication { return; } + activateListeners(html: JQuery) { + super.activateListeners(html); + html.find(`[type="color"]`).on("change", this.onChange.bind(this)); + } + getData(options?: Application.RenderOptions): FormApplication.Data, FormApplication.Options> { const customPropertyValues = Object.values($(":root").css(CONFIG.FateX.global.customProperties)); const componentNames = Object.keys(CONFIG.FateX.global.defaultStyles); @@ -31,7 +36,7 @@ export class ThemeConfig extends FormApplication { // Filter out any custom properties which are currently undefined. const definedCustomProperties = Object.fromEntries( Object.entries(customProperties).filter(([_, value]) => value !== undefined) - ) + ); // Create a new object where the default styles fill in any values not defined // by CSS custom properties. @@ -43,6 +48,14 @@ export class ThemeConfig extends FormApplication { return mergeObject(super.getData(options), currentValues); } + onChange(event: JQuery.Event) { + const newValue = event.currentTarget.value; + const customProperty = $(event.currentTarget).data("property"); + + // Update the custom property associated with the colour selector to the chosen value. + $(":root").css(`--${customProperty}`, newValue); + } + async close(options?: FormApplication.CloseOptions): Promise { await super.close(options); } diff --git a/system/templates/apps/theme-config.hbs b/system/templates/apps/theme-config.hbs index 59d20714..7cb6593e 100644 --- a/system/templates/apps/theme-config.hbs +++ b/system/templates/apps/theme-config.hbs @@ -17,6 +17,7 @@ name="headerBackgroundColorSelector" value="{{headerBackgroundColor}}" data-edit="headerBackgroundColor" + data-property="fatex-header-color" >
@@ -36,6 +37,7 @@ name="headerTextColorSelector" value="{{headerTextColor}}" data-edit="headerTextColor" + data-property="fatex-header-text-color" > @@ -59,6 +61,7 @@ name="primarySheetColorSelector" value="{{primarySheetColor}}" data-edit="primarySheetColor" + data-property="--fatex-primary-color" > @@ -78,6 +81,7 @@ name="sheetBackgroundColorSelector" value="{{sheetBackgroundColor}}" data-edit="sheetBackgroundColor" + data-property="fatex-sheet-background-color" > @@ -97,6 +101,7 @@ name="scrollbarColorSelector" value="{{scrollbarColor}}" data-edit="scrollbarColor" + data-property="fatex-scrollbar-color" > From bb6a2125ebc6ce938875ba3a052dd7829f9ae77a Mon Sep 17 00:00:00 2001 From: Phil Date: Wed, 14 Jul 2021 06:37:09 +0100 Subject: [PATCH 08/18] Implements the logic and adds a listener for the reset button. --- .../Configuration/ThemeConfiguration.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/module/components/Configuration/ThemeConfiguration.ts b/src/module/components/Configuration/ThemeConfiguration.ts index bd9cb080..34e7db97 100644 --- a/src/module/components/Configuration/ThemeConfiguration.ts +++ b/src/module/components/Configuration/ThemeConfiguration.ts @@ -18,7 +18,9 @@ export class ThemeConfig extends FormApplication { activateListeners(html: JQuery) { super.activateListeners(html); + html.find(`[type="color"]`).on("change", this.onChange.bind(this)); + html.find(`button[name="reset"]`).on("click", this.reset.bind(this)); } getData(options?: Application.RenderOptions): FormApplication.Data, FormApplication.Options> { @@ -56,6 +58,19 @@ export class ThemeConfig extends FormApplication { $(":root").css(`--${customProperty}`, newValue); } + reset() { + // Loop over the custom properties in the config file and set each of them + // to "unset". This will cause the fallback values to take effect, which + // align with the system defaults. + CONFIG.FateX.global.customProperties.forEach(customProperty => { + $(":root").css(customProperty, "unset"); + }) + + // Rerender the sheet so that the default styles will be applied due to the + // lack of set custom properties. + this.render(); + } + async close(options?: FormApplication.CloseOptions): Promise { await super.close(options); } From 5d5b077ce64c98a9cc3fd8a558c8bc7bbf63a4b2 Mon Sep 17 00:00:00 2001 From: Phil Date: Wed, 14 Jul 2021 07:39:13 +0100 Subject: [PATCH 09/18] Adds a condition to the ThemeConfig class' close method to test whether the user's updates should be saved. Implements the _updateObject method on the ThemeConfig class to store the user's colour settings as user flags. Adds listeners for the remaining buttons for the theme config app. --- .../Configuration/ThemeConfiguration.ts | 31 +++++++++++++++++-- system/templates/apps/theme-config.hbs | 2 +- 2 files changed, 30 insertions(+), 3 deletions(-) diff --git a/src/module/components/Configuration/ThemeConfiguration.ts b/src/module/components/Configuration/ThemeConfiguration.ts index 34e7db97..db365261 100644 --- a/src/module/components/Configuration/ThemeConfiguration.ts +++ b/src/module/components/Configuration/ThemeConfiguration.ts @@ -1,6 +1,15 @@ // @ts-nocheck export class ThemeConfig extends FormApplication { + currentStyles: {[key: string]: string | undefined}; + changesSaved: boolean; + + constructor() { + super(); + this.currentStyles = $(":root").css(CONFIG.FateX.global.customProperties); + this.changesSaved = false; + } + static get defaultOptions() { return mergeObject(super.defaultOptions, { title: "Theme Configuration", @@ -12,8 +21,12 @@ export class ThemeConfig extends FormApplication { } as BaseEntitySheet.Options) } - async _updateObject(event, formData) { - return; + async _updateObject(_: Event, formData: Record | undefined): Promise { + const componentNames = Object.keys(CONFIG.FateX.global.defaultStyles); + + componentNames.forEach(async componentName => { + await game.user.setFlag('fatex', componentName, getProperty(formData, componentName)) + }) } activateListeners(html: JQuery) { @@ -21,6 +34,8 @@ export class ThemeConfig extends FormApplication { html.find(`[type="color"]`).on("change", this.onChange.bind(this)); html.find(`button[name="reset"]`).on("click", this.reset.bind(this)); + html.find(`button[name="submit"]`).on("click", this.saveChanges.bind(this)); + html.find(`button[name="cancel"]`).on("click", this.close.bind(this)); } getData(options?: Application.RenderOptions): FormApplication.Data, FormApplication.Options> { @@ -71,7 +86,19 @@ export class ThemeConfig extends FormApplication { this.render(); } + saveChanges(_: JQuery.Event) { + this.changesSaved = true; + } + async close(options?: FormApplication.CloseOptions): Promise { + if (!this.changesSaved) { + // Loops over the user's original property values and undoes any changes + // they've made. Exiting via the save button with prevent this reset. + for (const [property, value] of Object.entries(this.currentStyles)) { + $(":root").css(property, value ?? "unset"); + } + } + await super.close(options); } } diff --git a/system/templates/apps/theme-config.hbs b/system/templates/apps/theme-config.hbs index 7cb6593e..1c31ce5c 100644 --- a/system/templates/apps/theme-config.hbs +++ b/system/templates/apps/theme-config.hbs @@ -109,7 +109,7 @@