1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Desktop Settings — Prototype 1 (tile grid)</title>
<link rel="stylesheet" href="desktop-settings-shared.css">
</head>
<body class="ds-stage">
<div class="ds-caption">
<b>Direction 1 — Tile grid.</b> The quick-settings idiom (Android / GNOME 43):
scenes on top, a 2-column tile grid for toggles, sliders and power below.
Fast to scan, one tap per control, the wallpaper tile opens a sub-view.
</div>
<div class="ds-bar"><span>19:24</span><span class="gear">⚙</span></div>
<div class="ds-panel" id="panel">
<div class="ds-face">
<span class="glyph">⚙</span>
<span class="title">Settings</span>
<span class="sub" id="scene-sub"></span>
<span class="x">✕</span>
</div>
<div id="body"></div>
<div class="ds-toast" id="toast"></div>
<div class="ds-subview" id="subview"></div>
</div>
<script src="desktop-settings-shared.js"></script>
<script>
const body = document.getElementById("body");
const subview = document.getElementById("subview");
DS.bindToast(document.getElementById("toast"));
function openWallpaper() {
subview.innerHTML = "";
subview.appendChild(DS.wallpaperSubview(() => subview.classList.remove("open")));
subview.classList.add("open");
}
function render() {
body.innerHTML = "";
const col = DS.h("div", "ds-col");
// Scenes strip
col.appendChild(DS.engrave("Scenes"));
const scenes = DS.h("div", "ds-grid4");
Object.keys(DS.SCENES).forEach((n) => scenes.appendChild(DS.sceneKey(n)));
col.appendChild(scenes);
// Toggle tiles
col.appendChild(DS.engrave("Toggles"));
const grid = DS.h("div", "ds-grid2");
["autodim", "caffeine", "touchpad", "mouse", "nightlight", "dnd"].forEach((k) =>
grid.appendChild(DS.toggleTile(k)));
if (DS.state.laptop) grid.appendChild(DS.toggleTile("airplane"));
col.appendChild(grid);
// Sliders
col.appendChild(DS.engrave("Levels"));
const levels = DS.h("div", "ds-well");
levels.appendChild(DS.slider("brightness"));
levels.appendChild(DS.slider("kbd"));
col.appendChild(levels);
// Power profile
col.appendChild(DS.engrave("Power"));
col.appendChild(DS.profileSeg());
// Actions + wallpaper entry
col.appendChild(DS.engrave("Actions"));
const acts = DS.h("div", "ds-grid3");
acts.appendChild(DS.actionBtn("Lock", "\u{f033e}", false));
acts.appendChild(DS.actionBtn("Suspend", "\u{f04b2}", false));
const wp = DS.actionBtn("Wallpaper", "\u{f021c}", false, openWallpaper);
acts.appendChild(wp);
col.appendChild(acts);
body.appendChild(col);
document.getElementById("scene-sub").textContent = DS.state.scene ? "▶ " + DS.state.scene : "";
}
DS.onChange(render);
render();
</script>
</body>
</html>
|
