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

ROGCC UI update

Browse Source
This commit is contained in:
Mykola Shevchenko
2026-01-23 21:46:15 +02:00
committed by Denis Benato
parent 6e83884c0a
commit 269041a7c6
14 changed files with 201 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
rog-control-center/ui/widgets/aura_power.slint
View File

@@ -4,8 +4,6 @@ import { PowerZones } from "../types/aura_types.slint";
export component AuraPowerGroup inherits Rectangle {
min-width: row.min-width;
border-radius: 20px;
background: Palette.alternate-background;
opacity: 0.9;
in-out property <string> group-title;
in-out property <bool> boot_checked;
@@ -16,6 +14,7 @@ export component AuraPowerGroup inherits Rectangle {
callback awake_toggled(bool);
callback sleep_toggled(bool);
callback shutdown_toggled(bool);
VerticalBox {
spacing: 10px;
Text {
@@ -28,7 +27,7 @@ export component AuraPowerGroup inherits Rectangle {
row := HorizontalBox {
alignment: LayoutAlignment.center;
SystemToggleVert {
min-width: 96px;
min-width: 128px;
max-height: 42px;
text: @tr("Boot");
checked <=> root.boot_checked;
@@ -38,7 +37,7 @@ export component AuraPowerGroup inherits Rectangle {
}
SystemToggleVert {
min-width: 96px;
min-width: 128px;
max-height: 42px;
text: @tr("Awake");
checked <=> root.awake_checked;
@@ -48,7 +47,7 @@ export component AuraPowerGroup inherits Rectangle {
}
SystemToggleVert {
min-width: 96px;
min-width: 128px;
max-height: 42px;
text: @tr("Sleep");
checked <=> root.sleep_checked;
@@ -58,7 +57,7 @@ export component AuraPowerGroup inherits Rectangle {
}
SystemToggleVert {
min-width: 96px;
min-width: 128px;
max-height: 42px;
text: @tr("Shutdown");
checked <=> root.shutdown_checked;
@@ -72,8 +71,6 @@ export component AuraPowerGroup inherits Rectangle {
export component AuraPowerGroupOld inherits Rectangle {
min-width: row.min-width;
border-radius: 20px;
background: Palette.alternate-background;
opacity: 0.9;
in-out property <int> current_zone;
in-out property <[int]> zones;
@@ -86,6 +83,7 @@ export component AuraPowerGroupOld inherits Rectangle {
callback awake_toggled(bool);
callback sleep_toggled(bool);
callback selected_zone(int);
VerticalBox {
spacing: 10px;
Text {
@@ -109,7 +107,7 @@ export component AuraPowerGroupOld inherits Rectangle {
}
SystemToggleVert {
min-width: 96px;
min-width: 128px;
max-height: 42px;
text: @tr("Boot");
checked <=> root.boot_checked;
@@ -119,7 +117,7 @@ export component AuraPowerGroupOld inherits Rectangle {
}
SystemToggleVert {
min-width: 96px;
min-width: 128px;
max-height: 42px;
text: @tr("Awake");
checked <=> root.awake_checked;
@@ -129,7 +127,7 @@ export component AuraPowerGroupOld inherits Rectangle {
}
SystemToggleVert {
min-width: 96px;
min-width: 128px;
max-height: 42px;
text: @tr("Sleep");
checked <=> root.sleep_checked;

24
rog-control-center/ui/widgets/colour_picker.slint
View File

@@ -1,7 +1,7 @@
import { Palette, Slider, HorizontalBox, Button, LineEdit } from "std-widgets.slint";
export component ColourSlider inherits VerticalLayout {
spacing: 10px;
spacing: 12px;
in-out property <bool> enabled;
property <string> hex: "#FF0000";
in-out property <float> c1value <=> c1.value;
@@ -102,9 +102,9 @@ export component ColourSlider inherits VerticalLayout {
hex = set_hex_from_colour(final_colour);
}
Rectangle {
height: 32px;
border-width: 2px;
border-radius: 7px;
height: 28px;
border-width: 1px;
border-radius: 3px;
border-color: Palette.border;
// 13 colours
background: !root.enabled ? Palette.alternate-background : @linear-gradient(90deg, base_colours[0], base_colours[1], base_colours[2], base_colours[3], base_colours[4], base_colours[5], base_colours[6], base_colours[7], base_colours[8], base_colours[9], base_colours[10], base_colours[11], base_colours[12], base_colours[13], base_colours[14], base_colours[15], base_colours[16], base_colours[17], base_colours[18], base_colours[19], base_colours[20], base_colours[21], base_colours[22], base_colours[23], base_colours[24], base_colours[25], base_colours[26], base_colours[27], base_colours[28], base_colours[29], base_colours[30], base_colours[31], base_colours[32], base_colours[33], base_colours[34], base_colours[35]);
@@ -127,9 +127,9 @@ export component ColourSlider inherits VerticalLayout {
}
Rectangle {
height: 32px;
border-width: 2px;
border-radius: 7px;
height: 28px;
border-width: 1px;
border-radius: 3px;
border-color: Palette.border;
// 11 colours
background: !root.enabled ? Palette.alternate-background : @linear-gradient(90deg, base_saturation[0], base_saturation[1], base_saturation[2], base_saturation[3], base_saturation[4], base_saturation[5], base_saturation[6], base_saturation[7], base_saturation[8], base_saturation[9], base_saturation[10]);
@@ -151,9 +151,9 @@ export component ColourSlider inherits VerticalLayout {
}
Rectangle {
height: 32px;
border-width: 2px;
border-radius: 7px;
height: 28px;
border-width: 1px;
border-radius: 3px;
border-color: Palette.border;
// 11 colours
background: !root.enabled ? Palette.alternate-background : @linear-gradient(90deg, base_value[0], base_value[1], base_value[2], base_value[3], base_value[4], base_value[5], base_value[6], base_value[7], base_value[8], base_value[9], base_value[10]);
@@ -191,8 +191,8 @@ export component ColourSlider inherits VerticalLayout {
Rectangle {
width: self.height;
border-width: 2px;
border-radius: 7px;
border-width: 1px;
border-radius: 3px;
border-color: Palette.border;
background <=> root.colourbox;
}

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

@@ -1,12 +1,11 @@
import { Palette, VerticalBox , StandardButton, Button, HorizontalBox, ComboBox, Switch, Slider} from "std-widgets.slint";
export component RogItem inherits Rectangle {
background: Palette.control-background;
border-color: Palette.border;
border-width: 3px;
border-radius: 10px;
min-height: 48px;
max-height: 56px;
border-width: 1px;
border-radius: 2px;
min-height: 44px;
max-height: 44px;
}
export component SystemSlider inherits RogItem {
@@ -30,14 +29,14 @@ export component SystemSlider inherits RogItem {
HorizontalLayout {
spacing: 6px;
Text {
font-size: 16px;
font-size: 14px;
vertical-alignment: TextVerticalAlignment.center;
color: Palette.control-foreground;
text: root.text;
}
Text {
font-size: 16px;
font-size: 14px;
horizontal-alignment: TextHorizontalAlignment.right;
vertical-alignment: TextVerticalAlignment.center;
color: Palette.control-foreground;
@@ -47,7 +46,7 @@ export component SystemSlider inherits RogItem {
}
HorizontalBox {
padding-right: 20px;
padding-right: 10px;
slider := Slider {
enabled: root.enabled;
maximum: root.maximum;
@@ -162,7 +161,7 @@ export component SystemToggle inherits RogItem {
alignment: LayoutAlignment.start;
padding-left: 10px;
Text {
font-size: 16px;
font-size: 14px;
vertical-alignment: TextVerticalAlignment.center;
color: Palette.control-foreground;
text: root.text;
@@ -193,7 +192,7 @@ export component SystemToggleInt inherits RogItem {
alignment: LayoutAlignment.start;
padding-left: 10px;
Text {
font-size: 16px;
font-size: 14px;
vertical-alignment: TextVerticalAlignment.center;
color: Palette.control-foreground;
text: root.text;
@@ -223,7 +222,7 @@ export component SystemToggleVert inherits RogItem {
alignment: LayoutAlignment.space-around;
padding-top: 8px;
Text {
font-size: 16px;
font-size: 14px;
vertical-alignment: TextVerticalAlignment.bottom;
horizontal-alignment: TextHorizontalAlignment.center;
color: Palette.control-foreground;
@@ -254,7 +253,7 @@ export component SystemDropdown inherits RogItem {
alignment: LayoutAlignment.start;
padding-left: 10px;
Text {
font-size: 16px;
font-size: 14px;
vertical-alignment: TextVerticalAlignment.center;
color: Palette.control-foreground;
text: root.text;
@@ -291,11 +290,7 @@ export component PopupNotification {
border-width: 2px;
border-color: Palette.accent-background;
background: Palette.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 {

7
rog-control-center/ui/widgets/graph.slint
View File

@@ -191,10 +191,11 @@ export component Graph inherits Rectangle {
tip := Rectangle {
background: Palette.control-foreground;
opacity: 0.3;
border-radius: 12px;
x: final_x_pos();
y: final_y_pos();
width: label.preferred-width;
height: label.preferred-height;
width: label.preferred-width + 14px;
height: label.preferred-height + 4px;
function x_pos() -> length {
scale_x_to_graph(n.x) - label.preferred-width - 8px
}
@@ -225,7 +226,7 @@ export component Graph inherits Rectangle {
//
label := Text {
color: Palette.accent-foreground;
font-size: 16px;
font-size: 14px;
text: "\{Math.floor(n.x / 1px)}c, \{fan_pct()}%";
}
}

31
rog-control-center/ui/widgets/sidebar.slint
View File

@@ -4,8 +4,6 @@
import { Palette, HorizontalBox, VerticalBox } from "std-widgets.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;
@@ -26,18 +24,16 @@ component SideBarItem inherits Rectangle {
state.opacity: 0.8;
}
]
state := Rectangle {
opacity: 0;
border-width: 2px;
border-radius: 10px;
border-color: Palette.accent-background;
background: Palette.alternate-background;
background: Palette.selection-background;
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 {
@@ -56,20 +52,16 @@ 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: 160px;
width: 180px;
forward-focus: fs;
accessible-role: tab;
accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current-item;
Rectangle {
border-width: 2px;
border-color: Palette.accent-background;
border-radius: 0px;
background: Palette.background.darker(0.2);
background: Palette.alternate-background;
fs := FocusScope {
key-pressed(event) => {
if (event.text == "\n") {
@@ -102,10 +94,19 @@ export component SideBar inherits Rectangle {
VerticalBox {
spacing: 4px;
padding: 0px;
alignment: start;
label := Text {
font-size: 16px;
Image {
height: 100px;
source: @image-url("../../data/rog-control-center.png");
horizontal-alignment: center;
image-fit: contain;
}
Rectangle {
height: 1px;
background: Palette.border;
}
navigation := VerticalLayout {