diff --git a/src/icons/chevron-down.light.svg b/src/icons/chevron-down.light.svg new file mode 100644 index 0000000..a66a34d --- /dev/null +++ b/src/icons/chevron-down.light.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/icons/chevron-down.svg b/src/icons/chevron-down.svg new file mode 100644 index 0000000..70ddaf9 --- /dev/null +++ b/src/icons/chevron-down.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/icons/times.light.svg b/src/icons/times.light.svg new file mode 100644 index 0000000..a2a32db --- /dev/null +++ b/src/icons/times.light.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/js/ConfigMenu.js b/src/js/ConfigMenu.js index 676534f..3c34525 100644 --- a/src/js/ConfigMenu.js +++ b/src/js/ConfigMenu.js @@ -2,6 +2,8 @@ import $ from "jquery"; import { renderMD } from "./Util"; +import iconTimesLight from "icon/times.light"; +import iconChevronDown from "icon/chevron-down"; import iconUndo from "icon/undo"; export default class ConfigMenu { @@ -77,9 +79,7 @@ export default class ConfigMenu { container.id = "dribbblish-config"; container.innerHTML = /* html */ `
- +

Dribbblish Settings

@@ -122,7 +122,7 @@ export default class ConfigMenu {

${options.name} - ${options.resetButton ? /* html */ `` : ""} + ${options.resetButton ? /* html */ `` : ""}

@@ -411,7 +411,7 @@ export default class ConfigMenu { areaElem.innerHTML = /* html */ `

${area.name} - ${!area.toggleable ? "" : /* html */ ``} + ${!area.toggleable ? "" : iconChevronDown({ size: 18 })}

`; diff --git a/src/js/Folders.js b/src/js/Folders.js index 16ba0ae..6769041 100644 --- a/src/js/Folders.js +++ b/src/js/Folders.js @@ -30,7 +30,7 @@ waitForElement([`.main-rootlist-rootlistPlaylistsScrollNode ul[tabindex="0"]`, ` if (!link.querySelector("img")) elem = document.createElement("img"); elem.src = picture; } else { - if (!link.querySelector("svg")) elem = htmlToNode(iconNote.replace(/<\/svg>/, `${title}$1`)); + if (!link.querySelector("svg")) elem = htmlToNode(iconNote().replace(/<\/svg>/, `${title}$1`)); } } else if (app === "folder") { const base64 = localStorage.getItem("dribbblish:folder-image:" + uid); @@ -38,7 +38,7 @@ waitForElement([`.main-rootlist-rootlistPlaylistsScrollNode ul[tabindex="0"]`, ` if (!link.querySelector("img")) elem = document.createElement("img"); elem.src = base64; } else { - if (!link.querySelector("svg")) elem = htmlToNode(iconFolder.replace(/<\/svg>/, `${title}$1`)); + if (!link.querySelector("svg")) elem = htmlToNode(iconFolder().replace(/<\/svg>/, `${title}$1`)); } } else { continue; diff --git a/src/js/main.js b/src/js/main.js index d4eb77d..268baad 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -42,7 +42,7 @@ Dribbblish.on("ready", () => { defaultValue: true, onChange: (val) => Dribbblish.info[val ? "set" : "remove"]("settings", { - icon: iconCog, + icon: iconCog(), color: { fg: "var(--spice-subtext)", bg: "rgba(var(--spice-rgb-subtext), calc(0.1 + var(--is_light) * 0.05))" @@ -808,8 +808,8 @@ Dribbblish.on("ready", () => { .then((response) => response.json()) .then((data) => { const isDev = process.env.DRIBBBLISH_VERSION == "Dev"; - Dribbblish.info.set("update", isDev || data.tag_name > process.env.DRIBBBLISH_VERSION ? { text: `v${data.tag_name}`, tooltip: "Open Release page to download", icon: iconArrowDown, onClick: () => window.open("https://github.com/JulienMaille/dribbblish-dynamic-theme/releases/latest", "_blank") } : null); - Dribbblish.info.set("dev", isDev ? { tooltip: "Dev build", icon: iconCode } : 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: iconArrowDown(), onClick: () => window.open("https://github.com/JulienMaille/dribbblish-dynamic-theme/releases/latest", "_blank") } : null); + Dribbblish.info.set("dev", isDev ? { tooltip: "Dev build", icon: iconCode() } : null); }) .catch(console.error); } @@ -821,7 +821,7 @@ Dribbblish.on("ready", () => { window.addEventListener("offline", () => Dribbblish.info.set("offline", { tooltip: "Offline", - icon: iconWifiSlash, + icon: iconWifiSlash(), order: 998, color: { fg: "#ffffff", diff --git a/src/loaders/icon-loader.js b/src/loaders/icon-loader.js index b506183..28b1c33 100644 --- a/src/loaders/icon-loader.js +++ b/src/loaders/icon-loader.js @@ -1,22 +1,30 @@ -const { parseSync: parseSVG, stringify: stringifySVG } = require("svgson"); +module.exports = function (source) { + return ` + module.exports = function(options) { + const { parseSync: parseSVG, stringify: stringifySVG } = require("svgson"); -module.exports = function (content, map, meta) { - const query = new URLSearchParams(this.resourceQuery); - const svg = parseSVG(content); + const defaultOptions = { + size: 16, + base64: false + }; + options = { ...defaultOptions, ...options }; + const svg = parseSVG(\`${source}\`); - svg.attributes.type = "icon"; - svg.attributes.width = query.get("width") ?? 16; - svg.attributes.height = query.get("height") ?? 16; + svg.attributes.type = "icon"; + svg.attributes.width = options.size ?? options.width; + svg.attributes.height = options.size ?? options.height; - svg.children = svg.children.map((c) => { - if (c.attributes.fill != null && query.has("fill")) c.attributes.fill = query.get("fill"); - return c; - }); + svg.children = svg.children.map((c) => { + if (c.attributes.fill != null && options.fill != null) c.attributes.fill = options.fill; + return c; + }); - const svgStr = stringifySVG(svg); - if (query.has("base64")) { - return `data:image/svg+xml;base64,${Buffer.from(svgStr).toString("base64")}`; - } else { - return svgStr; - } + const svgStr = stringifySVG(svg); + if (options.base64) { + return \`data:image/svg+xml;base64,\${Buffer.from(svgStr).toString("base64")}\`; + } else { + return svgStr; + } + } + `; }; diff --git a/src/styles/ConfigMenu.scss b/src/styles/ConfigMenu.scss index 49ff260..89953ff 100644 --- a/src/styles/ConfigMenu.scss +++ b/src/styles/ConfigMenu.scss @@ -36,8 +36,9 @@ .dribbblish-config-close { position: absolute; - top: 15px; - right: 15px; + padding: 0px; + top: 24px; + right: 24px; } .dribbblish-config-areas { @@ -62,15 +63,15 @@ .dribbblish-config-area-header { svg { - transform: rotate(270deg); + transform: rotate(0deg); } &:hover svg { - transform: rotate(270deg) scale(1.1); + transform: rotate(0deg) scale(1.1); } &:active svg { - transform: rotate(270deg) scale(0.9); + transform: rotate(0deg) scale(0.9); } } } @@ -94,15 +95,15 @@ padding: 0px; height: 100%; stroke-width: 2px; - transform: rotate(90deg); + transform: rotate(180deg); } &:hover svg { - transform: rotate(90deg) scale(1.1); + transform: rotate(180deg) scale(1.1); } &:active svg { - transform: rotate(90deg) scale(0.9); + transform: rotate(180deg) scale(0.9); } } diff --git a/src/styles/Inputs.scss b/src/styles/Inputs.scss index b6be4db..9ea4970 100644 --- a/src/styles/Inputs.scss +++ b/src/styles/Inputs.scss @@ -140,25 +140,6 @@ input { padding: 0px 10px; } - &[type="search"] { - &::-webkit-search-cancel-button { - -webkit-appearance: none; - height: 1em; - width: 1em; - border-radius: 50em; - background: url(icon64("times")) no-repeat 50% 50%; - background-size: contain; - opacity: 0; - pointer-events: none; - filter: invert(lightOffset(1, -1)); - } - - &:focus::-webkit-search-cancel-button { - opacity: lightOffset(0.8, 0.1); - pointer-events: all; - } - } - &[type="time"] { &::-webkit-calendar-picker-indicator { filter: invert(var(--is_dark)); diff --git a/webpack.config.js b/webpack.config.js index 1fcf501..2ee0d25 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -38,12 +38,6 @@ module.exports = { sourceMap: true, sassOptions: { functions: { - 'icon64($icon, $query: "")': (icon, query) => { - query = new URLSearchParams(query); - query.set("base64", ""); - const content = fs.readFileSync(path.resolve(__dirname, "./src/icons", `${icon.getValue()}.svg`), "utf8"); - return new sass.types.String(`"${iconLoader.call({ resourceQuery: query.toString() }, content)}"`); - }, "font64($font)": (font) => { const file = path.resolve(__dirname, "./src/fonts", font.getValue()); return new sass.types.String(`"data:font/truetype;charset=utf-8;base64,${fs.readFileSync(file, { encoding: "base64" })}"`); @@ -64,8 +58,6 @@ module.exports = { }, { test: /\.svg/, - type: "asset/source", - resourceQuery: /.?/, use: [path.resolve(__dirname, "./src/loaders/icon-loader.js")] } ]