Add help and reset to UI for ppt values

This commit is contained in:
Luke D. Jones
2025-01-19 15:34:58 +13:00
parent 2d6d669c22
commit f11aea02a8
7 changed files with 333 additions and 100 deletions

View File

@@ -10,40 +10,46 @@ export component RogItem inherits Rectangle {
}
export component SystemSlider inherits RogItem {
in property <string> title;
in property <string> text;
in-out property <float> value;
in-out property <float> minimum;
in-out property <float> maximum;
callback released(int);
in-out property <string> help_text;
in-out property <bool> has_reset: false;
callback cb_do_reset();
HorizontalLayout {
HorizontalLayout {
width: 50%;
width: 40%;
alignment: LayoutAlignment.stretch;
padding-left: 10px;
TouchArea {
clicked => {
slider.value += 1;
if slider.value > slider.maximum {
slider.value = slider.minimum;
clicked => {
slider.value += 1;
if slider.value > slider.maximum {
slider.value = slider.minimum;
}
}
}
HorizontalLayout {
spacing: 6px;
Text {
font-size: 16px;
vertical-alignment: TextVerticalAlignment.center;
color: Palette.control-foreground;
text <=> root.text;
HorizontalLayout {
spacing: 6px;
Text {
font-size: 16px;
vertical-alignment: TextVerticalAlignment.center;
color: Palette.control-foreground;
text <=> root.text;
}
Text {
font-size: 16px;
horizontal-alignment: TextHorizontalAlignment.right;
vertical-alignment: TextVerticalAlignment.center;
color: Palette.control-foreground;
text: "\{Math.round(root.value)}";
}
}
Text {
font-size: 16px;
horizontal-alignment: TextHorizontalAlignment.right;
vertical-alignment: TextVerticalAlignment.center;
color: Palette.control-foreground;
text: "\{Math.round(root.value)}";
}
}
}
}
@@ -59,6 +65,96 @@ export component SystemSlider inherits RogItem {
}
}
}
help_popup := PopupWindow {
x: help.x - self.width + help.width - 10px;
y: help.y - self.height + help.height - 10px;
Rectangle {
drop-shadow-blur: 10px;
drop-shadow-color: black;
border-radius: 10px;
border-color: Palette.accent-background;
background: Palette.background;
Dialog {
title <=> root.title;
VerticalBox {
Text {
max-width: 420px;
font-size: 18px;
wrap: TextWrap.word-wrap;
horizontal-alignment: TextHorizontalAlignment.center;
text <=> root.title;
}
Rectangle {
height: 1px;
border-color: black;
border-width: 1px;
}
Text {
max-width: 420px;
font-size: 16px;
wrap: TextWrap.word-wrap;
text <=> root.help_text;
}
}
StandardButton {
kind: ok;
}
}
}
}
help := HorizontalBox {
if (help_text != ""): StandardButton {
kind: StandardButtonKind.help;
clicked => {
help_popup.show();
}
}
}
reset_popup := PopupWindow {
x: reset.x - self.width + reset.width;
y: reset.y - self.height + reset.height;
Rectangle {
drop-shadow-blur: 10px;
drop-shadow-color: black;
border-radius: 10px;
border-color: Palette.accent-background;
background: Palette.background;
Dialog {
Text {
max-width: 420px;
font-size: 16px;
wrap: TextWrap.word-wrap;
text: @tr("confirm_reset" => "Are you sure you want to reset this?");
}
StandardButton {
kind: ok;
clicked => {
root.cb_do_reset();
}
}
StandardButton {
kind: cancel;
}
}
}
}
reset := HorizontalBox {
if (has_reset): StandardButton {
kind: StandardButtonKind.reset;
clicked => {
reset_popup.show();
}
}
}
}
}
@@ -114,7 +210,7 @@ export component SystemToggleInt inherits RogItem {
alignment: LayoutAlignment.end;
padding-right: 20px;
Switch {
checked: root.checked_int != 0;
checked: root.checked_int != 0;
toggled => {
root.checked_int = self.checked ? 1 : 0;
root.toggled(root.checked_int);