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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Desktop Settings — Prototype 5 (compact expandable rows)</title>
<link rel="stylesheet" href="desktop-settings-shared.css">
<style>
/* Compact rows: one dense column; rows with depth expand inline. */
.crow {
display: flex; align-items: center; gap: 10px;
padding: 8px 8px; border-radius: 8px; cursor: pointer;
border: 1px solid transparent;
}
.crow:hover { background: #16191b; }
.crow .glyph { color: var(--steel); font-size: 15px; width: 18px; text-align: center; }
.crow.on .glyph { color: var(--gold); }
.crow .name { color: var(--silver); font-size: 13px; }
.crow.on .name { color: var(--cream); }
.crow .state { margin-left: auto; color: var(--dim); font-size: 11px; }
.crow.on .state { color: var(--gold); }
.crow .chev { color: var(--dim); font-size: 12px; margin-left: auto; transition: transform .15s; }
.crow.exp .chev { transform: rotate(90deg); color: var(--gold); }
.crow.verified { animation: dsVerify 0.9s ease-out; }
.reveal { overflow: hidden; max-height: 0; transition: max-height .2s ease; }
.reveal.open { max-height: 260px; }
.reveal-inner { padding: 6px 6px 10px 36px; }
.sep { height: 1px; background: var(--line); margin: 3px 6px; }
.inline-slider { padding: 4px 8px 4px 0; }
</style>
</head>
<body class="ds-stage">
<div class="ds-caption">
<b>Direction 5 — Compact expandable rows.</b> Minimal by default: one slim row
per control in a single column. Rows with depth (power, scenes, wallpaper)
expand inline — progressive disclosure, the long-press pattern made visible.
</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 h = DS.h;
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 toggleRow(key) {
const meta = DS.TOGGLES[key];
const on = DS.state[key];
const el = h("div", "crow" + (on ? " on" : ""));
el.innerHTML =
`<span class="ds-lamp ${on ? "gold" : "off"}"></span>` +
`<span class="glyph">${meta.glyph}</span>` +
`<span class="name">${meta.name}</span>` +
`<span class="state">${on ? meta.on : meta.off}</span>`;
el.onclick = () => DS.setToggle(key, el);
return el;
}
function sliderRow(key) {
const meta = DS.SLIDERS[key];
const el = h("div", "crow inline-slider");
el.style.cursor = "default";
el.appendChild(Object.assign(h("span", "glyph"), { textContent: meta.glyph }));
el.appendChild(Object.assign(h("span", "name"), { textContent: meta.name }));
const s = DS.slider(key);
s.style.flex = "1";
// strip the redundant leading glyph/name from the shared slider
s.removeChild(s.children[0]); s.removeChild(s.children[0]);
el.appendChild(s);
return el;
}
// A row that expands an inline panel (built by contentFn) below it.
function expandRow(glyph, name, stateText, contentFn) {
const wrap = h("div");
const row = h("div", "crow");
row.innerHTML =
`<span class="ds-lamp off"></span><span class="glyph">${glyph}</span>` +
`<span class="name">${name}</span><span class="state">${stateText || ""}</span><span class="chev">›</span>`;
const rev = h("div", "reveal");
const inner = h("div", "reveal-inner");
inner.appendChild(contentFn());
rev.appendChild(inner);
row.onclick = () => { row.classList.toggle("exp"); rev.classList.toggle("open"); };
wrap.appendChild(row); wrap.appendChild(rev);
return wrap;
}
function render() {
body.innerHTML = "";
const col = h("div");
["autodim", "nightlight"].forEach((k) => col.appendChild(toggleRow(k)));
col.appendChild(sliderRow("brightness"));
col.appendChild(sliderRow("kbd"));
col.appendChild(h("div", "sep"));
["touchpad", "mouse"].forEach((k) => col.appendChild(toggleRow(k)));
if (DS.state.laptop) col.appendChild(toggleRow("airplane"));
col.appendChild(toggleRow("dnd"));
col.appendChild(h("div", "sep"));
col.appendChild(expandRow("\u{f0241}", "Power profile", DS.state.powerprofile, () => DS.profileSeg()));
col.appendChild(expandRow("\u{f0210}", "Scenes", DS.state.scene || "none", () => {
const g = h("div", "ds-grid4");
Object.keys(DS.SCENES).forEach((n) => g.appendChild(DS.sceneKey(n)));
return g;
}));
const wp = h("div", "crow");
wp.innerHTML = `<span class="ds-lamp off"></span><span class="glyph">\u{f021c}</span><span class="name">Wallpaper</span><span class="state">manage ›</span>`;
wp.onclick = openWallpaper;
col.appendChild(wp);
col.appendChild(h("div", "sep"));
const acts = h("div", "ds-grid2");
acts.appendChild(DS.actionBtn("Lock", "\u{f033e}", false));
acts.appendChild(DS.actionBtn("Suspend", "\u{f04b2}", false));
col.appendChild(acts);
body.appendChild(col);
document.getElementById("scene-sub").textContent = DS.state.scene ? "▶ " + DS.state.scene : "";
}
DS.onChange(render);
render();
</script>
</body>
</html>
|
