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

feat(ui): Major UI update to Slint components

Browse Source 
- Add real-time system status components

- Add theme support

- Improve layouts
This commit is contained in:
mihai2mn
2026-01-24 16:52:20 +01:00
parent 5d4b164b3b
commit a0dd0b36dd
26 changed files with 1818 additions and 771 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,15 @@
import { Palette, Button, VerticalBox } from "std-widgets.slint";
import { Button, VerticalBox } from "std-widgets.slint";
import { AppSize } from "globals.slint";
import { PageSystem, SystemPageData, AttrMinMax } from "pages/system.slint";
import { SideBar } from "widgets/sidebar.slint";
import { PageAbout } from "pages/about.slint";
import { PageFans } from "pages/fans.slint";
import { PageSlash, SlashPageData } from "pages/slash.slint";
import { PageSupergfx, SupergfxPageData } from "pages/supergfx.slint";
import { PageScreenpad, ScreenpadPageData } from "pages/screenpad.slint";
import { PageAnime, AnimePageData } from "pages/anime.slint";
import { RogItem } from "widgets/common.slint";
import { PageAura } from "pages/aura.slint";
import { PageGPU } from "pages/gpu.slint";
import { Node } from "widgets/graph.slint";
export { Node }
import { FanPageData, FanType, Profile } from "types/fan_types.slint";
@@ -15,8 +17,18 @@ export { FanPageData, FanType, Profile }
import { AuraPageData, AuraDevType, LaptopAuraPower, AuraPowerState, PowerZones, AuraEffect } from "types/aura_types.slint";
export { AuraPageData, AuraDevType, LaptopAuraPower, AuraPowerState, PowerZones, AuraEffect }
import { PageAppSettings, AppSettingsPageData } from "pages/app_settings.slint";
import { StatusBar, SystemStatus } from "widgets/status_bar.slint";
import { TrayTooltip } from "windows/tray_tooltip.slint";
export { TrayTooltip }
export { AppSize, AttrMinMax, SystemPageData, AnimePageData, AppSettingsPageData }
import { RogPalette } from "themes/rog_theme.slint";
export { AppSize, AttrMinMax, SystemPageData, AnimePageData, AppSettingsPageData, SystemStatus, SlashPageData, SupergfxPageData, ScreenpadPageData }
export global SomeError {
in property <string> error_message: "";
in property <string> error_help: "";
}
export component MainWindow inherits Window {
title: "ROG Control";
@@ -25,130 +37,133 @@ export component MainWindow inherits Window {
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, // GPU Configuration
true, // App Settings
true, // About
];
in property <[bool]> sidebar_items_avilable: [true, true, true, true, true, true, true, true, true];
private property <bool> show_notif;
private property <bool> fade_cover;
private property <bool> toast: false;
private property <string> toast_text: "I show when something is waiting";
callback show_toast(string);
callback start_toast_timer();
callback hide_toast();
hide_toast() => {
toast = false;
}
show_toast(text) => {
toast = text != "";
toast_text = text;
if (toast) {
start_toast_timer();
}
}
callback exit-app();
callback show_notification(bool);
show_notification(yes) => {
show_notif = yes;
fade_cover = yes;
}
callback external_colour_change();
external_colour_change() => {
aura.external_colour_change();
aura.external_colour_change();
}
min-height: AppSize.height;
min-width: AppSize.width;
background: Palette.alternate-background;
background: RogPalette.background;
HorizontalLayout {
padding: 0px;
VerticalLayout {
VerticalLayout {
HorizontalLayout {
padding: 0px;
side-bar := SideBar {
model: [
@tr("Menu1" => "System Control"),
@tr("Menu2" => "Keyboard Aura"),
@tr("Menu3" => "AniMe Matrix"),
@tr("Menu4" => "Fan Curves"),
@tr("Menu5" => "GPU Configuration"),
@tr("Menu6" => "App Settings"),
@tr("Menu7" => "About"),
];
available: root.sidebar_items_avilable;
}
Button {
height: 40px;
width: side-bar.width;
text: @tr("Quit App");
clicked() => {
root.exit-app();
}
}
}
Rectangle {
background: Palette.background;
if(side-bar.current-item == 0): page := PageSystem {
width: root.width - side-bar.width;
height: root.height + 12px;
}
/*if(side-bar.current-item == 1):*/ aura := PageAura {
width: root.width - side-bar.width;
visible: side-bar.current-item == 1;
}
if(side-bar.current-item == 2): PageAnime {
width: root.width - side-bar.width;
visible: side-bar.current-item == 2;
}
if(side-bar.current-item == 3): fans := PageFans {
width: root.width - side-bar.width;
visible: side-bar.current-item == 3;
}
if(side-bar.current-item == 4): PageGPU {
width: root.width - side-bar.width;
visible: side-bar.current-item == 4;
}
if(side-bar.current-item == 5): PageAppSettings {
width: root.width - side-bar.width;
visible: side-bar.current-item == 5;
}
if(side-bar.current-item == 6): PageAbout {
width: root.width - side-bar.width;
visible: side-bar.current-item == 6;
}
if toast: Rectangle {
x: 0px;
y: root.height - self.height;
width: root.width - side-bar.width;
height: 40px;
opacity: 1.0;
background: Palette.selection-background;
clip: true;
TouchArea {
height: 100%;
width: 100%;
clicked => {
toast = false;
}
// Left Column: Sidebar + Quit Button
VerticalLayout {
side-bar := SideBar {
title: @tr("ROG");
model: [
@tr("Menu1" => "System Control"),
@tr("Menu2" => "Keyboard Aura"),
@tr("Menu3" => "AniMe Matrix"),
@tr("Menu7" => "Slash Lighting"),
@tr("Menu8" => "Graphics Control"),
@tr("Menu9" => "Screenpad Control"),
@tr("Menu4" => "Fan Curves"),
@tr("Menu5" => "App Settings"),
@tr("Menu6" => "About"),
];
available: root.sidebar_items_avilable;
}
Rectangle {
height: 100%;
width: 100%;
background: Palette.control-background;
max-height: 40px;
width: side-bar.width;
background: RogPalette.control-background;
Text {
color: Palette.control-foreground;
text: root.toast_text;
vertical-alignment: center;
horizontal-alignment: center;
text: @tr("Quit App");
color: RogPalette.text-primary;
}
TouchArea {
clicked => {
root.exit-app();
}
}
}
}
// Right Column: Content Pages
Rectangle {
background: RogPalette.background;
if(side-bar.current-item == 0): page := PageSystem {
width: root.width - side-bar.width;
height: root.height + 12px;
}
aura := PageAura {
width: root.width - side-bar.width;
visible: side-bar.current-item == 1;
}
if(side-bar.current-item == 2): PageAnime {
width: root.width - side-bar.width;
}
if(side-bar.current-item == 3): PageSlash {
width: root.width - side-bar.width;
}
if(side-bar.current-item == 4): PageSupergfx {
width: root.width - side-bar.width;
}
if(side-bar.current-item == 5): PageScreenpad {
width: root.width - side-bar.width;
}
fans := PageFans {
width: root.width - side-bar.width;
visible: side-bar.current-item == 6;
}
if(side-bar.current-item == 7): PageAppSettings {
width: root.width - side-bar.width;
}
if(side-bar.current-item == 8): PageAbout {
width: root.width - side-bar.width;
}
}
}
// Bottom: Status Bar
StatusBar {}
}
if fade_cover: Rectangle {
@@ -156,7 +171,7 @@ export component MainWindow inherits Window {
y: 0px;
width: root.width;
height: root.height;
background: Colors.rgba(25,33,23,20);
background: Colors.rgba(0,0,0,0.7);
opacity: 0.7;
TouchArea {
height: 100%;
@@ -171,6 +186,52 @@ export component MainWindow inherits Window {
}
}
// Modern floating toast/snackbar notification
// Shows at the bottom center, non-intrusive
Rectangle {
visible: self.opacity > 0;
opacity: root.toast ? 1 : 0;
animate opacity { duration: 300ms; }
x: (root.width - 400px) / 2; // Center horizontally
y: root.height - 80px; // Bottom padding
width: 400px;
height: 48px;
border-radius: RogPalette.border-radius;
border-width: 1px;
border-color: RogPalette.accent;
background: RogPalette.control-background;
drop-shadow-blur: 10px;
drop-shadow-color: Colors.black;
TouchArea {
height: 100%;
width: 100%;
clicked => {
toast = false;
}
}
HorizontalLayout {
padding-left: 16px;
padding-right: 16px;
alignment: space-between;
Text {
vertical-alignment: center;
color: RogPalette.text-primary;
text: root.toast_text;
overflow: elide;
}
Text {
vertical-alignment: center;
text: "Dismiss";
color: RogPalette.text-secondary;
font-size: 12px;
}
}
}
// // TODO: or use Dialogue
if show_notif: Rectangle {
@@ -187,13 +248,20 @@ export component MainWindow inherits Window {
}
}
// TODO: add properties to display
Rectangle {
height: 100%;
width: 100%;
background: Palette.background;
Text {
text: "Click here to exit";
background: RogPalette.control-background;
border-radius: 8px;
VerticalLayout {
alignment: center;
Text {
horizontal-alignment: center;
text: "Click here to exit";
color: RogPalette.text-primary;
font-size: 16px;
}
}
}
}
@@ -203,31 +271,45 @@ export component MainWindow inherits Window {
y: 0px;
width: root.width;
height: root.height;
background: Palette.background;
border-color: Palette.border;
border-width: 3px;
border-radius: 10px;
background: RogPalette.background;
border-color: RogPalette.accent;
border-width: 2px;
border-radius: 8px;
VerticalBox {
RogItem {
min-height: 50px;
max-height: 100px;
padding: 20px;
spacing: 15px;
alignment: center;
Text {
text: "Error";
font-size: 22px;
font-weight: 700;
color: RogPalette.accent;
horizontal-alignment: center;
}
Rectangle {
background: RogPalette.control-background;
border-radius: 8px;
min-height: 60px;
Text {
text <=> SomeError.error_message;
font-size: 18px;
font-size: 16px;
color: RogPalette.text-primary;
horizontal-alignment: center;
vertical-alignment: center;
}
}
Text {
text <=> SomeError.error_help;
horizontal-alignment: TextHorizontalAlignment.center;
vertical-alignment: TextVerticalAlignment.center;
color: RogPalette.text-secondary;
horizontal-alignment: center;
vertical-alignment: center;
}
}
}
}
export global SomeError {
in property <string> error_message: "";
in property <string> error_help: "";
}