defuss-shadcn / Application / Scaffolds / scaffold-desktop
Desktop
A Windows-style desktop as a clickdummy. Right-click the desktop to change the icon size, the background or the theme; open the start menu and search; drag windows, double-click a title bar; type in the editor and save with Ctrl+S; calculate with the keyboard; browse acme.example. Every window, menu and control is a shipped component. Part of the Application Scaffolds.
On this page (2)
§Desktop
The whole desktop in one source. Windows are the Window component - non-modal dialogs that move, raise, maximize and minimize; settings are a handful of data attributes on the desktop that every control (context menu, quick settings, Settings) writes through one function.
§How it works
A page, not a component: it composes the library and keeps its own glue small.
- Windows - every app is a Window: a non-modal
<dialog>that moves by its title bar, comes to the front, maximizes and minimizes throughdf$.shadcn.win; minimized windows hide until their taskbar button brings them back. New editor windows are stamped from a<template>. - Taskbar - pinned apps show a dot while running and a bar while in front (a MutationObserver follows the windows); clicking minimizes, restores or cycles. The start menu, quick settings and the clock are popovers placed above the taskbar; the clock opens the Calendar, quick settings are Toggles and Sliders.
- Settings everywhere - background, mode, accent, transparency, brightness, night light, icon size and position, taskbar alignment and clock seconds are data attributes on the desktop. The desktop's Context Menu, quick settings and the Settings app (Tabs, Radios, Switches, Select) all write through one function, so they always agree. The accent colour becomes
--primaryfor every component inside. - Desktop - icons are a listbox (click selects, double-click or Enter opens, Delete recycles a file, arrows move); right-clicking an icon opens its own menu.
- Editor - a Menubar with save, save as (a Dialog), zoom, word wrap and status bar; closing with unsaved changes asks through an Alert Dialog.
- Calculator - clicks and the keyboard, unary keys, a running expression line.
- Browser - a real
<iframe>: type an address or search Wikipedia, go back and forward through what you asked for, open the page in a new tab. Sites that refuse to be framed (anX-Frame-Optionsor CSPframe-ancestorsheader - Google, Bing, MDN…) get an honest page with a new-tab link instead of a blank frame; three demo sites are the Website blocks in a same-originsrcdoc. This example is the docs' onesandbox="embed"fence besides the cookie consent, so the framed pages work here too. - Full screen - app-desktop.html is generated from this page's example at build time.
Comments, ideas or improvements? Edit this page's source on GitHub