mirror of
https://github.com/danbulant/dribbblish-dynamic-theme
synced 2026-05-25 13:02:10 +00:00
add ability to collapse / uncollapse settings areas (remembers state)
This commit is contained in:
Send_Nukez
parent
7624554431
commit
b2264a3324
2 changed files with 62 additions and 14 deletions
|
|
@ -78,9 +78,26 @@ class ConfigMenu {
|
|||
if (!document.querySelector(`.dribbblish-config-area[name="${options.area}"]`)) {
|
||||
const areaElem = document.createElement("div");
|
||||
areaElem.classList.add("dribbblish-config-area");
|
||||
const uncollapsedAreas = JSON.parse(localStorage.getItem("dribbblish:config-areas:uncollapsed") ?? "[]");
|
||||
if (!uncollapsedAreas.includes(options.area)) areaElem.toggleAttribute("collapsed");
|
||||
areaElem.setAttribute("name", options.area);
|
||||
areaElem.innerHTML = `<h2>${options.area}</h2>`;
|
||||
areaElem.innerHTML = /* html */ `
|
||||
<h2>
|
||||
${options.area}
|
||||
<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>
|
||||
`;
|
||||
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((area) => area != options.area);
|
||||
} else {
|
||||
uncollapsedAreas.push(options.area);
|
||||
}
|
||||
localStorage.setItem("dribbblish:config-areas:uncollapsed", JSON.stringify(uncollapsedAreas));
|
||||
});
|
||||
}
|
||||
const parent = document.querySelector(`.dribbblish-config-area[name="${options.area}"]`);
|
||||
|
||||
|
|
@ -308,6 +325,15 @@ class _DribbblishShared {
|
|||
}
|
||||
const DribbblishShared = new _DribbblishShared();
|
||||
|
||||
for (let i = 0; i < 10; i++) {
|
||||
DribbblishShared.config.register({
|
||||
area: `Test ${i}`,
|
||||
type: "button",
|
||||
name: "Test",
|
||||
key: `test${i}`
|
||||
});
|
||||
}
|
||||
|
||||
DribbblishShared.config.register({
|
||||
type: "checkbox",
|
||||
key: "rightBigCover",
|
||||
|
|
|
|||
48
user.css
48
user.css
|
|
@ -834,7 +834,7 @@ li.GlueDropTarget {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
#dribbblish-config .dribbblish-config-container {
|
||||
.dribbblish-config-container {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
width: clamp(500px, 50%, 650px);
|
||||
|
|
@ -850,7 +850,7 @@ li.GlueDropTarget {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
#dribbblish-config .dribbblish-config-areas {
|
||||
.dribbblish-config-areas {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
|
|
@ -860,22 +860,44 @@ li.GlueDropTarget {
|
|||
padding: 0px 50px;
|
||||
}
|
||||
|
||||
#dribbblish-config .dribbblish-config-area {
|
||||
.dribbblish-config-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
#dribbblish-config .dribbblish-config-area:empty {
|
||||
.dribbblish-config-area[collapsed] {
|
||||
overflow: hidden;
|
||||
min-height: 38px; /* for some reason height alone isn't enough */
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.dribbblish-config-area:empty {
|
||||
display: none
|
||||
}
|
||||
|
||||
.dribbblish-config-area > h2 {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
height: 0.8em;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
#dribbblish-config .dribbblish-config-item {
|
||||
.dribbblish-config-area > h2 svg {
|
||||
position: absolute;
|
||||
margin-left: 10px;
|
||||
bottom: -2px;
|
||||
color: var(--spice-text);
|
||||
padding: 0px;
|
||||
height: 100%;
|
||||
stroke-width: 2px;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.dribbblish-config-area[collapsed] > h2 svg {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
.dribbblish-config-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: min-content;
|
||||
|
|
@ -888,11 +910,11 @@ li.GlueDropTarget {
|
|||
"description input";
|
||||
}
|
||||
|
||||
#dribbblish-config .dribbblish-config-item[hidden=true] {
|
||||
.dribbblish-config-item[hidden=true] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#dribbblish-config .dribbblish-config-item > .x-settings-title {
|
||||
.dribbblish-config-item > .x-settings-title {
|
||||
grid-area: header;
|
||||
margin: 0px;
|
||||
height: min-content;
|
||||
|
|
@ -900,28 +922,28 @@ li.GlueDropTarget {
|
|||
bottom: 0px;
|
||||
}
|
||||
|
||||
#dribbblish-config .dribbblish-config-item > .x-settings-title.no-desc {
|
||||
.dribbblish-config-item > .x-settings-title.no-desc {
|
||||
bottom: -10px;
|
||||
}
|
||||
|
||||
#dribbblish-config .dribbblish-config-item > .main-type-mesto {
|
||||
.dribbblish-config-item > .main-type-mesto {
|
||||
grid-area: description;
|
||||
height: min-content;
|
||||
color: var(--spice-subtext);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#dribbblish-config .dribbblish-config-item > .x-settings-secondColumn {
|
||||
.dribbblish-config-item > .x-settings-secondColumn {
|
||||
grid-area: input;
|
||||
}
|
||||
|
||||
#dribbblish-config .dribbblish-config-close {
|
||||
.dribbblish-config-close {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
#dribbblish-config .dribbblish-config-backdrop {
|
||||
.dribbblish-config-backdrop {
|
||||
position: absolute;
|
||||
content: "";
|
||||
inset: 0px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue