forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
feat: various dashboard improvements
+138
-23
+1
-1
src/_components/examples.vto
+1
-1
src/_components/examples.vto
+10
-2
src/_components/grid.vto
+10
-2
src/_components/grid.vto
···
1
-
<ul class="grid" style="margin-top: var(--space-lg);">
1
+
<div class="grid-filter">
2
+
<span class="grid-filter--label">Filter by</span>
3
+
4
+
<button class="button--border button--tiny button--bg-neutral" data-filter="all">All</button>
5
+
<button class="button--border button--tiny button--tr-accent button--transparent" data-filter="prelude">Features</button>
6
+
<button class="button--border button--tiny button--bg-twist-2 button--tr-twist-2 button--transparent" data-filter="interface">Interfaces</button>
7
+
</div>
8
+
9
+
<ul class="grid" style="margin-top: var(--space-xs);">
2
10
{{ for index, item of items }}
3
11
{{ set color = (() => {
4
12
switch (item.kind) {
5
-
case "prelude": return "var(--accent-twist-4)";
13
+
case "prelude": return "var(--accent)";
6
14
default: return "var(--accent-twist-2)";
7
15
}
8
16
})() }}
+2
-2
src/_includes/layouts/kitchen.vto
+2
-2
src/_includes/layouts/kitchen.vto
···
29
29
</a>
30
30
</div>
31
31
</div>
32
-
<div class="dither-mask filler filler--bg-twist-2">
33
-
<div id="status--filler-container" style="color: var(--accent-twist-2)">
32
+
<div class="dither-mask filler filler--bg-neutral">
33
+
<div id="status--filler-container">
34
34
{{ await comp.diffuse.status() }}
35
35
</div>
36
36
</div>
+1
-1
src/common/facets/category.js
+1
-1
src/common/facets/category.js
+3
-3
src/common/pages/dashboard.js
+3
-3
src/common/pages/dashboard.js
···
18
18
const ADD_FROM_URI_ITEM = html`
19
19
<li
20
20
class="grid-item"
21
-
style="background: oklch(from var(--accent-twist-2) l c h / 0.0625);"
21
+
style="background: oklch(from var(--accent) l c h / 0.0625);"
22
22
>
23
23
<div
24
24
class="grid-item__contents"
···
26
26
>
27
27
<button
28
28
class="button--transparent with-icon"
29
-
style="color: var(--accent-twist-2); font-size: var(--fs-sm); font-weight: 600;"
29
+
style="color: var(--accent); font-size: var(--fs-sm); font-weight: 600;"
30
30
@click="${openAddFromURIModal}"
31
31
>
32
32
<i class="ph-fill ph-plus-circle"></i>
···
105
105
</div>
106
106
</div>
107
107
<div style="display: flex; gap: var(--space-xs); margin-top: var(--space-sm)">
108
-
<button class="button--bg-twist-2" type="submit">Add</button>
108
+
<button type="submit">Add</button>
109
109
<button class="button--bg-neutral" type="button" id="add-uri-cancel">
110
110
Cancel
111
111
</button>
+35
-2
src/common/pages/grid.js
+35
-2
src/common/pages/grid.js
···
5
5
import { output } from "./output.js";
6
6
7
7
////////////////////////////////////////////
8
+
// FILTER
9
+
////////////////////////////////////////////
10
+
11
+
export function setupFilter() {
12
+
/** @type {NodeListOf<HTMLElement>} */
13
+
const buttons = document.querySelectorAll(".grid-filter button");
14
+
15
+
/** @type {NodeListOf<HTMLElement>} */
16
+
const items = document.querySelectorAll(".grid-item");
17
+
18
+
buttons.forEach((b) => {
19
+
b.addEventListener("click", () => {
20
+
buttons.forEach((b) => b.classList.add("button--transparent"));
21
+
b.classList.remove("button--transparent");
22
+
23
+
const filter = b.dataset.filter;
24
+
25
+
items.forEach((item) => {
26
+
const kind = item.dataset.kind;
27
+
const show = filter === "all" || kind === filter;
28
+
item.hidden = !show;
29
+
30
+
/** @type {HTMLElement | null} */
31
+
const kindEl = item.querySelector(".grid-item__kind");
32
+
if (!kindEl) return;
33
+
kindEl.hidden = filter !== "all";
34
+
});
35
+
});
36
+
});
37
+
}
38
+
39
+
////////////////////////////////////////////
8
40
// TOGGLE BUTTONS
9
41
////////////////////////////////////////////
10
42
···
19
51
20
52
const button = document.createElement("button");
21
53
button.className = "button--transparent";
22
-
button.style.cssText = "font-size: var(--fs-md); opacity: 0; padding: 0;";
54
+
button.style.cssText =
55
+
`color: oklch(from currentColor l c h / 0.4); font-size: var(--fs-md); opacity: 0; padding: 0;`;
23
56
button.innerHTML = `<i class="ph-fill ph-toggle-left"></i>`;
24
57
25
58
button.addEventListener("click", async (event) => {
···
92
125
? "ph-fill ph-toggle-right"
93
126
: "ph-fill ph-toggle-left";
94
127
/** @type {HTMLElement} */ (icon).style.color = isActive
95
-
? li.getAttribute("data-active-color") ?? "var(--accent-twist-2)"
128
+
? li.dataset.activeColor ?? "var(--accent-twist-2)"
96
129
: "";
97
130
}
98
131
});
+1
src/common/pages/ppr.js
+1
src/common/pages/ppr.js
+1
-1
src/guide.vto
+1
-1
src/guide.vto
+1
-1
src/styles/diffuse/code-editor.css
+1
-1
src/styles/diffuse/code-editor.css
+82
-9
src/styles/diffuse/page.css
+82
-9
src/styles/diffuse/page.css
···
120
120
&.filler--bg-twist-5 {
121
121
background-color: oklch(from var(--accent-twist-5) l c h / 0.2);
122
122
}
123
+
124
+
&.filler--bg-neutral {
125
+
background-color: oklch(from currentColor l c h / 0.2);
126
+
}
123
127
}
124
128
125
129
.flex {
···
266
270
border: 1px solid var(--border-color);
267
271
border-radius: var(--radius-md);
268
272
display: flex;
273
+
274
+
&[hidden] {
275
+
display: none;
276
+
}
269
277
}
270
278
271
279
.grid-item__contents {
···
308
316
padding: var(--space-3xs);
309
317
text-box: trim-both cap alphabetic;
310
318
vertical-align: middle;
319
+
320
+
&[hidden] {
321
+
display: none;
322
+
}
311
323
}
312
324
313
325
.grid-item__title {
···
317
329
}
318
330
}
319
331
332
+
.grid-filter {
333
+
align-items: center;
334
+
display: flex;
335
+
gap: var(--space-2xs);
336
+
margin-bottom: var(--space-md);
337
+
margin-top: var(--space-md);
338
+
339
+
.grid-filter--label {
340
+
font-size: var(--fs-xs);
341
+
font-weight: 600;
342
+
margin-right: var(--space-2xs);
343
+
opacity: 0.4;
344
+
}
345
+
}
346
+
320
347
/**
321
348
* Headers
322
349
*/
···
426
453
}
427
454
428
455
&.button--bg-neutral {
429
-
background-color: oklch(from var(--text-color) l c h / calc(0.35 * var(--button-bg-opacity)));
456
+
background-color: oklch(from var(--text-color) l c h / calc(0.5 * var(--button-bg-opacity)));
430
457
}
431
458
432
459
&.button--border {
433
460
border: 2px solid transparent;
434
461
}
435
462
463
+
&.button--small {
464
+
font-size: var(--fs-sm);
465
+
padding: var(--space-2xs);
466
+
text-box: trim-both cap alphabetic;
467
+
}
468
+
469
+
&.button--subtle {
470
+
--button-bg-opacity: 0.3;
471
+
}
472
+
473
+
&.button--tag {
474
+
font-size: var(--fs-2xs);
475
+
font-weight: 600;
476
+
padding: var(--space-3xs);
477
+
text-box: trim-both cap alphabetic;
478
+
vertical-align: middle;
479
+
480
+
&.button--border {
481
+
border-width: 1.5px;
482
+
}
483
+
484
+
&.button--tag-alt {
485
+
padding: calc((var(--space-2xs) + var(--space-3xs)) / 2) var(--space-2xs);
486
+
}
487
+
}
488
+
489
+
&.button--tiny {
490
+
font-size: var(--fs-xs);
491
+
line-height: 1;
492
+
padding: var(--space-3xs) calc((var(--space-2xs) + var(--space-3xs)) / 2);
493
+
}
494
+
436
495
&.button--transparent {
437
496
background-color: transparent;
438
497
color: var(--text-color);
···
441
500
&.button--border {
442
501
border-color: oklch(from currentColor l c h / var(--button-bg-opacity));
443
502
}
444
-
}
503
+
504
+
&.button--tr-accent {
505
+
color: var(--accent);
506
+
}
507
+
508
+
&.button--tr-twist-1 {
509
+
color: var(--accent-twist-1);
510
+
}
445
511
446
-
&.button--small {
447
-
font-size: var(--fs-xs);
448
-
line-height: 1;
449
-
padding: var(--space-3xs) var(--space-2xs);
450
-
}
512
+
&.button--tr-twist-2 {
513
+
color: var(--accent-twist-2);
514
+
}
451
515
452
-
&.button--subtle {
453
-
--button-bg-opacity: 0.3;
516
+
&.button--tr-twist-3 {
517
+
color: var(--accent-twist-3);
518
+
}
519
+
520
+
&.button--tr-twist-4 {
521
+
color: var(--accent-twist-4);
522
+
}
523
+
524
+
&.button--tr-twist-5 {
525
+
color: var(--accent-twist-5);
526
+
}
454
527
}
455
528
456
529
& > span {