1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4import { AppPalette, AppFonts, AppImages } from "../style/styles.slint";
5
6export component AppText inherits Text {
7 color: AppPalette.foreground;
8
9 overflow: elide;
10}
11
12export component AppIcon inherits Image {
13 image-fit: contain;
14 colorize: AppPalette.foreground;
15}
16
17export component FloatingTextButton inherits Rectangle {
18 in property icon-source <=> icon.source;
19 in property icon-color <=> icon.colorize;
20
21 callback clicked;
22
23 drop-shadow-color: self.background.darker(50%);
24 drop-shadow-blur: 5px;
25 drop-shadow-offset-x: 3px;
26 drop-shadow-offset-y: 2px;
27
28 background: AppPalette.background;
29 border-radius: Math.min(self.width, self.height) / 2;
30
31 padding: 12px;
32 padding-left: self.padding;
33 padding-right: self.padding;
34 padding-top: self.padding;
35 padding-bottom: self.padding;
36
37 preferred-width: 48px;
38 preferred-height: 48px;
39
40 width: self.preferred-width;
41 height: self.preferred-height;
42
43 icon := AppIcon {
44 width: parent.width - parent.padding-left - parent.padding-right;
45 height: parent.height - parent.padding-top - parent.padding-bottom;
46 }
47
48 TouchArea {
49 clicked => { root.clicked(); }
50 }
51}
52
53export component SlideButton inherits Rectangle {
54 in-out property icon-source <=> icon.source;
55 in-out property<bool> enabled <=> touch-area.enabled;
56 in property<color> background-color;
57 callback clicked <=> touch-area.clicked;
58
59 background: touch-area.pressed ? self.background-color.darker(10%) : self.background-color;
60 opacity: root.enabled ? 1.0 : 0.5;
61
62 icon := AppIcon {
63 width: 50%;
64 height: 50%;
65
66 colorize: touch-area.pressed ? AppPalette.foreground.darker(10%) : AppPalette.foreground;
67 }
68
69 touch-area := TouchArea {}
70}
71
72export component TextField inherits Rectangle {
73 in property icon-source <=> icon.source;
74 in property<string> placeholder-text;
75 in-out property<string> text <=> text-input.text;
76 callback edited <=> text-input.edited;
77
78 forward-focus: text-input;
79
80 padding: 5px;
81 padding-top: self.padding;
82 padding-right: self.padding;
83 padding-bottom: self.padding;
84 padding-left: self.padding;
85
86 preferred-height: text-input.preferred-height + self.padding-top + self.padding-bottom;
87 height: self.preferred-height;
88
89 border-radius: 5px;
90 background: white.with-alpha(15%);
91
92 HorizontalLayout {
93 x: root.padding-left;
94 width: parent.width - root.padding-left - root.padding-right;
95
96 y: root.padding-top;
97 height: parent.height - root.padding-top - root.padding-bottom;
98
99 spacing: icon.preferred-width > 0 ? 10px : 0px;
100
101 icon := AppIcon {
102 max-width: self.height;
103 }
104
105 AppText {
106 horizontal-stretch: 1;
107
108 horizontal-alignment: left;
109 font-size: text-input.font-size;
110 text: text-input.text == "" ? root.placeholder-text : "";
111
112 text-input := TextInput {
113 color: AppPalette.foreground;
114 font-size: 1.2rem;
115 }
116 }
117
118 AppIcon {
119 source: AppImages.xmark;
120 max-width: self.height;
121 }
122 }
123}
124