mirror of
https://github.com/danbulant/dribbblish-dynamic-theme
synced 2026-05-24 12:35:05 +00:00
add settings reset buttons and always show about
This commit is contained in:
Send_Nukez
parent
d91902b301
commit
96ea4f2660
7 changed files with 65 additions and 18 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
let uncollapsedAreas = JSON.parse(localStorage.getItem("dribbblish:config-areas:uncollapsed") ?? "[]");
|
||||
if (areaElem.hasAttribute("collapsed")) {
|
||||
uncollapsedAreas = uncollapsedAreas.filter((areaName) => areaName != area.name);
|
||||
} else {
|
||||
uncollapsedAreas.push(area.name);
|
||||
}
|
||||
localStorage.setItem("dribbblish:config-areas:uncollapsed", JSON.stringify(uncollapsedAreas));
|
||||
});
|
||||
|
||||
if (area.toggleable) {
|
||||
areaElem.querySelector("h2").addEventListener("click", () => {
|
||||
areaElem.toggleAttribute("collapsed");
|
||||
let uncollapsedAreas = JSON.parse(localStorage.getItem("dribbblish:config-areas:uncollapsed") ?? "[]");
|
||||
if (areaElem.hasAttribute("collapsed")) {
|
||||
uncollapsedAreas = uncollapsedAreas.filter((areaName) => areaName != area.name);
|
||||
} else {
|
||||
uncollapsedAreas.push(area.name);
|
||||
}
|
||||
localStorage.setItem("dribbblish:config-areas:uncollapsed", JSON.stringify(uncollapsedAreas));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
3
src/svg/undo.svg
Normal file
3
src/svg/undo.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 656 B |
|
|
@ -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"]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue