mirror of
https://gitlab.com/asus-linux/asusctl.git
synced 2026-02-06 00:15:04 +01:00
More updating to zbus 4.0.1
This commit is contained in:
Luke D. Jones
246
rog-control-center/ui/common_widgets.slint
Normal file
246
rog-control-center/ui/common_widgets.slint
Normal file
@@ -0,0 +1,246 @@
|
||||
import { VerticalBox , StandardButton, Button} from "std-widgets.slint";
|
||||
import { Theme } from "globals.slint";
|
||||
|
||||
export component SquareImageButton inherits Rectangle {
|
||||
// if (AppConsts.sdfsdf.length < 0): Rectangle { background: red; }
|
||||
|
||||
callback clicked;
|
||||
in-out property <image> img;
|
||||
border-radius: 7px;
|
||||
border-width: 2px;
|
||||
border-color: Theme.control-outline;
|
||||
background: Theme.image-button-background;
|
||||
touch := TouchArea {
|
||||
clicked => {
|
||||
root.clicked();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Image {
|
||||
height: 90%;
|
||||
width: 90%;
|
||||
x: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
source <=> root.img;
|
||||
image-fit: contain;
|
||||
// colorize: Theme.control-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
export component RoundImageButton inherits Rectangle {
|
||||
callback clicked;
|
||||
in-out property <image> img;
|
||||
in property <length> size;
|
||||
width: self.size;
|
||||
height: self.size;
|
||||
border-radius: root.width / 2;
|
||||
border-width: 6px;
|
||||
border-color: Theme.control-outline;
|
||||
background: Theme.image-button-background;
|
||||
touch := TouchArea {
|
||||
clicked => {
|
||||
root.clicked();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Image {
|
||||
height: 60%;
|
||||
width: 60%;
|
||||
x: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
source <=> root.img;
|
||||
image-fit: contain;
|
||||
// colorize: Theme.control-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
export component SquareCharButton inherits Rectangle {
|
||||
callback clicked;
|
||||
in-out property <string> char;
|
||||
border-radius: 7px;
|
||||
border-width: 2px;
|
||||
border-color: Theme.control-outline;
|
||||
background: Theme.image-button-background;
|
||||
touch := TouchArea {
|
||||
clicked => {
|
||||
root.clicked();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
// height: 90%;
|
||||
// width: 90%;
|
||||
x: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
text: char;
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
horizontal-alignment: center;
|
||||
vertical-alignment: center;
|
||||
color: Theme.control-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
// A variable bar that can be single or double ended
|
||||
export component ValueBar inherits Rectangle {
|
||||
in property <float> value: 0.0;
|
||||
in property <float> min: 0.0;
|
||||
in property <float> max: 1.0;
|
||||
function percentage(min: float, max: float, value: float) -> float{
|
||||
if (min < 0.0 && max > 0.0) {
|
||||
// do a percentage of each half as 0-50%
|
||||
if (value >= max + min) {
|
||||
return (value - (max + min) / 2) / (max - min);
|
||||
|
||||
}
|
||||
return 0.50 - (value - (min - max) / 2) / (max - min);
|
||||
|
||||
}
|
||||
return (value - min) / (max - min);
|
||||
|
||||
}
|
||||
|
||||
function set_x(min: float, max: float, value: float, width: length) -> length{
|
||||
if (min < 0.0 && max > 0.0) {
|
||||
if (value < max + min) {
|
||||
return width / 2 - width * (percentage(min, max, value));
|
||||
|
||||
}
|
||||
return width / 2;
|
||||
|
||||
}
|
||||
return 0;
|
||||
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
border-radius: 3px;
|
||||
background: Theme.neutral-box;
|
||||
Rectangle {
|
||||
x: set_x(root.min, root.max, root.value, root.width);
|
||||
width: parent.x + parent.width * percentage(root.min, root.max, root.value);
|
||||
border-radius: parent.border-radius;
|
||||
background: Theme.control-secondary;
|
||||
}
|
||||
|
||||
Text {
|
||||
vertical-alignment: center;
|
||||
horizontal-alignment: center;
|
||||
text: root.value;
|
||||
font-size: root.height;
|
||||
font-weight: 900;
|
||||
color: Theme.control-foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Single direction spinbox
|
||||
export component SpinBoxUni inherits Rectangle {
|
||||
in-out property <int> value;
|
||||
in property <int> minimum;
|
||||
in property <int> maximum: 100;
|
||||
height: 32px;
|
||||
HorizontalLayout {
|
||||
spacing: 12px;
|
||||
padding: 0;
|
||||
SquareCharButton {
|
||||
width: root.height - parent.padding * 2;
|
||||
char: "-";
|
||||
clicked => {
|
||||
if (root.value > root.minimum) {
|
||||
root.value -= 1;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
border-radius: 3px;
|
||||
border-width: 2px;
|
||||
border-color: Theme.control-outline;
|
||||
// TODO: replace with visual min/max drawing
|
||||
Text {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-alignment: center;
|
||||
horizontal-alignment: center;
|
||||
text: root.value;
|
||||
color: Theme.control-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
SquareCharButton {
|
||||
width: root.height - parent.padding * 2;
|
||||
char: "+";
|
||||
clicked => {
|
||||
if (root.value < root.maximum) {
|
||||
root.value += 1;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export component PopupNotification {
|
||||
in property <string> heading;
|
||||
in property <string> content;
|
||||
_p := PopupWindow {
|
||||
x: root.x;
|
||||
y: root.y;
|
||||
width: root.width;
|
||||
height: root.height;
|
||||
// TODO: add properties to display
|
||||
Rectangle {
|
||||
border-width: 2px;
|
||||
border-color: Theme.control-outline;
|
||||
background: Theme.notification-background;
|
||||
// TODO: drop shadows slow
|
||||
// drop-shadow-offset-x: 7px;
|
||||
// drop-shadow-offset-y: 7px;
|
||||
// drop-shadow-color: black;
|
||||
// drop-shadow-blur: 30px;
|
||||
VerticalLayout {
|
||||
Dialog {
|
||||
VerticalLayout {
|
||||
alignment: start;
|
||||
Text {
|
||||
text: heading;
|
||||
color: Theme.text-foreground-color;
|
||||
font-size: 32px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: content;
|
||||
color: Theme.text-foreground-color;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
StandardButton {
|
||||
kind: ok;
|
||||
}
|
||||
|
||||
StandardButton {
|
||||
kind: cancel;
|
||||
}
|
||||
|
||||
Button {
|
||||
text: "More Info";
|
||||
dialog-button-role: action;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public function show() {
|
||||
_p.show();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
39
rog-control-center/ui/globals.slint
Normal file
39
rog-control-center/ui/globals.slint
Normal file
@@ -0,0 +1,39 @@
|
||||
struct ButtonColours {
|
||||
base: color,
|
||||
pressed: color,
|
||||
hovered: color,
|
||||
}
|
||||
|
||||
export global AppSize {
|
||||
out property <length> width: 800px;
|
||||
out property <length> height: 480px;
|
||||
}
|
||||
|
||||
export global Theme {
|
||||
out property <color> window-background: #000000;
|
||||
out property <color> neutral-box: #BDC0D1;
|
||||
// The background colour of pages and bars
|
||||
out property <color> background-color: root.dark-mode ? #12387b : white;
|
||||
out property <color> text-foreground-color: root.dark-mode ? #F4F6FF : black;
|
||||
out property <color> secondary-foreground-color: root.dark-mode ? #C1C3CA : #6C6E7A;
|
||||
out property <color> image-button-background: root.dark-mode ? root.window-background : white;
|
||||
out property <color> toolbar-background: root.background-color;
|
||||
out property <color> notification-border: root.background-color;
|
||||
out property <color> notification-background: root.background-color;
|
||||
out property <color> control-outline: #FFBF63;
|
||||
out property <color> control-secondary: #6284FF;
|
||||
out property <color> control-foreground: root.dark-mode ? white : #122F7B;
|
||||
out property <color> push-button-base: #FFBF63;
|
||||
out property <ButtonColours> push-button: {
|
||||
base: root.push-button-base,
|
||||
pressed: root.push-button-base.darker(40%),
|
||||
hovered: root.push-button-base.darker(20%),
|
||||
};
|
||||
out property <color> push-button-text-color: white;
|
||||
out property <length> base-font-size: 16px;
|
||||
in property <bool> dark-mode: true;
|
||||
}
|
||||
|
||||
export global IconImages {
|
||||
//out property <image> two_t: @image-url("images/parameters/2t.png");
|
||||
}
|
||||
120
rog-control-center/ui/main_window.slint
Normal file
120
rog-control-center/ui/main_window.slint
Normal file
@@ -0,0 +1,120 @@
|
||||
import { Button, VerticalBox } from "std-widgets.slint";
|
||||
import { SpinBoxUni, ValueBar, SquareImageButton, RoundImageButton } from "common_widgets.slint";
|
||||
import { Theme, AppSize } from "globals.slint";
|
||||
import { PageSystem } from "pages/system.slint";
|
||||
import { SideBar } from "widgets/sidebar.slint";
|
||||
import { PageAbout } from "pages/about.slint";
|
||||
import { PageGpu } from "pages/gpu.slint";
|
||||
import { PageFans } from "pages/fans.slint";
|
||||
import { PageAnime } from "pages/anime.slint";
|
||||
import { PageAura } from "pages/aura.slint";
|
||||
|
||||
export { AppSize, Theme }
|
||||
|
||||
export component MainWindow inherits Window {
|
||||
default-font-family: "DejaVu Sans";
|
||||
private property <bool> show-notif;
|
||||
private property <bool> fade-cover;
|
||||
callback exit-app();
|
||||
callback request-increase-value();
|
||||
callback show-notification(bool);
|
||||
show-notification(yes) => {
|
||||
show-notif = yes;
|
||||
fade-cover = yes;
|
||||
|
||||
}
|
||||
height: AppSize.height;
|
||||
width: AppSize.width;
|
||||
background: Colors.orange;
|
||||
HorizontalLayout {
|
||||
padding: 0px;
|
||||
side-bar := SideBar {
|
||||
title: @tr("ROG");
|
||||
model: [
|
||||
@tr("Menu" => "System Control"),
|
||||
@tr("Menu" => "Keyboard Aura"),
|
||||
@tr("Menu" => "AniMe Matrix"),
|
||||
@tr("Menu" => "Fan Curves"),
|
||||
@tr("Menu" => "GPU Control"),
|
||||
@tr("Menu" => "About"),
|
||||
];
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
background: Colors.purple;
|
||||
if(side-bar.current-item == 0): PageSystem {
|
||||
width: root.width - side-bar.width;
|
||||
height: root.height + 12px;
|
||||
}
|
||||
|
||||
if(side-bar.current-item == 1): PageAura {
|
||||
width: root.width - side-bar.width;
|
||||
}
|
||||
|
||||
if(side-bar.current-item == 2): PageAnime {
|
||||
width: root.width - side-bar.width;
|
||||
}
|
||||
|
||||
if(side-bar.current-item == 3): PageFans {
|
||||
width: root.width - side-bar.width;
|
||||
}
|
||||
|
||||
if(side-bar.current-item == 4): PageGpu {
|
||||
width: root.width - side-bar.width;
|
||||
}
|
||||
|
||||
if(side-bar.current-item == 5): PageAbout {
|
||||
width: root.width - side-bar.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if fade-cover: Rectangle {
|
||||
x: 0px;
|
||||
y: 0px;
|
||||
width: root.width;
|
||||
height: root.height;
|
||||
background: Colors.rgba(25,33,23,20);
|
||||
opacity: 0.7;
|
||||
TouchArea {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
clicked => {
|
||||
// toolbar-dropdown.close();
|
||||
if (show-notif) {
|
||||
show-notif = false;
|
||||
|
||||
}
|
||||
fade-cover = false;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// // TODO: or use Dialogue
|
||||
if show-notif: Rectangle {
|
||||
x: root.width / 8;
|
||||
y: root.height / 8;
|
||||
height: (root.height / 8) * 6;
|
||||
width: (root.width / 8) * 6;
|
||||
TouchArea {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
clicked => {
|
||||
show-notif = false;
|
||||
exit-app();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: add properties to display
|
||||
Rectangle {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: Theme.neutral-box;
|
||||
Text {
|
||||
text: "Click here to exit";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
18
rog-control-center/ui/pages/about.slint
Normal file
18
rog-control-center/ui/pages/about.slint
Normal file
@@ -0,0 +1,18 @@
|
||||
import { ValueBar } from "../common_widgets.slint";
|
||||
import { Theme } from "../globals.slint";
|
||||
import { AboutSlint } from "std-widgets.slint";
|
||||
|
||||
export component PageAbout inherits VerticalLayout {
|
||||
Rectangle {
|
||||
clip: true;
|
||||
// TODO: slow with border-radius
|
||||
padding: 8px;
|
||||
// height: parent.height - infobar.height - mainview.padding - self.padding * 2;
|
||||
// TODO: border-radius: 8px;
|
||||
mainview := VerticalLayout {
|
||||
padding: 10px;
|
||||
spacing: 10px;
|
||||
AboutSlint {}
|
||||
}
|
||||
}
|
||||
}
|
||||
50
rog-control-center/ui/pages/anime.slint
Normal file
50
rog-control-center/ui/pages/anime.slint
Normal file
@@ -0,0 +1,50 @@
|
||||
import { ValueBar } from "../common_widgets.slint";
|
||||
import { Theme } from "../globals.slint";
|
||||
|
||||
export component PageAnime inherits VerticalLayout {
|
||||
Rectangle {
|
||||
clip: true;
|
||||
// TODO: slow with border-radius
|
||||
padding: 8px;
|
||||
// height: parent.height - infobar.height - mainview.padding - self.padding * 2;
|
||||
// TODO: border-radius: 8px;
|
||||
mainview := VerticalLayout {
|
||||
padding: 10px;
|
||||
spacing: 10px;
|
||||
ValueBar {
|
||||
height: 40px;
|
||||
value: 10.5;
|
||||
min: 0.0;
|
||||
max: 100.0;
|
||||
}
|
||||
|
||||
ValueBar {
|
||||
height: 40px;
|
||||
value: -70;
|
||||
min: -100;
|
||||
max: 0;
|
||||
}
|
||||
|
||||
ValueBar {
|
||||
height: 80px;
|
||||
value: 40;
|
||||
min: -50;
|
||||
max: 50;
|
||||
}
|
||||
|
||||
ValueBar {
|
||||
height: 80px;
|
||||
value: -40;
|
||||
min: -50;
|
||||
max: 50;
|
||||
}
|
||||
|
||||
ValueBar {
|
||||
height: 80px;
|
||||
value: -40;
|
||||
min: -50;
|
||||
max: 50;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
50
rog-control-center/ui/pages/aura.slint
Normal file
50
rog-control-center/ui/pages/aura.slint
Normal file
@@ -0,0 +1,50 @@
|
||||
import { ValueBar } from "../common_widgets.slint";
|
||||
import { Theme } from "../globals.slint";
|
||||
|
||||
export component PageAura inherits VerticalLayout {
|
||||
Rectangle {
|
||||
clip: true;
|
||||
// TODO: slow with border-radius
|
||||
padding: 8px;
|
||||
// height: parent.height - infobar.height - mainview.padding - self.padding * 2;
|
||||
// TODO: border-radius: 8px;
|
||||
mainview := VerticalLayout {
|
||||
padding: 10px;
|
||||
spacing: 10px;
|
||||
ValueBar {
|
||||
height: 40px;
|
||||
value: 10.5;
|
||||
min: 0.0;
|
||||
max: 100.0;
|
||||
}
|
||||
|
||||
ValueBar {
|
||||
height: 40px;
|
||||
value: -70;
|
||||
min: -100;
|
||||
max: 0;
|
||||
}
|
||||
|
||||
ValueBar {
|
||||
height: 80px;
|
||||
value: 40;
|
||||
min: -50;
|
||||
max: 50;
|
||||
}
|
||||
|
||||
ValueBar {
|
||||
height: 80px;
|
||||
value: -40;
|
||||
min: -50;
|
||||
max: 50;
|
||||
}
|
||||
|
||||
ValueBar {
|
||||
height: 80px;
|
||||
value: -40;
|
||||
min: -50;
|
||||
max: 50;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
50
rog-control-center/ui/pages/fans.slint
Normal file
50
rog-control-center/ui/pages/fans.slint
Normal file
@@ -0,0 +1,50 @@
|
||||
import { ValueBar } from "../common_widgets.slint";
|
||||
import { Theme } from "../globals.slint";
|
||||
|
||||
export component PageFans inherits VerticalLayout {
|
||||
Rectangle {
|
||||
clip: true;
|
||||
// TODO: slow with border-radius
|
||||
padding: 8px;
|
||||
// height: parent.height - infobar.height - mainview.padding - self.padding * 2;
|
||||
// TODO: border-radius: 8px;
|
||||
mainview := VerticalLayout {
|
||||
padding: 10px;
|
||||
spacing: 10px;
|
||||
ValueBar {
|
||||
height: 40px;
|
||||
value: 10.5;
|
||||
min: 0.0;
|
||||
max: 100.0;
|
||||
}
|
||||
|
||||
ValueBar {
|
||||
height: 40px;
|
||||
value: -70;
|
||||
min: -100;
|
||||
max: 0;
|
||||
}
|
||||
|
||||
ValueBar {
|
||||
height: 80px;
|
||||
value: 40;
|
||||
min: -50;
|
||||
max: 50;
|
||||
}
|
||||
|
||||
ValueBar {
|
||||
height: 80px;
|
||||
value: -40;
|
||||
min: -50;
|
||||
max: 50;
|
||||
}
|
||||
|
||||
ValueBar {
|
||||
height: 80px;
|
||||
value: -40;
|
||||
min: -50;
|
||||
max: 50;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
50
rog-control-center/ui/pages/gpu.slint
Normal file
50
rog-control-center/ui/pages/gpu.slint
Normal file
@@ -0,0 +1,50 @@
|
||||
import { ValueBar } from "../common_widgets.slint";
|
||||
import { Theme } from "../globals.slint";
|
||||
|
||||
export component PageGpu inherits VerticalLayout {
|
||||
Rectangle {
|
||||
clip: true;
|
||||
// TODO: slow with border-radius
|
||||
padding: 8px;
|
||||
// height: parent.height - infobar.height - mainview.padding - self.padding * 2;
|
||||
// TODO: border-radius: 8px;
|
||||
mainview := VerticalLayout {
|
||||
padding: 10px;
|
||||
spacing: 10px;
|
||||
ValueBar {
|
||||
height: 40px;
|
||||
value: 10.5;
|
||||
min: 0.0;
|
||||
max: 100.0;
|
||||
}
|
||||
|
||||
ValueBar {
|
||||
height: 40px;
|
||||
value: -70;
|
||||
min: -100;
|
||||
max: 0;
|
||||
}
|
||||
|
||||
ValueBar {
|
||||
height: 80px;
|
||||
value: 40;
|
||||
min: -50;
|
||||
max: 50;
|
||||
}
|
||||
|
||||
ValueBar {
|
||||
height: 80px;
|
||||
value: -40;
|
||||
min: -50;
|
||||
max: 50;
|
||||
}
|
||||
|
||||
ValueBar {
|
||||
height: 80px;
|
||||
value: -40;
|
||||
min: -50;
|
||||
max: 50;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
113
rog-control-center/ui/pages/system.slint
Normal file
113
rog-control-center/ui/pages/system.slint
Normal file
@@ -0,0 +1,113 @@
|
||||
import { ValueBar } from "../common_widgets.slint";
|
||||
import { Theme } from "../globals.slint";
|
||||
import { HorizontalBox , VerticalBox, ScrollView} from "std-widgets.slint";
|
||||
|
||||
export component PageSystem inherits Rectangle {
|
||||
background: Theme.background-color;
|
||||
ScrollView {
|
||||
VerticalLayout {
|
||||
// padding: 10px;
|
||||
spacing: 10px;
|
||||
min-height: root.height;
|
||||
Rectangle {
|
||||
background: Theme.background-color;
|
||||
VerticalBox {
|
||||
Text {
|
||||
color: Theme.text-foreground-color;
|
||||
text: @tr("ChargeMode" => "Charging mode");
|
||||
}
|
||||
|
||||
Text {
|
||||
color: Theme.text-foreground-color;
|
||||
text: @tr("ChargeLimit" => "Charge limit");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
background: Theme.background-color;
|
||||
VerticalBox {
|
||||
Text {
|
||||
color: Theme.text-foreground-color;
|
||||
text: @tr("PanelOverdrive" => "Panel Overdrive");
|
||||
}
|
||||
|
||||
Text {
|
||||
color: Theme.text-foreground-color;
|
||||
text: @tr("PerformanceProfile" => "Performance Profile");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
background: Theme.background-color;
|
||||
VerticalBox {
|
||||
Text {
|
||||
color: Theme.text-foreground-color;
|
||||
text: @tr("nv_dynamic_boost" => "nv_dynamic_boost");
|
||||
}
|
||||
|
||||
Text {
|
||||
color: Theme.text-foreground-color;
|
||||
text: @tr("nv_temp_target" => "nv_temp_target");
|
||||
}
|
||||
|
||||
Text {
|
||||
color: Theme.text-foreground-color;
|
||||
text: @tr("ppt_pl1_spl" => "ppt_pl1_spl");
|
||||
}
|
||||
|
||||
Text {
|
||||
color: Theme.text-foreground-color;
|
||||
text: @tr("ppt_pl2_sppt" => "ppt_pl2_sppt");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
background: Theme.background-color;
|
||||
VerticalBox {
|
||||
Text {
|
||||
color: Theme.text-foreground-color;
|
||||
text: @tr("PanelOverdrive" => "Panel Overdrive");
|
||||
}
|
||||
|
||||
Text {
|
||||
color: Theme.text-foreground-color;
|
||||
text: @tr("PerformanceProfile" => "Performance Profile");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
background: Theme.background-color;
|
||||
VerticalBox {
|
||||
Text {
|
||||
color: Theme.text-foreground-color;
|
||||
text: @tr("PanelOverdrive" => "Panel Overdrive");
|
||||
}
|
||||
|
||||
Text {
|
||||
color: Theme.text-foreground-color;
|
||||
text: @tr("PerformanceProfile" => "Performance Profile");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
background: Theme.background-color;
|
||||
VerticalBox {
|
||||
Text {
|
||||
color: Theme.text-foreground-color;
|
||||
text: @tr("PanelOverdrive" => "Panel Overdrive");
|
||||
}
|
||||
|
||||
Text {
|
||||
color: Theme.text-foreground-color;
|
||||
text: @tr("PerformanceProfile" => "Performance Profile");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
125
rog-control-center/ui/widgets/sidebar.slint
Normal file
125
rog-control-center/ui/widgets/sidebar.slint
Normal file
@@ -0,0 +1,125 @@
|
||||
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import { StyleMetrics } from "std-widgets.slint";
|
||||
|
||||
component SideBarItem inherits Rectangle {
|
||||
in property <bool> selected;
|
||||
in property <bool> has-focus;
|
||||
in-out property <string> text<=> label.text;
|
||||
callback clicked<=>touch.clicked;
|
||||
min-height: l.preferred-height;
|
||||
states [
|
||||
pressed when touch.pressed: {
|
||||
state.opacity: 0.8;
|
||||
}
|
||||
hover when touch.has-hover: {
|
||||
state.opacity: 0.6;
|
||||
}
|
||||
selected when root.selected: {
|
||||
state.opacity: 1;
|
||||
}
|
||||
focused when root.has-focus: {
|
||||
state.opacity: 0.8;
|
||||
}
|
||||
]
|
||||
|
||||
state := Rectangle {
|
||||
opacity: 0;
|
||||
background: StyleMetrics.window-background;
|
||||
animate opacity{ duration: 150ms;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
l := HorizontalLayout {
|
||||
y: (parent.height - self.height) / 2;
|
||||
padding: StyleMetrics.layout-padding;
|
||||
spacing: 0px;
|
||||
label := Text {
|
||||
color: StyleMetrics.default-text-color;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
}
|
||||
|
||||
touch := TouchArea {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
export component SideBar inherits Rectangle {
|
||||
in property <[string]> model: [];
|
||||
in property <string> title<=> label.text;
|
||||
out property <int> current-item: 0;
|
||||
out property <int> current-focused: fs.has-focus ? fs.focused-tab : -1;
|
||||
// The currently focused tab
|
||||
|
||||
width: 180px;
|
||||
forward-focus: fs;
|
||||
accessible-role: tab;
|
||||
accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current-item;
|
||||
Rectangle {
|
||||
background: StyleMetrics.window-background.darker(0.2);
|
||||
fs := FocusScope {
|
||||
key-pressed(event) => {
|
||||
if (event.text == "\n") {
|
||||
root.current-item = root.current-focused;
|
||||
return accept;
|
||||
}
|
||||
if (event.text == Key.UpArrow) {
|
||||
self.focused-tab = Math.max(self.focused-tab - 1, 0);
|
||||
return accept;
|
||||
}
|
||||
if (event.text == Key.DownArrow) {
|
||||
self.focused-tab = Math.min(self.focused-tab + 1, root.model.length - 1);
|
||||
return accept;
|
||||
}
|
||||
return reject;
|
||||
}
|
||||
key-released(event) => {
|
||||
if (event.text == " ") {
|
||||
root.current-item = root.current-focused;
|
||||
return accept;
|
||||
}
|
||||
return reject;
|
||||
}
|
||||
property <int> focused-tab: 0;
|
||||
x: 0;
|
||||
width: 0;
|
||||
// Do not react on clicks
|
||||
}
|
||||
}
|
||||
|
||||
VerticalLayout {
|
||||
padding-top: StyleMetrics.layout-padding;
|
||||
padding-bottom: StyleMetrics.layout-padding;
|
||||
spacing: StyleMetrics.layout-spacing;
|
||||
alignment: start;
|
||||
label := Text {
|
||||
font-size: 16px;
|
||||
horizontal-alignment: center;
|
||||
}
|
||||
|
||||
navigation := VerticalLayout {
|
||||
alignment: start;
|
||||
vertical-stretch: 0;
|
||||
for item [index] in root.model: SideBarItem {
|
||||
clicked => {
|
||||
root.current-item = index;
|
||||
}
|
||||
has-focus: index == root.current-focused;
|
||||
text: item;
|
||||
selected: index == root.current-item;
|
||||
}
|
||||
}
|
||||
|
||||
VerticalLayout {
|
||||
bottom := VerticalLayout {
|
||||
padding-left: StyleMetrics.layout-padding;
|
||||
padding-right: StyleMetrics.layout-padding;
|
||||
@children
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user