gilles/asusctl
1
0
Fork 0
mirror of https://gitlab.com/asus-linux/asusctl.git synced 2026-02-06 00:15:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor and cleanup theming

Browse Source
This commit is contained in:
Luke D. Jones
2024-03-11 22:26:26 +13:00
parent c7b1624313
commit 9725062fb9
18 changed files with 570 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
rog-control-center/ui/globals.slint
View File

@@ -1,39 +1,8 @@
struct ButtonColours {
base: color,
pressed: color,
hovered: color,
}
export global AppSize {
out property <length> width: 900px;
out property <length> height: 500px;
}
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 ? #3a127b : 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");
}

48
rog-control-center/ui/main_window.slint
View File

@@ -1,5 +1,5 @@
import { Button, VerticalBox } from "std-widgets.slint";
import { Theme, AppSize } from "globals.slint";
import { Palette, Button, VerticalBox } from "std-widgets.slint";
import { AppSize } from "globals.slint";
import { PageSystem, AvailableSystemProperties, SystemPageData } from "pages/system.slint";
import { SideBar } from "widgets/sidebar.slint";
import { PageAbout } from "pages/about.slint";
@@ -10,11 +10,11 @@ import { AuraPageData, AuraDevType, AuraDevTuf, AuraDevRog1, PowerZones, KbAuraP
export { AuraPageData, AuraDevType, AuraDevTuf, AuraDevRog1, PowerZones, KbAuraPowerState, AuraPowerDev, AuraEffect }
import { PageAppSettings, AppSettingsPageData } from "pages/app_settings.slint";
export { AppSize, Theme, AvailableSystemProperties, SystemPageData, AnimePageData, AppSettingsPageData }
export { AppSize, AvailableSystemProperties, SystemPageData, AnimePageData, AppSettingsPageData }
export component MainWindow inherits Window {
default-font-family: "DejaVu Sans";
in property <[bool]> sidebar_items_avilable: [true, true, false, true, true, true];
in property <[bool]> sidebar_items_avilable: [true, true, true, true, true, true];
private property <bool> show-notif;
private property <bool> fade-cover;
private property <bool> toast: false;
@@ -23,17 +23,20 @@ export component MainWindow inherits Window {
show_toast(text) => {
toast = text != "";
toast_text = text;
}
callback exit-app();
callback show-notification(bool);
show-notification(yes) => {
show-notif = yes;
fade-cover = yes;
}
callback external_colour_change();
external_colour_change() => {
aura.external_colour_change();
aura.external_colour_change();
}
min-height: AppSize.height;
min-width: AppSize.width;
@@ -43,28 +46,27 @@ export component MainWindow inherits Window {
VerticalLayout {
side-bar := SideBar {
title: @tr("ROG");
model: [
@tr("Menu1" => "System Control"),
@tr("Menu2" => "Keyboard Aura"),
@tr("Menu3" => "AniMe Matrix"),
@tr("Menu4" => "Fan Curves"),
@tr("Menu5" => "App Settings"),
@tr("Menu6" => "About"),
];
model: [@tr("Menu1" => "System Control"), @tr("Menu2" => "Keyboard Aura"), @tr("Menu3" => "AniMe Matrix"), @tr("Menu4" => "Fan Curves"), @tr("Menu5" => "App Settings"), @tr("Menu6" => "About"), ];
available: root.sidebar_items_avilable;
}
Button {
max-height: 20px;
text: "Quit";
clicked => {
root.exit-app();
Rectangle {
height: qb.height;
width: side-bar.width;
background: Palette.control-background;
qb := Button {
max-height: 20px;
text: "Quit";
clicked => {
root.exit-app();
}
}
}
}
Rectangle {
background: Colors.purple;
background: Palette.background;
if(side-bar.current-item == 0): page := PageSystem {
width: root.width - side-bar.width;
height: root.height + 12px;
@@ -107,8 +109,10 @@ export component MainWindow inherits Window {
// toolbar-dropdown.close();
if (show-notif) {
show-notif = false;
}
fade-cover = false;
}
}
}
@@ -124,15 +128,16 @@ export component MainWindow inherits Window {
width: 100%;
clicked => {
toast = false;
}
}
Rectangle {
height: 100%;
width: 100%;
background: #1a043d;
background: Palette.control-background;
Text {
color: Theme.text-foreground-color;
color: Palette.control-foreground;
text: root.toast_text;
}
}
@@ -150,6 +155,7 @@ export component MainWindow inherits Window {
clicked => {
show-notif = false;
exit-app();
}
}
@@ -157,7 +163,7 @@ export component MainWindow inherits Window {
Rectangle {
height: 100%;
width: 100%;
background: Theme.neutral-box;
background: Palette.background;
Text {
text: "Click here to exit";
}

33
rog-control-center/ui/pages/about.slint
View File

@@ -1,6 +1,4 @@
import { ValueBar } from "../widgets/common.slint";
import { Theme } from "../globals.slint";
import { AboutSlint } from "std-widgets.slint";
import { AboutSlint, VerticalBox, HorizontalBox } from "std-widgets.slint";
export component PageAbout inherits VerticalLayout {
padding: 10px;
@@ -12,6 +10,35 @@ export component PageAbout inherits VerticalLayout {
font-size: 22px;
}
HorizontalBox {
alignment: LayoutAlignment.center;
VerticalBox {
alignment: LayoutAlignment.center;
Text {
vertical-alignment: TextVerticalAlignment.center;
horizontal-alignment: TextHorizontalAlignment.center;
text: "Todo:";
font-size: 22px;
}
Text {
text: "- [x] Theme the widgets";
}
Text {
text: "- [x] Add a cpu/gpu temp/fan speed info bar";
}
Text {
text: "- [ ] Supergfx control";
}
Text {
text: "- [ ] Include fan speeds, temps in a bottom bar";
}
}
}
Text {
vertical-alignment: TextVerticalAlignment.center;
horizontal-alignment: TextHorizontalAlignment.center;

13
rog-control-center/ui/pages/anime.slint
View File

@@ -1,6 +1,5 @@
import { Theme } from "../globals.slint";
import { SystemDropdown, SystemToggle } from "../widgets/common.slint";
import { GroupBox, VerticalBox, Button, HorizontalBox } from "std-widgets.slint";
import { Palette, GroupBox, VerticalBox, Button, HorizontalBox } from "std-widgets.slint";
export global AnimePageData {
in-out property <[string]> brightness_names: [
@@ -109,7 +108,7 @@ export component PageAnime inherits Rectangle {
if root.show_fade_cover: Rectangle {
width: 100%;
height: 100%;
background: Theme.background-color;
background: Palette.background;
opacity: 0.8;
TouchArea {
height: 100%;
@@ -136,15 +135,15 @@ export component PageAnime inherits Rectangle {
padding: 50px;
spacing: 10px;
GroupBox {
height: 100px;
height: 10px;
VerticalBox {
spacing: 10px;
alignment: LayoutAlignment.start;
Text {
font-size: 18px;
color: Theme.text-foreground-color;
color: Palette.control-foreground;
horizontal-alignment: TextHorizontalAlignment.center;
text: @tr("Advanced Anime Display : TODO!");
text: @tr("Set which builtin animations are played");
}
SystemDropdown {
@@ -216,7 +215,7 @@ export component PageAnime inherits Rectangle {
alignment: LayoutAlignment.start;
Text {
font-size: 18px;
color: Theme.text-foreground-color;
color: Palette.control-foreground;
horizontal-alignment: TextHorizontalAlignment.center;
text: @tr("Advanced Display Settings");
}

2
rog-control-center/ui/pages/app_settings.slint
View File

@@ -1,4 +1,4 @@
import { Theme } from "../globals.slint";
import { Palette } from "std-widgets.slint";
import { SystemToggle } from "../widgets/common.slint";
export global AppSettingsPageData {

29
rog-control-center/ui/pages/aura.slint
View File

@@ -1,15 +1,13 @@
import { SystemDropdown, RogItem, SystemToggle, SystemToggleVert } from "../widgets/common.slint";
import { Button, ComboBox, VerticalBox, GroupBox } from "std-widgets.slint";
import { Palette, Button, ComboBox, VerticalBox, GroupBox } from "std-widgets.slint";
import { StyleMetrics, Slider, HorizontalBox, TextEdit, SpinBox, LineEdit, ScrollView } from "std-widgets.slint";
import { ColourSlider } from "../widgets/colour_picker.slint";
import { Theme } from "../globals.slint";
import { AuraPageData, AuraDevType, AuraDevTuf, AuraDevRog1, PowerZones, KbAuraPowerState, AuraPowerDev, AuraEffect } from "../types/aura_types.slint";
import { AuraPowerGroup } from "../widgets/aura_power.slint";
export component PageAura inherits Rectangle {
property <bool> show_fade_cover: false;
property <bool> show_aura_power: false;
callback external_colour_change();
external_colour_change() => {
c1.colourbox = AuraPageData.led_mode_data.colour1;
@@ -23,7 +21,6 @@ export component PageAura inherits Rectangle {
padding: 10px;
spacing: 10px;
alignment: LayoutAlignment.start;
HorizontalLayout {
spacing: 10px;
SystemDropdown {
@@ -184,7 +181,7 @@ export component PageAura inherits Rectangle {
if root.show_fade_cover: Rectangle {
width: 100%;
height: 100%;
background: Theme.background-color;
background: Palette.background;
opacity: 0.8;
TouchArea {
height: 100%;
@@ -203,7 +200,7 @@ export component PageAura inherits Rectangle {
spacing: 10px;
for power in AuraPageData.supported_power_zones: gr := HorizontalLayout {
if power == PowerZones.Keyboard: zone1 := AuraPowerGroup {
title: @tr("Keyboard");
group-title: @tr("Keyboard");
boot_checked: AuraPageData.led_power.rog.keyboard.boot;
boot_toggled => {
AuraPageData.led_power.rog.keyboard.boot = zone1.boot_checked;
@@ -225,8 +222,9 @@ export component PageAura inherits Rectangle {
AuraPageData.set_led_power(AuraPageData.led_power);
}
}
if power == PowerZones.Logo: zone2 := AuraPowerGroup {
title: @tr("Lid Logo");
group-title: @tr("Lid Logo");
boot_checked: AuraPageData.led_power.rog.logo.boot;
boot_toggled => {
AuraPageData.led_power.rog.logo.boot = zone2.boot_checked;
@@ -248,8 +246,9 @@ export component PageAura inherits Rectangle {
AuraPageData.set_led_power(AuraPageData.led_power);
}
}
if power == PowerZones.Lightbar: zone3 := AuraPowerGroup {
title: @tr("Lightbar");
group-title: @tr("Lightbar");
boot_checked: AuraPageData.led_power.rog.lightbar.boot;
boot_toggled => {
AuraPageData.led_power.rog.lightbar.boot = zone3.boot_checked;
@@ -271,8 +270,9 @@ export component PageAura inherits Rectangle {
AuraPageData.set_led_power(AuraPageData.led_power);
}
}
if power == PowerZones.Lid: zone4 := AuraPowerGroup {
title: @tr("Lid Zone");
group-title: @tr("Lid Zone");
boot_checked: AuraPageData.led_power.rog.lid.boot;
boot_toggled => {
AuraPageData.led_power.rog.lid.boot = zone4.boot_checked;
@@ -294,8 +294,9 @@ export component PageAura inherits Rectangle {
AuraPageData.set_led_power(AuraPageData.led_power);
}
}
if power == PowerZones.RearGlow: zone5 := AuraPowerGroup {
title: @tr("Rear Glow");
group-title: @tr("Rear Glow");
boot_checked: AuraPageData.led_power.rog.rear-glow.boot;
boot_toggled => {
AuraPageData.led_power.rog.rear-glow.boot = zone5.boot_checked;
@@ -344,13 +345,13 @@ export component PageAura inherits Rectangle {
spacing: 10px;
Rectangle {
border-radius: 20px;
background: Theme.window-background;
background: Palette.control-background;
VerticalBox {
spacing: 10px;
alignment: LayoutAlignment.start;
Text {
font-size: 18px;
color: Theme.text-foreground-color;
color: Palette.control-foreground;
horizontal-alignment: TextHorizontalAlignment.center;
text: @tr("Keyboard");
}
@@ -404,13 +405,13 @@ export component PageAura inherits Rectangle {
spacing: 10px;
Rectangle {
border-radius: 20px;
background: Theme.window-background;
background: Palette.control-background;
VerticalBox {
spacing: 10px;
alignment: LayoutAlignment.start;
Text {
font-size: 18px;
color: Theme.text-foreground-color;
color: Palette.control-foreground;
horizontal-alignment: TextHorizontalAlignment.center;
text: @tr("Keyboard");
}

2
rog-control-center/ui/pages/fans.slint
View File

@@ -1,5 +1,3 @@
import { Theme } from "../globals.slint";
export component PageFans inherits VerticalLayout {
Rectangle {
clip: true;

23
rog-control-center/ui/pages/system.slint
View File

@@ -1,6 +1,5 @@
import { SystemSlider, SystemDropdown, SystemToggle } from "../widgets/common.slint";
import { Theme } from "../globals.slint";
import { HorizontalBox , VerticalBox, ScrollView, Slider, Button, Switch, ComboBox, GroupBox} from "std-widgets.slint";
import { Palette, HorizontalBox , VerticalBox, ScrollView, Slider, Button, Switch, ComboBox, GroupBox} from "std-widgets.slint";
export struct AvailableSystemProperties {
charge_control_end_threshold: bool,
@@ -95,14 +94,14 @@ export component PageSystem inherits Rectangle {
padding: 10px;
spacing: 10px;
Rectangle {
background: Theme.background-color;
border-color: Colors.black;
border-width: 6px;
background: Palette.alternate-background;
border-color: Palette.accent-background;
border-width: 3px;
border-radius: 10px;
height: 40px;
Text {
font-size: 18px;
color: Theme.text-foreground-color;
color: Palette.control-foreground;
horizontal-alignment: TextHorizontalAlignment.center;
text: @tr("Base system settings");
}
@@ -168,14 +167,14 @@ export component PageSystem inherits Rectangle {
}
Rectangle {
background: Theme.background-color;
border-color: Colors.black;
border-width: 6px;
background: Palette.alternate-background;
border-color: Palette.accent-background;
border-width: 3px;
border-radius: 10px;
height: 40px;
Text {
font-size: 18px;
color: Theme.text-foreground-color;
color: Palette.control-foreground;
horizontal-alignment: TextHorizontalAlignment.center;
text: @tr("System performance settings");
}
@@ -256,8 +255,8 @@ export component PageSystem inherits Rectangle {
if root.show_fade_cover: Rectangle {
width: 100%;
height: 100%;
background: Theme.background-color;
opacity: 0.8;
background: Palette.background;
opacity: 0.9;
TouchArea {
height: 100%;
width: 100%;

11
rog-control-center/ui/types/aura_types.slint
View File

@@ -150,9 +150,14 @@ export global AuraPageData {
}
callback set_hex_from_colour(color) -> string;
callback set_hex_to_colour(string) -> color;
in-out property <AuraDevType> aura_type: AuraDevType.New;
in-out property <[PowerZones]> supported_power_zones: [PowerZones.Keyboard, PowerZones.RearGlow, PowerZones.Lid, PowerZones.Lightbar, PowerZones.Logo];
in-out property <[PowerZones]> supported_power_zones: [
PowerZones.Keyboard,
PowerZones.RearGlow,
PowerZones.Lid,
PowerZones.Lightbar,
PowerZones.Logo
];
in-out property <AuraPowerDev> led_power;
callback set_led_power(AuraPowerDev);
}
}

25
rog-control-center/ui/widgets/aura_power.slint
View File

@@ -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 {
}
}
}
}
}

19
rog-control-center/ui/widgets/colour_picker.slint
View File

@@ -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;
}
}

111
rog-control-center/ui/widgets/common.slint
View File

@@ -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;
}
}