private/desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adsasd
All checks were successful
Deploy / deploy-staging (push) Successful in 10s
Details
Deploy / deploy-production (push) Has been skipped
Details

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-06-07 01:25:05 +02:00
parent 915757da8b
commit 0395c790f3
3 changed files with 43 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
partials/desktop/shell.php
View File

@@ -15,41 +15,6 @@ $wallpaper = $desktopPayload['desktop']['wallpaper'];
</head> </head>
<body data-skin="<?= htmlspecialchars($activeSkin, ENT_QUOTES) ?>" style="--wallpaper: <?= htmlspecialchars($wallpaper, ENT_QUOTES) ?>;"> <body data-skin="<?= htmlspecialchars($activeSkin, ENT_QUOTES) ?>" style="--wallpaper: <?= htmlspecialchars($wallpaper, ENT_QUOTES) ?>;">
<div class="desktop-shell"> <div class="desktop-shell">
<aside class="desktop-sidebar">
<div>
<p class="eyebrow">Kusche.Berlin</p>
<h1>Desktop UI</h1>
<p class="lede"><?= htmlspecialchars($desktopPayload['desktop']['greeting'], ENT_QUOTES) ?></p>
</div>
<section class="panel">
<h2>Skins</h2>
<div class="skin-switcher">
<?php foreach ($desktopPayload['meta']['available_skins'] as $skin): ?>
<a class="skin-chip<?= $skin === $activeSkin ? ' is-active' : '' ?>" href="/?skin=<?= urlencode($skin) ?>">
<?= htmlspecialchars(ucfirst($skin), ENT_QUOTES) ?>
</a>
<?php endforeach; ?>
</div>
</section>
<section class="panel">
<h2>V1 Scope</h2>
<ul class="fact-list">
<li>Desktop-Shell auf Root</li>
<li>Fenster-Manager vorbereitet</li>
<li>App-Registry zentral konfiguriert</li>
<li>Public Home und persoenliche Workspaces vorgesehen</li>
</ul>
</section>
<section class="panel">
<h2>Keycloak</h2>
<p>Desktop-Login bleibt Keycloak-basiert, bekommt aber ein eigenes Theme.</p>
<a class="text-link" href="/../docs/keycloak-theme-handoff.md">Theme-Handoff ansehen</a>
</section>
</aside>
<main class="desktop-stage"> <main class="desktop-stage">
<div class="desktop-icons" id="desktop-icons"></div> <div class="desktop-icons" id="desktop-icons"></div>

67
public/assets/desktop/desktop.css
View File

