This commit is contained in:
Luke D. Jones
2024-02-27 14:39:46 +13:00
parent 7b0f037cba
commit a88c33c201
64 changed files with 3424 additions and 7019 deletions

View File

@@ -1,84 +1,110 @@
import { VerticalBox , StandardButton, Button} from "std-widgets.slint";
import { VerticalBox , StandardButton, Button, HorizontalBox, ComboBox, Switch, Slider} from "std-widgets.slint";
import { Theme } from "globals.slint";
export component SquareImageButton inherits Rectangle {
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();
export component RogItem inherits Rectangle {
background: Theme.background-color;
border-color: Colors.black;
border-width: 3px;
border-radius: 10px;
}
export component SystemSlider inherits RogItem {
in property <string> text;
in-out property <float> value;
in-out property <float> minimum;
in-out property <float> maximum;
callback released(int);
HorizontalLayout {
HorizontalBox {
width: 30%;
alignment: LayoutAlignment.start;
Text {
font-size: 16px;
vertical-alignment: TextVerticalAlignment.center;
color: Theme.text-foreground-color;
text <=> root.text;
}
Text {
font-size: 16px;
vertical-alignment: TextVerticalAlignment.center;
color: Theme.text-foreground-color;
text: ": \{Math.round(root.value)}";
}
}
}
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;
HorizontalBox {
// alignment: LayoutAlignment.end;
padding-right: 20px;
Slider {
maximum: root.maximum;
minimum: root.minimum;
value <=> root.value;
released => {
root.released(Math.round(root.value))
}
}
}
}
}
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();
export component SystemToggle inherits RogItem {
in property <string> text;
in-out property <bool> checked;
callback toggled(bool);
HorizontalLayout {
HorizontalBox {
alignment: LayoutAlignment.start;
Text {
font-size: 16px;
vertical-alignment: TextVerticalAlignment.center;
color: Theme.text-foreground-color;
text <=> root.text;
}
}
}
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;
HorizontalBox {
alignment: LayoutAlignment.end;
padding-right: 20px;
Switch {
checked <=> root.checked;
toggled => {
root.toggled(root.checked)
}
}
}
}
}
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();
export component SystemDropdown inherits RogItem {
in property <string> text;
in-out property <int> current_index;
in-out property <string> current_value;
in-out property <[string]> model;
callback selected(int);
HorizontalLayout {
HorizontalBox {
alignment: LayoutAlignment.start;
Text {
font-size: 16px;
vertical-alignment: TextVerticalAlignment.center;
color: Theme.text-foreground-color;
text <=> root.text;
}
}
}
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;
HorizontalBox {
alignment: LayoutAlignment.end;
padding-right: 20px;
ComboBox {
model <=> root.model;
current-index <=> root.current_index;
current-value <=> root.current_value;
selected => {
root.selected(root.current_index)
}
}
}
}
}
@@ -87,33 +113,25 @@ 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{
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{
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;
@@ -135,54 +153,6 @@ export component ValueBar inherits Rectangle {
}
}
// 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;
@@ -238,7 +208,5 @@ export component PopupNotification {
public function show() {
_p.show();
}
}