mirror of
https://github.com/slint-ui/slint.git
synced 2025-09-30 05:44:52 +00:00
6fefe75a1c
Achieve this by generating a `focus()` function for such components
and call it from the outside.
This replaces the previous focus handling with what should be cleaner:
- Any `forward-focus: some-element;` is basically syntactic sugar for
`public function focus() { some-element.focus(); }`.
- The init code gets simplified to calling focus() on the root, if it's
available.
Since the `focus()` functions are now generated in the imports pass,
they become visible in the style checker. That means the checker
requires consistent focus handling between the styles.
146 lines
4.4 KiB
Text
146 lines
4.4 KiB
Text
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
|
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial
|
|
|
|
import { CupertinoFontSettings, CupertinoPalette, Icons } from "styling.slint";
|
|
import { FocusBorder } from "components.slint";
|
|
|
|
export component CheckBox {
|
|
in property <string> text;
|
|
in property <bool> enabled <=> i-touch-area.enabled;
|
|
out property <bool> has-focus: i-focus-scope.has-focus;
|
|
in-out property <bool> checked;
|
|
|
|
callback toggled;
|
|
|
|
private property <brush> background: checked && root.enabled ? CupertinoPalette.accent-background : CupertinoPalette.control-background;
|
|
private property <brush> icon-color: CupertinoPalette.accent-foreground;
|
|
|
|
min-height: max(16px, i-layout.min-height);
|
|
accessible-checkable: true;
|
|
accessible-label: root.text;
|
|
accessible-checked <=> root.checked;
|
|
accessible-role: checkbox;
|
|
forward-focus: i-focus-scope;
|
|
|
|
states [
|
|
disabled when !root.enabled : {
|
|
opacity: 0.5;
|
|
icon-color: CupertinoPalette.foreground;
|
|
}
|
|
pressed when i-touch-area.pressed : {
|
|
root.background: root.checked ? CupertinoPalette.secondary-accent-background : CupertinoPalette.secondary-control-background;
|
|
}
|
|
]
|
|
|
|
animate background { duration: 150ms; }
|
|
|
|
FocusBorder {
|
|
x: (parent.width - self.width) / 2;
|
|
y: (parent.height - self.height) / 2;
|
|
width: parent.width + 6px;
|
|
height: parent.height + 6px;
|
|
border-radius: 8px;
|
|
has-focus: root.has-focus;
|
|
}
|
|
|
|
i-layout := HorizontalLayout {
|
|
padding-left: 8px;
|
|
spacing: 6px;
|
|
|
|
if (!root.checked) : Rectangle {
|
|
y: (parent.height - self.height) / 2;
|
|
width: 14px;
|
|
height: self.width;
|
|
border-radius: 4px;
|
|
background: root.background;
|
|
clip: true;
|
|
|
|
Rectangle {
|
|
background: @radial-gradient(circle, #00000000 0%, #00000000 50%, #0000001A 100%);
|
|
}
|
|
|
|
Rectangle {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: parent.border-radius;
|
|
border-width: 0.5px;
|
|
border-color: CupertinoPalette.border;
|
|
}
|
|
}
|
|
|
|
if (root.checked) : Rectangle {
|
|
drop-shadow-blur: 3px;
|
|
drop-shadow-color: #00000066;
|
|
drop-shadow-offset-y: 0.5px;
|
|
y: (parent.height - self.height) / 2;
|
|
width: 14px;
|
|
height: self.width;
|
|
border-radius: 4px;
|
|
background: root.background;
|
|
|
|
Rectangle {
|
|
drop-shadow-blur: 2px;
|
|
drop-shadow-color: #00000026;
|
|
drop-shadow-offset-y: 1px;
|
|
border-radius: parent.border-radius;
|
|
background: root.background;
|
|
}
|
|
|
|
Rectangle {
|
|
drop-shadow-blur: 1px;
|
|
drop-shadow-color: #00000026;
|
|
drop-shadow-offset-y: 0.5px;
|
|
border-radius: parent.border-radius;
|
|
background: root.background;
|
|
}
|
|
|
|
Rectangle {
|
|
border-radius: parent.border-radius;
|
|
background: CupertinoPalette.dimmer;
|
|
opacity: 0.17;
|
|
}
|
|
|
|
i-icon := Image {
|
|
image-fit: contain;
|
|
visible: root.checked;
|
|
source: Icons.check-mark;
|
|
colorize: root.icon-color;
|
|
width: 12px;
|
|
|
|
animate colorize { duration: 150ms; }
|
|
}
|
|
}
|
|
|
|
if (root.text != "") : Text {
|
|
text: root.text;
|
|
color: CupertinoPalette.foreground;
|
|
font-size: CupertinoFontSettings.body.font-size;
|
|
font-weight: CupertinoFontSettings.body.font-weight;
|
|
vertical-alignment: center;
|
|
horizontal-alignment: left;
|
|
}
|
|
}
|
|
|
|
i-touch-area := TouchArea {
|
|
clicked => {
|
|
if (root.enabled) {
|
|
root.checked = !root.checked;
|
|
root.toggled();
|
|
}
|
|
}
|
|
}
|
|
|
|
i-focus-scope := FocusScope {
|
|
x: 0;
|
|
width: 0; // Do not react on clicks
|
|
enabled <=> root.enabled;
|
|
|
|
key-pressed(event) => {
|
|
if (event.text == " " || event.text == "\n") {
|
|
i-touch-area.clicked();
|
|
return accept;
|
|
}
|
|
return reject;
|
|
}
|
|
}
|
|
}
|