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
insert_final_newline = true
[*.slint]
indent_size = 4
[*.md]
trim_trailing_whitespace = false

View File

@@ -21,7 +21,7 @@ export component MainWindow inherits Window {
title: "ROG Control";
always-on-top: true;
default-font-family: "Noto Sans";
default-font-size: 14px;
default-font-size: 13px;
default-font-weight: 400;
icon: @image-url("../data/rog-control-center.png");
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-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"),
@@ -64,20 +64,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();
}
}
}
@@ -190,7 +182,7 @@ export component MainWindow inherits Window {
y: 0px;
width: root.width;
height: root.height;
//padding only has effect on layout elements
//padding: 10px;

View File

@@ -26,24 +26,22 @@ 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 {
color: Palette.foreground;
vertical-alignment: center;
font-size: 14px;
font-size: 13px;
}
}
@@ -56,7 +54,6 @@ 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;
@@ -66,10 +63,7 @@ export component SideBar inherits Rectangle {
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 +96,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 {