add settings reset buttons and always show about

CHANGELOG.md

@@ -3,6 +3,7 @@ Added:
 - Ability to change Sidebar gap sizes (#90)
 - Ability to toggle playbar shadow (#92)
 - Uninstall script for MacOs/Linux
+- Reset button for Settings
 
 Fixed:
 - Some sidebar items having wrong width on hover [(this)](https://github.com/JulienMaille/dribbblish-dynamic-theme/issues/87#issuecomment-954305428)
@@ -17,3 +18,4 @@ Improved:
 - Background image now dosen't leak out of the main center area
 - Sidebar playlist icon images are now properly displayed and won't look stretched anymore
 - Better install script for MacOs/Linux
+- `About` settings area is always open now

package.json

@@ -21,6 +21,7 @@
         "chroma-js": "^2.1.2",
         "jquery": "^3.6.0",
         "moment": "^2.29.1",
-        "node-vibrant": "3.1.4"
+        "node-vibrant": "3.1.4",
+        "raw-loader": "^4.0.2"
     }
 }

src/js/ConfigMenu.js

@@ -1,3 +1,5 @@
+import svgUndo from "../svg/undo.svg";
+
 export default class ConfigMenu {
     /**
      * @typedef {Object} DribbblishConfigItem
@@ -23,6 +25,7 @@ export default class ConfigMenu {
      * @typedef DribbblishConfigArea
      * @property {String} name
      * @property {Number} [order=0] order < 0 = Higher up | order > 0 = Lower Down
+     * @property {Boolean} [toggleable=true]
      */
 
     /**
@@ -95,7 +98,10 @@ export default class ConfigMenu {
         elem.setAttribute("hidden", options.hidden);
         if (options.childOf) elem.setAttribute("parent", options.childOf);
         elem.innerHTML = /* html */ `
-            <h2 class="x-settings-title main-type-cello${!options.description ? " no-desc" : ""}" as="h2">${options.name}</h2>
+            <h2 class="x-settings-title main-type-cello${!options.description ? " no-desc" : ""}" as="h2">
+                ${options.name}
+                ${["button"].includes(options.type) ? "" : /* html */ `<button aria-label="Reset" class="dribbblish-config-item-reset main-trackCreditsModal-closeBtn">${svgUndo}</button>`}
+            </h2>
             <label class="main-type-mesto">${options.description.replace(/\n/g, "<br>")}</label>
             <label class="x-toggle-wrapper x-settings-secondColumn">
                 ${options.input}
@@ -107,6 +113,20 @@ export default class ConfigMenu {
         } else {
             parent.appendChild(elem);
         }
+
+        const resetButton = elem.querySelector(".dribbblish-config-item-reset");
+        if (resetButton) {
+            elem.querySelector(".dribbblish-config-item-reset").addEventListener("click", () => {
+                this.reset(options.key);
+                const defaultVal = this.get(options.key);
+                if (options.type == "checkbox") {
+                    elem.querySelector("input").checked = defaultVal;
+                } else {
+                    elem.querySelector("input, select").value = defaultVal;
+                }
+                options.onChange(defaultVal);
+            });
+        }
     }
 
     /**
@@ -306,31 +326,36 @@ export default class ConfigMenu {
      * @param {DribbblishConfigArea} area
      */
     registerArea(area) {
+        if (area.toggleable == null) area.toggleable = true;
+
         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;
             const uncollapsedAreas = JSON.parse(localStorage.getItem("dribbblish:config-areas:uncollapsed") ?? "[]");
-            if (!uncollapsedAreas.includes(area.name)) areaElem.toggleAttribute("collapsed");
+            if (area.toggleable && !uncollapsedAreas.includes(area.name)) areaElem.toggleAttribute("collapsed");
             areaElem.setAttribute("name", area.name);
             areaElem.innerHTML = /* html */ `
                 <h2 class="dribbblish-config-area-header">
                     ${area.name}
-                    <svg height="24" width="24" viewBox="0 0 24 24" class="main-topBar-icon"><polyline points="16 4 7 12 16 20" fill="none" stroke="currentColor"></polyline></svg>
+                    ${!area.toggleable ? "" : /* html */ `<svg height="24" width="24" viewBox="0 0 24 24" class="main-topBar-icon"><polyline points="16 4 7 12 16 20" fill="none" stroke="currentColor"></polyline></svg>`}
                 </h2>
                 <div class="dribbblish-config-area-items"></div>
             `;
             document.querySelector(".dribbblish-config-areas").appendChild(areaElem);
-            areaElem.querySelector("h2").addEventListener("click", () => {
+
-                areaElem.toggleAttribute("collapsed");
+            if (area.toggleable) {
-                let uncollapsedAreas = JSON.parse(localStorage.getItem("dribbblish:config-areas:uncollapsed") ?? "[]");
+                areaElem.querySelector("h2").addEventListener("click", () => {
-                if (areaElem.hasAttribute("collapsed")) {
+                    areaElem.toggleAttribute("collapsed");
-                    uncollapsedAreas = uncollapsedAreas.filter((areaName) => areaName != area.name);
+                    let uncollapsedAreas = JSON.parse(localStorage.getItem("dribbblish:config-areas:uncollapsed") ?? "[]");
-                } else {
+                    if (areaElem.hasAttribute("collapsed")) {
-                    uncollapsedAreas.push(area.name);
+                        uncollapsedAreas = uncollapsedAreas.filter((areaName) => areaName != area.name);
-                }
+                    } else {
-                localStorage.setItem("dribbblish:config-areas:uncollapsed", JSON.stringify(uncollapsedAreas));
+                        uncollapsedAreas.push(area.name);
-            });
+                    }
+                    localStorage.setItem("dribbblish:config-areas:uncollapsed", JSON.stringify(uncollapsedAreas));
+                });
+            }
         }
     }
 

src/js/main.js

@@ -348,7 +348,7 @@ DribbblishShared.config.register({
 // waitForElement because Spicetify is not initialized at startup
 waitForElement(["#main"], () => {
     DribbblishShared.config.register({
-        area: { name: "About", order: 999 },
+        area: { name: "About", order: 999, toggleable: false },
         type: "button",
         key: "aboutDribbblish",
         name: "Info",

src/styles/ConfigMenu.scss

@@ -64,11 +64,12 @@
                     position: relative;
                     text-align: center;
                     height: 38px;
+                    display: flex;
+                    gap: 10px;
+                    align-items: center;
+                    justify-content: center;
 
                     svg {
-                        position: absolute;
-                        margin-left: 10px;
-                        bottom: -2px;
                         color: spiceColor("text");
                         padding: 0px;
                         height: 100%;
@@ -102,6 +103,9 @@
 
                         > {
                             .x-settings-title {
+                                display: flex;
+                                gap: 10px;
+                                align-items: center;
                                 grid-area: header;
                                 margin: 0px;
                                 height: min-content;
@@ -111,6 +115,13 @@
                                 &.no-desc {
                                     bottom: -10px;
                                 }
+
+                                .dribbblish-config-item-reset {
+                                    padding: 0px;
+                                    color: spiceColor("text");
+                                    width: 1em;
+                                    height: 1em;
+                                }
                             }
 
                             .main-type-mesto {

src/svg/undo.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M255.545 8c-66.269.119-126.438 26.233-170.86 68.685L48.971 40.971C33.851 25.851 8 36.559 8 57.941V192c0 13.255 10.745 24 24 24h134.059c21.382 0 32.09-25.851 16.971-40.971l-41.75-41.75c30.864-28.899 70.801-44.907 113.23-45.273 92.398-.798 170.283 73.977 169.484 169.442C423.236 348.009 349.816 424 256 424c-41.127 0-79.997-14.678-110.63-41.556-4.743-4.161-11.906-3.908-16.368.553L89.34 422.659c-4.872 4.872-4.631 12.815.482 17.433C133.798 479.813 192.074 504 256 504c136.966 0 247.999-111.033 248-247.998C504.001 119.193 392.354 7.755 255.545 8z"></path>
+</svg>

webpack.config.js

@@ -42,6 +42,11 @@ module.exports = {
                     filename: "color.ini"
                 },
                 use: [path.resolve(__dirname, "./src/loaders/color-loader.js")]
+            },
+            {
+                test: /\.svg/,
+                exclude: /node_modules/,
+                use: ["raw-loader"]
             }
         ]
     },