manuel.sowada/radixOS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styles and startmenuItems

Browse Source
This commit is contained in:
Manuel Sowada
2026-04-23 15:01:32 +02:00
parent 12d7de5065
commit 0876e754eb
11 changed files with 458 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
public/javascript/JSON.js
View File

@@ -2,14 +2,17 @@
createJsonTree({
container: domElement,
data: jsonData,
expandInitially = true // optional: expand all nodes
onChange: (data) => { }, // optional: callback on change
onSave: (data) => { } // optional: if set, a save button will be added
});
*/function createJsonTree({
*/
function createJsonTree({
container,
data,
onChange = () => {},
onSave = null
onSave = null,
expandInitially = true
}) {
container.innerHTML = "";
container.classList.add("json-tree-root");
@@ -19,6 +22,8 @@ createJsonTree({
let lastSnapshot = clone(data);
const expandedPaths = new Set();
function clone(obj) {
return JSON.parse(JSON.stringify(obj));
}
@@ -104,34 +109,53 @@ createJsonTree({
render();
}
function collectPaths(obj, path = "root") {
if (typeof obj !== "object" || obj === null) return;
expandedPaths.add(path);
const entries = Array.isArray(obj)
? obj.map((v, i) => [i, v])
: Object.entries(obj);
for (const [k, v] of entries) {
collectPaths(v, `${path}.${k}`);
}
}
if (expandInitially) {
collectPaths(data);
}
function render() {
container.innerHTML = "";
const controls = document.createElement("div");
controls.className = "json-controls";
const undoBtn = document.createElement("button");
undoBtn.className = "monolyth";
undoBtn.textContent = "Undo";
undoBtn.onclick = undo;
const redoBtn = document.createElement("button");
redoBtn.className = "monolyth";
redoBtn.textContent = "Redo";
redoBtn.onclick = redo;
controls.appendChild(undoBtn);
controls.appendChild(redoBtn);
if (onSave) {
const controls = document.createElement("div");
controls.className = "json-controls";
const undoBtn = document.createElement("button");
undoBtn.className = "monolyth";
undoBtn.textContent = "Undo";
undoBtn.onclick = undo;
const redoBtn = document.createElement("button");
redoBtn.className = "monolyth";
redoBtn.textContent = "Redo";
redoBtn.onclick = redo;
const saveBtn = document.createElement("button");
saveBtn.className = "monolyth";
saveBtn.textContent = "Save";
saveBtn.onclick = save;
controls.appendChild(undoBtn);
controls.appendChild(redoBtn);
controls.appendChild(saveBtn);
container.appendChild(controls);
}
container.appendChild(controls);
container.appendChild(renderNode(data, null, null, "root", 0));
}
@@ -177,10 +201,24 @@ createJsonTree({
const children = document.createElement("div");
children.className = "json-children";
keyLabel.onclick = toggle.onclick = () => {
children.classList.toggle("collapsed");
const toggleState = () => {
if (expandedPaths.has(path)) {
expandedPaths.delete(path);
children.classList.add("collapsed");
} else {
expandedPaths.add(path);
children.classList.remove("collapsed");
}
};
keyLabel.onclick = toggle.onclick = toggleState;
if (expandedPaths.has(path)) {
children.classList.remove("collapsed");
} else {
children.classList.add("collapsed");
}
addBtn.onclick = () => {
let newKey = "";
let newValue;
@@ -210,7 +248,6 @@ createJsonTree({
if (!isArray) {
const input = document.querySelector('#newJsonKeyName');
newKey = input?.value?.trim();
if (!newKey) return;
}
@@ -331,6 +368,7 @@ createJsonTree({
wrapper.appendChild(keySpan);
wrapper.appendChild(span);
if (key !== null) wrapper.appendChild(removeBtn);
return wrapper;

11
public/styles/os.css
View File

@@ -14,16 +14,19 @@ body, html { margin:0; padding:0; height:100%; overflow: hidden; font-family: va
.window-content { display: flex; flex-direction: column; flex:1; padding:8px; overflow: auto; }
.window[class="max"] .window-resize-handle { display: none; }
.window-resize-n, .window-resize-s { position: absolute; left: 8px; right: 8px; height: 8px; z-index: 10; }
.window-resize-s { position: absolute; left: 8px; right: 8px; height: 8px; z-index: 10; }
.window-resize-n { position: absolute; left: 8px; right: 16px; height: 8px; z-index: 10; }
.window-resize-n { top: -4px;cursor: var(--theme-cursor-resize-vertical); }
.window-resize-s { bottom: -4px;cursor: var(--theme-cursor-resize-vertical); }
.window-resize-e, .window-resize-w { position: absolute;top: 8px;bottom: 8px;width: 8px;z-index: 10; }
.window-resize-w { position: absolute;top: 8px;bottom: 8px;width: 8px;z-index: 10; }
.window-resize-e { position: absolute;top: 16px;bottom: 8px;width: 8px;z-index: 10; }
.window-resize-e { right: -4px;cursor: var(--theme-cursor-resize-horizontal); }
.window-resize-w { left: -4px;cursor: var(--theme-cursor-resize-horizontal); }
.window-resize-ne, .window-resize-nw, .window-resize-se, .window-resize-sw { position: absolute;width: 16px;height: 16px;z-index: 11; }
.window-resize-ne { top: -6px;right: -6px;cursor: var(--theme-cursor-resize-45); }
.window-resize-nw, .window-resize-se, .window-resize-sw { position: absolute;width: 16px;height: 16px;z-index: 11; }
.window-resize-ne { position: absolute;width: 8px;height: 8x;z-index: 11; }
.window-resize-ne { top: -3px;right: -3px;cursor: var(--theme-cursor-resize-45); }
.window-resize-nw { top: -6px;left: -6px;cursor: var(--theme-cursor-resize-270); }
.window-resize-se { bottom: -6px;right: -6px;cursor: var(--theme-cursor-resize-270); }
.window-resize-sw { bottom: -6px;left: -6px;cursor: var(--theme-cursor-resize-45); }

2
public/styles/table.css
View File

@@ -17,7 +17,7 @@ table.border * { border:1px solid white; }
/* #region performance optimizing */
table thead { position:sticky; top:0; z-index:20; will-change:transform; transform:translateZ(0);}
table thead { position:sticky; top:0; z-index:20; }
/* #endregion */

21
public/views/integrated/serverinfo.hbs
View File

@@ -8,8 +8,8 @@
<span class="copy-icon" onclick="copyToClipboard(`${document.getElementById('pid').textContent}`)">⧉</span>
</div>
</div>
<div class="card">
<div class="table-wrapper" style="max-height: 350px;">
<div class="card" styles="max-height:350px;">
<div class="table-wrapper">
<table id="releaseNotes">
<thead>
<tr>
@@ -24,8 +24,8 @@
</table>
</div>
</div>
<div class="card">
<div id="package" style="overflow:auto"></div>
<div class="card static" style="min-height:150px">
<div id="package" style="overflow:auto"></div>
</div>
</div>
@@ -88,14 +88,13 @@
});
vt.addData(json.releaseNotes)
document.querySelector('#package').innerHTML = JSON.stringify(json.package).split(',').join('<br>');
/*
//document.querySelector('#package').innerHTML = JSON.stringify(json.package).split(',').join('<br>');
createJsonTree({
container: document.getElementById("package-json"),
data: json,
expandInitially: true,
onSave: () => { }
container: document.getElementById("package"),
data: json.package,
expandInitially: true
});
*/
});
</script>

115
public/views/plugindashboard.hbs
View File

@@ -21,7 +21,7 @@
</div>
</body>
<script type="text/javascript">
<script defer type="text/javascript">
createNewPlugin.onclick = () => {
feedbox({
@@ -62,16 +62,42 @@
"active":true
}
}*/
fetch('/api/plugins/integrated', { method: 'POST' })
.then(res => res.json())
.then(data => {
createTab(pluginTabs, 'Integrierte Plugins', { onclick:
async (tabElement) => {
pluginsTabWrapper.innerHTML = '';
const objectsContainer = document.createElement('div');
objectsContainer.className = 'card';
createJsonTree({
container: objectsContainer,
data: data,
expandInitially: true,
onSave: () => {}
})
pluginsTabWrapper.appendChild(objectsContainer);
}
})
})
fetch('/api/plugins/getAll', { method: 'POST' })
.then(res => res.json())
.then(data => {
data.forEach(async metaData => {
createTab(pluginTabs, metaData.name, async (tabElement) => {
createTab(pluginTabs, metaData.name, { onclick:
async (tabElement) => {
pluginsTabWrapper.innerHTML = '';
const objectsContainer = document.createElement('div');
objectsContainer.className = 'card grid';
objectsContainer.className = 'card static';
objectsContainer.style = ``;
const card = document.createElement('div');
card.className = 'card static row';
@@ -140,8 +166,8 @@
if(typeof value === 'object') {
const objectCard = document.createElement('div');
objectCard.className = 'card';
objectCard.style = `height:100%`;
objectCard.className = 'card static';
objectCard.style = `min-height:400px;`;
objectCard.innerHTML = `
<label style="font-weight:bold">${key}</label>
<div style="overflow:auto" id="${metaData.name}-${key}"></div>
@@ -151,9 +177,6 @@
const menu = createJsonTree({
container: document.getElementById(`${metaData.name}-${key}`),
data: metaData[key],
schema: {
"active": { type: "boolean" }
},
onChange: (data) => { },
onSave: async (data) => {
await pluginAPI.update(metaData.name, { [key]: data });
@@ -163,80 +186,10 @@
}
}
pluginsTabWrapper.appendChild(objectsContainer);
/*pluginsTabWrapper.innerHTML = `
<div class="card static row" style="grid-column: span 3;height:50px;">
<label class="cb cb-modern">
<label for="plugin-${plugin.name}" style="font-weight:bold">Aktiv</label>
<input onchange="pluginAPI.activation('${plugin.name}', this.checked);" id="plugin-${plugin.name}" data-status="${plugin.name}" type="checkbox" ${plugin.active ? 'checked' : ''}>
<span class="cb-box" aria-hidden="true"></span>
</label>
</div>
<div class="card static row" style="gap:0 10px;min-height:fit-content;">
<div style="flex:0 0 auto">
<label style="font-weight:bold">Name</label>
<input type="text" data-name="${plugin.name}" data-field="name" value="${plugin.name}" />
</div>
<div style="flex:0 0 auto">
<label style="font-weight:bold">Version</label>
<input type="text" data-name="${plugin.name}" data-field="version" value="${plugin.version}" />
</div>
<div style="flex:1 1 auto">
<label style="font-weight:bold">Beschreibung</label>
<input type="text" data-name="${plugin.name}" data-field="description" style="width:100%" value="${plugin.description}" />
</div>
</div>
<div class="card static" style="grid-column: span 3;">
<label style="font-weight:bold">Startmenüeinträge</label>
<div style="overflow:auto" id="${plugin.name}-menu"></div>
</div>
`;
createJsonTree({
container: document.getElementById(`${plugin.name}-menu`),
data: plugin,
schema: {
"active": { type: "boolean" }
}
});
*/
});
/*
{
"name": "TEST",
"description": "Remote Desktop Verbindungen über MSRA realisieren",
"version": "0.2025.11.07",
"config": {},
"menu": {
"label": "TEST",
"items": [
{
"label": "Remoteunterstützung",
"view": "index",
"icon": "remoteServer.png",
"permissions": [
"Administration"
]
}
]
},
"active": true
}
*/
/*
new AttachOnBlurChange(document.querySelector(`[data-name="${plugin.name}"][data-field="name"]`), async (newValue, oldValue) => { await pluginAPI.rename(`${plugin.name}`, newValue); });
new AttachOnBlurChange(document.querySelector(`[data-name="${plugin.name}"][data-field="version"]`), async (newValue, oldValue) => await pluginAPI.update(`${plugin.name}`, { version: newValue }))
new AttachOnBlurChange(document.querySelector(`[data-name="${plugin.name}"][data-field="description"]`), async (newValue, oldValue) => await pluginAPI.update(`${plugin.name}`, { description: newValue }))
*/
}
});
});
pluginTabs.querySelectorAll('.tab')[0]?.click();
})
</script>
</html>