Feature/refactor theme customizer

contributing.md

@@ -67,6 +67,7 @@ const Text = require("../../configurables/Text");
 const Color = require("../../configurables/Color");
 const Stepper = require("../../configurables/Stepper");
 const Dropdown = require("../../configurables/Dropdown");
+const LineBreak = require("../../configurables/LineBreak");
 const Option = require("../../models/option.js");
 
 // Util helper to get configurable values
@@ -89,6 +90,7 @@ class MyFeature extends Feature {
                 new Text({ id: "myTextbox", label: "Sub-option value", default: "Secret Setting" }),
                 new Color({id: "myColor", label: "Sub-option color", default: "#ffffff"}),
                 new Stepper({id: "myStepper", label: "Sub-option stepper", step: 2, default: 3}),
+                new LineBreak({}),
                 new Dropdown({id: "myDropdown", label: "Sub-option dropdown", default: 0, dropdownOptions: [
                     new Option(0, "Option 0"),
                     new Option(1, "Option 1")

extension/manifest.json

@@ -85,15 +85,26 @@
     "/assets/images/theme-customizer/logos/logo_pink2.gif",
     "/assets/images/theme-customizer/logos/logo_rainbow.gif",
     "/assets/images/theme-customizer/logos/logo_yellow.gif",
+    "/assets/images/theme-customizer/mosaics/mosaic_blue_azul.png",
+    "/assets/images/theme-customizer/mosaics/mosaic_blue_deep.png",
+    "/assets/images/theme-customizer/mosaics/mosaic_blue_soft.png",
+    "/assets/images/theme-customizer/mosaics/mosaic_creme.png",
+    "/assets/images/theme-customizer/mosaics/mosaic_gold.png",
+    "/assets/images/theme-customizer/mosaics/mosaic_green_blue.png",
+    "/assets/images/theme-customizer/mosaics/mosaic_green_turtle.png",
     "/assets/images/theme-customizer/mosaics/mosaic_cyan.png",
     "/assets/images/theme-customizer/mosaics/mosaic_gray.png",
+    "/assets/images/theme-customizer/mosaics/mosaic_gray2.png",
     "/assets/images/theme-customizer/mosaics/mosaic_magenta.png",
     "/assets/images/theme-customizer/mosaics/mosaic_orange.png",
     "/assets/images/theme-customizer/mosaics/mosaic_orange2.png",
     "/assets/images/theme-customizer/mosaics/mosaic_pink.png",
     "/assets/images/theme-customizer/mosaics/mosaic_pink2.png",
+    "/assets/images/theme-customizer/mosaics/mosaic_purple_hacker.png",
     "/assets/images/theme-customizer/mosaics/mosaic_rainbow.png",
+    "/assets/images/theme-customizer/mosaics/mosaic_red_orange.png",
     "/assets/images/theme-customizer/mosaics/mosaic_yellow.png",
+    "/assets/images/theme-customizer/mosaics/mosaic_yellow_dark.png",
     "/assets/images/emoji.png"
   ]
 }

src/Configurables.js

@@ -3,6 +3,7 @@ module.exports = {
   Color: require("./configurables/Color"),
   Dropdown: require("./configurables/Dropdown"),
   Generic: require("./configurables/Generic"),
+  LineBreak: require("./configurables/LineBreak"),
   Stepper: require("./configurables/Stepper"),
   Text: require("./configurables/Text")
 };

src/configurables/LineBreak.js

@@ -0,0 +1,18 @@
+const Configurable = require("../core/Configurable");
+
+module.exports = class LineBreak extends Configurable {
+  constructor(opts) {
+    console.log(opts);
+    super(Object.assign(opts, {
+      id: "myLineBreak",
+      label: "",
+      type: "lineBreak",
+      default: true
+    }));
+  }
+  render() {
+    return `
+    <hr/>
+    `;
+  }
+};

src/core/ConfigurableArray.js

@@ -1,3 +1,4 @@
+const LineBreak = require("../configurables/LineBreak");
 const Configurable = require("./Configurable");
 
 module.exports = class ConfigurableArray {
@@ -14,15 +15,14 @@ module.exports = class ConfigurableArray {
   }
 
   render(section, feature, settings) {
-    return `
-      <div class="row align-items-center">
-        ${this.configurables.map(configurable => `
-          <div class="col-auto">
-            ${configurable.render(section, feature, settings)}
-          </div>
-        `).join("")}
-      </div>
-    `;
+    return this.configurables.map(configurable => {
+      if (configurable.class === LineBreak.name) {
+        return "<hr>";
+      }
+      return `<div class="row align-items-center"><div class="col-auto">
+      ${configurable.render(section, feature, settings)}
+      </div></div>`;
+    }).join("");
   }
 
   // #region Property Getter/Setters

src/features/convo/ConvoFilters.js

@@ -3,6 +3,7 @@ const Convo = require("../../sections/Convo");
 const ConfigurableArray = require("../../core/ConfigurableArray");
 const Text = require("../../configurables/Text");
 const Checkbox = require("../../configurables/Checkbox");
+const LineBreak = require("../../configurables/LineBreak");
 const Util = require("../../core/Util");
 const Logger = require("../../core/Logger");
 
@@ -15,6 +16,7 @@ class ConvoFilters extends Feature {
       description: "Filter convos by keyword, user, group, and more.",
       configurables: new ConfigurableArray(
         new Text({ id: "ConvoFilterKeywords", label: "Blacklisted Terms (ie. ebook,anime)", default: "" }),
+        new LineBreak({}),
         new Checkbox({ id: "ConvoFilterFlips", label: "Hide Flips", default: false }),
         new Checkbox({ id: "ConvoFilterJackpot", label: "Hide Jackpot", default: false }),
         new Checkbox({ id: "ConvoFilterUsers", label: "Enable User Blacklist", default: true })

src/features/global/ThemeCustomizer.js

@@ -4,6 +4,7 @@ const Global = require("../../sections/Global");
 const ConfigurableArray = require("../../core/ConfigurableArray");
 const Dropdown = require("../../configurables/Dropdown");
 const Checkbox = require("../../configurables/Checkbox");
+const LineBreak = require("../../configurables/LineBreak");
 const Option = require("../../models/option.js");
 const Util = require("../../core/Util");
 
@@ -21,20 +22,34 @@ class ThemeCustomizer extends Feature {
           default: "default",
           dropdownOptions: [
             new Option("default", "Default"),
-            new Option("cyan", "Cyan"),
-            new Option("gray", "Gray"),
+            new Option("blueAzul", "Blue (Azul)"),
+            new Option("cyan", "Blue (Cyan)"),
+            new Option("blueDeep", "Blue (Deep)"),
+            new Option("blueSoft", "Blue (Soft)"),
+            new Option("twitterBlue", "Blue (Twitter)"),
+            new Option("creme", "Creme"),
+            new Option("gold", "Gold"),
+            new Option("gray", "Gray (Dark)"),
+            new Option("grayLight", "Gray (Light)"),
+            new Option("greenBlue", "Green Blue"),
+            new Option("greenTurtle", "Green (Turtle)"),
+            new Option("redLight", "Red (Light)"),
             new Option("magenta", "Magenta"),
             new Option("orange", "Orange"),
             new Option("orange2", "Orange2"),
             new Option("pink", "Pink"),
             new Option("pink2", "Pink2"),
-            new Option("twitterBlue", "Twitter Blue"),
+            new Option("purple", "Purple (Hacker)"),
+            new Option("redOrange", "Red Orange"),
             new Option("rainbow", "Rainbow"),
-            new Option("yellow", "Yellow")
+            new Option("yellow", "Yellow (Bright)"),
+            new Option("yellowDark", "Yellow (Dark)")
           ]}),
+        new LineBreak({}),
         new Checkbox({ id: "tcChangeLogo", label: "Change Logo", default: true }),
         new Checkbox({ id: "tcChangeMosaic", label: "Change Mosaic", default: true }),
         new Checkbox({ id: "tcBackgroundShadow", label: "Enable Background Shadow", default: false }),
+        new LineBreak({}),
         new Dropdown({
           id: "tcLogoImage",
           label: "Previous Logos (Default: uses theme logo)",
@@ -91,6 +106,33 @@ class ThemeCustomizer extends Feature {
     let css = "";
 
     switch (settings["tcThemeName"]) {
+      case "blueAzul":
+        logo = Util.getURL("/assets/images/theme-customizer/logos/logo_cyan.gif");
+        mosaic = Util.getURL("/assets/images/theme-customizer/mosaics/mosaic_blue_azul.png");
+        accentColor = "#2f525d";
+        break;
+      case "blueDeep":
+        logo = Util.getURL("/assets/images/theme-customizer/logos/logo_cyan.gif");
+        mosaic = Util.getURL("/assets/images/theme-customizer/mosaics/mosaic_blue_deep.png");
+        accentColor = "#030C40";
+        break;
+      case "blueSoft":
+        logo = Util.getURL("/assets/images/theme-customizer/logos/logo_cyan.gif");
+        mosaic = Util.getURL("/assets/images/theme-customizer/mosaics/mosaic_blue_soft.png");
+        accentColor = "#153440";
+        break;
+        // TODO: logo
+      case "creme":
+        // logo = Util.getURL("");
+        mosaic = Util.getURL("/assets/images/theme-customizer/mosaics/mosaic_creme.png");
+        accentColor = "#40362A";
+        break;
+        // TODO: logo
+      case "gold":
+        // logo = Util.getURL("");
+        mosaic = Util.getURL("/assets/images/theme-customizer/mosaics/mosaic_gold.png");
+        accentColor = "#3F3602";
+        break;
       case "cyan":
         logo = Util.getURL("/assets/images/theme-customizer/logos/logo_cyan.gif");
         mosaic = Util.getURL("/assets/images/theme-customizer/mosaics/mosaic_cyan.png");
@@ -99,8 +141,26 @@ class ThemeCustomizer extends Feature {
       case "gray":
         logo = Util.getURL("/assets/images/theme-customizer/logos/logo_gray.png");
         mosaic = Util.getURL("/assets/images/theme-customizer/mosaics/mosaic_gray.png");
+        accentColor = "#1C1F26";
+        break;
+        // TODO: logo
+      case "grayLight":
+        // logo = Util.getURL("/assets/images/theme-customizer/logos/logo_gray.png");
+        mosaic = Util.getURL("/assets/images/theme-customizer/mosaics/mosaic_gray2.png");
         accentColor = "#807e7e";
         break;
+        // TODO: logo
+      case "greenBlue":
+        // logo = Util.getURL("/assets/images/theme-customizer/logos/.png");
+        mosaic = Util.getURL("/assets/images/theme-customizer/mosaics/mosaic_green_blue.png");
+        accentColor = "#094026";
+        break;
+        // TODO: logo
+      case "greenTurtle":
+        // logo = Util.getURL("/assets/images/theme-customizer/logos/.png");
+        mosaic = Util.getURL("/assets/images/theme-customizer/mosaics/mosaic_green_turtle.png");
+        accentColor = "#16402C";
+        break;
       case "magenta":
         logo = Util.getURL("/assets/images/theme-customizer/logos/logo_magenta.gif");
         mosaic = Util.getURL("/assets/images/theme-customizer/mosaics/mosaic_magenta.png");
@@ -126,6 +186,17 @@ class ThemeCustomizer extends Feature {
         mosaic = Util.getURL("/assets/images/theme-customizer/mosaics/mosaic_pink2.png");
         accentColor = "#5d2f47";
         break;
+        // TODO: logo
+      case "purple":
+        // logo = Util.getURL("/assets/images/theme-customizer/logos/.gif");
+        mosaic = Util.getURL("/assets/images/theme-customizer/mosaics/mosaic_purple_hacker.png");
+        accentColor = "#360259";
+        break;
+      case "redOrange":
+        logo = Util.getURL("/assets/images/theme-customizer/logos/logo_orange.png");
+        mosaic = Util.getURL("/assets/images/theme-customizer/mosaics/mosaic_red_orange.png");
+        accentColor = "#40150B";
+        break;
       case "twitterBlue":
         logo = Util.getURL("/assets/images/theme-customizer/logos/logo_cyan.gif");
         mosaic = Util.getURL("/assets/images/theme-customizer/mosaics/mosaic_cyan.png");
@@ -142,6 +213,11 @@ class ThemeCustomizer extends Feature {
         mosaic = Util.getURL("/assets/images/theme-customizer/mosaics/mosaic_yellow.png");
         accentColor = "#cab41b";
         break;
+      case "yellowDark":
+        logo = Util.getURL("/assets/images/theme-customizer/logos/logo_yellow.gif");
+        mosaic = Util.getURL("/assets/images/theme-customizer/mosaics/mosaic_yellow_dark.png");
+        accentColor = "#736B06";
+        break;
       default:
         isDefaultTheme = true;
     }