feat(ui): More subtle dividers

oliversalzburg · Jul 17, 2021 · 8f1c1c6 · 8f1c1c6
1 parent 73ac39d
commit 8f1c1c6
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 182 deletions.
diff --git a/packages/userscript/source/ui/BonfireSettingsUi.ts b/packages/userscript/source/ui/BonfireSettingsUi.ts
@@ -26,7 +26,7 @@ export class BonfireSettingsUi extends SettingsSectionUi<BonfireSettings> {
     const itext = ucfirst(this._host.i18n("ui.build"));
 
     // Our main element is a list item.
-    const element = $("<li/>", { id: `ks-${toggleName}` });
+    const element = this._getSettingsPanel(toggleName);
 
     const label = $("<label/>", {
       text: itext,
@@ -78,23 +78,9 @@ export class BonfireSettingsUi extends SettingsSectionUi<BonfireSettings> {
 
     // Create build items.
     // We create these in a list that is displayed when the user clicks the "items" button.
-    const list = this.getOptionHead(toggleName);
-
-    // Add a border on the element
-    element.css("borderBottom", "1px  solid rgba(185, 185, 185, 0.7)");
-
-    this._itemsButton = $("<div/>", {
-      id: `toggle-items-${toggleName}`,
-      text: "+",
-      title: this._host.i18n("ui.itemsShow"),
-      css: {
-        cursor: "pointer",
-        display: "inline-block",
-        float: "right",
-        paddingRight: "5px",
-      },
-    });
+    const list = this._getOptionHead(toggleName);
 
+    this._itemsButton = this._getItemsToggle(toggleName);
     this._itemsButton.on("click", () => {
       list.toggle();
 

diff --git a/packages/userscript/source/ui/CraftSettingsUi.ts b/packages/userscript/source/ui/CraftSettingsUi.ts
@@ -29,7 +29,7 @@ export class CraftSettingsUi extends SettingsSectionUi<CraftSettings> {
     const itext = ucfirst(this._host.i18n("ui.craft"));
 
     // Our main element is a list item.
-    const element = $("<li/>", { id: `ks-${toggleName}` });
+    const element = this._getSettingsPanel(toggleName);
 
     const label = $("<label/>", {
       text: itext,
@@ -82,22 +82,9 @@ export class CraftSettingsUi extends SettingsSectionUi<CraftSettings> {
 
     // Create build items.
     // We create these in a list that is displayed when the user clicks the "items" button.
-    const list = this.getOptionHead(toggleName);
-
-    // Add a border on the element
-    element.css("borderBottom", "1px  solid rgba(185, 185, 185, 0.7)");
-
-    this._itemsButton = $("<div/>", {
-      id: `toggle-items-${toggleName}`,
-      text: "+",
-      css: {
-        cursor: "pointer",
-        display: "inline-block",
-        float: "right",
-        paddingRight: "5px",
-      },
-    });
+    const list = this._getOptionHead(toggleName);
 
+    this._itemsButton = this._getItemsToggle(toggleName);
     this._itemsButton.on("click", () => {
       list.toggle();
 

diff --git a/packages/userscript/source/ui/DistributeSettingsUi.ts b/packages/userscript/source/ui/DistributeSettingsUi.ts
@@ -25,7 +25,7 @@ export class DistributeSettingsUi extends SettingsSectionUi<DistributeSettings>
     const itext = ucfirst(this._host.i18n("ui.distribute"));
 
     // Our main element is a list item.
-    const element = $("<li/>", { id: `ks-${toggleName}` });
+    const element = this._getSettingsPanel(toggleName);
 
     const label = $("<label/>", {
       text: itext,
@@ -52,22 +52,9 @@ export class DistributeSettingsUi extends SettingsSectionUi<DistributeSettings>
 
     // Create build items.
     // We create these in a list that is displayed when the user clicks the "items" button.
-    const list = this.getOptionHead(toggleName);
-
-    // Add a border on the element
-    element.css("borderBottom", "1px  solid rgba(185, 185, 185, 0.7)");
-
-    this._itemsButton = $("<div/>", {
-      id: `toggle-items-${toggleName}`,
-      text: "+",
-      css: {
-        cursor: "pointer",
-        display: "inline-block",
-        float: "right",
-        paddingRight: "5px",
-      },
-    });
+    const list = this._getOptionHead(toggleName);
 
+    this._itemsButton = this._getItemsToggle(toggleName);
     this._itemsButton.on("click", () => {
       list.toggle();
 

diff --git a/packages/userscript/source/ui/FilterSettingsUi.ts b/packages/userscript/source/ui/FilterSettingsUi.ts
@@ -25,7 +25,7 @@ export class FiltersSettingsUi extends SettingsSectionUi<FilterSettings> {
     const itext = ucfirst(this._host.i18n("ui.filter"));
 
     // Our main element is a list item.
-    const element = $("<li/>", { id: `ks-${toggleName}` });
+    const element = this._getSettingsPanel(toggleName);
 
     const label = $("<label/>", {
       text: itext,
@@ -52,22 +52,9 @@ export class FiltersSettingsUi extends SettingsSectionUi<FilterSettings> {
 
     // Create build items.
     // We create these in a list that is displayed when the user clicks the "items" button.
-    const list = this.getOptionHead(toggleName);
-
-    // Add a border on the element
-    element.css("borderBottom", "1px  solid rgba(185, 185, 185, 0.7)");
-
-    this._itemsButton = $("<div/>", {
-      id: `toggle-items-${toggleName}`,
-      text: "+",
-      css: {
-        cursor: "pointer",
-        display: "inline-block",
-        float: "right",
-        paddingRight: "5px",
-      },
-    });
+    const list = this._getOptionHead(toggleName);
 
+    this._itemsButton = this._getItemsToggle(toggleName);
     this._itemsButton.on("click", () => {
       list.toggle();
 

diff --git a/packages/userscript/source/ui/OptionsSettingsUi.ts b/packages/userscript/source/ui/OptionsSettingsUi.ts
@@ -25,7 +25,7 @@ export class OptionsSettingsUi extends SettingsSectionUi<OptionsSettings> {
     const itext = ucfirst(this._host.i18n("ui.options"));
 
     // Our main element is a list item.
-    const element = $("<li/>", { id: `ks-${toggleName}` });
+    const element = this._getSettingsPanel(toggleName);
 
     const label = $("<label/>", {
       text: itext,
@@ -52,22 +52,9 @@ export class OptionsSettingsUi extends SettingsSectionUi<OptionsSettings> {
 
     // Create build items.
     // We create these in a list that is displayed when the user clicks the "items" button.
-    const list = this.getOptionHead(toggleName);
-
-    // Add a border on the element
-    element.css("borderBottom", "1px  solid rgba(185, 185, 185, 0.7)");
-
-    this._itemsButton = $("<div/>", {
-      id: `toggle-items-${toggleName}`,
-      text: "+",
-      css: {
-        cursor: "pointer",
-        display: "inline-block",
-        float: "right",
-        paddingRight: "5px",
-      },
-    });
+    const list = this._getOptionHead(toggleName);
 
+    this._itemsButton = this._getItemsToggle(toggleName);
     this._itemsButton.on("click", () => {
       list.toggle();
 

diff --git a/packages/userscript/source/ui/ReligionSettingsUi.ts b/packages/userscript/source/ui/ReligionSettingsUi.ts
@@ -27,7 +27,7 @@ export class ReligionSettingsUi extends SettingsSectionUi<ReligionSettings> {
     const itext = ucfirst(this._host.i18n("ui.faith"));
 
     // Our main element is a list item.
-    const element = $("<li/>", { id: `ks-${toggleName}` });
+    const element = this._getSettingsPanel(toggleName);
 
     const label = $("<label/>", {
       text: itext,
@@ -80,22 +80,9 @@ export class ReligionSettingsUi extends SettingsSectionUi<ReligionSettings> {
 
     // Create build items.
     // We create these in a list that is displayed when the user clicks the "items" button.
-    const list = this.getOptionHead(toggleName);
-
-    // Add a border on the element
-    element.css("borderBottom", "1px  solid rgba(185, 185, 185, 0.7)");
-
-    this._itemsButton = $("<div/>", {
-      id: `toggle-items-${toggleName}`,
-      text: "+",
-      css: {
-        cursor: "pointer",
-        display: "inline-block",
-        float: "right",
-        paddingRight: "5px",
-      },
-    });
+    const list = this._getOptionHead(toggleName);
 
+    this._itemsButton = this._getItemsToggle(toggleName);
     this._itemsButton.on("click", () => {
       list.toggle();
 

diff --git a/packages/userscript/source/ui/SettingsSectionUi.ts b/packages/userscript/source/ui/SettingsSectionUi.ts
@@ -16,7 +16,31 @@ export abstract class SettingsSectionUi<TState> {
   abstract setState(state: TState): void;
   abstract refreshUi(): void;
 
-  protected getOptionHead(toggleName: string): JQuery<HTMLElement> {
+  protected _getSettingsPanel(id: string): JQuery<HTMLElement> {
+    const element = $("<li/>", { id: `ks-${id}` });
+    // Add a border on the element
+    element.css("borderBottom", "1px  solid rgba(185, 185, 185, 0.2)");
+    return element;
+  }
+
+  protected _getItemsToggle(id: string): JQuery<HTMLElement> {
+    return $("<div/>", {
+      id: `toggle-items-${id}`,
+      text: "+",
+      title: this._host.i18n("ui.itemsShow"),
+      css: {
+        border: "1px solid rgba(255, 255, 255, 0.2)",
+        cursor: "pointer",
+        display: "inline-block",
+        float: "right",
+        minWidth: "10px",
+        padding: "0px 3px",
+        textAlign: "center",
+      },
+    });
+  }
+
+  protected _getOptionHead(toggleName: string): JQuery<HTMLElement> {
     const containerList = $("<ul/>", {
       id: `items-list-${toggleName}`,
       css: { display: "none", paddingLeft: "20px", paddingTop: "4px" },

diff --git a/packages/userscript/source/ui/SpaceSettingsUi.ts b/packages/userscript/source/ui/SpaceSettingsUi.ts
@@ -26,7 +26,7 @@ export class SpaceSettingsUi extends SettingsSectionUi<SpaceSettings> {
     const itext = ucfirst(this._host.i18n("ui.space"));
 
     // Our main element is a list item.
-    const element = $("<li/>", { id: `ks-${toggleName}` });
+    const element = this._getSettingsPanel(toggleName);
 
     const label = $("<label/>", {
       text: itext,
@@ -79,22 +79,9 @@ export class SpaceSettingsUi extends SettingsSectionUi<SpaceSettings> {
 
     // Create build items.
     // We create these in a list that is displayed when the user clicks the "items" button.
-    const list = this.getOptionHead(toggleName);
-
-    // Add a border on the element
-    element.css("borderBottom", "1px  solid rgba(185, 185, 185, 0.7)");
-
-    this._itemsButton = $("<div/>", {
-      id: `toggle-items-${toggleName}`,
-      text: "+",
-      css: {
-        cursor: "pointer",
-        display: "inline-block",
-        float: "right",
-        paddingRight: "5px",
-      },
-    });
+    const list = this._getOptionHead(toggleName);
 
+    this._itemsButton = this._getItemsToggle(toggleName);
     this._itemsButton.on("click", () => {
       list.toggle();
 

diff --git a/packages/userscript/source/ui/TimeControlSettingsUi.ts b/packages/userscript/source/ui/TimeControlSettingsUi.ts
@@ -31,7 +31,7 @@ export class TimeControlSettingsUi extends SettingsSectionUi<TimeControlSettings
     const itext = ucfirst(this._host.i18n("ui.timeCtrl"));
 
     // Our main element is a list item.
-    const element = $("<li/>", { id: `ks-${toggleName}` });
+    const element = this._getSettingsPanel(toggleName);
 
     const label = $("<label/>", {
       text: itext,
@@ -58,22 +58,9 @@ export class TimeControlSettingsUi extends SettingsSectionUi<TimeControlSettings
 
     // Create build items.
     // We create these in a list that is displayed when the user clicks the "items" button.
-    const list = this.getOptionHead(toggleName);
-
-    // Add a border on the element
-    element.css("borderBottom", "1px  solid rgba(185, 185, 185, 0.7)");
-
-    this._itemsButton = $("<div/>", {
-      id: `toggle-items-${toggleName}`,
-      text: "+",
-      css: {
-        cursor: "pointer",
-        display: "inline-block",
-        float: "right",
-        paddingRight: "5px",
-      },
-    });
+    const list = this._getOptionHead(toggleName);
 
+    this._itemsButton = this._getItemsToggle(toggleName);
     this._itemsButton.on("click", () => {
       list.toggle();
 
@@ -250,7 +237,7 @@ export class TimeControlSettingsUi extends SettingsSectionUi<TimeControlSettings
     const element = this.getOption(name, option, label);
 
     // Bonfire reset options
-    const resetBuildList = this.getOptionHead("reset-build");
+    const resetBuildList = this._getOptionHead("reset-build");
     resetBuildList.append(
       this._getResetOption(
         "hut",
@@ -515,7 +502,7 @@ export class TimeControlSettingsUi extends SettingsSectionUi<TimeControlSettings
     );
 
     // Space reset options
-    const resetSpaceList = this.getOptionHead("reset-space");
+    const resetSpaceList = this._getOptionHead("reset-space");
     resetSpaceList.append(
       this._getResetOption(
         "spaceElevator",
@@ -683,7 +670,7 @@ export class TimeControlSettingsUi extends SettingsSectionUi<TimeControlSettings
     }
 
     // Religion reset options.
-    const resetReligionList = this.getOptionHead("reset-religion");
+    const resetReligionList = this._getOptionHead("reset-religion");
     resetReligionList.append(
       this._getResetOption(
         "unicornPasture",
@@ -873,7 +860,7 @@ export class TimeControlSettingsUi extends SettingsSectionUi<TimeControlSettings
       )
     );
 
-    const resetTimeList = this.getOptionHead("reset-time");
+    const resetTimeList = this._getOptionHead("reset-time");
     resetTimeList.append(
       this._getResetOption(
         "temporalBattery",

diff --git a/packages/userscript/source/ui/TimeSettingsUi.ts b/packages/userscript/source/ui/TimeSettingsUi.ts
@@ -26,7 +26,7 @@ export class TimeSettingsUi extends SettingsSectionUi<TimeSettings> {
     const itext = ucfirst(this._host.i18n("ui.time"));
 
     // Our main element is a list item.
-    const element = $("<li/>", { id: `ks-${toggleName}` });
+    const element = this._getSettingsPanel(toggleName);
 
     const label = $("<label/>", {
       text: itext,
@@ -79,22 +79,9 @@ export class TimeSettingsUi extends SettingsSectionUi<TimeSettings> {
 
     // Create build items.
     // We create these in a list that is displayed when the user clicks the "items" button.
-    const list = this.getOptionHead(toggleName);
-
-    // Add a border on the element
-    element.css("borderBottom", "1px  solid rgba(185, 185, 185, 0.7)");
-
-    this._itemsButton = $("<div/>", {
-      id: `toggle-items-${toggleName}`,
-      text: "+",
-      css: {
-        cursor: "pointer",
-        display: "inline-block",
-        float: "right",
-        paddingRight: "5px",
-      },
-    });
+    const list = this._getOptionHead(toggleName);
 
+    this._itemsButton = this._getItemsToggle(toggleName);
     this._itemsButton.on("click", () => {
       list.toggle();