From c2b4d9507026751ab0c566210082dd1159ba46ce Mon Sep 17 00:00:00 2001
From: Send_Nukez <erikjulius2701@yahoo.de>
Date: Sat, 23 Oct 2021 11:07:55 +0200
Subject: [PATCH] add ability to order settings items the same way as areas

---
 dribbblish.js | 8 ++++++--
 user.css      | 3 ++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/dribbblish.js b/dribbblish.js
index 7c9fb85..dfecf26 100644
--- a/dribbblish.js
+++ b/dribbblish.js
@@ -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", () => {
diff --git a/user.css b/user.css
index 77d6b0e..03ec75f 100644
--- a/user.css
+++ b/user.css
@@ -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;