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 updated:

Browse Source 
+ 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
Download Patch File Download Diff File Expand all files Collapse all files

2
rog-control-center/ui/main_window.slint
View File

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

7
rog-control-center/ui/pages/aura.slint
View File

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

51
rog-control-center/ui/pages/system.slint
View File

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

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

@@ -4,8 +4,8 @@ import { PowerZones } from "../types/aura_types.slint";
export component AuraPowerGroup inherits Rectangle { export component AuraPowerGroup inherits Rectangle {
min-width: row.min-width; min-width: row.min-width;
border-radius: 20px; // border-radius: 20px;
background: Palette.alternate-background; // background: Palette.alternate-background;
opacity: 0.9; opacity: 0.9;
in-out property <string> group-title; in-out property <string> group-title;
in-out property <bool> boot_checked; in-out property <bool> boot_checked;
@@ -28,7 +28,7 @@ export component AuraPowerGroup inherits Rectangle {
row := HorizontalBox { row := HorizontalBox {
alignment: LayoutAlignment.center; alignment: LayoutAlignment.center;
SystemToggleVert { SystemToggleVert {
min-width: 96px; min-width: 128px;
max-height: 42px; max-height: 42px;
text: @tr("Boot"); text: @tr("Boot");
checked <=> root.boot_checked; checked <=> root.boot_checked;
@@ -38,7 +38,7 @@ export component AuraPowerGroup inherits Rectangle {
} }
SystemToggleVert { SystemToggleVert {
min-width: 96px; min-width: 128px;
max-height: 42px; max-height: 42px;
text: @tr("Awake"); text: @tr("Awake");
checked <=> root.awake_checked; checked <=> root.awake_checked;
@@ -48,7 +48,7 @@ export component AuraPowerGroup inherits Rectangle {
} }
SystemToggleVert { SystemToggleVert {
min-width: 96px; min-width: 128px;
max-height: 42px; max-height: 42px;
text: @tr("Sleep"); text: @tr("Sleep");
checked <=> root.sleep_checked; checked <=> root.sleep_checked;
@@ -58,7 +58,7 @@ export component AuraPowerGroup inherits Rectangle {
} }
SystemToggleVert { SystemToggleVert {
min-width: 96px; min-width: 128px;
max-height: 42px; max-height: 42px;
text: @tr("Shutdown"); text: @tr("Shutdown");
checked <=> root.shutdown_checked; checked <=> root.shutdown_checked;
@@ -72,8 +72,8 @@ export component AuraPowerGroup inherits Rectangle {
export component AuraPowerGroupOld inherits Rectangle { export component AuraPowerGroupOld inherits Rectangle {
min-width: row.min-width; min-width: row.min-width;
border-radius: 20px; // border-radius: 20px;
background: Palette.alternate-background; // background: Palette.alternate-background;
opacity: 0.9; opacity: 0.9;
in-out property <int> current_zone; in-out property <int> current_zone;
in-out property <[int]> zones; in-out property <[int]> zones;
@@ -109,7 +109,7 @@ export component AuraPowerGroupOld inherits Rectangle {
} }
SystemToggleVert { SystemToggleVert {
min-width: 96px; min-width: 128px;
max-height: 42px; max-height: 42px;
text: @tr("Boot"); text: @tr("Boot");
checked <=> root.boot_checked; checked <=> root.boot_checked;
@@ -119,7 +119,7 @@ export component AuraPowerGroupOld inherits Rectangle {
} }
SystemToggleVert { SystemToggleVert {
min-width: 96px; min-width: 128px;
max-height: 42px; max-height: 42px;
text: @tr("Awake"); text: @tr("Awake");
checked <=> root.awake_checked; checked <=> root.awake_checked;
@@ -129,7 +129,7 @@ export component AuraPowerGroupOld inherits Rectangle {
} }
SystemToggleVert { SystemToggleVert {
min-width: 96px; min-width: 128px;
max-height: 42px; max-height: 42px;
text: @tr("Sleep"); text: @tr("Sleep");
checked <=> root.sleep_checked; 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"; import { Palette, Slider, HorizontalBox, Button, LineEdit } from "std-widgets.slint";
export component ColourSlider inherits VerticalLayout { export component ColourSlider inherits VerticalLayout {
spacing: 10px; spacing: 12px;
in-out property <bool> enabled; in-out property <bool> enabled;
property <string> hex: "#FF0000"; property <string> hex: "#FF0000";
in-out property <float> c1value <=> c1.value; in-out property <float> c1value <=> c1.value;
@@ -102,9 +102,9 @@ export component ColourSlider inherits VerticalLayout {
hex = set_hex_from_colour(final_colour); hex = set_hex_from_colour(final_colour);
} }
Rectangle { Rectangle {
height: 32px; height: 28px;
border-width: 2px; border-width: 1px;
border-radius: 7px; border-radius: 3px;
border-color: Palette.border; border-color: Palette.border;
// 13 colours // 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]); 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 { Rectangle {
height: 32px; height: 28px;
border-width: 2px; border-width: 1px;
border-radius: 7px; border-radius: 3px;
border-color: Palette.border; border-color: Palette.border;
// 11 colours // 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]); 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 { Rectangle {
height: 32px; height: 28px;
border-width: 2px; border-width: 1px;
border-radius: 7px; border-radius: 3px;
border-color: Palette.border; border-color: Palette.border;
// 11 colours // 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]); 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 { Rectangle {
width: self.height; width: self.height;
border-width: 2px; border-width: 1px;
border-radius: 7px; border-radius: 3px;
border-color: Palette.border; border-color: Palette.border;
background <=> root.colourbox; background <=> root.colourbox;
} }

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

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

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

@@ -41,7 +41,7 @@ component SideBarItem inherits Rectangle {
label := Text { label := Text {
color: Palette.foreground; color: Palette.foreground;
vertical-alignment: center; 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; out property <int> current-focused: fs.has-focus ? fs.focused-tab : -1;
// The currently focused tab // The currently focused tab
width: 160px; width: 180px;
forward-focus: fs; forward-focus: fs;
accessible-role: tab; accessible-role: tab;
accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current-item; accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current-item;