language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-07-24 13:35:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

25
internal/compiler/widgets/material-base/widget-checkbox.slint
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;

7
internal/compiler/widgets/material-base/widget-groupbox.slint
View file

@ -1,13 +1,14 @@
// Copyright © SixtyFPS GmbH <info@slint-ui.com>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
import { md } from "md.slint";
// A container widget with a title.s
// A container widget with a title.
export GroupBox := Rectangle {
property <string> title <=> label.text;
property<bool> enabled: true;
min-width: max(label-container.width + 16px, layout.min-width);
container := Rectangle {
border-radius: 4px;
@ -28,8 +29,6 @@ export GroupBox := Rectangle {
label := Text {
x: 4px;
y: 4px;
width: min(root.width - 24px, preferred-width);
color: md.sys.color.on-surface;
// FIXME after Roboto font can be loaded
//font-family: md.sys.typescale.body-small.font;

20
internal/compiler/widgets/material-base/widget-spinbox.slint
View file

@ -9,26 +9,23 @@ SpinBoxButton := Rectangle {
property<bool> pressed: self.enabled && touch.pressed;
property<bool> enabled <=> touch.enabled;
property<float> icon-opacity: 1;
property<brush> icon-fill: md.sys.color.primary;
property<brush> icon-fill: md.sys.color.on-primary;
width: height;
container := Rectangle {
width: 100%;
height: 100%;
border-radius: 2px;
border-width: 1px;
background: md.sys.color.secondary-container;
animate drop-shadow-blur { duration: 250ms; easing: ease; }
border-radius: max(width, height) / 2;
background: md.sys.color.primary;
}
state-layer := Rectangle {
opacity: 0;
width: 100%;
height: 100%;
width: container.width;
height: container.height;
border-radius: container.border-radius;
background: md.sys.color.on-secondary-container;
background: md.sys.color.on-primary;
animate opacity { duration: 250ms; easing: ease; }
}
@ -121,6 +118,8 @@ export SpinBox := FocusScope {
if (root.value < root.maximum) {
root.value += 1;
}
root.focus();
}
}
@ -141,6 +140,9 @@ export SpinBox := FocusScope {
if (root.value > root.minimum) {
root.value -= 1;
}
root.focus();
}
}
}