rogcc UI updated:

+ system control tab,
+ aura tab,
+ common elements
This commit is contained in:
Mykola Shevchenko
2026-01-20 00:32:02 +02:00
parent 1016995ff5
commit c32e6f5ed6
7 changed files with 71 additions and 63 deletions

View File

@@ -21,7 +21,7 @@ export component MainWindow inherits Window {
title: "ROG Control";
always-on-top: true;
default-font-family: "Noto Sans";
default-font-size: 13px;
default-font-size: 14px;
default-font-weight: 400;
icon: @image-url("../data/rog-control-center.png");
in property <[bool]> sidebar_items_avilable: [true, true, true, true, true, true];

View File

@@ -53,6 +53,7 @@ export component PageAura inherits Rectangle {
min-height: 220px;
max-height: 400px;
HorizontalLayout {
padding-top: 5px;
spacing: 10px;
VerticalBox {
Text {
@@ -205,6 +206,7 @@ export component PageAura inherits Rectangle {
}
if root.show_aura_power && AuraPageData.device_type == AuraDevType.New: Rectangle {
background: Palette.background;
width: 100%;
height: 100%;
opacity: 1;
@@ -245,7 +247,7 @@ export component PageAura inherits Rectangle {
x: root.width - self.width - 6px;
y: 6px;
text: "X";
height: 40px;
height: 36px;
clicked => {
root.show_aura_power = false;
root.show_fade_cover = false;
@@ -255,6 +257,7 @@ export component PageAura inherits Rectangle {
}
if root.show_aura_power && AuraPageData.device_type == AuraDevType.Old: Rectangle {
background: Palette.background;
width: 100%;
height: 100%;
opacity: 1;
@@ -298,7 +301,7 @@ export component PageAura inherits Rectangle {
x: root.width - self.width - 6px;
y: 6px;
text: "X";
height: 40px;
height: 36px;
clicked => {
root.show_aura_power = false;
root.show_fade_cover = false;

View File

@@ -156,17 +156,17 @@ export component PageSystem inherits Rectangle {
//padding: 8px;
ScrollView {
VerticalLayout {
padding: 10px;
spacing: 10px;
padding: 12px;
spacing: 8px;
alignment: LayoutAlignment.start;
Rectangle {
background: Palette.alternate-background;
border-color: Palette.accent-background;
border-width: 3px;
border-radius: 10px;
height: 40px;
border-color: Palette.border;
border-width: 1px;
border-radius: 2px;
height: 36px;
Text {
font-size: 18px;
font-size: 16px;
color: Palette.control-foreground;
horizontal-alignment: TextHorizontalAlignment.center;
text: @tr("Power settings");
@@ -212,11 +212,11 @@ export component PageSystem inherits Rectangle {
padding-left: 10px;
padding-right: 20px;
HorizontalLayout {
width: 38%;
width: 40%;
alignment: LayoutAlignment.space-between;
padding-right: 15px;
Text {
font-size: 16px;
font-size: 14px;
vertical-alignment: TextVerticalAlignment.center;
color: Palette.control-foreground;
text: @tr("Screenpad brightness");
@@ -240,7 +240,7 @@ export component PageSystem inherits Rectangle {
HorizontalLayout {
width: 20%;
padding-left: 10px;
padding-left: 14px;
alignment: LayoutAlignment.stretch;
Switch {
text: @tr("Sync with primary");
@@ -255,12 +255,12 @@ export component PageSystem inherits Rectangle {
Rectangle {
background: Palette.alternate-background;
border-color: Palette.accent-background;
border-width: 3px;
border-radius: 10px;
height: 40px;
border-color: Palette.border;
border-width: 1px;
border-radius: 2px;
height: 36px;
Text {
font-size: 18px;
font-size: 16px;
color: Palette.control-foreground;
horizontal-alignment: TextHorizontalAlignment.center;
text: @tr("Armoury settings");
@@ -268,19 +268,21 @@ export component PageSystem inherits Rectangle {
}
if !SystemPageData.asus_armoury_loaded: Rectangle {
border-width: 3px;
border-color: red;
background: maroon;
// background: darkred;
max-height: 30px;
VerticalBox {
Text {
text: @tr("no_asus_armoury_driver_1" => "The asus-armoury driver is not loaded");
font-size: 16px;
color: white;
horizontal-alignment: TextHorizontalAlignment.center;
}
Text {
text: @tr("no_asus_armoury_driver_2" => "For advanced features you will require a kernel with this driver added.");
font-size: 16px;
color: white;
horizontal-alignment: TextHorizontalAlignment.center;
}
}
@@ -561,20 +563,22 @@ export component PageSystem inherits Rectangle {
}
if root.show_throttle_advanced: Rectangle {
background: Palette.background;
width: 100%;
height: 100%;
opacity: 1;
ScrollView {
VerticalLayout {
padding: 50px;
padding-top: 5px;
padding-bottom: 100px;
alignment: start;
padding: 5px;
padding-top: 15px;
spacing: 10px;
GroupBox {
VerticalBox {
alignment: start;
spacing: 10px;
Text {
font-size: 18px;
font-size: 16px;
horizontal-alignment: TextHorizontalAlignment.center;
vertical-alignment: TextVerticalAlignment.center;
text: @tr("Energy Performance Preference linked to Throttle Policy");
@@ -622,9 +626,10 @@ export component PageSystem inherits Rectangle {
GroupBox {
VerticalBox {
alignment: start;
spacing: 10px;
Text {
font-size: 18px;
font-size: 16px;
horizontal-alignment: TextHorizontalAlignment.center;
vertical-alignment: TextVerticalAlignment.center;
text: @tr("Throttle Policy for power state");
@@ -680,7 +685,7 @@ export component PageSystem inherits Rectangle {
x: root.width - self.width - 6px;
y: 6px;
text: "X";
height: 40px;
height: 34px;
clicked => {
root.show_throttle_advanced = false;
root.show_fade_cover = false;

View File

@@ -4,8 +4,8 @@ import { PowerZones } from "../types/aura_types.slint";
export component AuraPowerGroup inherits Rectangle {
min-width: row.min-width;
border-radius: 20px;
background: Palette.alternate-background;
// border-radius: 20px;
// background: Palette.alternate-background;
opacity: 0.9;
in-out property <string> group-title;
in-out property <bool> boot_checked;
@@ -28,7 +28,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 +38,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 +48,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 +58,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 +72,8 @@ export component AuraPowerGroup inherits Rectangle {
export component AuraPowerGroupOld inherits Rectangle {
min-width: row.min-width;
border-radius: 20px;
background: Palette.alternate-background;
// border-radius: 20px;
// background: Palette.alternate-background;
opacity: 0.9;
in-out property <int> current_zone;
in-out property <[int]> zones;
@@ -109,7 +109,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 +119,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 +129,7 @@ export component AuraPowerGroupOld inherits Rectangle {
}
SystemToggleVert {
min-width: 96px;
min-width: 128px;
max-height: 42px;
text: @tr("Sleep");
checked <=> root.sleep_checked;

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

View File

@@ -1,12 +1,12 @@
import { Palette, VerticalBox , StandardButton, Button, HorizontalBox, ComboBox, Switch, Slider} from "std-widgets.slint";
export component RogItem inherits Rectangle {
background: Palette.control-background;
// 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 +30,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 +47,7 @@ export component SystemSlider inherits RogItem {
}
HorizontalBox {
padding-right: 20px;
padding-right: 10px;
slider := Slider {
enabled: root.enabled;
maximum: root.maximum;
@@ -162,7 +162,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 +193,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 +223,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 +254,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;

View File

@@ -41,7 +41,7 @@ component SideBarItem inherits Rectangle {
label := Text {
color: Palette.foreground;
vertical-alignment: center;
font-size: 13px;
font-size: 14px;
}
}
@@ -58,7 +58,7 @@ export component SideBar inherits Rectangle {
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;