mirror of
https://gitlab.com/asus-linux/asusctl.git
synced 2026-02-06 00:15:04 +01:00
rogcc sidebar UI updated
This commit is contained in:
@@ -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
|
||||||
|
|
||||||
|
|||||||
@@ -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();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user