1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
3
4import { CupertinoFontSettings, CupertinoPalette } from "styling.slint";
5import { FocusBorder } from "components.slint";
6
7export component Button {
8 in property <string> text;
9 in property <image> icon;
10 in property <bool> primary;
11 in property <bool> enabled <=> i-touch-area.enabled;
12 in property <bool> checkable;
13 in property <bool> colorize-icon;
14 out property <bool> has-focus: i-focus-scope.has-focus;
15 out property <bool> pressed: self.enabled && i-touch-area.pressed;
16 in-out property <bool> checked;
17
18 callback clicked;
19
20 private property <brush> background: primary && root.enabled ? CupertinoPalette.accent-background : CupertinoPalette.control-background;
21 private property <brush> text-color: primary && root.enabled ? CupertinoPalette.accent-foreground : CupertinoPalette.control-foreground;
22
23 min-width: max(20px, i-layout.min-width);
24 min-height: max(20px, i-layout.min-height);
25 horizontal-stretch: 0;
26 vertical-stretch: 0;
27 forward-focus: i-focus-scope;
28
29 accessible-role: button;
30 accessible-enabled: root.enabled;
31 accessible-checkable: root.checkable;
32 accessible-checked: root.checked;
33 accessible-label: root.text;
34 accessible-action-default => { i-touch-area.clicked(); }
35
36
37 states [
38 disabled when !i-touch-area.enabled : {
39 root.text-color: CupertinoPalette.foreground-secondary;
40 root.background: CupertinoPalette.quaternary-control-background;
41 }
42 pressed when root.pressed : {
43 root.background: root.primary ? CupertinoPalette.secondary-accent-background : CupertinoPalette.secondary-control-background;
44 }
45 checked when root.checked : {
46 root.text-color: CupertinoPalette.secondary-accent-background;
47 }
48 ]
49
50 animate background { duration: 150ms; }
51
52 FocusBorder {
53 x: (parent.width - self.width) / 2;
54 y: (parent.height - self.height) / 2;
55 width: parent.width + 6px;
56 height: parent.height + 6px;
57 border-radius: 8px;
58 has-focus: root.has-focus;
59 }
60
61 if (root.primary && root.enabled) : Rectangle {
62 drop-shadow-blur: 3px;
63 drop-shadow-color: #00000066;
64 drop-shadow-offset-y: 0.5px;
65 border-radius: 5px;
66 background: root.background;
67
68 Rectangle {
69 drop-shadow-blur: 2px;
70 drop-shadow-color: #00000026;
71 drop-shadow-offset-y: 1px;
72 border-radius: parent.border-radius;
73 background: root.background;
74 }
75
76 Rectangle {
77 drop-shadow-blur: 1px;
78 drop-shadow-color: #00000026;
79 drop-shadow-offset-y: 0.5px;
80 border-radius: parent.border-radius;
81 background: root.background;
82 }
83
84 Rectangle {
85 border-radius: parent.border-radius;
86 background: CupertinoPalette.dimmer;
87 opacity: 0.17;
88 }
89 }
90
91 if (!root.primary || !root.enabled) : Rectangle {
92 drop-shadow-blur: 0.25px;
93 drop-shadow-color: #00000066;
94 drop-shadow-offset-y: 0.25px;
95 border-radius: 5px;
96 background: root.background;
97
98 Rectangle {
99 drop-shadow-blur: 1px;
100 drop-shadow-color: #00000026;
101 drop-shadow-offset-y: 1px;
102 border-radius: parent.border-radius;
103 background: root.background;
104 border-width: 1px;
105 border-color: CupertinoPalette.decent-border;
106 opacity: root.enabled ? 1 : 0.5;
107 }
108 }
109
110 i-layout := HorizontalLayout {
111 padding-left: 8px;
112 padding-right: 8px;
113 padding-top: 4px;
114 padding-bottom: 4px;
115 spacing: 4px;
116 alignment: center;
117
118 if (root.icon.width > 0 && root.icon.height > 0) : Image {
119 y: (parent.height - self.height) / 2;
120 source <=> root.icon;
121 width: 13px;
122 opacity: root.enabled ? 1 : 0.5;
123 colorize: root.colorize-icon ? root.text-color : transparent;
124 }
125
126 if (root.text != "") : Text {
127 opacity: root.enabled ? 1 : 0.5;
128 font-size: CupertinoFontSettings.body.font-size;
129 font-weight: CupertinoFontSettings.body.font-weight;
130 horizontal-alignment: center;
131 vertical-alignment: center;
132 text: root.text;
133 color: root.text-color;
134 animate color { duration: 150ms; }
135 accessible-role: none;
136 }
137 }
138
139 i-touch-area := TouchArea {
140 clicked => {
141 if (root.checkable) {
142 root.checked = !root.checked;
143 }
144 root.clicked();
145 }
146 }
147
148 i-focus-scope := FocusScope {
149 x: 0;
150 width: 0; // Do not react on clicks
151 enabled <=> root.enabled;
152
153 key-pressed(event) => {
154 if (event.text == " " || event.text == "\n") {
155 i-touch-area.clicked();
156 return accept;
157 }
158
159 return reject;
160 }
161 }
162}
163