dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-05-25 13:02:10 +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 {String|DribbblishConfigArea} [area={name: "Main Settings", order: 0}]
* @property {any} [data={}]
* @property {Number} [order=0] order < 0 = Higher up | order > 0 = Lower Down
* @property {String} key
* @property {String} name
* @property {String} [description=""]
@ -82,9 +83,10 @@ class ConfigMenu {
*/
addInputHTML(options) {
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");
elem.style.order = options.order;
elem.classList.add("dribbblish-config-item");
elem.setAttribute("key", options.key);
elem.setAttribute("type", options.type);
@ -112,6 +114,7 @@ class ConfigMenu {
const defaultOptions = {
hidden: false,
area: "Main Settings",
order: 0,
data: {},
name: "",
description: "",
@ -287,10 +290,11 @@ class ConfigMenu {
if (!uncollapsedAreas.includes(area.name)) areaElem.toggleAttribute("collapsed");
areaElem.setAttribute("name", area.name);
areaElem.innerHTML = /* html */ `
<h2>
<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>
</h2>
<div class="dribbblish-config-area-items"></div>
`;
document.querySelector(".dribbblish-config-areas").appendChild(areaElem);
areaElem.querySelector("h2").addEventListener("click", () => {

3
user.css
View file

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