md: adjust GroupBox, CheckBox and SpinBox (#1812)

Now it's also possible to toggle checked by click on the text of the CheckBox similar to fluent design

GroupBox now respect the minimum width of the title, to avoid elision

Adopt SpinBox: set focus when buttons are clicked #1795 on md SpinBox
This commit is contained in:
Florian Blasius 2022-11-02 17:25:44 +01:00 committed by GitHub
parent 217fa9a337
commit 7a01e3c0cb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 24 deletions

View file

@ -19,7 +19,7 @@ export CheckBox := Rectangle {
accessible-checked <=> checked;
accessible-role: checkbox;
HorizontalLayout {
layout := HorizontalLayout {
spacing: 16px;
Rectangle {
@ -62,16 +62,6 @@ export CheckBox := Rectangle {
}
]
}
touch := TouchArea {
enabled <=> root.enabled;
clicked => {
if (root.enabled) {
root.checked = !root.checked;
root.toggled();
}
}
}
}
label := Text {
@ -84,6 +74,19 @@ export CheckBox := Rectangle {
}
}
touch := TouchArea {
x: layout.padding-left;
width: layout.width - layout.padding-left - layout.padding-right;
height: 100%;
enabled <=> root.enabled;
clicked => {
if (root.enabled) {
root.checked = !root.checked;
root.toggled();
}
}
}
fs := FocusScope {
width: 0px; // Do not react on clicks
enabled <=> root.enabled;