gilles/asusctl
1
0
Fork 0
mirror of https://gitlab.com/asus-linux/asusctl.git synced 2026-02-06 00:15:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): Major UI update to Slint components

Browse Source 
- Add real-time system status components

- Add theme support

- Improve layouts
This commit is contained in:
mihai2mn
2026-01-24 16:52:20 +01:00
parent 5d4b164b3b
commit a0dd0b36dd
26 changed files with 1818 additions and 771 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
rog-control-center/ui/widgets/common.slint
View File

@@ -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;
}
}