mirror of
https://github.com/danbulant/dribbblish-dynamic-theme
synced 2026-06-22 00:02:41 +00:00
use material-icons
This commit is contained in:
Send_Nukez
GitHub Action
parent
bcafa8b5a4
commit
5d537336a9
24 changed files with 122 additions and 115 deletions
|
|
@ -6,6 +6,7 @@
|
|||
"url": "https://github.com/JulienMaille/dribbblish-dynamic-theme/issues"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material-icons/svg": "^1.0.22",
|
||||
"clean-webpack-plugin": "^4.0.0",
|
||||
"sass": "^1.43.4",
|
||||
"sass-loader": "^12.2.0",
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<path fill="currentColor" d="M413.1 222.5l22.2 22.2c9.4 9.4 9.4 24.6 0 33.9L241 473c-9.4 9.4-24.6 9.4-33.9 0L12.7 278.6c-9.4-9.4-9.4-24.6 0-33.9l22.2-22.2c9.5-9.5 25-9.3 34.3.4L184 343.4V56c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v287.4l114.8-120.5c9.3-9.8 24.8-10 34.3-.4z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 360 B |
|
|
@ -1,3 +0,0 @@
|
|||
<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>
|
||||
|
Before Width: | Height: | Size: 295 B |
|
|
@ -1,3 +0,0 @@
|
|||
<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>
|
||||
|
Before Width: | Height: | Size: 391 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
|
||||
<path fill="currentColor" d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 652 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 922 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
|
||||
<path fill="currentColor" d="M527.95 224H480v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h385.057c28.068 0 54.135-14.733 68.599-38.84l67.453-112.464C588.24 264.812 565.285 224 527.95 224zM48 96h146.745l64 64H432c8.837 0 16 7.163 16 16v48H171.177c-28.068 0-54.135 14.733-68.599 38.84L32 380.47V112c0-8.837 7.163-16 16-16zm493.695 184.232l-67.479 112.464A47.997 47.997 0 0 1 433.057 416H44.823l82.017-136.696A48 48 0 0 1 168 256h359.975c12.437 0 20.119 13.568 13.72 24.232z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 600 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
|
||||
<path fill="currentColor" d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 434 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path fill="currentColor" d="M194.74 96l54.63 54.63c6 6 14.14 9.37 22.63 9.37h192c8.84 0 16 7.16 16 16v224c0 8.84-7.16 16-16 16H48c-8.84 0-16-7.16-16-16V112c0-8.84 7.16-16 16-16h146.74M48 64C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48H272l-54.63-54.63c-6-6-14.14-9.37-22.63-9.37H48z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 425 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path fill="currentColor" d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 239 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M9 6.159v10.899A3.485 3.485 0 006.5 16C4.57 16 3 17.57 3 19.5S4.57 23 6.5 23s3.5-1.57 3.5-3.5V6.969L21 4.63v10.178a3.485 3.485 0 00-2.5-1.058c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5 3.5-1.57 3.5-3.5V3.395L9 6.159zM6.5 22C5.122 22 4 20.878 4 19.5S5.122 17 6.5 17 9 18.122 9 19.5 7.878 22 6.5 22zm12-2.25a2.503 2.503 0 01-2.5-2.5c0-1.379 1.122-2.5 2.5-2.5s2.5 1.121 2.5 2.5c0 1.378-1.122 2.5-2.5 2.5z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 510 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path fill="currentColor" d="M204.3 5C104.9 24.4 24.8 104.3 5.2 203.4c-37 187 131.7 326.4 258.8 306.7 41.2-6.4 61.4-54.6 42.5-91.7-23.1-45.4 9.9-98.4 60.9-98.4h79.7c35.8 0 64.8-29.6 64.9-65.3C511.5 97.1 368.1-26.9 204.3 5zM96 320c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm32-128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128-64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 593 B |
|
|
@ -1,3 +0,0 @@
|
|||
<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>
|
||||
|
Before Width: | Height: | Size: 519 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
|
||||
<path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 527 B |
|
|
@ -1,3 +0,0 @@
|
|||
<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>
|
||||
|
Before Width: | Height: | Size: 656 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
|
||||
<path fill="currentColor" d="M5.09 154.87c-6.66 6.16-6.79 16.59-.35 22.97l34.24 33.96c6.14 6.09 16.02 6.23 22.4.38 6.99-6.4 14.31-12.22 21.65-18.01l-64.96-50.21c-4.3 3.71-8.79 7.04-12.98 10.91zm471.75 181.9l45.42-45.21c6.52-6.46 6.29-17.06-.57-23.17-64.94-57.74-148.91-82.66-230.34-74.98l-83.16-64.27c125.94-38.36 267.75-11.01 370.43 83.05 6.38 5.85 16.26 5.71 22.4-.38l34.24-33.96c6.44-6.39 6.3-16.82-.35-22.97C496.46 26.82 298.08-.76 133.42 71.35L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.36 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.03-2.81-22.45L476.84 336.77zm-358.53-68.38c-6.86 6.1-7.08 16.7-.57 23.17l34.28 34.01c5.97 5.93 15.59 6.32 21.94.8 13.35-11.6 28.01-20.66 43.15-28.55l-68.36-52.83c-10.48 7.15-20.74 14.78-30.44 23.4zM256 416c0 35.35 28.65 64 64 64 31.91 0 58.15-23.42 62.99-53.98l-88.7-68.56C271.77 367.37 256 389.82 256 416z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 998 B |
|
|
@ -1,10 +1,7 @@
|
|||
import $ from "jquery";
|
||||
|
||||
import { renderMD } from "./Util";
|
||||
|
||||
import iconTimesLight from "icon/times.light";
|
||||
import iconChevronDown from "icon/chevron-down";
|
||||
import iconUndo from "icon/undo";
|
||||
import { icons } from "./Icons";
|
||||
|
||||
export default class ConfigMenu {
|
||||
/**
|
||||
|
|
@ -79,7 +76,7 @@ export default class ConfigMenu {
|
|||
container.id = "dribbblish-config";
|
||||
container.innerHTML = /* html */ `
|
||||
<div class="dribbblish-config-container">
|
||||
<button aria-label="Close" class="dribbblish-config-close main-trackCreditsModal-closeBtn">${iconTimesLight({ size: 24 })}</button>
|
||||
<button aria-label="Close" class="dribbblish-config-close main-trackCreditsModal-closeBtn">${icons.get("close", { size: 24 })}</button>
|
||||
<h1>Dribbblish Settings</h1>
|
||||
<div class="dribbblish-config-areas"></div>
|
||||
</div>
|
||||
|
|
@ -122,7 +119,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}
|
||||
${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">${icons.get("delete-outline", { size: 20, title: "Reset Setting" })}</button>` : ""}
|
||||
</h2>
|
||||
<label class="main-type-mesto" empty="${options.description == null}" markdown>${renderMD(options.description)}</label>
|
||||
</div>
|
||||
|
|
@ -411,7 +408,7 @@ export default class ConfigMenu {
|
|||
areaElem.innerHTML = /* html */ `
|
||||
<h2 class="dribbblish-config-area-header">
|
||||
${area.name}
|
||||
${!area.toggleable ? "" : iconChevronDown({ size: 18 })}
|
||||
${!area.toggleable ? "" : icons.get("expand-more", { size: 24, scale: 1.2 })}
|
||||
</h2>
|
||||
<div class="dribbblish-config-area-items"></div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import ConfigMenu from "./ConfigMenu";
|
||||
import Info from "./Info";
|
||||
import Loader from "./Loader";
|
||||
import { icons } from "./Icons";
|
||||
|
||||
export default class Dribbblish {
|
||||
/**
|
||||
|
|
@ -22,6 +23,9 @@ export default class Dribbblish {
|
|||
/** @type {Loader} */
|
||||
loader;
|
||||
|
||||
/** @type {Icons} */
|
||||
icons;
|
||||
|
||||
/** @type {Object.<string, listener[]>} */
|
||||
#listeners = {};
|
||||
|
||||
|
|
@ -32,6 +36,7 @@ export default class Dribbblish {
|
|||
this.config = new ConfigMenu();
|
||||
this.info = new Info();
|
||||
this.loader = new Loader();
|
||||
this.icons = icons;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
if (document.querySelector("#main") == null || Spicetify?.showNotification == undefined || !this.info.isReady()) return;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
import { waitForElement, htmlToNode } from "./Util";
|
||||
|
||||
import iconFolder from "icon/folder.light";
|
||||
import iconFolderOpen from "icon/folder-open.light";
|
||||
import iconNote from "icon/note";
|
||||
import { icons } from "./Icons";
|
||||
|
||||
waitForElement([`.main-rootlist-rootlistPlaylistsScrollNode ul[tabindex="0"]`, `.main-rootlist-rootlistPlaylistsScrollNode ul[tabindex="0"] li`], ([root, firstItem]) => {
|
||||
const listElem = firstItem.parentElement;
|
||||
|
|
@ -30,7 +27,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>${title}</title>$1`));
|
||||
if (!link.querySelector("svg")) elem = htmlToNode(icons.get("note", { title }));
|
||||
}
|
||||
} else if (app === "folder") {
|
||||
const base64 = localStorage.getItem("dribbblish:folder-image:" + uid);
|
||||
|
|
@ -38,7 +35,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>${title}</title>$1`));
|
||||
if (!link.querySelector("svg")) elem = htmlToNode(icons.get("folder", { title }));
|
||||
}
|
||||
} else {
|
||||
continue;
|
||||
|
|
|
|||
80
src/js/Icons.js
Normal file
80
src/js/Icons.js
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
import { parseSync as parseSVG, stringify as stringifySVG } from "svgson";
|
||||
|
||||
export default class Icons {
|
||||
/** @typedef {"baseline" | "outline" | "round" | "sharp" | "twotone"} IconStyle */
|
||||
|
||||
/**
|
||||
* @typedef {Object} IconOptions
|
||||
* @property {IconStyle} [style="round"]
|
||||
* @property {Number} [size=16]
|
||||
* @property {Number} [scale=1]
|
||||
* @property {String} [fill="currentColor"]
|
||||
* @property {Boolean} [base64=false]
|
||||
*/
|
||||
|
||||
/** @type {Object.<String, Object.<IconStyle, String>>} */
|
||||
#icons;
|
||||
|
||||
constructor() {
|
||||
this.#icons = process.env.DRIBBBLISH_ICONS;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {String} name icon name lowercase with dashes like `ac-unit`
|
||||
* @param {IconOptions} options
|
||||
* @see https://fonts.google.com/icons?selected=Material+Icons
|
||||
* @returns
|
||||
*/
|
||||
get(name, options) {
|
||||
/** @type {IconOptions} */
|
||||
const defaultOptions = {
|
||||
style: "round",
|
||||
size: 16,
|
||||
scale: 1,
|
||||
fill: "currentColor",
|
||||
base64: false
|
||||
};
|
||||
options = { ...defaultOptions, ...options };
|
||||
|
||||
if (!this.#icons.hasOwnProperty(name)) throw new Error(`Icon "${name}" does not exist`);
|
||||
let svg;
|
||||
if (typeof this.#icons[name] == "string") {
|
||||
svg = parseSVG(this.#icons[name]);
|
||||
} else {
|
||||
if (!this.#icons[name].hasOwnProperty(options.style)) throw new Error(`Icon "${name}" does not have style "${options.style}"`);
|
||||
svg = parseSVG(this.#icons[name][options.style]);
|
||||
}
|
||||
|
||||
svg.attributes.type = "dribbblish-icon";
|
||||
svg.attributes.fill = options.fill;
|
||||
svg.attributes.width = options.size;
|
||||
svg.attributes.height = options.size;
|
||||
|
||||
if (options.scale != 1) {
|
||||
svg.children = svg.children.map((child) => {
|
||||
child.attributes.style = `transform: scale(${options.scale}); transform-origin: center;`;
|
||||
return child;
|
||||
});
|
||||
}
|
||||
|
||||
if (options.title != null) {
|
||||
console.log(options);
|
||||
console.log(svg);
|
||||
svg.children.push({
|
||||
name: "title",
|
||||
type: "element",
|
||||
value: "",
|
||||
children: [{ name: "", type: "text", value: options.title, attributes: {}, children: [] }]
|
||||
});
|
||||
console.log(svg);
|
||||
}
|
||||
|
||||
if (options.base64) {
|
||||
return `data:image/svg+xml;base64,${Buffer.from(stringifySVG(svg)).toString("base64")}`;
|
||||
} else {
|
||||
return stringifySVG(svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const icons = new Icons();
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import $ from "jquery";
|
||||
import { icons } from "./Icons";
|
||||
|
||||
import { waitForElement } from "./Util";
|
||||
|
||||
|
|
@ -7,7 +8,7 @@ export default class Info {
|
|||
* @typedef {Object} DribbblishInfo
|
||||
* @property {String} [text]
|
||||
* @property {String} [tooltip]
|
||||
* @property {String} [icon]
|
||||
* @property {String} [icon] svg string or icon name
|
||||
* @property {DribbblishInfoColor} [color]
|
||||
* @property {Number} [order=0] order < 0 = More to the Left | order > 0 = More to the Right
|
||||
* @property {onClick} [onClick]
|
||||
|
|
@ -74,6 +75,7 @@ export default class Info {
|
|||
if (bg != null) elem.style.backgroundColor = bg;
|
||||
}
|
||||
if (info.order != 0) elem.style.order = info.order;
|
||||
if (!info.icon.startsWith("<svg")) info.icon = icons.get(info.icon);
|
||||
elem.innerHTML = `${info.text ?? ""}${info.icon ?? ""}`;
|
||||
|
||||
this.#container.appendChild(elem);
|
||||
|
|
|
|||
|
|
@ -8,11 +8,8 @@ import { waitForElement, copyToClipboard, capitalizeFirstLetter, getClosestToNum
|
|||
import { default as _Dribbblish } from "./Dribbblish";
|
||||
import "./Folders";
|
||||
|
||||
import iconPalette from "icon/palette";
|
||||
import iconCode from "icon/code";
|
||||
import iconWifiSlash from "icon/wifi-slash";
|
||||
import iconCog from "icon/cog";
|
||||
import iconSpotify from "icon/spotify";
|
||||
// Remove not installed message
|
||||
$("html").attr("dribbblish-js-installed", " ");
|
||||
|
||||
// To expose to external scripts
|
||||
const Dribbblish = new _Dribbblish();
|
||||
|
|
@ -46,7 +43,7 @@ Dribbblish.on("ready", () => {
|
|||
"settings",
|
||||
val
|
||||
? {
|
||||
icon: iconCog(),
|
||||
icon: "settings",
|
||||
color: {
|
||||
fg: "var(--spice-subtext)",
|
||||
bg: "rgba(var(--spice-rgb-subtext), calc(0.1 + var(--is_light) * 0.05))"
|
||||
|
|
@ -288,7 +285,7 @@ Dribbblish.on("ready", () => {
|
|||
progKnob.append(tooltip);
|
||||
|
||||
function updateProgTime(timeOverride) {
|
||||
const newText = Spicetify.Player.formatTime(timeOverride || Spicetify.Player.getProgress()) + " / " + Spicetify.Player.formatTime(Spicetify.Player.getDuration());
|
||||
const newText = Spicetify.Player.formatTime(timeOverride ?? Spicetify.Player.getProgress()) + " / " + Spicetify.Player.formatTime(Spicetify.Player.getDuration());
|
||||
// To reduce DOM Updates when the Song is Paused
|
||||
if (tooltip.innerText != newText) tooltip.innerText = newText;
|
||||
}
|
||||
|
|
@ -814,14 +811,14 @@ Dribbblish.on("ready", () => {
|
|||
fetch("https://api.github.com/repos/JulienMaille/dribbblish-dynamic-theme/releases/latest")
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
Dribbblish.info.set("dribbblish-update", data.tag_name > process.env.DRIBBBLISH_VERSION ? { text: `v${data.tag_name}`, tooltip: "Nev Dribbblish version available", icon: iconPalette(), onClick: () => window.open("https://github.com/JulienMaille/dribbblish-dynamic-theme/releases/latest", "_blank") } : null);
|
||||
Dribbblish.info.set("dribbblish-update", data.tag_name > process.env.DRIBBBLISH_VERSION ? { text: `v${data.tag_name}`, tooltip: "Nev Dribbblish version available", icon: "palette", onClick: () => window.open("https://github.com/JulienMaille/dribbblish-dynamic-theme/releases/latest", "_blank") } : null);
|
||||
})
|
||||
.catch(console.error);
|
||||
|
||||
fetch("https://api.github.com/repos/khanhas/spicetify-cli/releases/latest")
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
Dribbblish.info.set("spicetify-update", data.tag_name.substring(1) > (Spicetify.version ?? "2.7.2") ? { text: data.tag_name, tooltip: "New Spicetify version available", icon: iconSpotify(), onClick: () => window.open("https://github.com/khanhas/spicetify-cli/releases/latest", "_blank") } : null);
|
||||
Dribbblish.info.set("spicetify-update", data.tag_name.substring(1) > (Spicetify.version ?? "2.7.2") ? { text: data.tag_name, tooltip: "New Spicetify version available", icon: "spotify", onClick: () => window.open("https://github.com/khanhas/spicetify-cli/releases/latest", "_blank") } : null);
|
||||
})
|
||||
.catch(console.error);
|
||||
}
|
||||
|
|
@ -836,7 +833,7 @@ Dribbblish.on("ready", () => {
|
|||
show
|
||||
? {
|
||||
tooltip: "Offline",
|
||||
icon: iconWifiSlash(),
|
||||
icon: "cloud-off",
|
||||
order: 998,
|
||||
color: {
|
||||
fg: "#ffffff",
|
||||
|
|
@ -852,7 +849,5 @@ Dribbblish.on("ready", () => {
|
|||
|
||||
// Show "Dev" info
|
||||
const isDev = process.env.DRIBBBLISH_VERSION == "Dev";
|
||||
Dribbblish.info.set("dev", isDev ? { tooltip: "Dev build", icon: iconCode(), order: 997 } : null);
|
||||
Dribbblish.info.set("dev", isDev ? { tooltip: "Dev build", icon: "code", order: 997 } : null);
|
||||
});
|
||||
|
||||
$("html").css("--warning_message", " ");
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
module.exports = function (source) {
|
||||
return `
|
||||
module.exports = function(options) {
|
||||
const { parseSync: parseSVG, stringify: stringifySVG } = require("svgson");
|
||||
|
||||
const defaultOptions = {
|
||||
size: 16,
|
||||
base64: false
|
||||
};
|
||||
options = { ...defaultOptions, ...options };
|
||||
const svg = parseSVG(\`${source}\`);
|
||||
|
||||
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 && options.fill != null) c.attributes.fill = options.fill;
|
||||
return c;
|
||||
});
|
||||
|
||||
const svgStr = stringifySVG(svg);
|
||||
if (options.base64) {
|
||||
return \`data:image/svg+xml;base64,\${Buffer.from(svgStr).toString("base64")}\`;
|
||||
} else {
|
||||
return svgStr;
|
||||
}
|
||||
}
|
||||
`;
|
||||
};
|
||||
|
|
@ -3,7 +3,21 @@ const sass = require("sass");
|
|||
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
|
||||
const path = require("path");
|
||||
const fs = require("fs");
|
||||
const iconLoader = require("./src/loaders/icon-loader");
|
||||
|
||||
const icons = {};
|
||||
// Add Material Icons
|
||||
let iconDir = path.resolve(__dirname, "./node_modules/@material-icons/svg/svg");
|
||||
for (const dir of fs.readdirSync(iconDir)) {
|
||||
icons[dir.replace("_", "-")] = {};
|
||||
for (const file of fs.readdirSync(path.resolve(iconDir, dir))) {
|
||||
icons[dir.replace("_", "-")][file.replace(/\..*?$/, "")] = fs.readFileSync(path.resolve(iconDir, dir, file), { encoding: "utf8" });
|
||||
}
|
||||
}
|
||||
// Add Custom Icons
|
||||
iconDir = path.resolve(__dirname, "./src/icons");
|
||||
for (const icon of fs.readdirSync(iconDir)) {
|
||||
icons[icon.replace(/\..*?$/, "")] = fs.readFileSync(path.resolve(iconDir, icon), { encoding: "utf8" });
|
||||
}
|
||||
|
||||
/** @type {import('webpack').Configuration} */
|
||||
module.exports = {
|
||||
|
|
@ -12,12 +26,6 @@ module.exports = {
|
|||
path: path.resolve(__dirname, "dist"),
|
||||
filename: "dribbblish-dynamic.js"
|
||||
},
|
||||
resolve: {
|
||||
extensions: [".js", ".svg"],
|
||||
alias: {
|
||||
icon: path.resolve(__dirname, "./src/icons")
|
||||
}
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
|
|
@ -55,18 +63,15 @@ module.exports = {
|
|||
filename: "color.ini"
|
||||
},
|
||||
use: [path.resolve(__dirname, "./src/loaders/color-loader.js")]
|
||||
},
|
||||
{
|
||||
test: /\.svg/,
|
||||
use: [path.resolve(__dirname, "./src/loaders/icon-loader.js")]
|
||||
}
|
||||
]
|
||||
},
|
||||
devtool: "inline-source-map",
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
"process.env.DRIBBBLISH_VERSION": JSON.stringify(process.env.DRIBBBLISH_VERSION || "Dev"),
|
||||
"process.env.COMMIT_HASH": JSON.stringify(process.env.COMMIT_HASH || "local")
|
||||
"process.env.DRIBBBLISH_ICONS": JSON.stringify(icons),
|
||||
"process.env.DRIBBBLISH_VERSION": JSON.stringify(process.env.DRIBBBLISH_VERSION ?? "Dev"),
|
||||
"process.env.COMMIT_HASH": JSON.stringify(process.env.COMMIT_HASH ?? "local")
|
||||
}),
|
||||
new CleanWebpackPlugin({
|
||||
protectWebpackAssets: false,
|
||||
|
|
|
|||
Loading…
Reference in a new issue