mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-10 13:48:38 +00:00
7947d44e59
This is commit is just the output of running the syntax updater on the files in the internal/compiler/widgets directory. No extra manual steps were done. Note: In order to run the updater, I did a hack so that the updater wouldn't choke on internal item used by the styles by commenting out the check in ElementType::lookup_type_for_child_element
93 lines
No EOL
2.4 KiB
Text
93 lines
No EOL
2.4 KiB
Text
// Copyright © SixtyFPS GmbH <info@slint-ui.com>
|
|
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
|
|
|
|
import { md } from "md.slint";
|
|
|
|
export component Ripple inherits Rectangle {
|
|
in property<length> ripple-x;
|
|
in property<length> ripple-y;
|
|
in property<bool> active;
|
|
in property<bool> has-effect;
|
|
in property<brush> ripple-color <=> circle.background;
|
|
|
|
circle := Rectangle {
|
|
x: root.ripple-x - self.width / 2;
|
|
y: root.ripple-y - self.width / 2;
|
|
height: self.width;
|
|
border-radius: self.width / 2;
|
|
}
|
|
|
|
states [
|
|
active when root.active && root.has-effect: {
|
|
circle.width: root.width * 2 * 1.4142;
|
|
in {
|
|
animate circle.width { duration: 2s; easing: ease-out; }
|
|
}
|
|
}
|
|
]
|
|
|
|
|
|
}
|
|
|
|
// A touch area that also represents a visual state.
|
|
export component StateLayer inherits TouchArea {
|
|
in property<bool> focusable;
|
|
in property<brush> selection-background;
|
|
in property<brush> ripple-color;
|
|
in property<bool> has-ripple;
|
|
in property<length> border-radius;
|
|
|
|
out property<bool> has-focus <=> fs.has-focus;
|
|
|
|
in-out property<brush> background;
|
|
in-out property<bool> checked;
|
|
|
|
forward-focus: fs;
|
|
|
|
ripple := Ripple {
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
active: root.pressed;
|
|
ripple-x: root.pressed-x;
|
|
ripple-y: root.pressed-y;
|
|
clip: true;
|
|
border-radius: root.border-radius;
|
|
background: root.background;
|
|
ripple-color: root.ripple-color;
|
|
has-effect: root.has-ripple;
|
|
|
|
animate opacity { duration: 250ms; easing: ease; }
|
|
animate background { duration: 250ms; }
|
|
}
|
|
|
|
fs := FocusScope {
|
|
x:0;
|
|
width: 0px; // Do not react on clicks
|
|
enabled: root.enabled && root.focusable;
|
|
|
|
key-pressed(event) => {
|
|
if (event.text == " " || event.text == "\n") {
|
|
root.clicked();
|
|
return accept;
|
|
}
|
|
return reject;
|
|
}
|
|
}
|
|
|
|
states [
|
|
pressed when root.pressed: {
|
|
ripple.opacity: 0.12;
|
|
}
|
|
checked when root.checked: {
|
|
ripple.opacity: 1.0;
|
|
ripple.background: root.selection-background;
|
|
}
|
|
hover when root.has-hover: {
|
|
ripple.opacity: 0.08;
|
|
}
|
|
focused when root.has-focus: {
|
|
ripple.opacity: 0.12;
|
|
}
|
|
]
|
|
} |