feat(ui): Major UI update to Slint components

- 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

View File

@@ -1,75 +1,126 @@
import {
AboutSlint,
VerticalBox,
HorizontalBox,
ScrollView,
} from "std-widgets.slint";
import { VerticalBox, HorizontalBox, ScrollView } from "std-widgets.slint";
import { RogPalette } from "../themes/rog_theme.slint";
export component PageAbout inherits Rectangle {
background: RogPalette.background;
export component PageAbout inherits VerticalLayout {
padding: 10px;
spacing: 10px;
ScrollView {
VerticalBox {
padding: 30px;
spacing: 20px;
alignment: center;
HorizontalBox {
alignment: LayoutAlignment.center;
VerticalBox {
alignment: LayoutAlignment.center;
// Title
Text {
horizontal-alignment: center;
text: "ROG Control Center";
font-size: 28px;
font-weight: 800;
color: RogPalette.accent;
}
Text {
vertical-alignment: TextVerticalAlignment.center;
horizontal-alignment: TextHorizontalAlignment.center;
text: "ROG Control Center";
font-size: 22px;
Text {
horizontal-alignment: center;
text: "A modern UI for asusctl built with Slint";
font-size: 16px;
color: RogPalette.text-secondary;
}
// Version info
Rectangle {
height: 60px;
background: RogPalette.control-background;
border-radius: 8px;
border-width: 1px;
border-color: RogPalette.control-border;
HorizontalBox {
padding: 15px;
alignment: center;
Text {
text: "Version 6.3.0";
font-size: 14px;
color: RogPalette.text-primary;
}
Text {
text: " | ";
color: RogPalette.text-secondary;
}
Text {
text: "Requires kernel 6.10+";
font-size: 14px;
color: RogPalette.text-secondary;
}
}
}
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.";
// Features section
Rectangle {
background: RogPalette.control-background;
border-radius: 8px;
border-width: 1px;
border-color: RogPalette.control-border;
VerticalBox {
padding: 20px;
spacing: 12px;
Text {
text: "Features";
font-size: 18px;
font-weight: 700;
color: RogPalette.accent;
}
// Completed features
Text { text: "[x] ROG-themed dark UI"; color: RogPalette.text-primary; font-size: 13px; }
Text { text: "[x] System status bar (CPU/GPU temps & fan speeds)"; color: RogPalette.text-primary; font-size: 13px; }
Text { text: "[x] Power profile management"; color: RogPalette.text-primary; font-size: 13px; }
Text { text: "[x] Aura RGB keyboard lighting"; color: RogPalette.text-primary; font-size: 13px; }
Text { text: "[x] AniMe Matrix display"; color: RogPalette.text-primary; font-size: 13px; }
Text { text: "[x] Slash LED control"; color: RogPalette.text-primary; font-size: 13px; }
Text { text: "[x] Supergfx graphics switching"; color: RogPalette.text-primary; font-size: 13px; }
Text { text: "[x] Screenpad brightness & gamma"; color: RogPalette.text-primary; font-size: 13px; }
Text { text: "[x] Custom fan curves"; color: RogPalette.text-primary; font-size: 13px; }
Text { text: "[x] Desktop notifications (KDE OSD)"; color: RogPalette.text-primary; font-size: 13px; }
Text { text: "[x] System tray integration"; color: RogPalette.text-primary; font-size: 13px; }
// Pending features
Rectangle { height: 10px; }
Text { text: "Planned:"; font-size: 14px; font-weight: 600; color: RogPalette.text-secondary; }
Text { text: "[ ] ROG Ally specific settings"; color: RogPalette.text-secondary; font-size: 13px; }
Text { text: "[ ] Advanced Aura zone editing"; color: RogPalette.text-secondary; font-size: 13px; }
}
}
Text {
font-weight: 900;
text: "Key Features:";
}
// Credits
Rectangle {
background: RogPalette.control-background;
border-radius: 8px;
border-width: 1px;
border-color: RogPalette.control-border;
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.";
}
VerticalBox {
padding: 20px;
spacing: 8px;
Text {
font-weight: 900;
text: "Requirements:";
}
Text {
text: "Credits";
font-size: 18px;
font-weight: 700;
color: RogPalette.accent;
}
Text {
text: " • This software requires kernel version 6.19.";
}
Text {
font-weight: 900;
text: "Work in progress:";
}
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 {
text: "asusctl & asusd by Luke Jones";
font-size: 13px;
color: RogPalette.text-primary;
}
Text {
text: "UI built with Slint";
font-size: 13px;
color: RogPalette.text-secondary;
}
}
}
}