dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-05-27 14:02:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor icons to be imported as function

Browse source
This commit is contained in:
Send_Nukez 2021-11-25 12:21:25 +01:00
parent 89742ae74a
commit 61db2917f8
10 changed files with 54 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/icons/chevron-down.light.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 295 B

3
src/icons/chevron-down.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 391 B

3
src/icons/times.light.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path fill="currentColor" d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 519 B

10
src/js/ConfigMenu.js
View file

@ -2,6 +2,8 @@ import $ from "jquery";
import { renderMD } from "./Util"; import { renderMD } from "./Util";
import iconTimesLight from "icon/times.light";
import iconChevronDown from "icon/chevron-down";
import iconUndo from "icon/undo"; import iconUndo from "icon/undo";
export default class ConfigMenu { export default class ConfigMenu {
@ -77,9 +79,7 @@ export default class ConfigMenu {
container.id = "dribbblish-config"; container.id = "dribbblish-config";
container.innerHTML = /* html */ ` container.innerHTML = /* html */ `
<div class="dribbblish-config-container"> <div class="dribbblish-config-container">
<button aria-label="Close" class="dribbblish-config-close main-trackCreditsModal-closeBtn"> <button aria-label="Close" class="dribbblish-config-close main-trackCreditsModal-closeBtn">${iconTimesLight({ size: 24 })}</button>
<svg width="18" height="18" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M31.098 29.794L16.955 15.65 31.097 1.51 29.683.093 15.54 14.237 1.4.094-.016 1.508 14.126 15.65-.016 29.795l1.414 1.414L15.54 17.065l14.144 14.143" fill="currentColor" fill-rule="evenodd"></path></svg>
</button>
<h1>Dribbblish Settings</h1> <h1>Dribbblish Settings</h1>
<div class="dribbblish-config-areas"></div> <div class="dribbblish-config-areas"></div>
</div> </div>
@ -122,7 +122,7 @@ export default class ConfigMenu {
<div class="dribbblish-config-item-header"> <div class="dribbblish-config-item-header">
<h2 class="x-settings-title main-type-cello" as="h2" empty="${options.name == null}"> <h2 class="x-settings-title main-type-cello" as="h2" empty="${options.name == null}">
${options.name} ${options.name}
${options.resetButton ? /* html */ `<button aria-label="Reset" class="dribbblish-config-item-reset main-trackCreditsModal-closeBtn">${iconUndo}</button>` : ""} ${options.resetButton ? /* html */ `<button aria-label="Reset" class="dribbblish-config-item-reset main-trackCreditsModal-closeBtn">${iconUndo()}</button>` : ""}
</h2> </h2>
<label class="main-type-mesto" empty="${options.description == null}" markdown>${renderMD(options.description)}</label> <label class="main-type-mesto" empty="${options.description == null}" markdown>${renderMD(options.description)}</label>
</div> </div>
@ -411,7 +411,7 @@ export default class ConfigMenu {
areaElem.innerHTML = /* html */ ` areaElem.innerHTML = /* html */ `
<h2 class="dribbblish-config-area-header"> <h2 class="dribbblish-config-area-header">
${area.name} ${area.name}
${!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>`} ${!area.toggleable ? "" : iconChevronDown({ size: 18 })}
</h2> </h2>
<div class="dribbblish-config-area-items"></div> <div class="dribbblish-config-area-items"></div>
`; `;

4
src/js/Folders.js
View file

@ -30,7 +30,7 @@ waitForElement([`.main-rootlist-rootlistPlaylistsScrollNode ul[tabindex="0"]`, `
if (!link.querySelector("img")) elem = document.createElement("img"); if (!link.querySelector("img")) elem = document.createElement("img");
elem.src = picture; elem.src = picture;
} else { } else {
if (!link.querySelector("svg")) elem = htmlToNode(iconNote.replace(/<\/svg>/, `<title>${title}</title>$1`)); if (!link.querySelector("svg")) elem = htmlToNode(iconNote().replace(/<\/svg>/, `<title>${title}</title>$1`));
} }
} else if (app === "folder") { } else if (app === "folder") {
const base64 = localStorage.getItem("dribbblish:folder-image:" + uid); 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"); if (!link.querySelector("img")) elem = document.createElement("img");
elem.src = base64; elem.src = base64;
} else { } else {
if (!link.querySelector("svg")) elem = htmlToNode(iconFolder.replace(/<\/svg>/, `<title>${title}</title>$1`)); if (!link.querySelector("svg")) elem = htmlToNode(iconFolder().replace(/<\/svg>/, `<title>${title}</title>$1`));
} }
} else { } else {
continue; continue;

8
src/js/main.js
View file

@ -42,7 +42,7 @@ Dribbblish.on("ready", () => {
defaultValue: true, defaultValue: true,
onChange: (val) => onChange: (val) =>
Dribbblish.info[val ? "set" : "remove"]("settings", { Dribbblish.info[val ? "set" : "remove"]("settings", {
icon: iconCog, icon: iconCog(),
color: { color: {
fg: "var(--spice-subtext)", fg: "var(--spice-subtext)",
bg: "rgba(var(--spice-rgb-subtext), calc(0.1 + var(--is_light) * 0.05))" 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((response) => response.json())
.then((data) => { .then((data) => {
const isDev = process.env.DRIBBBLISH_VERSION == "Dev"; 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("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("dev", isDev ? { tooltip: "Dev build", icon: iconCode() } : null);
}) })
.catch(console.error); .catch(console.error);
} }
@ -821,7 +821,7 @@ Dribbblish.on("ready", () => {
window.addEventListener("offline", () => window.addEventListener("offline", () =>
Dribbblish.info.set("offline", { Dribbblish.info.set("offline", {
tooltip: "Offline", tooltip: "Offline",
icon: iconWifiSlash, icon: iconWifiSlash(),
order: 998, order: 998,
color: { color: {
fg: "#ffffff", fg: "#ffffff",

42
src/loaders/icon-loader.js
View file

@ -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 defaultOptions = {
const query = new URLSearchParams(this.resourceQuery); size: 16,
const svg = parseSVG(content); base64: false
};
options = { ...defaultOptions, ...options };
const svg = parseSVG(\`${source}\`);
svg.attributes.type = "icon"; svg.attributes.type = "icon";
svg.attributes.width = query.get("width") ?? 16; svg.attributes.width = options.size ?? options.width;
svg.attributes.height = query.get("height") ?? 16; svg.attributes.height = options.size ?? options.height;
svg.children = svg.children.map((c) => { svg.children = svg.children.map((c) => {
if (c.attributes.fill != null && query.has("fill")) c.attributes.fill = query.get("fill"); if (c.attributes.fill != null && options.fill != null) c.attributes.fill = options.fill;
return c; return c;
}); });
const svgStr = stringifySVG(svg); const svgStr = stringifySVG(svg);
if (query.has("base64")) { if (options.base64) {
return `data:image/svg+xml;base64,${Buffer.from(svgStr).toString("base64")}`; return \`data:image/svg+xml;base64,\${Buffer.from(svgStr).toString("base64")}\`;
} else { } else {
return svgStr; return svgStr;
} }
}
`;
}; };

17
src/styles/ConfigMenu.scss
View file

@ -36,8 +36,9 @@
.dribbblish-config-close { .dribbblish-config-close {
position: absolute; position: absolute;
top: 15px; padding: 0px;
right: 15px; top: 24px;
right: 24px;
} }
.dribbblish-config-areas { .dribbblish-config-areas {
@ -62,15 +63,15 @@
.dribbblish-config-area-header { .dribbblish-config-area-header {
svg { svg {
transform: rotate(270deg); transform: rotate(0deg);
} }
&:hover svg { &:hover svg {
transform: rotate(270deg) scale(1.1); transform: rotate(0deg) scale(1.1);
} }
&:active svg { &:active svg {
transform: rotate(270deg) scale(0.9); transform: rotate(0deg) scale(0.9);
} }
} }
} }
@ -94,15 +95,15 @@
padding: 0px; padding: 0px;
height: 100%; height: 100%;
stroke-width: 2px; stroke-width: 2px;
transform: rotate(90deg); transform: rotate(180deg);
} }
&:hover svg { &:hover svg {
transform: rotate(90deg) scale(1.1); transform: rotate(180deg) scale(1.1);
} }
&:active svg { &:active svg {
transform: rotate(90deg) scale(0.9); transform: rotate(180deg) scale(0.9);
} }
} }

19
src/styles/Inputs.scss
View file

@ -140,25 +140,6 @@ input {
padding: 0px 10px; 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"] { &[type="time"] {
&::-webkit-calendar-picker-indicator { &::-webkit-calendar-picker-indicator {
filter: invert(var(--is_dark)); filter: invert(var(--is_dark));

8
webpack.config.js
View file

@ -38,12 +38,6 @@ module.exports = {
sourceMap: true, sourceMap: true,
sassOptions: { sassOptions: {
functions: { 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) => { "font64($font)": (font) => {
const file = path.resolve(__dirname, "./src/fonts", font.getValue()); 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" })}"`); 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/, test: /\.svg/,
type: "asset/source",
resourceQuery: /.?/,
use: [path.resolve(__dirname, "./src/loaders/icon-loader.js")] use: [path.resolve(__dirname, "./src/loaders/icon-loader.js")]
} }
] ]