@@ -36,18 +36,9 @@ body[data-skin="linux"] {
} }
.desktop-shell { .desktop-shell {
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
min-height: 100vh; min-height: 100vh;
} }
.desktop-sidebar {
padding: 32px;
backdrop-filter: blur(20px);
background: linear-gradient(180deg, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.32));
border-right: 1px solid var(--shell-border);
}
.eyebrow { .eyebrow {
margin: 0 0 12px; margin: 0 0 12px;
text-transform: uppercase; text-transform: uppercase;
@@ -76,50 +67,10 @@ h1 {
opacity: 0.88; opacity: 0.88;
} }
.panel {
margin-top: 24px;
padding: 18px;
border: 1px solid var(--shell-border);
background: var(--shell-panel);
border-radius: 18px;
box-shadow: var(--shadow);
}
.skin-switcher {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.skin-chip,
.text-link {
color: inherit;
text-decoration: none;
}
.skin-chip {
display: inline-flex;
align-items: center;
padding: 10px 14px;
border-radius: 999px;
border: 1px solid var(--shell-border);
background: rgba(255, 255, 255, 0.06);
}
.skin-chip.is-active {
background: var(--accent);
color: #0f172a;
border-color: transparent;
}
.fact-list {
padding-left: 18px;
opacity: 0.9;
}
.desktop-stage { .desktop-stage {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
min-height: 100vh;
padding: 24px; padding: 24px;
} }
@@ -170,6 +121,7 @@ h1 {
display: grid; display: grid;
gap: 14px; gap: 14px;
width: min(320px, calc(100% - 48px)); width: min(320px, calc(100% - 48px));
z-index: 20;
} }
.widget-card { .widget-card {
@@ -204,6 +156,7 @@ h1 {
position: absolute; position: absolute;
inset: 0; inset: 0;
pointer-events: none; pointer-events: none;
z-index: 40;
} }
.window { .window {
@@ -285,6 +238,7 @@ h1 {
background: var(--taskbar-bg); background: var(--taskbar-bg);
backdrop-filter: blur(18px); backdrop-filter: blur(18px);
border: 1px solid var(--shell-border); border: 1px solid var(--shell-border);
z-index: 120;
} }
.start-button, .start-button,
@@ -310,7 +264,7 @@ h1 {
position: absolute; position: absolute;
left: 24px; left: 24px;
bottom: 102px; bottom: 102px;
z-index: 90; z-index: 130;
display: grid; display: grid;
align-content: start; align-content: start;
grid-template-columns: minmax(240px, 280px) minmax(280px, 360px); grid-template-columns: minmax(240px, 280px) minmax(280px, 360px);
@@ -415,17 +369,8 @@ h1 {
} }
@media (max-width: 1100px) { @media (max-width: 1100px) {
.desktop-shell {
grid-template-columns: 1fr;
}
.desktop-sidebar {
border-right: 0;
border-bottom: 1px solid var(--shell-border);
}
.desktop-stage { .desktop-stage {
min-height: 70vh; min-height: 100vh;
padding-bottom: 120px; padding-bottom: 120px;
} }

41
public/assets/desktop/desktop.js
View File

@@ -15,6 +15,25 @@ if (payloadNode) {
const windows = new Map(); const windows = new Map();
const activeWidgets = new Set(payload.widgets.active_ids); const activeWidgets = new Set(payload.widgets.active_ids);
let zIndex = 20; let zIndex = 20;
let topDesktopInset = 24;
let sideDesktopInset = 24;
let bottomDesktopInset = 120;
const measureDesktopBounds = () => {
if (!windowsRoot) {
return;
}
const taskbar = document.querySelector('.taskbar');
const stageRect = windowsRoot.getBoundingClientRect();
const taskbarRect = taskbar ? taskbar.getBoundingClientRect() : null;
topDesktopInset = 24;
sideDesktopInset = 24;
bottomDesktopInset = taskbarRect
? Math.max(24, Math.round(stageRect.bottom - taskbarRect.top + 8))
: 120;
};
const setStartMenuOpen = (isOpen) => { const setStartMenuOpen = (isOpen) => {
if (!startMenu) { if (!startMenu) {
@@ -98,10 +117,11 @@ if (payloadNode) {
record.restoreLayout = { ...record.layout }; record.restoreLayout = { ...record.layout };
record.state.maximized = true; record.state.maximized = true;
record.node.classList.add('is-maximized'); record.node.classList.add('is-maximized');
record.node.style.left = '24px'; measureDesktopBounds();
record.node.style.top = '24px'; record.node.style.left = `${sideDesktopInset}px`;
record.node.style.width = 'calc(100% - 48px)'; record.node.style.top = `${topDesktopInset}px`;
record.node.style.height = 'calc(100% - 120px)'; record.node.style.width = `calc(100% - ${sideDesktopInset * 2}px)`;
record.node.style.height = `calc(100% - ${topDesktopInset + bottomDesktopInset}px)`;
focusWindow(windowId); focusWindow(windowId);
return; return;
} }
@@ -449,7 +469,20 @@ if (payloadNode) {
renderWidgets(); renderWidgets();
renderStartMenu(); renderStartMenu();
setStartMenuOpen(false); setStartMenuOpen(false);
measureDesktopBounds();
payload.windows.forEach(createWindow); payload.windows.forEach(createWindow);
renderClock(); renderClock();
window.setInterval(renderClock, 1000); window.setInterval(renderClock, 1000);
window.addEventListener('resize', () => {
measureDesktopBounds();
windows.forEach((record) => {
if (record.state.maximized) {
record.node.style.left = `${sideDesktopInset}px`;
record.node.style.top = `${topDesktopInset}px`;
record.node.style.width = `calc(100% - ${sideDesktopInset * 2}px)`;
record.node.style.height = `calc(100% - ${topDesktopInset + bottomDesktopInset}px)`;
}
});
});
} }