diff --git a/html/css/editor.css b/html/css/editor.css
index d96e121..68bdb0c 100644
--- a/html/css/editor.css
+++ b/html/css/editor.css
@@ -22,17 +22,21 @@
justify-content: space-between;
align-items: center;
padding: 10px;
- background-color: var(--md-dark-surface-container-high);
+ background-color: var(--md-dark-surface-container-highest);
+ border-bottom: 1px solid var(--md-dark-outline-variant);
}
+
#editor-container > header h1 {
margin: 0;
- font-size: var(--md-typescale-title-large-size);
+ font-size: var(--md-typescale-headline-large-size);
color: var(--md-dark-on-surface);
}
+
#editor-container > header .controls {
display: flex;
gap: 12px;
}
+
#save-btn,
#close-btn {
display: flex;
@@ -45,19 +49,23 @@
cursor: pointer;
transition: background-color 0.2s;
}
+
#save-btn {
- background-color: var(--md-dark-primary);
- color: var(--md-dark-on-primary);
+ background-color: var(--md-dark-success-container);
+ color: var(--md-dark-on-success-container);
}
+
#save-btn:hover {
- background-color: var(--md-dark-primary-container);
+ background-color: rgba(255, 255, 255, var(--md-state-hover-dark-opacity));
}
+
#close-btn {
- background-color: var(--md-dark-secondary);
- color: var(--md-dark-on-secondary);
+ background-color: var(--md-dark-error-container);
+ color: var(--md-dark-on-error-container);
}
+
#close-btn:hover {
- background-color: var(--md-dark-secondary-container);
+ background-color: rgba(255, 255, 255, var(--md-state-hover-dark-opacity));
}
/* Main layout */
@@ -69,10 +77,10 @@
/* Sidebar */
#editor-container .sidebar {
- width: 240px;
+ width: 200px;
padding: 16px;
- background-color: var(--md-dark-surface-container);
- box-shadow: inset -1px 0 0 0 var(--md-dark-outline-variant);
+ background-color: var(--md-dark-surface-container-high);
+ border-right: 1px solid var(--md-dark-outline-variant);
}
#editor-container .file-list {
@@ -97,7 +105,7 @@
}
#editor-container .file-list li.active {
- color: var(--md-dark-on-primary);
+ background-color: rgba(255, 255, 255, var(--md-state-focus-dark-opacity));
}
/* Main content area */
@@ -107,6 +115,8 @@
flex-direction: column;
padding: 16px;
overflow: hidden;
+ background-color: var(--md-dark-surface-container-low);
+ color: var(--md-dark-on-surface);
}
/* Search bar */
@@ -143,41 +153,245 @@
flex: 1;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ grid-auto-rows: 150px;
gap: 12px;
overflow-y: auto;
padding: 8px;
}
+
.data-card {
- background-color: var(--md-dark-surface-container-low);
- border-radius: var(--md-radius-medium);
- box-shadow: var(--md-elevation-1);
- padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
+ padding: 16px;
+ background-color: var(--md-dark-surface-container);
+ border-radius: var(--md-radius-medium);
+ box-shadow: var(--md-elevation-1);
transition: transform 0.1s, box-shadow 0.1s;
}
+
.data-card:hover {
transform: translateY(-2px);
box-shadow: var(--md-elevation-2);
}
+
.data-card h3 {
margin: 0 0 8px 0;
font-size: var(--md-typescale-title-medium-size);
color: var(--md-dark-on-surface);
}
+
.btn-edit {
align-self: flex-end;
padding: 4px 8px;
border: none;
border-radius: var(--md-radius-small);
- background-color: var(--md-dark-secondary);
+ background-color: var(--md-dark-surface-container-low);
color: var(--md-dark-on-secondary);
cursor: pointer;
transition: background-color 0.2s;
}
+
.btn-edit:hover {
- background-color: var(--md-dark-secondary-container);
+ background-color: rgba(255, 255, 255, var(--md-state-hover-dark-opacity));
+}
+
+/* Modal */
+#edit-modal.hidden {
+ display: none;
+}
+
+#edit-modal {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: grid;
+ place-items: center;
+ background-color: var(--md-dark-scrim);
+ z-index: 1000;
+}
+
+.modal-content {
+ display: flex;
+ flex-direction: column;
+ width: 60vw;
+ height: 60vh;
+ background-color: var(--md-dark-surface);
+ border-radius: var(--md-radius-medium);
+ box-shadow: var(--md-elevation-4);
+ overflow: hidden;
+}
+
+.modal-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 12px;
+ background-color: var(--md-dark-surface-container-high);
+ border-bottom: 1px solid var(--md-dark-outline-variant);
+}
+
+.modal-header h2 {
+ margin: 0;
+ font-size: var(--md-typescale-headline-large-size);
+ color: var(--md-dark-on-surface);
+ text-transform: capitalize;
+}
+
+#close-modal-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: none;
+ font-size: 24px;
+ cursor: pointer;
+ background-color: var(--md-dark-error-container);
+ color: var(--md-dark-on-error-container);
+ border-radius: var(--md-radius-small);
+}
+
+#close-modal-btn:hover {
+ background-color: rgba(255, 255, 255, var(--md-state-hover-dark-opacity));
+}
+
+.modal-body {
+ padding: 16px;
+ overflow-y: auto;
+ flex: 1;
+}
+
+.modal-footer {
+ display: flex;
+ justify-content: flex-end;
+ gap: 12px;
+ padding: 12px;
+ background-color: var(--md-dark-surface-container-high);
+ border-top: 1px solid var(--md-dark-outline-variant);
+}
+
+#cancel-edit-btn {
+ padding: 8px 16px;
+ border: none;
+ border-radius: var(--md-radius-small);
+ background-color: var(--md-dark-error-container);
+ color: var(--md-dark-on-error-container);
+ cursor: pointer;
+ transition: background-color 0.2s;
+}
+
+#cancel-edit-btn:hover {
+ background-color: rgba(255, 255, 255, var(--md-state-hover-dark-opacity));
+}
+
+#save-item-btn {
+ padding: 8px 16px;
+ border: none;
+ border-radius: var(--md-radius-small);
+ background-color: var(--md-dark-success-container);
+ color: var(--md-dark-on-success-container);
+ cursor: pointer;
+ transition: background-color 0.2s;
+}
+
+#save-item-btn:hover {
+ background-color: rgba(255, 255, 255, var(--md-state-hover-dark-opacity));
+}
+
+.form-group {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 12px;
+}
+
+.form-group label {
+ margin-bottom: 4px;
+ font-size: var(--md-typescale-label-large-size);
+ color: var(--md-dark-on-surface);
+}
+
+.form-control {
+ padding: 8px 12px;
+ font-size: var(--md-typescale-label-large-size);
+ background-color: var(--md-dark-surface-container-low);
+ color: var(--md-dark-on-surface);
+ border: 1px solid var(--md-dark-outline-variant);
+ border-radius: var(--md-radius-small);
+ outline: none;
+}
+
+.form-control:focus {
+ border-color: var(--md-dark-primary);
+}
+
+/* small monospace preview under each card title */
+.data-preview {
+ margin: 8px 0;
+ font-family: monospace;
+ white-space: pre-wrap;
+ color: var(--md-dark-on-surface);
+}
+
+/* nested object fieldsets styling */
+.nested-fieldset {
+ border: 1px solid var(--md-dark-outline-variant);
+ padding: 12px;
+ margin: 8px 0;
+ border-radius: var(--md-radius-small);
+ background-color: var(--md-dark-surface-container);
+}
+
+.nested-fieldset legend {
+ font-weight: 600;
+ padding: 0 6px;
+ color: var(--md-dark-on-surface);
+}
+
+/* indent array entries a bit */
+.array-container > .form-group {
+ margin-left: 16px;
+}
+
+/* Toggle Switch */
+.toggle-wrapper {
+ display: inline-flex;
+ align-items: center;
+ cursor: pointer;
+ user-select: none;
+}
+
+.toggle-wrapper input[type="checkbox"] {
+ display: none;
+}
+
+.toggle-switch {
+ position: relative;
+ width: 42px;
+ height: 24px;
+ background-color: var(--md-dark-outline-variant);
+ border-radius: 24px;
+ transition: background-color 0.3s ease;
+}
+
+.toggle-switch::before {
+ content: "";
+ position: absolute;
+ top: 2px;
+ left: 2px;
+ width: 20px;
+ height: 20px;
+ background-color: var(--md-dark-on-primary);
+ border-radius: 50%;
+ transition: transform 0.3s ease;
+}
+
+.toggle-wrapper input:checked + .toggle-switch {
+ background-color: var(--md-dark-primary);
+}
+
+.toggle-wrapper input:checked + .toggle-switch::before {
+ transform: translateX(18px);
}
/* Floating Action Button */
@@ -197,120 +411,8 @@
box-shadow: var(--md-elevation-3);
transition: transform 0.2s;
}
+
#add-item-fab:hover {
transform: translateY(-4px);
box-shadow: var(--md-elevation-2);
-}
-
-/* Modal */
-#edit-modal.hidden {
- display: none;
-}
-#edit-modal {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- display: grid;
- place-items: center;
- background-color: var(--md-dark-scrim);
- z-index: 1000;
-}
-.modal-content {
- background-color: var(--md-dark-surface);
- border-radius: var(--md-radius-medium);
- width: 500px;
- max-width: 90%;
- display: flex;
- flex-direction: column;
- box-shadow: var(--md-elevation-4);
- overflow: hidden;
-}
-.modal-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 12px;
- background-color: var(--md-dark-surface-container-high);
- border-bottom: 1px solid var(--md-dark-outline-variant);
-}
-.modal-header h2 {
- margin: 0;
- font-size: var(--md-typescale-title-medium-size);
- color: var(--md-dark-on-surface);
-}
-#close-modal-btn {
- background: none;
- border: none;
- font-size: 24px;
- color: var(--md-dark-on-surface-variant);
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-.modal-body {
- padding: 16px;
- overflow-y: auto;
- flex: 1;
-}
-.modal-footer {
- display: flex;
- justify-content: flex-end;
- gap: 12px;
- padding: 12px;
- background-color: var(--md-dark-surface-container-high);
- border-top: 1px solid var(--md-dark-outline-variant);
-}
-#cancel-edit-btn {
- padding: 8px 16px;
- border: none;
- border-radius: var(--md-radius-small);
- background-color: var(--md-dark-secondary);
- color: var(--md-dark-on-secondary);
- cursor: pointer;
- transition: background-color 0.2s;
-}
-#cancel-edit-btn:hover {
- background-color: var(--md-dark-secondary-container);
-}
-#save-item-btn {
- padding: 8px 16px;
- border: none;
- border-radius: var(--md-radius-small);
- background-color: var(--md-dark-primary);
- color: var(--md-dark-on-primary);
- cursor: pointer;
- transition: background-color 0.2s;
-}
-#save-item-btn:hover {
- background-color: var(--md-dark-primary-container);
-}
-
-/* small monospace preview under each card title */
-.data-preview {
- margin: 8px 0;
- font-family: monospace;
- white-space: pre-wrap;
- color: var(--md-dark-on-surface-variant);
-}
-
-/* nested object fieldsets styling */
-.nested-fieldset {
- border: 1px solid var(--md-dark-outline-variant);
- padding: 12px;
- margin: 8px 0;
- border-radius: var(--md-radius-small);
- background-color: var(--md-dark-surface-container-low);
-}
-.nested-fieldset legend {
- font-weight: 600;
- padding: 0 6px;
- color: var(--md-dark-on-surface);
-}
-
-/* indent array entries a bit */
-.array-container > .form-group {
- margin-left: 16px;
-}
+}
\ No newline at end of file
diff --git a/html/css/styleguide.css b/html/css/styleguide.css
index c1c4369..ab04246 100644
--- a/html/css/styleguide.css
+++ b/html/css/styleguide.css
@@ -111,21 +111,25 @@
--md-radius-extra-large: 28px;
/* Typography */
- --md-typescale-display-large-size: 57px;
- --md-typescale-display-medium-size: 45px;
- --md-typescale-display-small-size: 36px;
- --md-typescale-headline-large-size: 32px;
- --md-typescale-headline-medium-size: 28px;
- --md-typescale-headline-small-size: 24px;
- --md-typescale-title-large-size: 22px;
- --md-typescale-title-medium-size: 16px;
- --md-typescale-title-small-size: 14px;
- --md-typescale-body-large-size: 16px;
- --md-typescale-body-medium-size: 14px;
- --md-typescale-body-small-size: 12px;
- --md-typescale-label-large-size: 14px;
- --md-typescale-label-medium-size: 12px;
- --md-typescale-label-small-size: 11px;
+ --md-typescale-display-large-size: 3.5625rem; /* 57px */
+ --md-typescale-display-medium-size: 2.8125rem; /* 45px */
+ --md-typescale-display-small-size: 2.25rem; /* 36px */
+
+ --md-typescale-headline-large-size: 2rem; /* 32px */
+ --md-typescale-headline-medium-size: 1.75rem; /* 28px */
+ --md-typescale-headline-small-size: 1.5rem; /* 24px */
+
+ --md-typescale-title-large-size: 1.375rem; /* 22px */
+ --md-typescale-title-medium-size: 1rem; /* 16px */
+ --md-typescale-title-small-size: 0.875rem; /* 14px */
+
+ --md-typescale-body-large-size: 1rem; /* 16px */
+ --md-typescale-body-medium-size: 0.875rem; /* 14px */
+ --md-typescale-body-small-size: 0.75rem; /* 12px */
+
+ --md-typescale-label-large-size: 0.875rem; /* 14px */
+ --md-typescale-label-medium-size: 0.75rem; /* 12px */
+ --md-typescale-label-small-size: 0.6875rem; /* 11px */
/* Exo 2 Typography */
/* @import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&display=swap"); */
diff --git a/html/index.html b/html/index.html
index 645112a..0f7492e 100644
--- a/html/index.html
+++ b/html/index.html
@@ -1,18 +1,18 @@
-
-
-
-
+
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
@@ -29,7 +29,7 @@
- QB Config Editor
+ QBCore Config Editor
diff --git a/html/js/editor.js b/html/js/editor.js
index fb34337..6628262 100644
--- a/html/js/editor.js
+++ b/html/js/editor.js
@@ -34,18 +34,18 @@ function buildEditor(data) {
card.innerHTML = `${key}
`;
// value preview
- const preview = document.createElement("div");
- preview.className = "data-preview";
- if (typeof value === "boolean") {
- preview.textContent = value;
- } else if (Array.isArray(value)) {
- preview.textContent = `[${value.map((v) => (typeof v === "object" ? JSON.stringify(v) : v)).join(", ")}]`;
- } else if (typeof value === "object" && value !== null) {
- preview.textContent = JSON.stringify(value);
- } else {
- preview.textContent = value;
- }
- card.appendChild(preview);
+ // const preview = document.createElement("div");
+ // preview.className = "data-preview";
+ // if (typeof value === "boolean") {
+ // preview.textContent = value;
+ // } else if (Array.isArray(value)) {
+ // preview.textContent = `[${value.map((v) => (typeof v === "object" ? JSON.stringify(v) : v)).join(", ")}]`;
+ // } else if (typeof value === "object" && value !== null) {
+ // preview.textContent = JSON.stringify(value);
+ // } else {
+ // preview.textContent = value;
+ // }
+ // card.appendChild(preview);
const editBtn = document.createElement("button");
editBtn.className = "btn-edit";
@@ -59,65 +59,120 @@ function buildEditor(data) {
// Recursive field builder
function buildFormFields(container, data, prefix = "") {
- Object.entries(data).forEach(([field, val]) => {
- const group = document.createElement("div");
- group.className = "form-group";
+ const entries = Object.entries(data);
- const label = document.createElement("label");
- label.htmlFor = "field-" + prefix + field;
- label.textContent = field;
- group.appendChild(label);
+ // Sort fields: booleans first, then other flat fields, then nested objects
+ const sorted = [
+ ...entries.filter(([_, val]) => typeof val === "boolean"),
+ ...entries.filter(([_, val]) => val !== null && typeof val !== "object" && typeof val !== "boolean"),
+ ...entries.filter(([_, val]) => val !== null && typeof val === "object")
+ ];
+ sorted.forEach(([field, val]) => {
if (typeof val === "boolean") {
+ const group = document.createElement("div");
+ group.className = "form-group form-toggle-group";
+
+ const label = document.createElement("label");
+ label.htmlFor = "field-" + prefix + field;
+ label.textContent = field;
+ group.appendChild(label);
+
+ const toggleLabel = document.createElement("label");
+ toggleLabel.className = "toggle-wrapper";
+
const input = document.createElement("input");
input.type = "checkbox";
input.checked = val;
input.name = prefix + field;
input.id = "field-" + prefix + field;
- input.className = "form-control";
- group.appendChild(input);
- } else if (Array.isArray(val)) {
- // Array handling: differentiate primitives and objects
- val.forEach((item, idx) => {
- if (item !== null && typeof item === "object") {
- // Nested object in array: use fieldset
- const fieldset = document.createElement("fieldset");
- fieldset.className = "nested-fieldset";
- const legend = document.createElement("legend");
- legend.textContent = `${field}[${idx}]`;
- fieldset.appendChild(legend);
- buildFormFields(fieldset, item, prefix + field + `[${idx}].`);
- group.appendChild(fieldset);
- } else {
- // Primitive in array
- const itemGroup = document.createElement("div");
- itemGroup.className = "form-group";
- const itemLabel = document.createElement("label");
- itemLabel.htmlFor = `${prefix}${field}[${idx}]`;
- itemLabel.textContent = `${field}[${idx}]`;
- const input = document.createElement("input");
- input.type = typeof item === "boolean" ? "checkbox" : "text";
- if (typeof item === "boolean") input.checked = item;
- else input.value = item;
- input.name = `${prefix}${field}[${idx}]`;
- input.id = `field-${prefix}${field}[${idx}]`;
- input.className = "form-control";
+ const span = document.createElement("span");
+ span.className = "toggle-switch";
- itemGroup.append(itemLabel, input);
- group.appendChild(itemGroup);
- }
- });
+ toggleLabel.appendChild(input);
+ toggleLabel.appendChild(span);
+ group.appendChild(toggleLabel);
+
+ container.appendChild(group);
} else if (val !== null && typeof val === "object") {
- // Nested object
- const fieldset = document.createElement("fieldset");
- fieldset.className = "nested-fieldset";
- const legend = document.createElement("legend");
- legend.textContent = field;
- fieldset.appendChild(legend);
- buildFormFields(fieldset, val, prefix + field + ".");
- group.appendChild(fieldset);
+ const group = document.createElement("div");
+ group.className = "form-group";
+
+ if (Array.isArray(val)) {
+ val.forEach((item, idx) => {
+ if (item !== null && typeof item === "object") {
+ const fieldset = document.createElement("fieldset");
+ fieldset.className = "nested-fieldset";
+
+ const legend = document.createElement("legend");
+ legend.textContent = `${field}[${idx}]`;
+ fieldset.appendChild(legend);
+
+ buildFormFields(fieldset, item, `${prefix}${field}[${idx}].`);
+ group.appendChild(fieldset);
+ } else {
+ const itemGroup = document.createElement("div");
+ itemGroup.className = "form-group";
+
+ const itemLabel = document.createElement("label");
+ itemLabel.htmlFor = `field-${prefix}${field}[${idx}]`;
+ itemLabel.textContent = `${field}[${idx}]`;
+ itemGroup.appendChild(itemLabel);
+
+ if (typeof item === "boolean") {
+ itemGroup.classList.add("form-toggle-group");
+
+ const toggleLabel = document.createElement("label");
+ toggleLabel.className = "toggle-wrapper";
+
+ const input = document.createElement("input");
+ input.type = "checkbox";
+ input.checked = item;
+ input.name = `${prefix}${field}[${idx}]`;
+ input.id = `field-${prefix}${field}[${idx}]`;
+
+ const span = document.createElement("span");
+ span.className = "toggle-switch";
+
+ toggleLabel.appendChild(input);
+ toggleLabel.appendChild(span);
+ itemGroup.appendChild(toggleLabel);
+ } else {
+ const input = document.createElement("input");
+ input.type = "text";
+ input.value = item;
+ input.name = `${prefix}${field}[${idx}]`;
+ input.id = `field-${prefix}${field}[${idx}]`;
+ input.className = "form-control";
+ itemGroup.appendChild(input);
+ }
+
+ group.appendChild(itemGroup);
+ }
+ });
+ } else {
+ const fieldset = document.createElement("fieldset");
+ fieldset.className = "nested-fieldset";
+
+ const legend = document.createElement("legend");
+ legend.textContent = field;
+ fieldset.appendChild(legend);
+
+ buildFormFields(fieldset, val, prefix + field + ".");
+ group.appendChild(fieldset);
+ }
+
+ container.appendChild(group);
} else {
+ const group = document.createElement("div");
+ group.className = "form-group";
+
+ const label = document.createElement("label");
+ label.htmlFor = "field-" + prefix + field;
+ label.textContent = field;
+ group.appendChild(label);
+
const input = document.createElement("input");
input.type = "text";
input.value = val;
@@ -125,15 +180,16 @@ function buildFormFields(container, data, prefix = "") {
input.id = "field-" + prefix + field;
input.className = "form-control";
group.appendChild(input);
+
+ container.appendChild(group);
}
- container.appendChild(group);
});
}
// Open modal to edit a key
function openEditModal(key, value) {
const modal = document.getElementById("edit-modal");
- modal.querySelector("h2").textContent = `Edit '${key}'`;
+ modal.querySelector("h2").textContent = `${key}`;
const formContainer = document.getElementById("editor-form");
formContainer.innerHTML = "";
@@ -142,7 +198,7 @@ function openEditModal(key, value) {
// Determine if value is object or primitive
const isObj = value !== null && typeof value === "object";
- const editableData = isObj ? value : { [key]: value };
+ const editableData = isObj ? value : {[key]: value};
const prefix = isObj ? "" : key + ".";
buildFormFields(form, editableData, prefix);
@@ -152,7 +208,7 @@ function openEditModal(key, value) {
document.getElementById("save-item-btn").onclick = async (e) => {
e.preventDefault();
const formElem = document.getElementById("editor-form-inner");
- const updated = { ...allData[currentFile] };
+ const updated = {...allData[currentFile]};
const resultValue = {};
Array.from(formElem.elements).forEach((el) => {
@@ -247,7 +303,7 @@ function openNewItemModal() {
val = raw;
}
} else val = raw;
- const updated = { ...allData[currentFile] };
+ const updated = {...allData[currentFile]};
updated[key] = val;
await saveConfig(updated);
};
@@ -261,8 +317,8 @@ async function saveConfig(configData) {
try {
const res = await fetch(`https://${GetParentResourceName()}/saveConfig`, {
method: "POST",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({ file: currentFile, data: configData }),
+ headers: {"Content-Type": "application/json"},
+ body: JSON.stringify({file: currentFile, data: configData}),
});
const result = await res.json();
if (result === "ok") {