mirror of
https://gitlab.com/asus-linux/asusctl.git
synced 2026-02-06 00:15:04 +01:00
feat(ui): Major UI update to Slint components
- Add real-time system status components - Add theme support - Improve layouts
This commit is contained in:
mihai2mn
@@ -1,10 +1,14 @@
|
||||
import { Palette, VerticalBox, HorizontalBox, GroupBox } from "std-widgets.slint";
|
||||
import { VerticalBox, HorizontalBox, GroupBox } from "std-widgets.slint";
|
||||
import { SystemToggleVert, SystemDropdown } from "common.slint";
|
||||
import { PowerZones } from "../types/aura_types.slint";
|
||||
import { RogPalette } from "../themes/rog_theme.slint";
|
||||
|
||||
export component AuraPowerGroup inherits Rectangle {
|
||||
min-width: row.min-width;
|
||||
opacity: 0.9;
|
||||
border-radius: 8px;
|
||||
background: RogPalette.control-background;
|
||||
border-width: 1px;
|
||||
border-color: RogPalette.control-border;
|
||||
in-out property <string> group-title;
|
||||
in-out property <bool> boot_checked;
|
||||
in-out property <bool> awake_checked;
|
||||
@@ -14,12 +18,11 @@ export component AuraPowerGroup inherits Rectangle {
|
||||
callback awake_toggled(bool);
|
||||
callback sleep_toggled(bool);
|
||||
callback shutdown_toggled(bool);
|
||||
|
||||
VerticalBox {
|
||||
spacing: 10px;
|
||||
Text {
|
||||
font-size: 18px;
|
||||
color: Palette.alternate-foreground;
|
||||
color: RogPalette.text-primary;
|
||||
horizontal-alignment: TextHorizontalAlignment.center;
|
||||
text <=> root.group-title;
|
||||
}
|
||||
@@ -27,7 +30,7 @@ export component AuraPowerGroup inherits Rectangle {
|
||||
row := HorizontalBox {
|
||||
alignment: LayoutAlignment.center;
|
||||
SystemToggleVert {
|
||||
min-width: 128px;
|
||||
min-width: 96px;
|
||||
max-height: 42px;
|
||||
text: @tr("Boot");
|
||||
checked <=> root.boot_checked;
|
||||
@@ -37,7 +40,7 @@ export component AuraPowerGroup inherits Rectangle {
|
||||
}
|
||||
|
||||
SystemToggleVert {
|
||||
min-width: 128px;
|
||||
min-width: 96px;
|
||||
max-height: 42px;
|
||||
text: @tr("Awake");
|
||||
checked <=> root.awake_checked;
|
||||
@@ -47,7 +50,7 @@ export component AuraPowerGroup inherits Rectangle {
|
||||
}
|
||||
|
||||
SystemToggleVert {
|
||||
min-width: 128px;
|
||||
min-width: 96px;
|
||||
max-height: 42px;
|
||||
text: @tr("Sleep");
|
||||
checked <=> root.sleep_checked;
|
||||
@@ -57,7 +60,7 @@ export component AuraPowerGroup inherits Rectangle {
|
||||
}
|
||||
|
||||
SystemToggleVert {
|
||||
min-width: 128px;
|
||||
min-width: 96px;
|
||||
max-height: 42px;
|
||||
text: @tr("Shutdown");
|
||||
checked <=> root.shutdown_checked;
|
||||
@@ -71,7 +74,10 @@ export component AuraPowerGroup inherits Rectangle {
|
||||
|
||||
export component AuraPowerGroupOld inherits Rectangle {
|
||||
min-width: row.min-width;
|
||||
opacity: 0.9;
|
||||
border-radius: 8px;
|
||||
background: RogPalette.control-background;
|
||||
border-width: 1px;
|
||||
border-color: RogPalette.control-border;
|
||||
in-out property <int> current_zone;
|
||||
in-out property <[int]> zones;
|
||||
in-out property <[string]> zone_strings;
|
||||
@@ -83,12 +89,11 @@ export component AuraPowerGroupOld inherits Rectangle {
|
||||
callback awake_toggled(bool);
|
||||
callback sleep_toggled(bool);
|
||||
callback selected_zone(int);
|
||||
|
||||
VerticalBox {
|
||||
spacing: 10px;
|
||||
Text {
|
||||
font-size: 18px;
|
||||
color: Palette.alternate-foreground;
|
||||
color: RogPalette.text-primary;
|
||||
horizontal-alignment: TextHorizontalAlignment.center;
|
||||
text <=> root.group-title;
|
||||
}
|
||||
@@ -107,7 +112,7 @@ export component AuraPowerGroupOld inherits Rectangle {
|
||||
}
|
||||
|
||||
SystemToggleVert {
|
||||
min-width: 128px;
|
||||
min-width: 96px;
|
||||
max-height: 42px;
|
||||
text: @tr("Boot");
|
||||
checked <=> root.boot_checked;
|
||||
@@ -117,7 +122,7 @@ export component AuraPowerGroupOld inherits Rectangle {
|
||||
}
|
||||
|
||||
SystemToggleVert {
|
||||
min-width: 128px;
|
||||
min-width: 96px;
|
||||
max-height: 42px;
|
||||
text: @tr("Awake");
|
||||
checked <=> root.awake_checked;
|
||||
@@ -127,7 +132,7 @@ export component AuraPowerGroupOld inherits Rectangle {
|
||||
}
|
||||
|
||||
SystemToggleVert {
|
||||
min-width: 128px;
|
||||
min-width: 96px;
|
||||
max-height: 42px;
|
||||
text: @tr("Sleep");
|
||||
checked <=> root.sleep_checked;
|
||||
|
||||
@@ -1,11 +1,15 @@
|
||||
import { Palette, VerticalBox , StandardButton, Button, HorizontalBox, ComboBox, Switch, Slider} from "std-widgets.slint";
|
||||
import { VerticalBox , StandardButton, Button, HorizontalBox, ComboBox, Switch, Slider} from "std-widgets.slint";
|
||||
import { RogPalette } from "../themes/rog_theme.slint";
|
||||
|
||||
export component RogItem inherits Rectangle {
|
||||
border-color: Palette.border;
|
||||
border-width: 1px;
|
||||
border-radius: 2px;
|
||||
min-height: 44px;
|
||||
max-height: 44px;
|
||||
in property <bool> enabled: true;
|
||||
background: root.enabled ? RogPalette.control-background : RogPalette.control-background.darker(0.5);
|
||||
border-color: root.enabled ? RogPalette.control-border : RogPalette.control-border.darker(0.3);
|
||||
border-width: 1px; // Thinner border for modern look
|
||||
border-radius: RogPalette.border-radius;
|
||||
min-height: 48px;
|
||||
max-height: 56px;
|
||||
opacity: root.enabled ? 1.0 : 0.6;
|
||||
}
|
||||
|
||||
export component SystemSlider inherits RogItem {
|
||||
@@ -17,7 +21,6 @@ export component SystemSlider inherits RogItem {
|
||||
callback released(float);
|
||||
|
||||
in property <string> help_text;
|
||||
in property <bool> enabled: true;
|
||||
in property <bool> has_reset: false;
|
||||
callback cb_do_reset();
|
||||
|
||||
@@ -29,24 +32,24 @@ export component SystemSlider inherits RogItem {
|
||||
HorizontalLayout {
|
||||
spacing: 6px;
|
||||
Text {
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
vertical-alignment: TextVerticalAlignment.center;
|
||||
color: Palette.control-foreground;
|
||||
color: RogPalette.text-primary;
|
||||
text: root.text;
|
||||
}
|
||||
|
||||
Text {
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
horizontal-alignment: TextHorizontalAlignment.right;
|
||||
vertical-alignment: TextVerticalAlignment.center;
|
||||
color: Palette.control-foreground;
|
||||
color: RogPalette.accent;
|
||||
text: "\{Math.round(root.value)}";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
HorizontalBox {
|
||||
padding-right: 10px;
|
||||
padding-right: 20px;
|
||||
slider := Slider {
|
||||
enabled: root.enabled;
|
||||
maximum: root.maximum;
|
||||
@@ -63,10 +66,11 @@ export component SystemSlider inherits RogItem {
|
||||
y: help.y - self.height + help.height - 10px;
|
||||
Rectangle {
|
||||
drop-shadow-blur: 10px;
|
||||
drop-shadow-color: black;
|
||||
border-radius: 10px;
|
||||
border-color: Palette.accent-background;
|
||||
background: Palette.background;
|
||||
drop-shadow-color: Colors.black;
|
||||
border-radius: RogPalette.border-radius;
|
||||
border-width: 1px;
|
||||
border-color: RogPalette.accent;
|
||||
background: RogPalette.control-background;
|
||||
Dialog {
|
||||
title: root.title;
|
||||
VerticalBox {
|
||||
@@ -76,12 +80,12 @@ export component SystemSlider inherits RogItem {
|
||||
wrap: TextWrap.word-wrap;
|
||||
horizontal-alignment: TextHorizontalAlignment.center;
|
||||
text: root.title;
|
||||
color: RogPalette.text-primary;
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
height: 1px;
|
||||
border-color: black;
|
||||
border-width: 1px;
|
||||
background: RogPalette.control-border;
|
||||
}
|
||||
|
||||
Text {
|
||||
@@ -89,6 +93,7 @@ export component SystemSlider inherits RogItem {
|
||||
font-size: 16px;
|
||||
wrap: TextWrap.word-wrap;
|
||||
text: root.help_text;
|
||||
color: RogPalette.text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -113,16 +118,18 @@ export component SystemSlider inherits RogItem {
|
||||
y: reset.y - self.height + reset.height;
|
||||
Rectangle {
|
||||
drop-shadow-blur: 10px;
|
||||
drop-shadow-color: black;
|
||||
border-radius: 10px;
|
||||
border-color: Palette.accent-background;
|
||||
background: Palette.background;
|
||||
drop-shadow-color: Colors.black;
|
||||
border-radius: RogPalette.border-radius;
|
||||
border-width: 1px;
|
||||
border-color: RogPalette.accent;
|
||||
background: RogPalette.control-background;
|
||||
Dialog {
|
||||
Text {
|
||||
max-width: 420px;
|
||||
font-size: 16px;
|
||||
wrap: TextWrap.word-wrap;
|
||||
text: @tr("confirm_reset" => "Are you sure you want to reset this?");
|
||||
color: RogPalette.text-primary;
|
||||
}
|
||||
|
||||
StandardButton {
|
||||
@@ -161,9 +168,9 @@ export component SystemToggle inherits RogItem {
|
||||
alignment: LayoutAlignment.start;
|
||||
padding-left: 10px;
|
||||
Text {
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
vertical-alignment: TextVerticalAlignment.center;
|
||||
color: Palette.control-foreground;
|
||||
color: RogPalette.text-primary;
|
||||
text: root.text;
|
||||
}
|
||||
}
|
||||
@@ -192,9 +199,9 @@ export component SystemToggleInt inherits RogItem {
|
||||
alignment: LayoutAlignment.start;
|
||||
padding-left: 10px;
|
||||
Text {
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
vertical-alignment: TextVerticalAlignment.center;
|
||||
color: Palette.control-foreground;
|
||||
color: RogPalette.text-primary;
|
||||
text: root.text;
|
||||
}
|
||||
}
|
||||
@@ -222,10 +229,10 @@ export component SystemToggleVert inherits RogItem {
|
||||
alignment: LayoutAlignment.space-around;
|
||||
padding-top: 8px;
|
||||
Text {
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
vertical-alignment: TextVerticalAlignment.bottom;
|
||||
horizontal-alignment: TextHorizontalAlignment.center;
|
||||
color: Palette.control-foreground;
|
||||
color: RogPalette.text-primary;
|
||||
text: root.text;
|
||||
}
|
||||
|
||||
@@ -253,9 +260,9 @@ export component SystemDropdown inherits RogItem {
|
||||
alignment: LayoutAlignment.start;
|
||||
padding-left: 10px;
|
||||
Text {
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
vertical-alignment: TextVerticalAlignment.center;
|
||||
color: Palette.control-foreground;
|
||||
color: RogPalette.text-primary;
|
||||
text: root.text;
|
||||
}
|
||||
}
|
||||
@@ -287,24 +294,28 @@ export component PopupNotification {
|
||||
height: root.height;
|
||||
// TODO: add properties to display
|
||||
Rectangle {
|
||||
border-width: 2px;
|
||||
border-color: Palette.accent-background;
|
||||
background: Palette.background;
|
||||
|
||||
border-width: 1px;
|
||||
border-color: RogPalette.accent;
|
||||
background: RogPalette.background;
|
||||
// TODO: drop shadows slow
|
||||
// drop-shadow-offset-x: 7px;
|
||||
// drop-shadow-offset-y: 7px;
|
||||
// drop-shadow-color: black;
|
||||
// drop-shadow-blur: 30px;
|
||||
VerticalLayout {
|
||||
Dialog {
|
||||
VerticalLayout {
|
||||
alignment: start;
|
||||
Text {
|
||||
text: heading;
|
||||
color: Palette.control-foreground;
|
||||
color: RogPalette.text-primary;
|
||||
font-size: 32px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: content;
|
||||
color: Palette.control-foreground;
|
||||
color: RogPalette.text-secondary;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Palette } from "std-widgets.slint";
|
||||
import { RogPalette } from "../themes/rog_theme.slint";
|
||||
|
||||
export struct Node { x: length, y: length}
|
||||
|
||||
@@ -44,7 +45,7 @@ export component Graph inherits Rectangle {
|
||||
for n in 11: Path {
|
||||
viewbox-width: self.width / 1px;
|
||||
viewbox-height: self.height / 1px;
|
||||
stroke: Palette.alternate-foreground.darker(200%);
|
||||
stroke: RogPalette.control-border;
|
||||
stroke-width: 1px;
|
||||
MoveTo {
|
||||
x: scale_x_to_graph(n * 10px) / 1px;
|
||||
@@ -60,7 +61,7 @@ export component Graph inherits Rectangle {
|
||||
}
|
||||
|
||||
for n in 11: Text {
|
||||
color: Palette.accent-background;
|
||||
color: RogPalette.text-secondary;
|
||||
font-size <=> root.axis_font_size;
|
||||
text: "\{n * 10}c";
|
||||
x: scale_x_to_graph(n * 10px) - self.width / 3;
|
||||
@@ -70,7 +71,7 @@ export component Graph inherits Rectangle {
|
||||
for n in 11: Path {
|
||||
viewbox-width: self.width / 1px;
|
||||
viewbox-height: self.height / 1px;
|
||||
stroke: Palette.alternate-foreground.darker(200%);
|
||||
stroke: RogPalette.control-border;
|
||||
stroke-width: 1px;
|
||||
MoveTo {
|
||||
x: 0;
|
||||
@@ -86,7 +87,7 @@ export component Graph inherits Rectangle {
|
||||
}
|
||||
|
||||
for n in 11: Text {
|
||||
color: Palette.accent-background;
|
||||
color: RogPalette.text-secondary;
|
||||
font-size <=> root.axis_font_size;
|
||||
text: "\{n * 10}%";
|
||||
x: - self.width;
|
||||
@@ -97,7 +98,7 @@ export component Graph inherits Rectangle {
|
||||
if idx + 1 != nodes.length: Path {
|
||||
viewbox-width: self.width / 1px;
|
||||
viewbox-height: self.height / 1px;
|
||||
stroke: Palette.control-foreground;
|
||||
stroke: RogPalette.accent;
|
||||
stroke-width: 2px;
|
||||
MoveTo {
|
||||
x: scale_x_to_graph(nodes[idx].x) / 1px;
|
||||
@@ -114,19 +115,19 @@ export component Graph inherits Rectangle {
|
||||
for n[idx] in nodes: Rectangle {
|
||||
states [
|
||||
pressed when touch.pressed: {
|
||||
point.background: Palette.selection-background;
|
||||
tip.background: Palette.selection-background;
|
||||
point.background: RogPalette.accent;
|
||||
tip.background: RogPalette.accent;
|
||||
tip.opacity: 1.0;
|
||||
}
|
||||
hover when touch.has-hover: {
|
||||
point.background: Palette.accent-background;
|
||||
tip.background: Palette.accent-background;
|
||||
point.background: RogPalette.accent;
|
||||
tip.background: RogPalette.accent;
|
||||
tip.opacity: 1.0;
|
||||
}
|
||||
]
|
||||
//
|
||||
point := Rectangle {
|
||||
background: Palette.control-foreground;
|
||||
background: RogPalette.text-primary;
|
||||
x: scale_x_to_graph(n.x) - self.width / 2;
|
||||
y: graph.height - scale_y_to_graph(n.y) - self.height / 2;
|
||||
width: 18px;
|
||||
@@ -142,10 +143,14 @@ export component Graph inherits Rectangle {
|
||||
} else if n.x + scale_x_to_node(self.mouse-x - self.pressed-x) < nodes[idx - 1].x {
|
||||
n.x = nodes[idx - 1].x + pad;
|
||||
}
|
||||
|
||||
// Y-Axis: Monotonic Non-Decreasing
|
||||
if n.y + scale_y_to_node(self.height - self.mouse-y - self.pressed-y) > nodes[idx + 1].y {
|
||||
n.y = nodes[idx + 1].y - pad;
|
||||
n.y = nodes[idx + 1].y; // Allow equality
|
||||
} else if n.y + scale_y_to_node(self.height - self.mouse-y - self.pressed-y) < nodes[idx - 1].y {
|
||||
n.y = nodes[idx - 1].y + pad;
|
||||
n.y = nodes[idx - 1].y; // Allow equality
|
||||
} else if n.y + scale_y_to_node(self.height - self.mouse-y - self.pressed-y) < 0.0 {
|
||||
n.y = 0px;
|
||||
}
|
||||
} else if idx == 0 {
|
||||
if n.x + scale_x_to_node(self.mouse-x - self.pressed-x) < 0.0 {
|
||||
@@ -153,10 +158,12 @@ export component Graph inherits Rectangle {
|
||||
} else if n.x + scale_x_to_node(self.mouse-x - self.pressed-x) > nodes[idx + 1].x {
|
||||
n.x = nodes[idx + 1].x - pad;
|
||||
}
|
||||
|
||||
// Y-Axis: <= Next Point
|
||||
if n.y - scale_y_to_node(self.mouse-y - self.pressed-y) < 0.0 {
|
||||
n.y = 1px;
|
||||
n.y = 0px; // Allow 0 RPM
|
||||
} else if n.y + scale_y_to_node(self.height - self.mouse-y - self.pressed-y) > nodes[idx + 1].y {
|
||||
n.y = nodes[idx + 1].y - pad;
|
||||
n.y = nodes[idx + 1].y; // Allow equality
|
||||
}
|
||||
} else if idx == nodes.length - 1 {
|
||||
if n.x + scale_x_to_node(self.mouse-x - self.pressed-x) > scale_x_to_node(graph.width) {
|
||||
@@ -164,10 +171,14 @@ export component Graph inherits Rectangle {
|
||||
} else if n.x + scale_x_to_node(self.mouse-x - self.pressed-x) < nodes[idx - 1].x {
|
||||
n.x = nodes[idx - 1].x + pad;
|
||||
}
|
||||
|
||||
// Y-Axis: >= Previous Point
|
||||
if n.y - scale_y_to_node(self.mouse-y - self.pressed-y) > scale_y_to_node(graph.height) {
|
||||
n.y = scale_y_to_node(graph.height - 1px);
|
||||
n.y = scale_y_to_node(graph.height);
|
||||
} else if n.y + scale_y_to_node(self.height - self.mouse-y - self.pressed-y) < nodes[idx - 1].y {
|
||||
n.y = nodes[idx - 1].y + pad;
|
||||
n.y = nodes[idx - 1].y; // Allow equality
|
||||
} else if n.y + scale_y_to_node(self.height - self.mouse-y - self.pressed-y) < 0.0 {
|
||||
n.y = 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -189,13 +200,12 @@ export component Graph inherits Rectangle {
|
||||
}
|
||||
|
||||
tip := Rectangle {
|
||||
background: Palette.control-foreground;
|
||||
background: RogPalette.control-background;
|
||||
opacity: 0.3;
|
||||
border-radius: 12px;
|
||||
x: final_x_pos();
|
||||
y: final_y_pos();
|
||||
width: label.preferred-width + 14px;
|
||||
height: label.preferred-height + 4px;
|
||||
width: label.preferred-width;
|
||||
height: label.preferred-height;
|
||||
function x_pos() -> length {
|
||||
scale_x_to_graph(n.x) - label.preferred-width - 8px
|
||||
}
|
||||
@@ -225,8 +235,8 @@ export component Graph inherits Rectangle {
|
||||
}
|
||||
//
|
||||
label := Text {
|
||||
color: Palette.accent-foreground;
|
||||
font-size: 14px;
|
||||
color: RogPalette.text-primary;
|
||||
font-size: 16px;
|
||||
text: "\{Math.floor(n.x / 1px)}c, \{fan_pct()}%";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import { Palette, HorizontalBox, VerticalBox } from "std-widgets.slint";
|
||||
import { HorizontalBox, VerticalBox } from "std-widgets.slint";
|
||||
import { RogPalette } from "../themes/rog_theme.slint";
|
||||
|
||||
component SideBarItem inherits Rectangle {
|
||||
// padding only has effect on layout elements
|
||||
// padding: 10px;
|
||||
in property <bool> selected;
|
||||
in property <bool> has-focus;
|
||||
in-out property <string> text <=> label.text;
|
||||
@@ -24,22 +27,34 @@ component SideBarItem inherits Rectangle {
|
||||
state.opacity: 0.8;
|
||||
}
|
||||
]
|
||||
|
||||
state := Rectangle {
|
||||
opacity: 0;
|
||||
background: Palette.selection-background;
|
||||
border-width: 0px; // Modern look: no full border, maybe just a left bar?
|
||||
// Or keep the ROG style border
|
||||
border-color: RogPalette.accent;
|
||||
background: root.selected ? RogPalette.control-background : RogPalette.alternate-background;
|
||||
|
||||
// Add a red indicator line on the left for selected items
|
||||
Rectangle {
|
||||
x: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: root.selected ? RogPalette.accent : Colors.transparent;
|
||||
}
|
||||
|
||||
animate opacity { duration: 150ms; }
|
||||
// animate border-width { duration: 150ms; }
|
||||
height: l.preferred-height;
|
||||
}
|
||||
|
||||
l := HorizontalBox {
|
||||
x: 4px;
|
||||
y: (parent.height - self.height) / 2;
|
||||
spacing: 0px;
|
||||
label := Text {
|
||||
color: Palette.foreground;
|
||||
color: root.selected ? RogPalette.accent : RogPalette.text-primary;
|
||||
vertical-alignment: center;
|
||||
font-size: 14px;
|
||||
font-weight: root.selected ? 700 : 400;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -52,16 +67,20 @@ component SideBarItem inherits Rectangle {
|
||||
export component SideBar inherits Rectangle {
|
||||
in property <[string]> model: [];
|
||||
in property <[bool]> available: [];
|
||||
in property <string> title <=> label.text;
|
||||
out property <int> current-item: 0;
|
||||
out property <int> current-focused: fs.has-focus ? fs.focused-tab : -1;
|
||||
|
||||
// The currently focused tab
|
||||
width: 180px;
|
||||
width: 160px;
|
||||
forward-focus: fs;
|
||||
accessible-role: tab;
|
||||
accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current-item;
|
||||
Rectangle {
|
||||
background: Palette.alternate-background;
|
||||
border-width: 0px;
|
||||
// border-color: RogPalette.accent;
|
||||
border-radius: 0px;
|
||||
background: RogPalette.alternate-background; // Darker sidebar
|
||||
fs := FocusScope {
|
||||
key-pressed(event) => {
|
||||
if (event.text == "\n") {
|
||||
@@ -94,23 +113,21 @@ export component SideBar inherits Rectangle {
|
||||
|
||||
VerticalBox {
|
||||
spacing: 4px;
|
||||
padding: 0px;
|
||||
alignment: start;
|
||||
|
||||
Image {
|
||||
height: 100px;
|
||||
source: @image-url("../../data/rog-control-center.png");
|
||||
label := Text {
|
||||
font-size: 24px; // Larger brand text
|
||||
font-weight: 800;
|
||||
horizontal-alignment: center;
|
||||
image-fit: contain;
|
||||
color: RogPalette.accent; // ROG Red brand text
|
||||
}
|
||||
|
||||
// Spacer after brand text
|
||||
Rectangle {
|
||||
height: 1px;
|
||||
background: Palette.border;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
navigation := VerticalLayout {
|
||||
spacing: -6px;
|
||||
spacing: 4px; // Spacing between items
|
||||
alignment: start;
|
||||
vertical-stretch: 0;
|
||||
for item[index] in root.model: SideBarItem {
|
||||
|
||||
58
rog-control-center/ui/widgets/status_bar.slint
Normal file
58
rog-control-center/ui/widgets/status_bar.slint
Normal file
@@ -0,0 +1,58 @@
|
||||
import { RogPalette } from "../themes/rog_theme.slint";
|
||||
|
||||
export global SystemStatus {
|
||||
in property <int> cpu_temp: 0;
|
||||
in property <int> gpu_temp: 0;
|
||||
in property <int> cpu_fan: 0;
|
||||
in property <int> gpu_fan: 0;
|
||||
in property <string> power_w: "--";
|
||||
in property <string> power_avg_w: "--";
|
||||
}
|
||||
|
||||
component StatusItem inherits Rectangle {
|
||||
in property <string> label;
|
||||
in property <string> value;
|
||||
in property <string> unit;
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 5px;
|
||||
Text { text: label; color: RogPalette.text-secondary; font-weight: 700; vertical-alignment: center; }
|
||||
Text { text: value; color: RogPalette.text-primary; vertical-alignment: center; }
|
||||
Text { text: unit; color: RogPalette.text-secondary; font-size: 12px; vertical-alignment: center; }
|
||||
}
|
||||
}
|
||||
|
||||
export component StatusBar inherits Rectangle {
|
||||
background: RogPalette.control-background;
|
||||
height: 30px;
|
||||
|
||||
// Simulated top border
|
||||
Rectangle {
|
||||
y: 0px;
|
||||
x: 0px;
|
||||
width: parent.width;
|
||||
height: 1px;
|
||||
background: RogPalette.control-border;
|
||||
}
|
||||
|
||||
HorizontalLayout {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
spacing: 20px;
|
||||
alignment: space-between;
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 20px;
|
||||
StatusItem { label: "CPU"; value: SystemStatus.cpu_temp; unit: "°C"; }
|
||||
StatusItem { label: "GPU"; value: SystemStatus.gpu_temp; unit: "°C"; }
|
||||
}
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 20px;
|
||||
StatusItem { label: "PWR"; value: SystemStatus.power_w; unit: "W"; }
|
||||
StatusItem { label: "AVG"; value: SystemStatus.power_avg_w; unit: "W"; }
|
||||
StatusItem { label: "CPU Fan"; value: SystemStatus.cpu_fan; unit: "RPM"; }
|
||||
StatusItem { label: "GPU Fan"; value: SystemStatus.gpu_fan; unit: "RPM"; }
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user