demo: fix header (no sticky), make Display None interactive, add opacity note

This commit is contained in:
Glint Dev
2026-07-22 14:31:39 +03:00
parent bdb5df2bf2
commit e770d1a68a
2 changed files with 11 additions and 11 deletions

View File

@@ -18,6 +18,7 @@
@global $alert = 70.0 @global $alert = 70.0
@global $nodes = ["Alpha", "Bravo", "Charlie", "Delta"] @global $nodes = ["Alpha", "Bravo", "Charlie", "Delta"]
@global $notif = true @global $notif = true
@global $show = true
@singleton AppInfo { @singleton AppInfo {
build = "2026-07-22", build = "2026-07-22",
@@ -191,6 +192,7 @@ Window(title=$title) {
Panel(class="op-85") { Text "85%" } Panel(class="op-85") { Text "85%" }
Panel(class="op-100") { Text "100%" } Panel(class="op-100") { Text "100%" }
} }
Text(class="gauge-label") "* Opacity depends on Iced widget support — works on containers, not on text"
} }
// Panel: Scroll + Sticky // Panel: Scroll + Sticky
@@ -221,13 +223,18 @@ Window(title=$title) {
} }
} }
// Panel: Display None // Panel: Display None (interactive toggle via @if)
Panel(class="card") { Panel(class="card") {
Header "Display: None" Header "Display: None"
Panel(class="demo-row") { Panel(class="demo-row") {
Panel(class="vis") { Text "Visible" } Panel(class="vis") { Text "Always" }
Panel(class="hid") { Text "Hidden" } @if $show {
Panel(class="vis") { Text "Still Here" } Panel(class="vis") { Text "Toggled" }
}
Panel(class="vis") { Text "Always" }
}
Button(label="Toggle Center Element", class="btn-outline") {
@on click { !rhei: { show = !show; } }
} }
} }

View File

@@ -46,13 +46,10 @@ Panel {
// ── Header ─────────────────────────────────────────────────────────────────── // ── Header ───────────────────────────────────────────────────────────────────
.header { .header {
position: sticky
top: 0px
background: $card background: $card
padding: 8px 20px padding: 8px 20px
border-bottom: 1px solid $border border-bottom: 1px solid $border
width: fill width: fill
z-index: 100
} }
.header-inner { .header-inner {
@@ -86,10 +83,6 @@ Panel {
@use card-base @use card-base
} }
.card:hover {
border-color: $accent
}
// ── Header Component ───────────────────────────────────────────────────────── // ── Header Component ─────────────────────────────────────────────────────────
Header { Header {
color: $accent color: $accent