From 269041a7c61de2b46185c6ab357ca2a2945ad204 Mon Sep 17 00:00:00 2001 From: Mykola Shevchenko Date: Fri, 23 Jan 2026 21:46:15 +0200 Subject: [PATCH] ROGCC UI update --- .editorconfig | 3 + rog-control-center/ui/main_window.slint | 27 ++--- rog-control-center/ui/pages/about.slint | 103 ++++++++++-------- rog-control-center/ui/pages/anime.slint | 26 ++--- .../ui/pages/app_settings.slint | 8 +- rog-control-center/ui/pages/aura.slint | 18 ++- rog-control-center/ui/pages/fans.slint | 10 +- rog-control-center/ui/pages/gpu.slint | 92 +++------------- rog-control-center/ui/pages/system.slint | 64 ++++++----- .../ui/widgets/aura_power.slint | 20 ++-- .../ui/widgets/colour_picker.slint | 24 ++-- rog-control-center/ui/widgets/common.slint | 29 ++--- rog-control-center/ui/widgets/graph.slint | 7 +- rog-control-center/ui/widgets/sidebar.slint | 31 +++--- 14 files changed, 201 insertions(+), 261 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 235afc9e..93fb9272 100644 --- a/rog-control-center/ui/main_window.slint +++ b/rog-control-center/ui/main_window.slint @@ -56,12 +56,13 @@ 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"), @@ -74,20 +75,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(); } } } @@ -210,10 +203,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 aef04ea2..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 { @@ -132,8 +128,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 +138,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"); @@ -193,8 +190,8 @@ export component PageAnime inherits Rectangle { Button { x: root.width - self.width - 6px; y: 6px; - text: "X"; - height: 40px; + text: "✕"; + height: 36px; clicked => { root.show_builtin_advanced = false; root.show_fade_cover = false; @@ -206,8 +203,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 +213,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"); @@ -254,8 +252,8 @@ export component PageAnime inherits Rectangle { Button { x: root.width - self.width - 6px; y: 6px; - text: "X"; - height: 40px; + text: "✕"; + 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..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; @@ -57,7 +52,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/aura.slint b/rog-control-center/ui/pages/aura.slint index 71cb5281..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; @@ -53,6 +54,7 @@ export component PageAura inherits Rectangle { min-height: 220px; max-height: 400px; HorizontalLayout { + padding-top: 5px; spacing: 10px; VerticalBox { Text { @@ -113,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"); @@ -137,8 +137,6 @@ export component PageAura inherits Rectangle { } RogItem { - //padding only has effect on layout elements - //padding: 0px; VerticalBox { Text { text: @tr("Direction"); @@ -160,8 +158,6 @@ export component PageAura inherits Rectangle { } RogItem { - //padding only has effect on layout elements - //padding: 0px; VerticalBox { Text { text: @tr("Speed"); @@ -205,6 +201,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; @@ -244,8 +241,8 @@ export component PageAura inherits Rectangle { Button { x: root.width - self.width - 6px; y: 6px; - text: "X"; - height: 40px; + text: "✕"; + height: 36px; clicked => { root.show_aura_power = false; root.show_fade_cover = false; @@ -255,6 +252,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; @@ -297,8 +295,8 @@ export component PageAura inherits Rectangle { Button { x: root.width - self.width - 6px; y: 6px; - text: "X"; - height: 40px; + text: "✕"; + height: 36px; clicked => { root.show_aura_power = false; root.show_fade_cover = false; 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/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 b2e91537..180105c3 100644 --- a/rog-control-center/ui/pages/system.slint +++ b/rog-control-center/ui/pages/system.slint @@ -152,21 +152,20 @@ 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: 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 +211,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 +239,7 @@ export component PageSystem inherits Rectangle { HorizontalLayout { width: 20%; - padding-left: 10px; + padding-left: 14px; alignment: LayoutAlignment.stretch; Switch { text: @tr("Sync with primary"); @@ -262,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"); @@ -315,12 +314,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"); @@ -328,19 +327,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; } } @@ -583,20 +584,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"); @@ -644,9 +647,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"); @@ -701,8 +705,8 @@ export component PageSystem inherits Rectangle { Button { x: root.width - self.width - 6px; y: 6px; - text: "X"; - height: 40px; + text: "✕"; + 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..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 { @@ -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 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; 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..5e2e5091 100644 --- a/rog-control-center/ui/widgets/common.slint +++ b/rog-control-center/ui/widgets/common.slint @@ -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 { 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()}%"; } } diff --git a/rog-control-center/ui/widgets/sidebar.slint b/rog-control-center/ui/widgets/sidebar.slint index b3574a3f..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; @@ -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 title <=> label.text; out property current-item: 0; 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; 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 {