added option to have quick access to settings

CHANGELOG.md

@@ -1,6 +1,7 @@
 Added:
 - `Report Bugs` and `Changelog` buttons to `Settings > About`
 - Markdown parsing for settings descriptions
+- Option to have a button to open the settings next to your profile picture
 
 Fixed:
 - Fonts looking blurry

src/js/Info.js

@@ -8,11 +8,17 @@ export default class Info {
      * @property {String} [text]
      * @property {String} [tooltip]
      * @property {String} [icon]
-     * @property {{fg: String, bg: String}} [color] defaults to {fg: "sidebar-text", bg: "button"}
+     * @property {DribbblishInfoColor} [color]
      * @property {Number} [order=0] order < 0 = More to the Left | order > 0 = More to the Right
      * @property {onClick} [onClick]
      */
 
+    /**
+     * @typedef {Object} DribbblishInfoColor
+     * @property {String} [fg]
+     * @property {String} [bg]
+     */
+
     /**
      * @callback onClick
      * @returns {void}
@@ -58,9 +64,9 @@ export default class Info {
         if (info.tooltip != null) elem.setAttribute("title", info.tooltip);
         if (info.onClick != null) elem.setAttribute("clickable", "");
         if (info.color != null) {
-            const { bg, fg } = info.color;
-            if (bg != null) elem.style.backgroundColor = bg;
+            const { fg, bg } = info.color;
             if (fg != null) elem.style.color = fg;
+            if (bg != null) elem.style.backgroundColor = bg;
         }
         if (info.order != 0) elem.style.order = info.order;
         elem.innerHTML = `${info.text ?? ""}${info.icon ?? ""}`;

src/js/main.js

@@ -10,6 +10,7 @@ import Info from "./Info";
 import svgArrowDown from "svg/arrow-down";
 import svgCode from "svg/code";
 import svgWifiSlash from "svg/wifi-slash";
+import svgCog from "svg/cog";
 
 const Dribbblish = {
     config: new ConfigMenu(),
@@ -18,6 +19,25 @@ const Dribbblish = {
 // To expose to external scripts
 window.Dribbblish = Dribbblish;
 
+Dribbblish.config.register({
+    type: "checkbox",
+    key: "openSettingsInfo",
+    name: "Open Settings Icon",
+    description: "Show an icon next to your profile image to open the dribbblish settings",
+    defaultValue: true,
+    onChange: (val) =>
+        Dribbblish.info[val ? "set" : "remove"]("settings", {
+            icon: svgCog,
+            color: {
+                fg: "var(--spice-subtext)",
+                bg: "rgba(var(--spice-rgb-subtext), calc(0.1 + var(--is_light) * 0.05))"
+            },
+            order: 999,
+            tooltip: "Open Dribbblish Settings",
+            onClick: () => Dribbblish.config.open()
+        })
+});
+
 Dribbblish.config.register({
     type: "checkbox",
     key: "rightBigCover",
@@ -751,7 +771,7 @@ waitForElement([".main-topBar-container"], ([topBarContainer]) => {
             .then((response) => response.json())
             .then((data) => {
                 const isDev = process.env.DRIBBBLISH_VERSION == "Dev";
-                Dribbblish.info.set("upd", isDev || data.tag_name > process.env.DRIBBBLISH_VERSION ? { text: `v${data.tag_name}`, tooltip: "Open Release page to download", icon: svgArrowDown, onClick: () => window.open("https://github.com/JulienMaille/dribbblish-dynamic-theme/releases/latest", "_blank") } : null);
+                Dribbblish.info.set("update", isDev || data.tag_name > process.env.DRIBBBLISH_VERSION ? { text: `v${data.tag_name}`, tooltip: "Open Release page to download", icon: svgArrowDown, onClick: () => window.open("https://github.com/JulienMaille/dribbblish-dynamic-theme/releases/latest", "_blank") } : null);
                 Dribbblish.info.set("dev", isDev ? { tooltip: "Dev build", icon: svgCode } : null);
             })
             .catch(console.error);
@@ -766,7 +786,7 @@ window.addEventListener("offline", () =>
     Dribbblish.info.set("offline", {
         tooltip: "Offline",
         icon: svgWifiSlash,
-        order: 999,
+        order: 998,
         color: {
             fg: "#ffffff",
             bg: "#ff2323"

src/svg/cog.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16">
+    <path fill="currentColor" d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"></path>
+</svg>