feat(web): Design Mosaik Runde 3 - Reiter in der Seitenleiste, lebendigere Kacheln
- Dashboard-Reiter stehen in der aufgeklappten Seitenleiste als Liste unter "Dashboard" (Ziehen sortiert senkrecht, Umbenennen/Loeschen/Neu im Bearbeitungsmodus); eingeklappt und auf dem Handy wie bisher in der Kopfzeile. Die Kopfzeile zeigt sonst den Namen des Dashboards. - Begruessung einzeilig auf Hoehe der Befehlsleiste. - Kachel-Groesse: kollidiert die gezogene Groesse mit einem Nachbarn, wird nur die freie Achse uebernommen - vorher verwarf react-grid-layout mit preventCollision die ganze Aenderung, sobald die Maus eine Zeile nach unten wackelte (Favoriten liessen sich deshalb oft nicht schmaler ziehen). - Ansicht: belegte Spalten mittig, Begruessung/Befehlsleiste ruecken mit. - Kalender: einzeilige Terminliste mit "Heute"/"Morgen" in Akzentfarbe, Ort im Tooltip, Standardhoehe 16 statt 12. - Hintergrund "Bluete" im Dunkelmodus weggelassen (Farbstufen), Ersatz Nebel. - Kacheln: Symbol-Chip in der Akzentfarbe, leichtes Anheben beim Zeigen, gestaffeltes Einblenden beim Laden (ohne bei reduzierter Bewegung). Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -48,6 +48,9 @@ interface ActiveModule {
|
||||
export default function DashboardPage() {
|
||||
const t = useTranslations('widgets');
|
||||
const [catalogOpen, setCatalogOpen] = useState(false);
|
||||
// Seitlicher Versatz der zentrierten Kacheln — die Zeile mit Begruessung
|
||||
// und Befehlsleiste rueckt mit, damit sie buendig ueber den Kacheln steht.
|
||||
const [gridInset, setGridInset] = useState(0);
|
||||
// Hintergrund je Benutzer (Design „Mosaik“, Prototyp mit localStorage).
|
||||
const userId = useAuthStore((s) => s.user?.id);
|
||||
const { background, choose: chooseBackground } = useDashboardBackground(userId);
|
||||
@@ -143,7 +146,10 @@ export default function DashboardPage() {
|
||||
links, Befehlsleiste rechts (Fluent „command bar“) statt des
|
||||
frueheren schwebenden Knopfs unten rechts. Mit Hintergrund liegen
|
||||
beide auf der durchscheinenden Kachelflaeche (.dashboard-chrome). */}
|
||||
<div className="flex flex-wrap items-end justify-between gap-x-4 gap-y-2 px-3 pb-1 pt-2">
|
||||
<div
|
||||
className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 px-3 pt-1 transition-[padding] duration-200 ease-out motion-reduce:transition-none"
|
||||
style={gridInset > 0 ? { paddingInline: 12 + gridInset } : undefined}
|
||||
>
|
||||
<div className="dashboard-chrome min-w-0 rounded-lg">
|
||||
<DashboardGreeting />
|
||||
</div>
|
||||
@@ -198,6 +204,7 @@ export default function DashboardPage() {
|
||||
onRemoveWidget={removeWidget}
|
||||
onOpenCatalog={() => setCatalogOpen(true)}
|
||||
onQuickAdd={(type) => addWidget(type)}
|
||||
onInsetChange={setGridInset}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user