add textarea config type, refactor config a bit and improve checkbox styles to be more inline with other inputs

CHANGELOG.md

@@ -6,3 +6,7 @@ Fixed:
 - Fonts looking blurry
 - Notification popups are now visible when the (dribbblish) settings are open
 - Missing settings for on/off times for `Based on Time` dark mode (#107)
+
+Improved:
+- Settings that have been changed from default will now show a line next to them. Inspired by the [Visual Studio Code settings UI](https://d33wubrfki0l68.cloudfront.net/d1f1ea4def506997ced23d3d912154794e530e1c/063d2/assets/img/blog/2020-09-17-vscode-settings/settings-ui.png)
+- Checkbox / Switch input styles are now more in line with other input styles

src/js/ConfigMenu.js

@@ -4,22 +4,22 @@ import MarkdownItAttrs from "markdown-it-attrs";
 
 import svgUndo from "../svg/undo.svg";
 
-const IGNORED_TYPES = ["button"];
-
 export default class ConfigMenu {
     /**
      * @typedef {Object} DribbblishConfigItem
-     * @property {"checkbox" | "select" | "button" | "slider" | "number" | "text" | "time" | "color"} type
+     * @property {"checkbox" | "select" | "button" | "slider" | "number" | "text" | "textarea" | "time" | "color"} type
      * @property {String|DribbblishConfigArea} [area={name: "Main Settings", order: 0}]
      * @property {any} [data={}]
      * @property {Number} [order=0] order < 0 = Higher up | order > 0 = Lower Down
-     * @property {String} [key] defaults to $AREA_$NAME. e.g: About_Info
+     * @property {String} [key] defaults to `${area}_${name]`. e.g: About_Info
      * @property {String} name
      * @property {String} [description=""]
      * @property {any} [defaultValue]
      * @property {Boolean} [hidden=false]
+     * @property {Boolean} [resetButton=true]
      * @property {Boolean} [insertOnTop=false]
      * @property {Boolean} [fireInitialChange=true]
+     * @property {Boolean} [save=true]
      * @property {showChildren} [showChildren]
      * @property {onAppended} [onAppended]
      * @property {onChange} [onChange]
@@ -104,7 +104,7 @@ export default class ConfigMenu {
         const parent = document.querySelector(`.dribbblish-config-area[name="${options.area.name}"] .dribbblish-config-area-items`);
 
         const elem = document.createElement("div");
-        elem.style.order = options.order;
+        if (options.order != 0) elem.style.order = options.order;
         elem.classList.add("dribbblish-config-item");
         elem.setAttribute("key", options.key);
         elem.setAttribute("type", options.type);
@@ -117,7 +117,7 @@ export default class ConfigMenu {
                         <div class="dribbblish-config-item-header">
                             <h2 class="x-settings-title main-type-cello" as="h2" empty="${options.name == null}">
                                 ${options.name}
-                                ${IGNORED_TYPES.includes(options.type) ? "" : /* html */ `<button aria-label="Reset" class="dribbblish-config-item-reset main-trackCreditsModal-closeBtn">${svgUndo}</button>`}
+                                ${options.resetButton ? /* html */ `<button aria-label="Reset" class="dribbblish-config-item-reset main-trackCreditsModal-closeBtn">${svgUndo}</button>` : ""}
                             </h2>
                             <label class="main-type-mesto" empty="${options.description == null}" markdown>${this.md.render(options.description)}</label>
                         </div>
@@ -166,8 +166,11 @@ export default class ConfigMenu {
             data: {},
             name: "",
             description: "",
+            hidden: false,
+            resetButton: true,
             insertOnTop: false,
             fireInitialChange: true,
+            save: true,
             showChildren: () => true,
             onAppended: () => {},
             onChange: () => {},
@@ -185,6 +188,7 @@ export default class ConfigMenu {
             .join("\n");
         options._onChange = options.onChange;
         options.onChange = (val) => {
+            $(`.dribbblish-config-item[key="${options.key}"]`).attr("changed", options.save && val != options.defaultValue ? "" : null);
             options._onChange.call(options, val);
             const show = options.showChildren.call(options, val);
             options.children.forEach((child) => this.setHidden(child.key, Array.isArray(show) ? !show.includes(child.key) : !show));
@@ -205,7 +209,7 @@ export default class ConfigMenu {
             this.addInputHTML({ ...options, input });
 
             $(`#dribbblish-config-input-${options.key}`).on("change", (e) => {
-                this.set(options.key, e.target.checked);
+                this.set(options.key, e.target.checked, options.save);
                 options.onChange(this.get(options.key));
             });
         } else if (options.type == "select") {
@@ -223,12 +227,14 @@ export default class ConfigMenu {
             this.addInputHTML({ ...options, input });
 
             $(`#dribbblish-config-input-${options.key}`).on("change", (e) => {
-                this.set(options.key, e.target.value);
+                this.set(options.key, e.target.value, options.save);
                 options.onChange(this.get(options.key));
             });
         } else if (options.type == "button") {
-            options.fireInitialChange = false;
             if (typeof options.data != "string") options.data = options.name;
+            options.fireInitialChange = false;
+            options.resetButton = false;
+            options.save = false;
 
             const input = /* html */ `
                 <button class="main-buttons-button main-button-primary" type="button" id="dribbblish-config-input-${options.key}">
@@ -246,8 +252,8 @@ export default class ConfigMenu {
             // Validate
             if (options.defaultValue == null) options.defaultValue = 0;
             const val = this.get(options.key);
-            if (options.data.min != null && val < options.data.min) this.set(options.key, options.data.min);
+            if (options.data.min != null && val < options.data.min) this.set(options.key, options.data.min, options.save);
-            if (options.data.max != null && val > options.data.max) this.set(options.key, options.data.max);
+            if (options.data.max != null && val > options.data.max) this.set(options.key, options.data.max, options.save);
 
             const input = /* html */ `
                 <input
@@ -270,7 +276,7 @@ export default class ConfigMenu {
                 if (options.data.min != null && e.target.value < options.data.min) e.target.value = options.data.min;
                 if (options.data.max != null && e.target.value > options.data.max) e.target.value = options.data.max;
 
-                this.set(options.key, Number(e.target.value));
+                this.set(options.key, Number(e.target.value), options.save);
                 options.onChange(this.get(options.key));
             });
         } else if (options.type == "text") {
@@ -283,15 +289,28 @@ export default class ConfigMenu {
 
             $(`#dribbblish-config-input-${options.key}`).on("input", (e) => {
                 // TODO: maybe add an validation function via `data.validate`
-                this.set(options.key, e.target.value);
+                this.set(options.key, e.target.value, options.save);
+                options.onChange(this.get(options.key));
+            });
+        } else if (options.type == "textarea") {
+            if (options.defaultValue == null) options.defaultValue = "";
+
+            const input = /* html */ `
+                <textarea id="dribbblish-config-input-${options.key}">${this.get(options.key)}</textarea>
+            `;
+            this.addInputHTML({ ...options, input });
+
+            $(`#dribbblish-config-input-${options.key}`).on("input", (e) => {
+                // TODO: maybe add an validation function via `data.validate`
+                this.set(options.key, e.target.value, options.save);
                 options.onChange(this.get(options.key));
             });
         } else if (options.type == "slider") {
             // Validate
             if (options.defaultValue == null) options.defaultValue = 0;
             const val = this.get(options.key);
-            if (options.data.min != null && val < options.data.min) this.set(options.key, options.data.min);
+            if (options.data.min != null && val < options.data.min) this.set(options.key, options.data.min, options.save);
-            if (options.data.max != null && val > options.data.max) this.set(options.key, options.data.max);
+            if (options.data.max != null && val > options.data.max) this.set(options.key, options.data.max, options.save);
 
             const input = /* html */ `
                 <input
@@ -311,7 +330,7 @@ export default class ConfigMenu {
                 $(`#dribbblish-config-input-${options.key}`).attr("tooltip", `${e.target.value}${options.data?.suffix ?? ""}`);
                 $(`#dribbblish-config-input-${options.key}`).attr("value", e.target.value);
 
-                this.set(options.key, Number(e.target.value));
+                this.set(options.key, Number(e.target.value), options.save);
                 options.onChange(this.get(options.key));
             });
         } else if (options.type == "time") {
@@ -325,7 +344,7 @@ export default class ConfigMenu {
             $(`#dribbblish-config-input-${options.key}`).on("input", (e) => {
                 $(`#dribbblish-config-input-${options.key}`).attr("value", e.target.value);
 
-                this.set(options.key, e.target.value);
+                this.set(options.key, e.target.value, options.save);
                 options.onChange(this.get(options.key));
             });
         } else if (options.type == "color") {
@@ -337,13 +356,18 @@ export default class ConfigMenu {
             this.addInputHTML({ ...options, input });
 
             $(`#dribbblish-config-input-${options.key}`).on("input", (e) => {
-                this.set(options.key, e.target.value);
+                this.set(options.key, e.target.value, options.save);
                 options.onChange(this.get(options.key));
             });
         } else {
             throw new Error(`Config Type "${options.type}" invalid`);
         }
 
+        // Re-write internal config since some values may have changed
+        this.#config[options.key] = options;
+
+        $(`.dribbblish-config-item[key="${options.key}"]`).attr("changed", options.save && this.get(options.key) != options.defaultValue ? "" : null);
+
         options.children.forEach((child) => this.register(child));
 
         options.onAppended.call(options);
@@ -354,12 +378,17 @@ export default class ConfigMenu {
      * @param {DribbblishConfigArea} area
      */
     registerArea(area) {
-        if (area.toggleable == null) area.toggleable = true;
+        /** @type {DribbblishConfigArea} */
+        const defaultOptions = {
+            toggleable: true,
+            order: 0
+        };
+        area = { ...defaultOptions, ...area };
 
         if (!document.querySelector(`.dribbblish-config-area[name="${area.name}"]`)) {
             const areaElem = document.createElement("div");
             areaElem.classList.add("dribbblish-config-area");
-            areaElem.style.order = area.order;
+            if (area.order != 0) areaElem.style.order = area.order;
             const uncollapsedAreas = JSON.parse(localStorage.getItem("dribbblish:config-areas:uncollapsed") ?? "[]");
             if (area.toggleable && !uncollapsedAreas.includes(area.name)) areaElem.toggleAttribute("collapsed");
             areaElem.setAttribute("name", area.name);
@@ -406,11 +435,12 @@ export default class ConfigMenu {
      *
      * @param {String} key
      * @param {any} val
+     * @param {Boolean} [save=true] if setting should be stored in localStorage
      */
-    set(key, val) {
+    set(key, val, save = true) {
         val = { type: this.#config[key].type, value: val ?? this.#config[key].defaultValue };
         this.#config[key].storageCache = JSON.stringify(val);
-        localStorage.setItem(`dribbblish:config:${key}`, JSON.stringify(val));
+        if (save) localStorage.setItem(`dribbblish:config:${key}`, JSON.stringify(val));
     }
 
     /**
@@ -429,7 +459,7 @@ export default class ConfigMenu {
      */
     setHidden(key, hidden) {
         this.#config[key].hidden = hidden;
-        document.querySelector(`.dribbblish-config-item[key="${key}"]`).toggleAttribute("hidden", hidden);
+        $(`.dribbblish-config-item[key="${key}"]`).attr("hidden", hidden ? "" : null);
     }
 
     getOptions(key) {
@@ -437,10 +467,11 @@ export default class ConfigMenu {
     }
 
     export() {
-        const obj = {};
+        const obj = {
-        Object.entries(this.#config).forEach(([key, val]) => {
+            EXPORTED_WITH: process.env.DRIBBBLISH_VERSION
-            if (IGNORED_TYPES.includes(val.type)) return;
+        };
-            obj[key] = this.get(key);
+        Object.entries(this.#config).forEach(([key, options]) => {
+            if (options.save) obj[key] = this.get(key);
         });
 
         return obj;

src/styles/ConfigMenu.scss

@@ -108,6 +108,16 @@
                             padding-left: 16px;
                         }
 
+                        &[changed]::before {
+                            content: "";
+                            position: absolute;
+                            left: -13px;
+                            top: -3px;
+                            bottom: -3px;
+                            width: 3px;
+                            background-color: spiceColor("sidebar");
+                        }
+
                         .dribbblish-config-item-header {
                             display: flex;
                             flex-direction: column;

src/styles/Inputs.scss

@@ -11,17 +11,54 @@ button.main-button-primary {
     }
 }
 
-input,
+// Checkbox
-textarea {
+.x-toggle-indicatorWrapper {
+    background-color: spiceColor("subtext", 0.1);
+
+    input:hover ~ & {
+        background-color: spiceColor("subtext", 0.15) !important;
+    }
+
+    input:checked ~ & {
+        background-color: spiceColor("selected-row", 0.4) !important;
+    }
+
+    input:hover:checked ~ & {
+        background-color: spiceColor("selected-row", 0.6) !important;
+    }
+}
+
+textarea,
+select,
+input {
     background-color: spiceColor("selected-row", 0.4) !important;
     border-radius: 4px !important;
-    padding: 6px 10px 6px 48px;
+    color: spiceColor("subtext") !important;
-    color: spiceColor("text") !important;
+    outline: none;
+    border: none;
 
     &:hover,
     &:active {
         background-color: spiceColor("selected-row", 0.6) !important;
     }
+}
+
+textarea {
+    padding: 6px 10px;
+}
+
+select {
+    background-color: spiceColor("selected-row", 0.4) !important;
+    color: spiceColor("subtext");
+
+    &:hover,
+    &:active {
+        background-color: spiceColor("selected-row", 0.6) !important;
+    }
+}
+
+input {
+    padding: 6px 10px 6px 48px;
 
     &[type="range"] {
         -webkit-appearance: none;
@@ -66,10 +103,6 @@ textarea {
             }
         }
 
-        &:focus {
-            outline: none;
-        }
-
         &::-webkit-slider-runnable-track {
             width: 100%;
             height: 8px;
@@ -82,10 +115,8 @@ textarea {
     &[type="text"],
     &[type="time"] {
         height: 32px;
-        border: none;
         border-radius: 4px !important;
         padding: 0px 10px;
-        color: spiceColor("subtext") !important;
     }
 
     &[type="time"] {
@@ -97,7 +128,6 @@ textarea {
     &[type="color"] {
         position: relative;
         padding: 0px;
-        border: none;
 
         &::before {
             z-index: -1;

src/styles/main.scss

@@ -475,24 +475,6 @@ html.sidebar-hide-text .GlueDropTarget span {
     display: none;
 }
 
-.x-toggle-indicatorWrapper {
-    background-color: transparent;
-    backdrop-filter: invert(0.25);
-}
-
-input:checked ~ .x-toggle-indicatorWrapper {
-    background-color: spiceColor("button", 0.4);
-}
-
-input:hover:checked ~ .x-toggle-indicatorWrapper {
-    background-color: spiceColor("button", 0.5) !important;
-}
-
-input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper {
-    background-color: transparent;
-    backdrop-filter: invert(0.4);
-}
-
 /** */
 .main-topBar-historyButtons .main-topBar-button {
     background-color: unset;
@@ -1146,17 +1128,6 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
     border-radius: 5px;
 }
 
-.main-dropDown-dropDown,
-.x-sortBox-sortDropdown {
-    background-color: spiceColor("selected-row", 0.4) !important;
-    color: spiceColor("subtext");
-}
-
-.main-dropDown-dropDown:hover,
-.x-sortBox-sortDropdown:hover {
-    background-color: spiceColor("selected-row", 0.6) !important;
-}
-
 .connect-device-list-item:focus,
 .connect-device-list-item:hover {
     background-color: spiceColor("selected-row", 0.3);
@@ -1272,6 +1243,8 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
     height: 100%;
 }
 
+// ! WORKAROUNDS / TEMP FIXES
+// Spotify UI breaks after advertisements #63
 canvas[width="250"][height="250"] {
     display: none;
 }
@@ -1279,5 +1252,5 @@ canvas[width="250"][height="250"] {
 // workaround to remove gradient near album info #103
 .main-trackInfo-container > div > div:before,
 .main-trackInfo-container > div > div:after {
-	display: none;
+    display: none;
 }