rogcc sidebar UI updated

This commit is contained in:
Mykola Shevchenko
2026-01-18 23:43:08 +02:00
parent a9f4aac875
commit 1016995ff5
3 changed files with 28 additions and 30 deletions

View File

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

View File

@@ -21,7 +21,7 @@ export component MainWindow inherits Window {
title: "ROG Control"; title: "ROG Control";
always-on-top: true; always-on-top: true;
default-font-family: "Noto Sans"; default-font-family: "Noto Sans";
default-font-size: 14px; default-font-size: 13px;
default-font-weight: 400; default-font-weight: 400;
icon: @image-url("../data/rog-control-center.png"); icon: @image-url("../data/rog-control-center.png");
in property <[bool]> sidebar_items_avilable: [true, true, true, true, true, true]; 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-height: AppSize.height;
min-width: AppSize.width; min-width: AppSize.width;
background: Colors.black; background: Palette.alternate-background;
HorizontalLayout { HorizontalLayout {
padding: 0px; padding: 0px;
VerticalLayout { VerticalLayout {
padding: 0px;
side-bar := SideBar { side-bar := SideBar {
title: @tr("ROG");
model: [ model: [
@tr("Menu1" => "System Control"), @tr("Menu1" => "System Control"),
@tr("Menu2" => "Keyboard Aura"), @tr("Menu2" => "Keyboard Aura"),
@@ -64,20 +64,12 @@ export component MainWindow inherits Window {
available: root.sidebar_items_avilable; available: root.sidebar_items_avilable;
} }
Rectangle { Button {
max-height: 40px; height: 40px;
width: side-bar.width; width: side-bar.width;
background: Palette.control-background; text: @tr("Quit App");
Text { clicked() => {
vertical-alignment: center; root.exit-app();
horizontal-alignment: center;
text: @tr("Quit App");
}
TouchArea {
clicked => {
root.exit-app();
}
} }
} }
} }

View File

@@ -26,24 +26,22 @@ component SideBarItem inherits Rectangle {
state.opacity: 0.8; state.opacity: 0.8;
} }
] ]
state := Rectangle { state := Rectangle {
opacity: 0; opacity: 0;
border-width: 2px; background: Palette.selection-background;
border-radius: 10px;
border-color: Palette.accent-background;
background: Palette.alternate-background;
animate opacity { duration: 150ms; } animate opacity { duration: 150ms; }
animate border-width { duration: 150ms; }
height: l.preferred-height; height: l.preferred-height;
} }
l := HorizontalBox { l := HorizontalBox {
x: 4px;
y: (parent.height - self.height) / 2; y: (parent.height - self.height) / 2;
spacing: 0px; spacing: 0px;
label := Text { label := Text {
color: Palette.foreground; color: Palette.foreground;
vertical-alignment: center; vertical-alignment: center;
font-size: 14px; font-size: 13px;
} }
} }
@@ -56,7 +54,6 @@ component SideBarItem inherits Rectangle {
export component SideBar inherits Rectangle { export component SideBar inherits Rectangle {
in property <[string]> model: []; in property <[string]> model: [];
in property <[bool]> available: []; in property <[bool]> available: [];
in property <string> title <=> label.text;
out property <int> current-item: 0; out property <int> current-item: 0;
out property <int> current-focused: fs.has-focus ? fs.focused-tab : -1; out property <int> current-focused: fs.has-focus ? fs.focused-tab : -1;
@@ -66,10 +63,7 @@ export component SideBar inherits Rectangle {
accessible-role: tab; accessible-role: tab;
accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current-item; accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current-item;
Rectangle { Rectangle {
border-width: 2px; background: Palette.alternate-background;
border-color: Palette.accent-background;
border-radius: 0px;
background: Palette.background.darker(0.2);
fs := FocusScope { fs := FocusScope {
key-pressed(event) => { key-pressed(event) => {
if (event.text == "\n") { if (event.text == "\n") {
@@ -102,10 +96,19 @@ export component SideBar inherits Rectangle {
VerticalBox { VerticalBox {
spacing: 4px; spacing: 4px;
padding: 0px;
alignment: start; alignment: start;
label := Text {
font-size: 16px; Image {
height: 100px;
source: @image-url("../../data/rog-control-center.png");
horizontal-alignment: center; horizontal-alignment: center;
image-fit: contain;
}
Rectangle {
height: 1px;
background: Palette.border;
} }
navigation := VerticalLayout { navigation := VerticalLayout {