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

add ability to order settings items the same way as areas

Browse source
This commit is contained in:
Send_Nukez 2021-10-23 11:07:55 +02:00
parent 02c968e676
commit c2b4d95070
2 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
dribbblish.js
View file

@ -6,6 +6,7 @@ class ConfigMenu {
* @property {"checkbox" | "select" | "button" | "slider" | "number" | "text" | "time"} type * @property {"checkbox" | "select" | "button" | "slider" | "number" | "text" | "time"} type
* @property {String|DribbblishConfigArea} [area={name: "Main Settings", order: 0}] * @property {String|DribbblishConfigArea} [area={name: "Main Settings", order: 0}]
* @property {any} [data={}] * @property {any} [data={}]
* @property {Number} [order=0] order < 0 = Higher up | order > 0 = Lower Down
* @property {String} key * @property {String} key
* @property {String} name * @property {String} name
* @property {String} [description=""] * @property {String} [description=""]
@ -82,9 +83,10 @@ class ConfigMenu {
*/ */
addInputHTML(options) { addInputHTML(options) {
this.registerArea(options.area); this.registerArea(options.area);
const parent = document.querySelector(`.dribbblish-config-area[name="${options.area.name}"]`); const parent = document.querySelector(`.dribbblish-config-area[name="${options.area.name}"] .dribbblish-config-area-items`);
const elem = document.createElement("div"); const elem = document.createElement("div");
elem.style.order = options.order;
elem.classList.add("dribbblish-config-item"); elem.classList.add("dribbblish-config-item");
elem.setAttribute("key", options.key); elem.setAttribute("key", options.key);
elem.setAttribute("type", options.type); elem.setAttribute("type", options.type);
@ -112,6 +114,7 @@ class ConfigMenu {
const defaultOptions = { const defaultOptions = {
hidden: false, hidden: false,
area: "Main Settings", area: "Main Settings",
order: 0,
data: {}, data: {},
name: "", name: "",
description: "", description: "",
@ -287,10 +290,11 @@ class ConfigMenu {
if (!uncollapsedAreas.includes(area.name)) areaElem.toggleAttribute("collapsed"); if (!uncollapsedAreas.includes(area.name)) areaElem.toggleAttribute("collapsed");
areaElem.setAttribute("name", area.name); areaElem.setAttribute("name", area.name);
areaElem.innerHTML = /* html */ ` areaElem.innerHTML = /* html */ `
<h2> <h2 class="dribbblish-config-area-header">
${area.name} ${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> <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> </h2>
<div class="dribbblish-config-area-items"></div>
`; `;
document.querySelector(".dribbblish-config-areas").appendChild(areaElem); document.querySelector(".dribbblish-config-areas").appendChild(areaElem);
areaElem.querySelector("h2").addEventListener("click", () => { areaElem.querySelector("h2").addEventListener("click", () => {

3
user.css
View file

@ -861,7 +861,8 @@ li.GlueDropTarget {
padding: 0px 50px; padding: 0px 50px;
} }
.dribbblish-config-area { .dribbblish-config-area,
.dribbblish-config-area-items {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;