menue
This commit is contained in:
@@ -10,6 +10,11 @@ Statuslogik:
|
|||||||
- `TEILWEISE`: begonnen oder als Scaffold vorhanden, aber noch nicht fachlich fertig
|
- `TEILWEISE`: begonnen oder als Scaffold vorhanden, aber noch nicht fachlich fertig
|
||||||
- `OFFEN`: noch nicht umgesetzt
|
- `OFFEN`: noch nicht umgesetzt
|
||||||
|
|
||||||
|
Abnahmeregel:
|
||||||
|
|
||||||
|
- Punkte werden erst dann auf `ERLEDIGT` gesetzt, wenn der Nutzer die Umsetzung explizit bestaetigt.
|
||||||
|
- Technisch funktionierende, aber noch nicht abgenommene Punkte bleiben auf `TEILWEISE`.
|
||||||
|
|
||||||
## Gesamtstatus
|
## Gesamtstatus
|
||||||
|
|
||||||
Aktuell ist das Projekt auf einem V1-Scaffold-Stand:
|
Aktuell ist das Projekt auf einem V1-Scaffold-Stand:
|
||||||
@@ -62,7 +67,7 @@ Erfuellt:
|
|||||||
- Root `/` ist die Desktop-Oberflaeche
|
- Root `/` ist die Desktop-Oberflaeche
|
||||||
- Desktop-Flaeche, App-Icons, Fenster, Taskbar/Tray, Widget-Bereich und Skin-Konzept sind sichtbar vorhanden
|
- Desktop-Flaeche, App-Icons, Fenster, Taskbar/Tray, Widget-Bereich und Skin-Konzept sind sichtbar vorhanden
|
||||||
- gemeinsame technische Basis fuer alle drei Skins ist umgesetzt
|
- gemeinsame technische Basis fuer alle drei Skins ist umgesetzt
|
||||||
- funktionales Startmenue fuer Apps, Widgets und Quick Actions ist vorhanden
|
- Startmenue fuer Apps, Widgets und Schnellaktionen ist technisch angelegt, aber noch nicht abgenommen
|
||||||
|
|
||||||
Offen:
|
Offen:
|
||||||
|
|
||||||
@@ -142,21 +147,21 @@ Phase 2 Desktop-Grundfunktionen:
|
|||||||
- `TEILWEISE`: Dock oder Taskbar
|
- `TEILWEISE`: Dock oder Taskbar
|
||||||
- `TEILWEISE`: Statusbereich
|
- `TEILWEISE`: Statusbereich
|
||||||
- `ERLEDIGT`: Uhr
|
- `ERLEDIGT`: Uhr
|
||||||
- `ERLEDIGT`: erstes Hauptmenue mit Funktion
|
- `TEILWEISE`: erstes Hauptmenue mit Funktion, noch nicht abgenommen
|
||||||
|
|
||||||
Phase 3 Fenster-Manager:
|
Phase 3 Fenster-Manager:
|
||||||
|
|
||||||
- `ERLEDIGT`: Fenster oeffnen und schliessen
|
- `ERLEDIGT`: Fenster oeffnen und schliessen
|
||||||
- `ERLEDIGT`: Fenster fokussieren
|
- `ERLEDIGT`: Fenster fokussieren
|
||||||
- `ERLEDIGT`: Fenster minimieren
|
- `ERLEDIGT`: Fenster minimieren
|
||||||
- `ERLEDIGT`: Fenster maximieren
|
- `TEILWEISE`: Fenster maximieren, noch nicht abgenommen
|
||||||
- `ERLEDIGT`: z-index-Verwaltung
|
- `ERLEDIGT`: z-index-Verwaltung
|
||||||
- `OFFEN`: Position und Groesse merken
|
- `OFFEN`: Position und Groesse merken
|
||||||
|
|
||||||
Phase 4 Inhaltssystem:
|
Phase 4 Inhaltssystem:
|
||||||
|
|
||||||
- `ERLEDIGT`: App Registry als Grundstruktur
|
- `ERLEDIGT`: App Registry als Grundstruktur
|
||||||
- `ERLEDIGT`: Widget Registry als Grundstruktur
|
- `TEILWEISE`: Widget Registry als Grundstruktur, noch nicht abgenommen
|
||||||
- `OFFEN`: Seitenmodule
|
- `OFFEN`: Seitenmodule
|
||||||
- `OFFEN`: persoenliche Linklisten
|
- `OFFEN`: persoenliche Linklisten
|
||||||
- `TEILWEISE`: oeffentliches Home-Dashboard nur als Placeholder
|
- `TEILWEISE`: oeffentliches Home-Dashboard nur als Placeholder
|
||||||
|
|||||||
@@ -71,9 +71,16 @@ $wallpaper = $desktopPayload['desktop']['wallpaper'];
|
|||||||
<div class="window-layer" id="window-layer"></div>
|
<div class="window-layer" id="window-layer"></div>
|
||||||
|
|
||||||
<section class="start-menu" id="start-menu" hidden>
|
<section class="start-menu" id="start-menu" hidden>
|
||||||
|
<div class="start-menu-header">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Startmenue</p>
|
||||||
|
<h2>Desktop Aktionen</h2>
|
||||||
|
</div>
|
||||||
|
<button class="start-menu-close" id="start-menu-close" type="button" aria-label="Startmenue schliessen">Schliessen</button>
|
||||||
|
</div>
|
||||||
<div class="start-menu-column">
|
<div class="start-menu-column">
|
||||||
<div class="start-menu-block">
|
<div class="start-menu-block">
|
||||||
<p class="eyebrow">Quick Actions</p>
|
<p class="eyebrow">Schnellaktionen</p>
|
||||||
<div id="start-menu-actions"></div>
|
<div id="start-menu-actions"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="start-menu-block">
|
<div class="start-menu-block">
|
||||||
|
|||||||
@@ -310,6 +310,7 @@ h1 {
|
|||||||
bottom: 102px;
|
bottom: 102px;
|
||||||
z-index: 90;
|
z-index: 90;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
align-content: start;
|
||||||
grid-template-columns: minmax(240px, 280px) minmax(280px, 360px);
|
grid-template-columns: minmax(240px, 280px) minmax(280px, 360px);
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
width: min(720px, calc(100% - 48px));
|
width: min(720px, calc(100% - 48px));
|
||||||
@@ -321,12 +322,35 @@ h1 {
|
|||||||
backdrop-filter: blur(24px);
|
backdrop-filter: blur(24px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.start-menu-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 16px;
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-menu-header h2 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.start-menu-column,
|
.start-menu-column,
|
||||||
.start-menu-block {
|
.start-menu-block {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.start-menu-close {
|
||||||
|
border: 0;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
background: rgba(255, 255, 255, 0.12);
|
||||||
|
color: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.start-menu-entry {
|
.start-menu-entry {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 44px minmax(0, 1fr) auto;
|
grid-template-columns: 44px minmax(0, 1fr) auto;
|
||||||
@@ -342,6 +366,11 @@ h1 {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.start-menu-entry:hover,
|
||||||
|
.start-menu-close:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
.start-menu-entry strong,
|
.start-menu-entry strong,
|
||||||
.start-menu-entry span {
|
.start-menu-entry span {
|
||||||
display: block;
|
display: block;
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ if (payloadNode) {
|
|||||||
const taskbarRoot = document.getElementById('taskbar-apps');
|
const taskbarRoot = document.getElementById('taskbar-apps');
|
||||||
const startButton = document.getElementById('start-button');
|
const startButton = document.getElementById('start-button');
|
||||||
const startMenu = document.getElementById('start-menu');
|
const startMenu = document.getElementById('start-menu');
|
||||||
|
const startMenuClose = document.getElementById('start-menu-close');
|
||||||
const startMenuApps = document.getElementById('start-menu-apps');
|
const startMenuApps = document.getElementById('start-menu-apps');
|
||||||
const startMenuWidgets = document.getElementById('start-menu-widgets');
|
const startMenuWidgets = document.getElementById('start-menu-widgets');
|
||||||
const startMenuActions = document.getElementById('start-menu-actions');
|
const startMenuActions = document.getElementById('start-menu-actions');
|
||||||
@@ -439,6 +440,10 @@ if (payloadNode) {
|
|||||||
startButton.setAttribute('aria-expanded', String(willOpen));
|
startButton.setAttribute('aria-expanded', String(willOpen));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
startMenuClose?.addEventListener('click', () => {
|
||||||
|
closeStartMenu();
|
||||||
|
});
|
||||||
|
|
||||||
document.addEventListener('click', (event) => {
|
document.addEventListener('click', (event) => {
|
||||||
if (!startMenu || startMenu.hidden) {
|
if (!startMenu || startMenu.hidden) {
|
||||||
return;
|
return;
|
||||||
|
|||||||
Reference in New Issue
Block a user