268 lines
9.7 KiB
Plaintext
268 lines
9.7 KiB
Plaintext
// ============================================================================
|
||
// Glint — Full Feature Demonstration
|
||
// ============================================================================
|
||
// Showcases: @global, @singleton, !rhei:, @component, @if/@else, @each,
|
||
// @on click, variable binding, positioning (fixed, absolute, sticky),
|
||
// typography, box model, opacity, overflow, grid layout, style inheritance.
|
||
// ============================================================================
|
||
|
||
@version 1
|
||
@style "styles.glts"
|
||
|
||
// ── 1. State ─────────────────────────────────────────────────────────────────
|
||
@global $title = "My Dashboard"
|
||
@global $user = "guest"
|
||
@global $cpu = 23.0
|
||
@global $memory = 47.0
|
||
@global $online = true
|
||
@global $alert = 70.0
|
||
@global $nodes = ["Alpha", "Bravo", "Charlie", "Delta"]
|
||
@global $notif = true
|
||
@global $show = true
|
||
|
||
@singleton AppInfo {
|
||
build = "2026-07-22",
|
||
mode = "release"
|
||
}
|
||
|
||
!rhei: {
|
||
fn pct(v) { v + "%" }
|
||
fn label(v) {
|
||
if v >= 80.0 { "High" }
|
||
else if v >= 50.0 { "Medium" }
|
||
else { "Low" }
|
||
}
|
||
print("[App] " + nodes.len() + " nodes ready.");
|
||
}
|
||
|
||
// ── 2. Components ────────────────────────────────────────────────────────────
|
||
@component Gauge(name: String, val: Float) {
|
||
Panel(class="gauge") {
|
||
Panel(class="gauge-row") {
|
||
Text(text=$name)
|
||
Text !rhei: { pct(val) }
|
||
}
|
||
ProgressBar(value=$val)
|
||
Text(class="gauge-label") !rhei: { label(val) }
|
||
}
|
||
}
|
||
|
||
@component NodeTile(tag: String, active: Bool) {
|
||
Panel(class="tile") {
|
||
Panel(class="tile-row") {
|
||
Icon "◇"
|
||
Text(text=$tag)
|
||
}
|
||
@if $active {
|
||
Text(class="tag-on") "● Live"
|
||
} @else {
|
||
Text(class="tag-off") "○ Off"
|
||
}
|
||
}
|
||
}
|
||
|
||
// ── 3. Layout ────────────────────────────────────────────────────────────────
|
||
Window(title=$title) {
|
||
|
||
// ── Header (stays at top, body scrolls beneath) ──────────────────────────
|
||
Panel(class="header") {
|
||
Panel(class="header-inner") {
|
||
Icon "◇"
|
||
Header "Glint"
|
||
Panel(width="fill")
|
||
Text !rhei: { "👤 " + user }
|
||
}
|
||
}
|
||
|
||
// ── Scrollable body ─────────────────────────────────────────────────────
|
||
Panel(class="body-scroll") {
|
||
Panel(class="body") {
|
||
|
||
// ── LEFT COLUMN ──────────────────────────────────────────────────────
|
||
Panel(class="col-left") {
|
||
|
||
// Panel: Controls
|
||
Panel(class="card") {
|
||
Header "Controls"
|
||
Toggle(label="Online", value=$online)
|
||
@if $online {
|
||
Text(class="ok") "✓ Running"
|
||
} @else {
|
||
Text(class="err") "✗ Stopped"
|
||
}
|
||
Input(placeholder="Username", value=$user)
|
||
}
|
||
|
||
// Panel: Metrics
|
||
Panel(class="card") {
|
||
Header "Metrics"
|
||
Gauge(name="CPU", val=$cpu)
|
||
Gauge(name="Memory", val=$memory)
|
||
}
|
||
|
||
// Panel: Threshold
|
||
Panel(class="card") {
|
||
Header "Alert Threshold"
|
||
Slider(value=$alert)
|
||
Text !rhei: { "Alert when > " + alert + "%" }
|
||
}
|
||
|
||
// Panel: Actions
|
||
Panel(class="card") {
|
||
Header "Actions"
|
||
Panel(class="btn-row") {
|
||
Button(label="Reset CPU") {
|
||
@on click { !rhei: { cpu = 5.0; } }
|
||
}
|
||
Button(label="Max CPU") {
|
||
@on click { !rhei: { cpu = 92.0; } }
|
||
}
|
||
}
|
||
Button(label="Toggle Notification", class="btn-outline") {
|
||
@on click { !rhei: { notif = !notif; } }
|
||
}
|
||
}
|
||
|
||
// Panel: Nodes
|
||
Panel(class="card") {
|
||
Header "Nodes"
|
||
Panel(direction="grid", columns=2, gap=8) {
|
||
@each $n in $nodes {
|
||
NodeTile(tag=$n, active=$online)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// ── RIGHT COLUMN ─────────────────────────────────────────────────────
|
||
Panel(class="col-right") {
|
||
|
||
// Panel: Typography
|
||
Panel(class="card") {
|
||
Header "Typography"
|
||
Panel(class="demo-row") {
|
||
Text(class="fw-300") "Light"
|
||
Text(class="fw-400") "Normal"
|
||
Text(class="fw-700") "Bold"
|
||
Text(class="fw-900") "Black"
|
||
}
|
||
Panel(class="demo-col") {
|
||
Panel(class="ta-box") { Text(class="ta-l") "Left" }
|
||
Panel(class="ta-box") { Text(class="ta-c") "Center" }
|
||
Panel(class="ta-box") { Text(class="ta-r") "Right" }
|
||
}
|
||
Panel(class="lh-box") {
|
||
Text(class="lh-08") "Tight 0.8"
|
||
Text(class="lh-12") "Normal 1.2"
|
||
Text(class="lh-20") "Loose 2.0"
|
||
}
|
||
}
|
||
|
||
// Panel: Box Model
|
||
Panel(class="card") {
|
||
Header "Box Model"
|
||
Panel(class="box-pad") {
|
||
Text "padding: 24px top, 12px sides"
|
||
}
|
||
Panel(class="box-margin") {
|
||
Text "margin-top: 16px"
|
||
}
|
||
Panel(class="box-combo") {
|
||
Text "border: 2px, radius: 10px"
|
||
}
|
||
}
|
||
|
||
// Panel: Absolute Position
|
||
Panel(class="card") {
|
||
Header "Position: Absolute"
|
||
Panel(class="abs-stage") {
|
||
Text "Stage with overlay badge:"
|
||
Panel(class="abs-badge") {
|
||
Panel(class="badge-inner") {
|
||
Text "★ HOT"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Panel: Opacity
|
||
Panel(class="card") {
|
||
Header "Opacity"
|
||
Panel(class="op-row") {
|
||
Panel(class="op-30") { Text "30%" }
|
||
Panel(class="op-60") { Text "60%" }
|
||
Panel(class="op-85") { Text "85%" }
|
||
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(class="card") {
|
||
Header "Scrollable Log"
|
||
Panel(class="log") {
|
||
Panel(class="log-header") {
|
||
Text "Event Log (sticky header)"
|
||
}
|
||
Text "Init: system boot"
|
||
Text "Info: all modules OK"
|
||
Text "Warn: CPU at $cpu%"
|
||
Text "Info: mem at $memory%"
|
||
Text "Debug: threshold $alert"
|
||
Text "Info: user $user"
|
||
Text "Warn: node check"
|
||
Text "Info: heartbeat OK"
|
||
Text "Debug: idle"
|
||
}
|
||
}
|
||
|
||
// Panel: Inheritance
|
||
Panel(class="card") {
|
||
Header "Style Inheritance"
|
||
Panel(class="inherit") {
|
||
Text "Warm gold from parent"
|
||
Text(class="override") "Terracotta — override"
|
||
}
|
||
}
|
||
|
||
// Panel: Display None (interactive toggle via @if)
|
||
Panel(class="card") {
|
||
Header "Display: None"
|
||
Panel(class="demo-row") {
|
||
Panel(class="vis") { Text "Always" }
|
||
@if $show {
|
||
Panel(class="vis") { Text "Toggled" }
|
||
}
|
||
Panel(class="vis") { Text "Always" }
|
||
}
|
||
Button(label="Toggle Center Element", class="btn-outline") {
|
||
@on click { !rhei: { show = !show; } }
|
||
}
|
||
}
|
||
|
||
// Panel: Flex Grow
|
||
Panel(class="card") {
|
||
Header "Flex Grow"
|
||
Panel(class="grow-bar") {
|
||
Panel(class="grow-1") { Text "1" }
|
||
Panel(class="grow-2") { Text "2" }
|
||
Panel(class="grow-1") { Text "1" }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// ── Fixed Toast ──────────────────────────────────────────────────────────
|
||
@if $notif {
|
||
Panel(class="toast") {
|
||
Panel(class="toast-row") {
|
||
Text "✓ App ready"
|
||
Button(label="×", class="toast-x") {
|
||
@on click { !rhei: { notif = false; } }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|