From 1016995ff59d4e540c5202c7cc854bb8070ad472 Mon Sep 17 00:00:00 2001 From: Mykola Shevchenko Date: Sun, 18 Jan 2026 23:43:08 +0200 Subject: [PATCH 1/5] rogcc sidebar UI updated --- .editorconfig | 3 +++ rog-control-center/ui/main_window.slint | 26 +++++++----------- rog-control-center/ui/widgets/sidebar.slint | 29 ++++++++++++--------- 3 files changed, 28 insertions(+), 30 deletions(-) diff --git a/.editorconfig b/.editorconfig index ed6894e5..65adcbf7 100644 --- a/.editorconfig +++ b/.editorconfig @@ -8,6 +8,9 @@ indent_style = space trim_trailing_whitespace = true insert_final_newline = true +[*.slint] +indent_size = 4 + [*.md] trim_trailing_whitespace = false diff --git a/rog-control-center/ui/main_window.slint b/rog-control-center/ui/main_window.slint index 0623c1dc..a9fe4872 100644 --- a/rog-control-center/ui/main_window.slint +++ b/rog-control-center/ui/main_window.slint @@ -21,7 +21,7 @@ export component MainWindow inherits Window { title: "ROG Control"; always-on-top: true; default-font-family: "Noto Sans"; - default-font-size: 14px; + default-font-size: 13px; default-font-weight: 400; icon: @image-url("../data/rog-control-center.png"); in property <[bool]> sidebar_items_avilable: [true, true, true, true, true, true]; @@ -47,12 +47,12 @@ export component MainWindow inherits Window { } min-height: AppSize.height; min-width: AppSize.width; - background: Colors.black; + background: Palette.alternate-background; HorizontalLayout { padding: 0px; VerticalLayout { + padding: 0px; side-bar := SideBar { - title: @tr("ROG"); model: [ @tr("Menu1" => "System Control"), @tr("Menu2" => "Keyboard Aura"), @@ -64,20 +64,12 @@ export component MainWindow inherits Window { available: root.sidebar_items_avilable; } - Rectangle { - max-height: 40px; + Button { + height: 40px; width: side-bar.width; - background: Palette.control-background; - Text { - vertical-alignment: center; - horizontal-alignment: center; - text: @tr("Quit App"); - } - - TouchArea { - clicked => { - root.exit-app(); - } + text: @tr("Quit App"); + clicked() => { + root.exit-app(); } } } @@ -190,7 +182,7 @@ export component MainWindow inherits Window { y: 0px; width: root.width; height: root.height; - + //padding only has effect on layout elements //padding: 10px; diff --git a/rog-control-center/ui/widgets/sidebar.slint b/rog-control-center/ui/widgets/sidebar.slint index b3574a3f..c7122dd8 100644 --- a/rog-control-center/ui/widgets/sidebar.slint +++ b/rog-control-center/ui/widgets/sidebar.slint @@ -26,24 +26,22 @@ 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 { color: Palette.foreground; vertical-alignment: center; - font-size: 14px; + font-size: 13px; } } @@ -56,7 +54,6 @@ component SideBarItem inherits Rectangle { export component SideBar inherits Rectangle { in property <[string]> model: []; in property <[bool]> available: []; - in property title <=> label.text; out property current-item: 0; out property current-focused: fs.has-focus ? fs.focused-tab : -1; @@ -66,10 +63,7 @@ export component SideBar inherits Rectangle { 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 +96,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 { From c32e6f5ed68f6a9bda69679faf4ff3dd135c5426 Mon Sep 17 00:00:00 2001 From: Mykola Shevchenko Date: Tue, 20 Jan 2026 00:32:02 +0200 Subject: [PATCH 2/5] rogcc UI updated: + system control tab, + aura tab, + common elements --- rog-control-center/ui/main_window.slint | 2 +- rog-control-center/ui/pages/aura.slint | 7 ++- rog-control-center/ui/pages/system.slint | 51 ++++++++++--------- .../ui/widgets/aura_power.slint | 22 ++++---- .../ui/widgets/colour_picker.slint | 24 ++++----- rog-control-center/ui/widgets/common.slint | 24 ++++----- rog-control-center/ui/widgets/sidebar.slint | 4 +- 7 files changed, 71 insertions(+), 63 deletions(-) diff --git a/rog-control-center/ui/main_window.slint b/rog-control-center/ui/main_window.slint index a9fe4872..82e9a303 100644 --- a/rog-control-center/ui/main_window.slint +++ b/rog-control-center/ui/main_window.slint @@ -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]; diff --git a/rog-control-center/ui/pages/aura.slint b/rog-control-center/ui/pages/aura.slint index 71cb5281..dd5d3373 100644 --- a/rog-control-center/ui/pages/aura.slint +++ b/rog-control-center/ui/pages/aura.slint @@ -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; diff --git a/rog-control-center/ui/pages/system.slint b/rog-control-center/ui/pages/system.slint index 1e8a43d2..bcba6f6e 100644 --- a/rog-control-center/ui/pages/system.slint +++ b/rog-control-center/ui/pages/system.slint @@ -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; diff --git a/rog-control-center/ui/widgets/aura_power.slint b/rog-control-center/ui/widgets/aura_power.slint index a177db03..d084d682 100644 --- a/rog-control-center/ui/widgets/aura_power.slint +++ b/rog-control-center/ui/widgets/aura_power.slint @@ -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 group-title; in-out property 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 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; diff --git a/rog-control-center/ui/widgets/colour_picker.slint b/rog-control-center/ui/widgets/colour_picker.slint index 939f27eb..a053aabb 100644 --- a/rog-control-center/ui/widgets/colour_picker.slint +++ b/rog-control-center/ui/widgets/colour_picker.slint @@ -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 enabled; property hex: "#FF0000"; in-out property 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; } diff --git a/rog-control-center/ui/widgets/common.slint b/rog-control-center/ui/widgets/common.slint index 300c3bc0..746110f5 100644 --- a/rog-control-center/ui/widgets/common.slint +++ b/rog-control-center/ui/widgets/common.slint @@ -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; diff --git a/rog-control-center/ui/widgets/sidebar.slint b/rog-control-center/ui/widgets/sidebar.slint index c7122dd8..48d16e01 100644 --- a/rog-control-center/ui/widgets/sidebar.slint +++ b/rog-control-center/ui/widgets/sidebar.slint @@ -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 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; From 3cb10627144540fcceecb3adff4274f8c2d57a97 Mon Sep 17 00:00:00 2001 From: Mykola Shevchenko Date: Tue, 20 Jan 2026 23:34:31 +0200 Subject: [PATCH 3/5] rogcc UI updated: + anime tag, + app settings tab, + fans tab --- rog-control-center/ui/pages/anime.slint | 14 ++++++++------ rog-control-center/ui/pages/app_settings.slint | 3 ++- rog-control-center/ui/pages/fans.slint | 10 +++++++++- rog-control-center/ui/widgets/graph.slint | 7 ++++--- 4 files changed, 23 insertions(+), 11 deletions(-) diff --git a/rog-control-center/ui/pages/anime.slint b/rog-control-center/ui/pages/anime.slint index aef04ea2..6edb6cc1 100644 --- a/rog-control-center/ui/pages/anime.slint +++ b/rog-control-center/ui/pages/anime.slint @@ -132,8 +132,9 @@ export component PageAnime inherits Rectangle { width: 100%; height: 100%; opacity: 1; + background: Palette.background; VerticalLayout { - padding: 50px; + padding: 4px; spacing: 10px; GroupBox { height: 10px; @@ -141,7 +142,7 @@ export component PageAnime inherits Rectangle { spacing: 10px; alignment: LayoutAlignment.start; Text { - font-size: 18px; + font-size: 16px; color: Palette.control-foreground; horizontal-alignment: TextHorizontalAlignment.center; text: @tr("Set which builtin animations are played"); @@ -194,7 +195,7 @@ export component PageAnime inherits Rectangle { x: root.width - self.width - 6px; y: 6px; text: "X"; - height: 40px; + height: 36px; clicked => { root.show_builtin_advanced = false; root.show_fade_cover = false; @@ -206,8 +207,9 @@ export component PageAnime inherits Rectangle { width: 100%; height: 100%; opacity: 1; + background: Palette.background; VerticalLayout { - padding: 50px; + padding: 4px; spacing: 10px; GroupBox { height: 100px; @@ -215,7 +217,7 @@ export component PageAnime inherits Rectangle { spacing: 10px; alignment: LayoutAlignment.start; Text { - font-size: 18px; + font-size: 16px; color: Palette.control-foreground; horizontal-alignment: TextHorizontalAlignment.center; text: @tr("Advanced Display Settings"); @@ -255,7 +257,7 @@ export component PageAnime inherits Rectangle { x: root.width - self.width - 6px; y: 6px; text: "X"; - height: 40px; + height: 36px; clicked => { root.show_display_advanced = false; root.show_fade_cover = false; diff --git a/rog-control-center/ui/pages/app_settings.slint b/rog-control-center/ui/pages/app_settings.slint index d1a5e417..7acc89cc 100644 --- a/rog-control-center/ui/pages/app_settings.slint +++ b/rog-control-center/ui/pages/app_settings.slint @@ -57,7 +57,8 @@ export component PageAppSettings inherits VerticalLayout { } Text { - text: "WIP: some features like notifications are not complete"; + color: Palette.accent-background; + text: " WIP: some features like notifications are not complete"; } } } diff --git a/rog-control-center/ui/pages/fans.slint b/rog-control-center/ui/pages/fans.slint index fc3f703c..db1d7e3a 100644 --- a/rog-control-center/ui/pages/fans.slint +++ b/rog-control-center/ui/pages/fans.slint @@ -16,20 +16,28 @@ component FanTab inherits Rectangle { in-out property <[Node]> nodes; VerticalLayout { + padding: 5px; HorizontalLayout { if root.tab_enabled: Graph { nodes <=> root.nodes; } if !root.tab_enabled: Rectangle { Text { - font-size: 24px; + font-size: 16px; text: @tr("This fan is not avilable on this machine"); } } } + Rectangle { + background: Palette.border; + height: 1px; + } + HorizontalLayout { alignment: LayoutAlignment.end; + spacing: 10px; + padding: 10px; CheckBox { text: @tr("Enabled"); checked <=> root.enabled; diff --git a/rog-control-center/ui/widgets/graph.slint b/rog-control-center/ui/widgets/graph.slint index f540436e..509ba894 100644 --- a/rog-control-center/ui/widgets/graph.slint +++ b/rog-control-center/ui/widgets/graph.slint @@ -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()}%"; } } From a99e408dc3def8686b5e64f98a4ea7e5a178bf40 Mon Sep 17 00:00:00 2001 From: Mykola Shevchenko Date: Wed, 21 Jan 2026 21:35:23 +0200 Subject: [PATCH 4/5] rogcc about page updated, some comments removed --- rog-control-center/ui/main_window.slint | 5 +- rog-control-center/ui/pages/about.slint | 103 ++++++++++-------- rog-control-center/ui/pages/anime.slint | 12 +- .../ui/pages/app_settings.slint | 5 - rog-control-center/ui/pages/aura.slint | 11 +- rog-control-center/ui/pages/system.slint | 5 +- .../ui/widgets/aura_power.slint | 6 +- rog-control-center/ui/widgets/common.slint | 7 +- rog-control-center/ui/widgets/sidebar.slint | 2 - 9 files changed, 72 insertions(+), 84 deletions(-) diff --git a/rog-control-center/ui/main_window.slint b/rog-control-center/ui/main_window.slint index d167f6c7..b421fb01 100644 --- a/rog-control-center/ui/main_window.slint +++ b/rog-control-center/ui/main_window.slint @@ -48,6 +48,7 @@ export component MainWindow inherits Window { min-height: AppSize.height; min-width: AppSize.width; background: Palette.alternate-background; + HorizontalLayout { padding: 0px; VerticalLayout { @@ -184,10 +185,6 @@ export component MainWindow inherits Window { y: 0px; width: root.width; height: root.height; - - //padding only has effect on layout elements - //padding: 10px; - background: Palette.background; border-color: Palette.border; border-width: 3px; diff --git a/rog-control-center/ui/pages/about.slint b/rog-control-center/ui/pages/about.slint index 621c2365..b4dd9676 100644 --- a/rog-control-center/ui/pages/about.slint +++ b/rog-control-center/ui/pages/about.slint @@ -1,62 +1,77 @@ -import { AboutSlint, VerticalBox, HorizontalBox } from "std-widgets.slint"; +import { + AboutSlint, + VerticalBox, + HorizontalBox, + ScrollView, +} from "std-widgets.slint"; export component PageAbout inherits VerticalLayout { padding: 10px; spacing: 10px; - Text { - vertical-alignment: TextVerticalAlignment.center; - horizontal-alignment: TextHorizontalAlignment.center; - text: "A UI for asusctl made with slint"; - font-size: 22px; - } + ScrollView { - HorizontalBox { - alignment: LayoutAlignment.center; - VerticalBox { + HorizontalBox { alignment: LayoutAlignment.center; + VerticalBox { + alignment: LayoutAlignment.center; - Text { - wrap: TextWrap.word-wrap; - text: "You need to use kernel version 6.19 to use this software"; - } + Text { + vertical-alignment: TextVerticalAlignment.center; + horizontal-alignment: TextHorizontalAlignment.center; + text: "ROG Control Center"; + font-size: 22px; + } - Text { - vertical-alignment: TextVerticalAlignment.center; - horizontal-alignment: TextHorizontalAlignment.center; - text: "Todo:"; - font-size: 22px; - } + Text { + wrap: TextWrap.word-wrap; + text: "\nA powerful graphical interface for managing ASUS ROG, TUF, and ProArt laptops on Linux. It acts as the official GUI for the asusctl toolset, allowing for seamless hardware tuning without the command line."; + } - Text { - text: "- [ ] Theme the widgets"; - } + Text { + font-weight: 900; + text: "Key Features:"; + } - Text { - text: "- [ ] Add a cpu/gpu temp/fan speed info bar"; - } + Text { + text: " • Performance: Switch power profiles and customize fan curves.\n • Aura Sync: Control keyboard backlighting and LED effects.\n • Battery Health: Set charge limits to extend battery longevity.\n • Display: Toggle Panel Overdrive and refresh rates.\n • AniMe Matrix: Control AniMe Matrix displays."; + } - Text { - text: "- [ ] Include fan speeds, temps in a bottom bar"; - } + Text { + font-weight: 900; + text: "Requirements:"; + } - Text { - text: "- [ ] Slash control"; - } + Text { + text: " • This software requires kernel version 6.19."; + } - Text { - text: "- [ ] Screenpad controls"; - } + Text { + font-weight: 900; + text: "Work in progress:"; + } - Text { - text: "- [ ] ROG Ally specific settings"; + Text { + text: " • Theme the widgets\n • Add a cpu/gpu temp/fan speed info bar\n • Include fan speeds, temps in a bottom bar\n • Slash control\n • Screenpad controls\n • ROG Ally specific settings"; + } + + Text { + font-weight: 900; + text: "License:"; + } + + Text { + text: " This project is open-source software licensed under the Mozilla Public License 2.0 (MPL-2.0)."; + } + + Text { + font-weight: 900; + text: "Links:"; + } + + Text { + text: " Source Code: https://gitlab.com/asus-linux/asusctl\n Website: https://asus-linux.org/"; + } } } } - - Text { - vertical-alignment: TextVerticalAlignment.center; - horizontal-alignment: TextHorizontalAlignment.center; - text: "Work in progress"; - font-size: 22px; - } } diff --git a/rog-control-center/ui/pages/anime.slint b/rog-control-center/ui/pages/anime.slint index 6edb6cc1..7eb28898 100644 --- a/rog-control-center/ui/pages/anime.slint +++ b/rog-control-center/ui/pages/anime.slint @@ -36,12 +36,8 @@ export component PageAnime inherits Rectangle { property show_display_advanced: false; property show_builtin_advanced: false; clip: true; - // TODO: slow with border-radius - //padding only has effect on layout elements - //padding: 8px; - // height: parent.height - infobar.height - mainview.padding - self.padding * 2; - // TODO: border-radius: 8px; - VerticalLayout { + + VerticalLayout { padding: 10px; spacing: 10px; HorizontalLayout { @@ -194,7 +190,7 @@ export component PageAnime inherits Rectangle { Button { x: root.width - self.width - 6px; y: 6px; - text: "X"; + text: "✕"; height: 36px; clicked => { root.show_builtin_advanced = false; @@ -256,7 +252,7 @@ export component PageAnime inherits Rectangle { Button { x: root.width - self.width - 6px; y: 6px; - text: "X"; + text: "✕"; height: 36px; clicked => { root.show_display_advanced = false; diff --git a/rog-control-center/ui/pages/app_settings.slint b/rog-control-center/ui/pages/app_settings.slint index 7acc89cc..95919868 100644 --- a/rog-control-center/ui/pages/app_settings.slint +++ b/rog-control-center/ui/pages/app_settings.slint @@ -15,12 +15,7 @@ export global AppSettingsPageData { export component PageAppSettings inherits VerticalLayout { Rectangle { clip: true; - // TODO: slow with border-radius - //padding only has effect on layout elements - //padding: 8px; - // height: parent.height - infobar.height - mainview.padding - self.padding * 2; - // TODO: border-radius: 8px; mainview := VerticalLayout { padding: 10px; spacing: 10px; diff --git a/rog-control-center/ui/pages/aura.slint b/rog-control-center/ui/pages/aura.slint index dd5d3373..f1cd1cd3 100644 --- a/rog-control-center/ui/pages/aura.slint +++ b/rog-control-center/ui/pages/aura.slint @@ -17,6 +17,7 @@ export component PageAura inherits Rectangle { c2.final_colour = AuraPageData.led_mode_data.colour2; c2.external_colour_change(); } + ScrollView { VerticalLayout { padding: 10px; @@ -114,8 +115,6 @@ export component PageAura inherits Rectangle { min-height: 80px; max-height: 90px; RogItem { - //padding only has effect on layout elements - //padding: 0px; VerticalBox { Text { text: @tr("Zone"); @@ -138,8 +137,6 @@ export component PageAura inherits Rectangle { } RogItem { - //padding only has effect on layout elements - //padding: 0px; VerticalBox { Text { text: @tr("Direction"); @@ -161,8 +158,6 @@ export component PageAura inherits Rectangle { } RogItem { - //padding only has effect on layout elements - //padding: 0px; VerticalBox { Text { text: @tr("Speed"); @@ -246,7 +241,7 @@ export component PageAura inherits Rectangle { Button { x: root.width - self.width - 6px; y: 6px; - text: "X"; + text: "✕"; height: 36px; clicked => { root.show_aura_power = false; @@ -300,7 +295,7 @@ export component PageAura inherits Rectangle { Button { x: root.width - self.width - 6px; y: 6px; - text: "X"; + text: "✕"; height: 36px; clicked => { root.show_aura_power = false; diff --git a/rog-control-center/ui/pages/system.slint b/rog-control-center/ui/pages/system.slint index bcba6f6e..edb74aa1 100644 --- a/rog-control-center/ui/pages/system.slint +++ b/rog-control-center/ui/pages/system.slint @@ -152,8 +152,7 @@ export component PageSystem inherits Rectangle { property show_fade_cover: false; property show_throttle_advanced: false; clip: true; - //padding only has effect on layout elements - //padding: 8px; + ScrollView { VerticalLayout { padding: 12px; @@ -684,7 +683,7 @@ export component PageSystem inherits Rectangle { Button { x: root.width - self.width - 6px; y: 6px; - text: "X"; + text: "✕"; height: 34px; clicked => { root.show_throttle_advanced = false; diff --git a/rog-control-center/ui/widgets/aura_power.slint b/rog-control-center/ui/widgets/aura_power.slint index d084d682..93817e17 100644 --- a/rog-control-center/ui/widgets/aura_power.slint +++ b/rog-control-center/ui/widgets/aura_power.slint @@ -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 group-title; in-out property 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 { @@ -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 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 { diff --git a/rog-control-center/ui/widgets/common.slint b/rog-control-center/ui/widgets/common.slint index 746110f5..5e2e5091 100644 --- a/rog-control-center/ui/widgets/common.slint +++ b/rog-control-center/ui/widgets/common.slint @@ -1,7 +1,6 @@ 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: 1px; border-radius: 2px; @@ -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 { diff --git a/rog-control-center/ui/widgets/sidebar.slint b/rog-control-center/ui/widgets/sidebar.slint index 48d16e01..f29254e5 100644 --- a/rog-control-center/ui/widgets/sidebar.slint +++ b/rog-control-center/ui/widgets/sidebar.slint @@ -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 selected; in property has-focus; in-out property text <=> label.text; From fd5e5a445117038cf4efb97e8a1ac632d91d2f39 Mon Sep 17 00:00:00 2001 From: Mykola Shevchenko Date: Thu, 22 Jan 2026 22:03:35 +0200 Subject: [PATCH 5/5] rogcc gpu settings page UI updated --- rog-control-center/ui/pages/gpu.slint | 92 ++++-------------------- rog-control-center/ui/pages/system.slint | 8 +-- 2 files changed, 17 insertions(+), 83 deletions(-) diff --git a/rog-control-center/ui/pages/gpu.slint b/rog-control-center/ui/pages/gpu.slint index 6ed13a45..16dd967f 100644 --- a/rog-control-center/ui/pages/gpu.slint +++ b/rog-control-center/ui/pages/gpu.slint @@ -1,102 +1,36 @@ -import { Palette, TabWidget, Button, CheckBox } from "std-widgets.slint"; +import { Palette, TabWidget, Button, CheckBox, ScrollView } from "std-widgets.slint"; import { Graph, Node } from "../widgets/graph.slint"; -import { SystemToggle } from "../widgets/common.slint"; +import { SystemToggle, SystemDropdown } from "../widgets/common.slint"; import { Profile, FanType, FanPageData } from "../types/fan_types.slint"; -import { Palette, HorizontalBox , VerticalBox, ScrollView, Slider, Button, Switch, ComboBox, GroupBox, StandardButton} from "std-widgets.slint"; export global GPUPageData { // GPU mode and device state in-out property gpu_mux_mode: 1; // 0 = Ultra/Discreet, 1 = Integrated/Optimus in-out property dgpu_disabled: 0; // 1 == dGPU disabled in-out property egpu_enabled: 0; // 1 == eGPU (XGMobile) enabled + in-out property <[string]> gpu_modes_choises: [@tr("Ultra"), @tr("Integrated")]; callback cb_gpu_mux_mode(int); callback cb_dgpu_disabled(int); callback cb_egpu_enabled(int); } export component PageGPU inherits Rectangle { - clip: true; + ScrollView { VerticalLayout { padding: 10px; spacing: 10px; - alignment: LayoutAlignment.start; - Rectangle { - background: Palette.alternate-background; - border-color: Palette.accent-background; - border-width: 3px; - border-radius: 10px; - height: 40px; - Text { - font-size: 18px; - color: Palette.control-foreground; - horizontal-alignment: TextHorizontalAlignment.center; - text: @tr("GPU Configuration"); + SystemDropdown { + text: @tr("GPU mode"); + current_index <=> GPUPageData.gpu_mux_mode; + current_value: GPUPageData.gpu_modes_choises[GPUPageData.gpu_mux_mode]; + model <=> GPUPageData.gpu_modes_choises; + selected => { + GPUPageData.cb_gpu_mux_mode(0); + GPUPageData.cb_gpu_mux_mode(1); } } } - - GroupBox { - HorizontalLayout { - spacing: 10px; - - // Ultra (discreet) mode button - disabled if dGPU is marked disabled - Rectangle { - width: 120px; - height: 36px; - border-radius: 6px; - border-color: Palette.border; - border-width: 2px; - background: GPUPageData.gpu_mux_mode == 0 ? Palette.accent-background : Palette.control-background; - opacity: GPUPageData.dgpu_disabled == 1 ? 0.5 : 1.0; - - Text { - color: Palette.control-foreground; - horizontal-alignment: TextHorizontalAlignment.center; - vertical-alignment: TextVerticalAlignment.center; - text: @tr("Ultra"); - } - - TouchArea { - width: 100%; - height: 100%; - clicked => { - if (GPUPageData.dgpu_disabled != 1 && GPUPageData.gpu_mux_mode != 0) { - GPUPageData.cb_gpu_mux_mode(0); - } - } - } - } - - // Integrated (Optimus) mode button - Rectangle { - width: 120px; - height: 36px; - border-radius: 6px; - border-color: Palette.border; - border-width: 2px; - background: GPUPageData.gpu_mux_mode == 1 ? Palette.accent-background : Palette.control-background; - - Text { - color: Palette.control-foreground; - horizontal-alignment: TextHorizontalAlignment.center; - vertical-alignment: TextVerticalAlignment.center; - text: @tr("Integrated"); - } - - TouchArea { - width: 100%; - height: 100%; - clicked => { - if (GPUPageData.gpu_mux_mode != 1) { - GPUPageData.cb_gpu_mux_mode(1); - } - } - } - } - } - } - } -} \ No newline at end of file +} diff --git a/rog-control-center/ui/pages/system.slint b/rog-control-center/ui/pages/system.slint index d44f03dc..180105c3 100644 --- a/rog-control-center/ui/pages/system.slint +++ b/rog-control-center/ui/pages/system.slint @@ -261,12 +261,12 @@ export component PageSystem inherits Rectangle { alignment: LayoutAlignment.start; Rectangle { background: Palette.alternate-background; - border-color: Palette.accent-background; - border-width: 3px; - border-radius: 10px; + border-color: Palette.border; + border-width: 1px; + border-radius: 2px; height: 40px; Text { - font-size: 18px; + font-size: 16px; color: Palette.control-foreground; horizontal-alignment: TextHorizontalAlignment.center; text: @tr("Keyboard Power Management");