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

style fixes

Browse Source
This commit is contained in:
manuel.sowada
2026-05-13 16:05:12 +02:00
parent 4db4ac755c
commit 556ccc3a73
7 changed files with 175 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/shield.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

10
public/javascript/main.js
View File

@@ -1225,12 +1225,6 @@ window.addEventListener('resize', () => {
tableEl.before(container);
// Höhe messen → thead offset setzen
requestAnimationFrame(()=>{
const h = container.getBoundingClientRect().height;
tableEl.style.setProperty('--filter-height', h + 'px');
});
if(!filterConfig.hideCounter) {
filterState.counterEl = document.createElement('div');
filterState.counterEl.className = 'live-counter';
@@ -1243,6 +1237,10 @@ window.addEventListener('resize', () => {
// Filter-Header anpassen
syncFilterWidth(container);
// Höhe messen → thead offset setzen
const h = container.getBoundingClientRect().height;
tableEl.style.setProperty('--filter-height', h + 'px');
// Tabelle neu rendern
rebuildPrefix();
render();

247
public/javascript/rbacAPI.js
View File

@@ -122,67 +122,67 @@ function createDropZone(el, type, target) {
// 📋 TABLE (USERS)
//////////////////////////////
const rbacUsersVT = virtualTable({
tableEl: document.querySelector('#rbacUsersTable'),
data: [],
rowHeight: 20,
buffer: 5,
groupKey: 'ObjectSourceName',
rowKey: 'ObjectGUID',
filterConfig: {
hideCounter: true,
exceptedColumns: ['', 'Rollen', 'Gruppen'],
columnModes: {
Aktiv: 'dropdown',
Online: 'dropdown'
}
},
// const rbacUsersVT = virtualTable({
// tableEl: document.querySelector('#rbacUsersTable'),
// data: [],
// rowHeight: 35,
// buffer: 10,
// groupKey: 'ObjectSourceName',
// rowKey: 'ObjectGUID',
// filterConfig: {
// hideCounter: true,
// exceptedColumns: ['', 'Rollen', 'Gruppen'],
// columnModes: {
// Aktiv: 'dropdown',
// Online: 'dropdown'
// }
// },
customRender: (row, tr) => {
// customRender: (row, tr) => {
createDragZone(tr, row, 'user');
// createDragZone(tr, row, 'user');
tr.addEventListener('contextmenu', (evt) => {
evt.preventDefault();
// tr.addEventListener('contextmenu', (evt) => {
// evt.preventDefault();
ctxRBAC.setItems([
{
label: "Details",
onClick: () => showAuthDetails(row.ObjectGUID)
}
]);
// ctxRBAC.setItems([
// {
// label: "Details",
// onClick: () => showAuthDetails(row.ObjectGUID)
// }
// ]);
ctxRBAC.show(evt.pageX + 5, { y: evt.pageY + 5 });
});
// ctxRBAC.show(evt.pageX + 5, { y: evt.pageY + 5 });
// });
createTd(tr,
`<button class="redbutton"
${row['ObjectGUID'] === '00000000-0000-0000-0000-000000000001' ?
'disabled data-tooltip="Der Administrator kann nicht gelöscht werden"' :
''
}>X</button>`, {
styles: {
'position': 'sticky',
'left': '0px',
'max-width': '20px',
'z-index': '2'
}, classes: [
'text-align:left'
], onclick: () => {
if(row['ObjectGUID'] === '00000000-0000-0000-0000-000000000001') return;
deleteUser(row['ObjectGUID'], row['sAMAccountName']);
}
});
createTd(tr, row['ObjectGUID'], { classes: [ 'text-align:left' ], styles: { 'max-width': '100px' }, attributes: { 'data-tooltip': row['ObjectGUID'] } });
createTd(tr, row['sAMAccountName'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['sAMAccountName'] } });
createTd(tr, row['RoleCount'], { classes: [ 'text-align:center' ] });
createTd(tr, row['GroupCount'], { classes: [ 'text-align:center' ] });
createTd(tr, row['sn'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['sn'] } });
createTd(tr, row['givenName'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['givenName'] } });
createTd(tr, row['mail'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['mail'] } });
createTd(tr, row['Aktiv'], { classes: [ 'text-align:center' ] });
}
});
// createTd(tr,
// `<button class="redbutton"
// ${row['ObjectGUID'] === '00000000-0000-0000-0000-000000000001' ?
// 'disabled data-tooltip="Der Administrator kann nicht gelöscht werden"' :
// ''
// }>X</button>`, {
// styles: {
// 'position': 'sticky',
// 'left': '0px',
// 'max-width': '20px',
// 'z-index': '2'
// }, classes: [
// 'text-align:left'
// ], onclick: () => {
// if(row['ObjectGUID'] === '00000000-0000-0000-0000-000000000001') return;
// deleteUser(row['ObjectGUID'], row['sAMAccountName']);
// }
// });
// createTd(tr, row['ObjectGUID'], { classes: [ 'text-align:left' ], styles: { 'max-width': '100px' }, attributes: { 'data-tooltip': row['ObjectGUID'] } });
// createTd(tr, row['sAMAccountName'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['sAMAccountName'] } });
// createTd(tr, row['RoleCount'], { classes: [ 'text-align:center' ] });
// createTd(tr, row['GroupCount'], { classes: [ 'text-align:center' ] });
// createTd(tr, row['sn'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['sn'] } });
// createTd(tr, row['givenName'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['givenName'] } });
// createTd(tr, row['mail'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['mail'] } });
// createTd(tr, row['Aktiv'], { classes: [ 'text-align:center' ] });
// }
// });
@@ -190,62 +190,84 @@ const rbacUsersVT = virtualTable({
// 📋 TABLE (PERMISSIONS)
//////////////////////////////
const rbacPermissionsVT = virtualTable({
tableEl: document.querySelector('#rbacPermissionsTable'),
data: [],
rowHeight: 20,
buffer: 5,
groupKey: null,
rowKey: 'ID',
filterConfig: {
hideCounter: true,
exceptedColumns: ['', 'ID']
},
// const rbacPermissionsVT = virtualTable({
// tableEl: document.querySelector('#rbacPermissionsTable'),
// data: [],
// rowHeight: 20,
// buffer: 5,
// groupKey: null,
// rowKey: 'ID',
// filterConfig: {
// hideCounter: true,
// exceptedColumns: ['', 'ID']
// },
customRender: (row, tr) => {
// customRender: (row, tr) => {
createDragZone(tr, row, 'user');
// createDragZone(tr, row, 'user');
tr.addEventListener('contextmenu', (evt) => {
evt.preventDefault();
// tr.addEventListener('contextmenu', (evt) => {
// evt.preventDefault();
ctxRBAC.setItems([
{
label: "Details",
onClick: () => showAuthDetails(row.ObjectGUID)
}
]);
// ctxRBAC.setItems([
// {
// label: "Details",
// onClick: () => showAuthDetails(row.ObjectGUID)
// }
// ]);
ctxRBAC.show(evt.pageX + 5, { y: evt.pageY + 5 });
});
// ctxRBAC.show(evt.pageX + 5, { y: evt.pageY + 5 });
// });
createTd(tr,
`<button class="redbutton"
${row['ID'] === 1 ?
'disabled data-tooltip="Die SYSTEM-Berechtigung kann nicht gelöscht werden"' :
''
}>X</button>`, {
styles: {
'position': 'sticky',
'left': '0px',
'max-width': '20px',
'z-index': '2'
}, classes: [
'text-align:left'
], onclick: () => {
if(row['ID'] === 1) return;
deletePermission(row['ID'], `${row['Scope']}.${row['Resource']}.${row['Action']}`);
}
});
createTd(tr, row['Permission_ID'], { classes: [ 'text-align:left' ], styles: { 'width': '100px' } } );
createTd(tr, row['GroupUserCount'], { classes: [ 'text-align:center' ] });
createTd(tr, row['TotalUserCount'], { classes: [ 'text-align:center' ] });
createTd(tr, row['RoleCount'], { classes: [ 'text-align:center' ], styles: { 'width': '100px' } });
createTd(tr, row['Scope'], { classes: [ 'text-align:right' ], styles: { 'width': '100px' } });
createTd(tr, row['Resource'], { classes: [ 'text-align:center' ], styles: { 'width': '100px' } });
createTd(tr, row['Action'], { classes: [ 'text-align:left' ], styles: { 'width': '100px' } });
// createTd(tr,
// `<button class="redbutton"
// ${row['ID'] === 1 ?
// 'disabled data-tooltip="Die SYSTEM-Berechtigung kann nicht gelöscht werden"' :
// ''
// }>X</button>`, {
// styles: {
// 'position': 'sticky',
// 'left': '0px',
// 'max-width': '20px',
// 'z-index': '2'
// }, classes: [
// 'text-align:left'
// ], onclick: () => {
// if(row['ID'] === 1) return;
// deletePermission(row['ID'], `${row['Scope']}.${row['Resource']}.${row['Action']}`);
// }
// });
// createTd(tr, row['Permission_ID'], { classes: [ 'text-align:left' ], styles: { 'width': '100px' } } );
// createTd(tr, row['GroupUserCount'], { classes: [ 'text-align:center' ] });
// createTd(tr, row['TotalUserCount'], { classes: [ 'text-align:center' ] });
// createTd(tr, row['RoleCount'], { classes: [ 'text-align:center' ], styles: { 'width': '100px' } });
// createTd(tr, row['Scope'], { classes: [ 'text-align:right' ], styles: { 'width': '100px' } });
// createTd(tr, row['Resource'], { classes: [ 'text-align:center' ], styles: { 'width': '100px' } });
// createTd(tr, row['Action'], { classes: [ 'text-align:left' ], styles: { 'width': '100px' } });
// }
// });
class Tile {
constructor(title, parent, options = {}) {
this.title = title;
this.parent = parent;
this.options = options;
}
});
render() {
const tile = document.createElement('div');
tile.classList.add('tile');
tile.innerHTML = this.title;
if(this.options.onclick) {
tile.addEventListener('click', this.options.onclick);
}
this.parent.appendChild(tile);
}
}
//////////////////////////////
// 📥 LOADERS
@@ -253,7 +275,14 @@ const rbacPermissionsVT = virtualTable({
async function loadUsers() {
try {
rbacUsersVT.source(await RBAC.loadUsers());
// rbacUsersVT.source(await RBAC.loadUsers());
const users = await RBAC.loadUsers();
users.forEach(user => {
const tile = new Tile(`[${user.UserCount}] ${user.sAMAccountName}`, document.querySelector('#rbacTabContents') , { onclick: () => showAuthDetails(user.ObjectGUID) });
tile.render();
})
} catch (err) {
console.error(err);
}
@@ -528,7 +557,7 @@ async function deletePermission(id, name) {
// 🚀 INIT
//////////////////////////////
loadUsers();
loadGroups();
loadRoles();
loadPermissions();
loadUsers();
// loadGroups();
// loadRoles();
// loadPermissions();

4
public/styles/default.css
View File

@@ -38,14 +38,14 @@ button:not(:disabled).yellowbutton:hover { background:var(--theme-button-yellow-
/* #region Container */
.container.static { width:calc(100% - 10px); margin:5px auto; display:flex; gap:6px; min-height:0; overflow:auto; max-height:100%; flex-direction: column;}
.container.static { width:calc(100% - 10px); margin:5px auto; display:flex; gap:6px; min-height:0; overflow:auto; max-height:100vh; flex-direction: column;}
/* .card.static { display:flex; flex-direction:column;flex: 0 0 auto; } */
.card.static.row { overflow:hidden; display:flex; flex-direction:row; flex-wrap: wrap;}
.card.static { overflow:hidden; display:flex; flex-direction:column; }
.container:not(.static) { width:calc(100% - 10px); margin:5px auto; display:grid; grid-template-columns:100%; gap:12px; min-height:0; overflow:auto; max-height:100%; }
.container:not(.static) * { box-sizing:border-box; }
.card { border-width:1px; border-style:solid; border-radius:8px; padding:15px; }
.card { border-width:1px; border-style:solid; border-radius:8px; padding:10px; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }
/* #endregion */

1
public/styles/table.css
View File

@@ -56,7 +56,6 @@ td { overflow:hidden; text-overflow:ellipsis; /* verhindert, dass Inhalt die Zel
left:0px;
top:0px;
width: 100% !important;
height: fit-content;
/* z-index:20; */
padding:0px;
border-radius:var(--border-raduis) var(--border-raduis) 0 0;

32
public/views/rbac.hbs
View File

@@ -59,12 +59,40 @@ section span {
input {
margin: 5px;
}
.tile {
display:inline-flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
align-items: stretch;
height:60px;
padding: 5px;
width: 200px;
border: 1px solid #ccc;
border-radius: 8px;
margin: 0 2px 2px 0;
transition: background var(--times-transition-colors) ease, border-color var(--times-transition-colors) ease, color var(--times-transition-colors) ease;
}
</style>
</head>
<body>
<div class="container static" style="height:100vh;">
<div class="card static">
<div class="tabs" id="rbacTabs" style="flex: 0 0 auto;">
<div class="tab">Verwaltung</div>
<div class="tab">Benutzer & Gruppen</div>
<div class="tab">Rollen & Berechtigungen</div>
</div>
<div id="rbacTabContents" class="tab-contents" style="flex: 1 1 100%;overflow-y:auto;padding:0;">
</div>
</div>
<div class="container static" style="max-width:100vw;flex-direction:row;flex-wrap:wrap;flex: 1 1 100vh;">
{{!-- <div class="container static" style="max-width:100vw;flex-direction:row;flex-wrap:wrap;flex: 1 1 100vh;">
<!-- USERS -->
<div class="card static row" style="align-items:center;height:fit-content;width:100%">
AD Synchronisation:
@@ -146,7 +174,7 @@ input {
</div>
</div>
</div>
</div> --}}
</body>
<script type="text/javascript">

2
src/models/integratedStartMenuItems.json
View File

@@ -42,7 +42,7 @@
"width": "800px",
"height": "600px"
},
"icon": "app.png",
"icon": "shield.png",
"permissions": [
{
"scope": "SYSTEM",