From 8c090dbe311bd6c8622a1cf52ecf15b87933be4f Mon Sep 17 00:00:00 2001 From: Oliver Salzburg Date: Sun, 16 Oct 2022 17:07:59 +0200 Subject: [PATCH] fix(ui): Unable to set reset conditions The regular "trigger" UI element is not the correct one to set the reset conditions. We now have an appropriate button for these values. --- .../source/ui/ResetBonfireSettingsUi.ts | 3 +- .../source/ui/ResetReligionSettingsUi.ts | 3 +- .../source/ui/ResetSpaceSettingsUi.ts | 3 +- .../source/ui/ResetTimeSettingsUi.ts | 3 +- .../source/ui/components/MaxButton.ts | 4 +- .../components/SettingTriggerLimitListItem.ts | 31 ++++++++++++ .../source/ui/components/TriggerButton.ts | 2 - .../ui/components/TriggerLimitButton.ts | 48 +++++++++++++++++++ 8 files changed, 88 insertions(+), 9 deletions(-) create mode 100644 packages/userscript/source/ui/components/SettingTriggerLimitListItem.ts create mode 100644 packages/userscript/source/ui/components/TriggerLimitButton.ts diff --git a/packages/userscript/source/ui/ResetBonfireSettingsUi.ts b/packages/userscript/source/ui/ResetBonfireSettingsUi.ts index dbd154f5..5fbea01f 100644 --- a/packages/userscript/source/ui/ResetBonfireSettingsUi.ts +++ b/packages/userscript/source/ui/ResetBonfireSettingsUi.ts @@ -2,6 +2,7 @@ import { ResetBonfireSettings } from "../options/ResetBonfireSettings"; import { SettingTrigger } from "../options/Settings"; import { UserScript } from "../UserScript"; import { IconSettingsPanel } from "./components/IconSettingsPanel"; +import { SettingTriggerLimitListItem } from "./components/SettingTriggerLimitListItem"; import { SettingTriggerListItem } from "./components/SettingTriggerListItem"; export class ResetBonfireSettingsUi extends IconSettingsPanel { @@ -215,7 +216,7 @@ export class ResetBonfireSettingsUi extends IconSettingsPanel { @@ -166,7 +167,7 @@ export class ResetReligionSettingsUi extends IconSettingsPanel { @@ -148,7 +149,7 @@ export class ResetSpaceSettingsUi extends IconSettingsPanel delimiter = false, upgradeIndicator = false ) { - return new SettingTriggerListItem( + return new SettingTriggerLimitListItem( this._host, i18nName, option, diff --git a/packages/userscript/source/ui/ResetTimeSettingsUi.ts b/packages/userscript/source/ui/ResetTimeSettingsUi.ts index 997c8fdd..7039e448 100644 --- a/packages/userscript/source/ui/ResetTimeSettingsUi.ts +++ b/packages/userscript/source/ui/ResetTimeSettingsUi.ts @@ -2,6 +2,7 @@ import { ResetTimeSettings } from "../options/ResetTimeSettings"; import { SettingTrigger } from "../options/Settings"; import { UserScript } from "../UserScript"; import { IconSettingsPanel } from "./components/IconSettingsPanel"; +import { SettingTriggerLimitListItem } from "./components/SettingTriggerLimitListItem"; import { SettingTriggerListItem } from "./components/SettingTriggerListItem"; export class ResetTimeSettingsUi extends IconSettingsPanel { @@ -86,7 +87,7 @@ export class ResetTimeSettingsUi extends IconSettingsPanel { delimiter = false, upgradeIndicator = false ) { - return new SettingTriggerListItem( + return new SettingTriggerLimitListItem( this._host, i18nName, option, diff --git a/packages/userscript/source/ui/components/MaxButton.ts b/packages/userscript/source/ui/components/MaxButton.ts index 5cefb595..451a89c7 100644 --- a/packages/userscript/source/ui/components/MaxButton.ts +++ b/packages/userscript/source/ui/components/MaxButton.ts @@ -24,10 +24,8 @@ export class MaxButton extends UiComponent { ); if (value !== null) { - const limit = SettingsSectionUi.renderLimit(value, host); host.updateSettings(() => (setting.max = value)); - element[0].title = limit; - element[0].innerText = host.engine.i18n("ui.max", [limit]); + this.refreshUi(); } if (handler.onClick) { diff --git a/packages/userscript/source/ui/components/SettingTriggerLimitListItem.ts b/packages/userscript/source/ui/components/SettingTriggerLimitListItem.ts new file mode 100644 index 00000000..85c89f78 --- /dev/null +++ b/packages/userscript/source/ui/components/SettingTriggerLimitListItem.ts @@ -0,0 +1,31 @@ +import { SettingTrigger } from "../../options/Settings"; +import { UserScript } from "../../UserScript"; +import { SettingListItem } from "./SettingListItem"; +import { TriggerLimitButton } from "./TriggerLimitButton"; + +export class SettingTriggerLimitListItem extends SettingListItem { + readonly triggerButton: TriggerLimitButton; + + constructor( + host: UserScript, + label: string, + setting: SettingTrigger, + handler: { + onCheck: () => void; + onUnCheck: () => void; + }, + delimiter = false, + upgradeIndicator = false, + additionalClasses = [] + ) { + super(host, label, setting, handler, delimiter, upgradeIndicator, additionalClasses); + + this.triggerButton = new TriggerLimitButton(host, label, setting); + this.element.append(this.triggerButton.element); + } + + refreshUi() { + super.refreshUi(); + this.triggerButton.refreshUi(); + } +} diff --git a/packages/userscript/source/ui/components/TriggerButton.ts b/packages/userscript/source/ui/components/TriggerButton.ts index 6be6d7b2..2f652f9b 100644 --- a/packages/userscript/source/ui/components/TriggerButton.ts +++ b/packages/userscript/source/ui/components/TriggerButton.ts @@ -4,7 +4,6 @@ import { SettingsSectionUi } from "../SettingsSectionUi"; import { UiComponent } from "./UiComponent"; export class TriggerButton extends UiComponent { - readonly _host: UserScript; readonly setting: SettingTrigger; readonly element: JQuery; @@ -38,7 +37,6 @@ export class TriggerButton extends UiComponent { }); this.element = element; - this._host = host; this.setting = setting; } diff --git a/packages/userscript/source/ui/components/TriggerLimitButton.ts b/packages/userscript/source/ui/components/TriggerLimitButton.ts new file mode 100644 index 00000000..78a8c2b1 --- /dev/null +++ b/packages/userscript/source/ui/components/TriggerLimitButton.ts @@ -0,0 +1,48 @@ +import { SettingTrigger } from "../../options/Settings"; +import { UserScript } from "../../UserScript"; +import { SettingsSectionUi } from "../SettingsSectionUi"; +import { UiComponent } from "./UiComponent"; + +export class TriggerLimitButton extends UiComponent { + readonly setting: SettingTrigger; + readonly element: JQuery; + + constructor( + host: UserScript, + label: string, + setting: SettingTrigger, + handler: { onClick?: () => void } = {} + ) { + super(host); + + const element = $("
").addClass("ks-text-button").addClass("ks-max-button"); + + element.on("click", () => { + const value = SettingsSectionUi.promptLimit( + host.engine.i18n("ui.trigger.set", [label]), + setting.trigger.toString() + ); + + if (value !== null) { + host.updateSettings(() => (setting.trigger = value)); + this.refreshUi(); + } + + if (handler.onClick) { + handler.onClick(); + } + }); + + this.element = element; + this.setting = setting; + } + + refreshUi() { + this.element[0].title = this.setting.trigger.toFixed(); + this.element.text( + this._host.engine.i18n("ui.trigger", [ + SettingsSectionUi.renderLimit(this.setting.trigger, this._host), + ]) + ); + } +}