demo: layout fixes, sticky removal, style overrides, css-like rendering improvements

This commit is contained in:
Glint Dev
2026-07-24 16:46:00 +03:00
parent 415de4d6e6
commit 32beb81ac4
8 changed files with 289 additions and 134 deletions

View File

@@ -4,8 +4,7 @@
// Showcases: @global, @singleton, !rhei:, @component, @if/@else, @each,
// @on click, variable binding, positioning (fixed, absolute),
// typography, box model, opacity, overflow, grid layout, style inheritance.
// Note: true CSS position:sticky requires scroll-tracking not exposed by Iced.
// "Always-visible header above scrollable content" pattern used instead.
// Note: position:sticky approximated via in-flow layout + overlay
// ============================================================================
@version 1
@@ -66,7 +65,7 @@
// ── 3. Layout ────────────────────────────────────────────────────────────────
Window(title=$title) {
// ── Header (always visible; body scrolls beneath — closest to sticky in Iced) ─
// ── Header (sticky — stays at top while body scrolls beneath) ─
Panel(class="header") {
Panel(class="header-inner") {
Icon "◇"
@@ -76,8 +75,7 @@ Window(title=$title) {
}
}
// ── Scrollable body ─────────────────────────────────────────────────────
Panel(class="body-scroll") {
// ── Main body ────────────────────────────────────────────────────────────
Panel(class="body") {
// ── LEFT COLUMN ──────────────────────────────────────────────────────
@@ -199,13 +197,13 @@ Window(title=$title) {
Text(class="gauge-label") "* Opacity depends on Iced widget support — works on containers, not on text"
}
// Panel: Scrollable Log with always-visible header
// Panel: Scrollable Log with sticky header
Panel(class="card") {
Header "Scrollable Log"
Panel(class="log-header") {
Text "Event Log (always visible — above scrollable area)"
}
Panel(class="log") {
Panel(class="log-header") {
Text "Event Log (sticky header — scroll below)"
}
Text "Init: system boot"
Text "Info: all modules OK"
Text "Warn: CPU at $cpu%"
@@ -253,7 +251,6 @@ Window(title=$title) {
}
}
}
}
// ── Fixed Toast ──────────────────────────────────────────────────────────
@if $notif {