gilles/asusctl
1
0
Fork 0
mirror of https://gitlab.com/asus-linux/asusctl.git synced 2026-02-06 00:15:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

ROGCC UI update

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

3
.editorconfig
View File

@@ -8,6 +8,9 @@ indent_style = space
trim_trailing_whitespace = true
insert_final_newline = true
[*.slint]
indent_size = 4
[*.md]
trim_trailing_whitespace = false

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

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

103
rog-control-center/ui/pages/about.slint
View File

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

26
rog-control-center/ui/pages/anime.slint
View File

@@ -36,12 +36,8 @@ export component PageAnime inherits Rectangle {
property <bool> show_display_advanced: false;
property <bool> 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;

8
rog-control-center/ui/pages/app_settings.slint
View File

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

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

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

10
rog-control-center/ui/pages/fans.slint
View File

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

90
rog-control-center/ui/pages/gpu.slint
View File

@@ -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 <int> gpu_mux_mode: 1; // 0 = Ultra/Discreet, 1 = Integrated/Optimus
in-out property <int> dgpu_disabled: 0; // 1 == dGPU disabled
in-out property <int> 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);
}
}
}
}
}
}
}
}

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

@@ -152,21 +152,20 @@ export component PageSystem inherits Rectangle {
property <bool> show_fade_cover: false;
property <bool> 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;

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

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

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

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

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

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

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

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

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

@@ -4,8 +4,6 @@
import { Palette, HorizontalBox, VerticalBox } from "std-widgets.slint";
component SideBarItem inherits Rectangle {
// padding only has effect on layout elements
// padding: 10px;
in property <bool> selected;
in property <bool> has-focus;
in-out property <string> text <=> label.text;
@@ -26,18 +24,16 @@ component SideBarItem inherits Rectangle {
state.opacity: 0.8;
}
]
state := Rectangle {
opacity: 0;
border-width: 2px;
border-radius: 10px;
border-color: Palette.accent-background;
background: Palette.alternate-background;
background: Palette.selection-background;
animate opacity { duration: 150ms; }
animate border-width { duration: 150ms; }
height: l.preferred-height;
}
l := HorizontalBox {
x: 4px;
y: (parent.height - self.height) / 2;
spacing: 0px;
label := Text {
@@ -56,20 +52,16 @@ component SideBarItem inherits Rectangle {
export component SideBar inherits Rectangle {
in property <[string]> model: [];
in property <[bool]> available: [];
in property <string> title <=> label.text;
out property <int> current-item: 0;
out property <int> current-focused: fs.has-focus ? fs.focused-tab : -1;
// The currently focused tab
width: 160px;
width: 180px;
forward-focus: fs;
accessible-role: tab;
accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current-item;
Rectangle {
border-width: 2px;
border-color: Palette.accent-background;
border-radius: 0px;
background: Palette.background.darker(0.2);
background: Palette.alternate-background;
fs := FocusScope {
key-pressed(event) => {
if (event.text == "\n") {
@@ -102,10 +94,19 @@ export component SideBar inherits Rectangle {
VerticalBox {
spacing: 4px;
padding: 0px;
alignment: start;
label := Text {
font-size: 16px;
Image {
height: 100px;
source: @image-url("../../data/rog-control-center.png");
horizontal-alignment: center;
image-fit: contain;
}
Rectangle {
height: 1px;
background: Palette.border;
}
navigation := VerticalLayout {