mirror of
https://gitlab.com/asus-linux/asusctl.git
synced 2026-02-06 00:15:04 +01:00
Refactor and cleanup theming
This commit is contained in:
Luke D. Jones
@@ -1,12 +1,12 @@
|
||||
import { VerticalBox, HorizontalBox } from "std-widgets.slint";
|
||||
import { Palette, VerticalBox, HorizontalBox, GroupBox } from "std-widgets.slint";
|
||||
import { SystemToggleVert } from "common.slint";
|
||||
import { Theme } from "../globals.slint";
|
||||
|
||||
export component AuraPowerGroup inherits Rectangle {
|
||||
min-width: row.min-width;
|
||||
border-radius: 20px;
|
||||
background: Theme.window-background;
|
||||
|
||||
in-out property <string> title;
|
||||
background: Palette.alternate-background;
|
||||
opacity: 0.9;
|
||||
in-out property <string> group-title;
|
||||
in-out property <bool> boot_checked;
|
||||
in-out property <bool> awake_checked;
|
||||
in-out property <bool> sleep_checked;
|
||||
@@ -15,19 +15,19 @@ export component AuraPowerGroup inherits Rectangle {
|
||||
callback awake_toggled(bool);
|
||||
callback sleep_toggled(bool);
|
||||
callback shutdown_toggled(bool);
|
||||
|
||||
VerticalBox {
|
||||
spacing: 10px;
|
||||
alignment: LayoutAlignment.start;
|
||||
Text {
|
||||
font-size: 18px;
|
||||
color: Theme.text-foreground-color;
|
||||
color: Palette.alternate-foreground;
|
||||
horizontal-alignment: TextHorizontalAlignment.center;
|
||||
text <=> root.title;
|
||||
text <=> root.group-title;
|
||||
}
|
||||
|
||||
HorizontalBox {
|
||||
row := HorizontalBox {
|
||||
alignment: LayoutAlignment.center;
|
||||
SystemToggleVert {
|
||||
min-width: 96px;
|
||||
max-height: 42px;
|
||||
text: @tr("Boot");
|
||||
checked <=> root.boot_checked;
|
||||
@@ -37,6 +37,7 @@ export component AuraPowerGroup inherits Rectangle {
|
||||
}
|
||||
|
||||
SystemToggleVert {
|
||||
min-width: 96px;
|
||||
max-height: 42px;
|
||||
text: @tr("Awake");
|
||||
checked <=> root.awake_checked;
|
||||
@@ -46,6 +47,7 @@ export component AuraPowerGroup inherits Rectangle {
|
||||
}
|
||||
|
||||
SystemToggleVert {
|
||||
min-width: 96px;
|
||||
max-height: 42px;
|
||||
text: @tr("Sleep");
|
||||
checked <=> root.sleep_checked;
|
||||
@@ -55,6 +57,7 @@ export component AuraPowerGroup inherits Rectangle {
|
||||
}
|
||||
|
||||
SystemToggleVert {
|
||||
min-width: 96px;
|
||||
max-height: 42px;
|
||||
text: @tr("Shutdown");
|
||||
checked <=> root.shutdown_checked;
|
||||
@@ -64,4 +67,4 @@ export component AuraPowerGroup inherits Rectangle {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Slider, HorizontalBox, Button, LineEdit } from "std-widgets.slint";
|
||||
import { Palette, Slider, HorizontalBox, Button, LineEdit } from "std-widgets.slint";
|
||||
|
||||
export component ColourSlider inherits VerticalLayout {
|
||||
spacing: 10px;
|
||||
@@ -9,7 +9,6 @@ export component ColourSlider inherits VerticalLayout {
|
||||
callback hex_to_colour(string) -> color;
|
||||
// required
|
||||
callback set_hex_from_colour(color) -> string;
|
||||
|
||||
in-out property <float> c1value<=> c1.value;
|
||||
in-out property <float> c2value<=> c2.value;
|
||||
property <[color]> base_colours: [
|
||||
@@ -64,11 +63,9 @@ export component ColourSlider inherits VerticalLayout {
|
||||
blend_lightness(base_colour, 0.1),
|
||||
blend_lightness(base_colour, 0.0)
|
||||
];
|
||||
|
||||
function blend_lightness(c1: color, f: float) -> color {
|
||||
rgb(c1.red * f, c1.green * f, c1.blue * f)
|
||||
}
|
||||
function set_base_colour() {
|
||||
}function set_base_colour() {
|
||||
root.base_colour = base_colours[c1.value].interpolate(base_colours[c1.value + 1], c1.value - Math.floor(c1.value));
|
||||
root.final_colour = blend_lightness(base_colour, ((base_shade.length - c2.value) / base_shade.length));
|
||||
root.colourbox = root.final_colour;
|
||||
@@ -82,13 +79,14 @@ export component ColourSlider inherits VerticalLayout {
|
||||
c2.value = root.base_shade.length - (root.base_shade.length * root.final_colour.brightness());
|
||||
root.set_base_colour();
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
height: 32px;
|
||||
border-width: 2px;
|
||||
border-radius: 7px;
|
||||
border-color: Palette.border;
|
||||
// 13 colours
|
||||
background: @linear-gradient(90deg, base_colours[0], base_colours[1], base_colours[2], base_colours[3], base_colours[4], base_colours[5], base_colours[6], base_colours[7], base_colours[8], base_colours[9], base_colours[10], base_colours[11], base_colours[12], base_colours[13], base_colours[14], base_colours[15], base_colours[16], base_colours[17], base_colours[18], base_colours[19], base_colours[20], base_colours[21], base_colours[22], base_colours[23], base_colours[24], base_colours[25], base_colours[26], base_colours[27], base_colours[28], base_colours[29], base_colours[30], base_colours[31], base_colours[32], base_colours[33], base_colours[34], base_colours[35]);
|
||||
clip: true;
|
||||
border-radius: 6px;
|
||||
c1 := Slider {
|
||||
width: parent.width;
|
||||
height: parent.height;
|
||||
@@ -104,10 +102,12 @@ export component ColourSlider inherits VerticalLayout {
|
||||
|
||||
Rectangle {
|
||||
height: 32px;
|
||||
border-width: 2px;
|
||||
border-radius: 7px;
|
||||
border-color: Palette.border;
|
||||
// 11 colours
|
||||
background: @linear-gradient(90deg, base_shade[0], base_shade[1], base_shade[2], base_shade[3], base_shade[4], base_shade[5], base_shade[6], base_shade[7], base_shade[8], base_shade[9], base_shade[10]);
|
||||
clip: true;
|
||||
border-radius: 6px;
|
||||
c2 := Slider {
|
||||
width: parent.width;
|
||||
height: parent.height;
|
||||
@@ -132,6 +132,9 @@ export component ColourSlider inherits VerticalLayout {
|
||||
|
||||
Rectangle {
|
||||
width: self.height;
|
||||
border-width: 2px;
|
||||
border-radius: 7px;
|
||||
border-color: Palette.border;
|
||||
background <=> root.colourbox;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { VerticalBox , StandardButton, Button, HorizontalBox, ComboBox, Switch, Slider} from "std-widgets.slint";
|
||||
import { Theme } from "../globals.slint";
|
||||
import { Palette, VerticalBox , StandardButton, Button, HorizontalBox, ComboBox, Switch, Slider} from "std-widgets.slint";
|
||||
|
||||
export component RogItem inherits Rectangle {
|
||||
background: Theme.background-color;
|
||||
border-color: Colors.black;
|
||||
background: Palette.control-background;
|
||||
border-color: Palette.border;
|
||||
border-width: 3px;
|
||||
border-radius: 10px;
|
||||
min-height: 46px;
|
||||
}
|
||||
|
||||
export component SystemSlider inherits RogItem {
|
||||
@@ -15,21 +15,22 @@ export component SystemSlider inherits RogItem {
|
||||
in-out property <float> maximum;
|
||||
callback released(int);
|
||||
HorizontalLayout {
|
||||
HorizontalBox {
|
||||
HorizontalLayout {
|
||||
width: 30%;
|
||||
alignment: LayoutAlignment.start;
|
||||
alignment: LayoutAlignment.space-between;
|
||||
padding-left: 10px;
|
||||
Text {
|
||||
font-size: 16px;
|
||||
vertical-alignment: TextVerticalAlignment.center;
|
||||
color: Theme.text-foreground-color;
|
||||
color: Palette.control-foreground;
|
||||
text <=> root.text;
|
||||
}
|
||||
|
||||
Text {
|
||||
font-size: 16px;
|
||||
vertical-alignment: TextVerticalAlignment.center;
|
||||
color: Theme.text-foreground-color;
|
||||
text: ": \{Math.round(root.value)}";
|
||||
color: Palette.control-foreground;
|
||||
text: "\{Math.round(root.value)}";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -53,17 +54,18 @@ export component SystemToggle inherits RogItem {
|
||||
in-out property <bool> checked;
|
||||
callback toggled(bool);
|
||||
HorizontalLayout {
|
||||
HorizontalBox {
|
||||
HorizontalLayout {
|
||||
alignment: LayoutAlignment.start;
|
||||
padding-left: 10px;
|
||||
Text {
|
||||
font-size: 16px;
|
||||
vertical-alignment: TextVerticalAlignment.center;
|
||||
color: Theme.text-foreground-color;
|
||||
color: Palette.control-foreground;
|
||||
text <=> root.text;
|
||||
}
|
||||
}
|
||||
|
||||
HorizontalBox {
|
||||
HorizontalLayout {
|
||||
alignment: LayoutAlignment.end;
|
||||
padding-right: 20px;
|
||||
Switch {
|
||||
@@ -80,25 +82,24 @@ export component SystemToggleVert inherits RogItem {
|
||||
in property <string> text;
|
||||
in-out property <bool> checked;
|
||||
callback toggled(bool);
|
||||
min-height: 86px;
|
||||
VerticalLayout {
|
||||
HorizontalBox {
|
||||
alignment: LayoutAlignment.center;
|
||||
padding-top: 10px;
|
||||
Text {
|
||||
font-size: 16px;
|
||||
vertical-alignment: TextVerticalAlignment.bottom;
|
||||
horizontal-alignment: TextHorizontalAlignment.center;
|
||||
color: Theme.text-foreground-color;
|
||||
text <=> root.text;
|
||||
}
|
||||
alignment: LayoutAlignment.space-around;
|
||||
padding-top: 8px;
|
||||
Text {
|
||||
font-size: 16px;
|
||||
vertical-alignment: TextVerticalAlignment.bottom;
|
||||
horizontal-alignment: TextHorizontalAlignment.center;
|
||||
color: Palette.control-foreground;
|
||||
text <=> root.text;
|
||||
}
|
||||
|
||||
HorizontalBox {
|
||||
HorizontalLayout {
|
||||
alignment: LayoutAlignment.center;
|
||||
padding: 10px;
|
||||
padding-bottom: 10px;
|
||||
Switch {
|
||||
checked <=> root.checked;
|
||||
toggled => {
|
||||
toggled => {
|
||||
root.toggled(root.checked)
|
||||
}
|
||||
}
|
||||
@@ -113,19 +114,22 @@ export component SystemDropdown inherits RogItem {
|
||||
in-out property <[string]> model;
|
||||
callback selected(int);
|
||||
HorizontalLayout {
|
||||
HorizontalBox {
|
||||
HorizontalLayout {
|
||||
alignment: LayoutAlignment.start;
|
||||
padding-left: 10px;
|
||||
Text {
|
||||
font-size: 16px;
|
||||
vertical-alignment: TextVerticalAlignment.center;
|
||||
color: Theme.text-foreground-color;
|
||||
color: Palette.control-foreground;
|
||||
text <=> root.text;
|
||||
}
|
||||
}
|
||||
|
||||
HorizontalBox {
|
||||
HorizontalLayout {
|
||||
alignment: LayoutAlignment.end;
|
||||
padding-right: 20px;
|
||||
padding-top: 7px;
|
||||
padding-bottom: 7px;
|
||||
ComboBox {
|
||||
model <=> root.model;
|
||||
current-index <=> root.current_index;
|
||||
@@ -138,49 +142,6 @@ export component SystemDropdown inherits RogItem {
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export component PopupNotification {
|
||||
in property <string> heading;
|
||||
in property <string> content;
|
||||
@@ -192,8 +153,8 @@ export component PopupNotification {
|
||||
// TODO: add properties to display
|
||||
Rectangle {
|
||||
border-width: 2px;
|
||||
border-color: Theme.control-outline;
|
||||
background: Theme.notification-background;
|
||||
border-color: Palette.accent-background;
|
||||
background: Palette.background;
|
||||
// TODO: drop shadows slow
|
||||
// drop-shadow-offset-x: 7px;
|
||||
// drop-shadow-offset-y: 7px;
|
||||
@@ -205,14 +166,14 @@ export component PopupNotification {
|
||||
alignment: start;
|
||||
Text {
|
||||
text: heading;
|
||||
color: Theme.text-foreground-color;
|
||||
color: Palette.control-foreground;
|
||||
font-size: 32px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: content;
|
||||
color: Theme.text-foreground-color;
|
||||
color: Palette.control-foreground;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user