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 { FluentPalette, Icons } from "styling.slint";
5
6component ScrollViewButton inherits TouchArea {
7 in property <image> icon;
8 in property <bool> horizontal;
9
10 width: root.horizontal ? 6px : 8px;
11 height: root.horizontal ? 8px : 6px;
12
13 icon := Image {
14 x: (parent.width - self.width) / 2;
15 y: (parent.height - self.height) / 2;
16 width: parent.width;
17 source: root.icon;
18 colorize: FluentPalette.border;
19 accessible-role: none;
20
21 animate colorize, opacity { duration: 150ms; }
22 animate width, height { duration: 150ms; easing: ease-out; }
23 }
24
25 states [
26 pressed when root.pressed : {
27 opacity: 1;
28 icon.width: root.width - 2px;
29 }
30 hover when root.has-hover : {
31 opacity: 1;
32 icon.colorize: FluentPalette.text-secondary;
33 }
34 ]
35}
36
37component ScrollBar inherits Rectangle {
38 in-out property <bool> horizontal;
39 in-out property <length> maximum;
40 in-out property <length> page-size;
41 in-out property <length> value;
42 in property <ScrollBarPolicy> policy: ScrollBarPolicy.as-needed;
43 in property <bool> enabled;
44
45 property <length> offset: 16px;
46 property <length> size: 2px;
47 property <length> track-size: root.horizontal ? root.width - 2 * root.offset : root.height - 2 * offset;
48 property <length> step-size: 10px;
49
50 border-width: 1px;
51 border-radius: 7px;
52 visible: (self.policy == ScrollBarPolicy.always-on) || (self.policy == ScrollBarPolicy.as-needed && self.maximum > 0);
53 clip: true;
54
55 states [
56 hover when touch-area.has-hover || down-scroll-button.has-hover || up-scroll-button.has-hover : {
57 root.background: FluentPalette.alternate-background;
58 root.size: 6px;
59 up-scroll-button.opacity: 1;
60 down-scroll-button.opacity: 1;
61 }
62 ]
63
64 animate size { duration: 150ms; easing: ease-out; }
65
66 thumb := Rectangle {
67 width: !root.horizontal ? root.size : root.maximum <= 0phx ? 0phx : max(min(16px, root.width), root.track-size * root.page-size / (root.maximum + root.page-size));
68 height: root.horizontal ? root.size : root.maximum <= 0phx ? 0phx : max(min(16px, root.height), root.track-size * (root.page-size / (root.maximum + root.page-size)));
69 x: !root.horizontal ? parent.width - 4px - self.width : root.offset + (root.track-size - thumb.width) * (-root.value / root.maximum);
70 y: root.horizontal ? parent.height - 4px - self.height : root.offset + (root.track-size - thumb.height) * (-root.value / root.maximum);
71 border-radius: (root.horizontal ? self.height : self.width) / 2;
72 background: FluentPalette.border;
73
74 animate width, height { duration: 150ms; easing: ease-out; }
75 }
76
77 touch-area := TouchArea {
78 property <length> pressed-value;
79
80 width: parent.width;
81 height: parent.height;
82
83 pointer-event(event) => {
84 if (event.button == PointerEventButton.left && event.kind == PointerEventKind.down) {
85 self.pressed-value = -root.value;
86 }
87 }
88
89 moved => {
90 if (self.enabled && self.pressed) {
91 root.value = -max(0px, min(root.maximum, self.pressed-value + (
92 root.horizontal ? (touch-area.mouse-x - touch-area.pressed-x) * (root.maximum / (root.track-size - thumb.width))
93 : (touch-area.mouse-y - touch-area.pressed-y) * (root.maximum / (root.track-size - thumb.height))
94 )));
95 }
96 }
97
98 scroll-event(event) => {
99 if (root.horizontal && event.delta-x != 0) {
100 root.value = max(-root.maximum, min(0px, root.value + event.delta-x));
101 return accept;
102 } else if (!root.horizontal && event.delta-y != 0) {
103 root.value = max(-root.maximum, min(0px, root.value + event.delta-y));
104 return accept;
105 }
106 reject
107 }
108 }
109
110 up-scroll-button := ScrollViewButton {
111 opacity: 0;
112 x: !root.horizontal ? (parent.width - self.width) / 2 : 4px;
113 y: root.horizontal ? (parent.height - self.height) / 2 : 4px;
114 icon: root.horizontal ? Icons.left : Icons.up;
115 horizontal: root.horizontal;
116
117 clicked => {
118 root.value = min(0px, root.value + root.step-size);
119 }
120 }
121
122 down-scroll-button := ScrollViewButton {
123 opacity: 0;
124 x: !root.horizontal ? (parent.width - self.width) / 2 : root.width - self.width - 4px;
125 y: root.horizontal ? (parent.height - self.height) / 2 : root.height - self.height - 4px;
126 icon: root.horizontal ? Icons.right : Icons.down;
127 horizontal: root.horizontal;
128
129 clicked => {
130 root.value = max(-root.maximum, root.value - root.step-size);
131 }
132 }
133}
134
135export component ScrollView {
136 in property <bool> enabled: true;
137 out property <length> visible-width <=> flickable.width;
138 out property <length> visible-height <=> flickable.height;
139 in-out property <length> viewport-width <=> flickable.viewport-width;
140 in-out property <length> viewport-height <=> flickable.viewport-height;
141 in-out property <length> viewport-x <=> flickable.viewport-x;
142 in-out property <length> viewport-y <=> flickable.viewport-y;
143 in property <ScrollBarPolicy> vertical-scrollbar-policy <=> vertical-bar.policy;
144 in property <ScrollBarPolicy> horizontal-scrollbar-policy <=> horizontal-bar.policy;
145
146 // FIXME: remove. This property is currently set by the ListView and is used by the native style to draw the scrollbar differently when it has focus
147 in-out property <bool> has-focus;
148
149 callback scrolled <=> flickable.flicked;
150
151 min-height: 50px;
152 min-width: 50px;
153 horizontal-stretch: 1;
154 vertical-stretch: 1;
155 preferred-height: 100%;
156 preferred-width: 100%;
157
158 flickable := Flickable {
159 interactive: false;
160 viewport-y <=> vertical-bar.value;
161 viewport-x <=> horizontal-bar.value;
162 width: parent.width;
163 height: parent.height;
164
165 @children
166 }
167
168 vertical-bar := ScrollBar {
169 enabled: root.enabled;
170 width: 14px;
171 x: flickable.width + flickable.x - self.width;
172 y: flickable.y;
173 height: flickable.height - horizontal-bar.height;
174 horizontal: false;
175 maximum: flickable.viewport-height - flickable.height;
176 page-size: flickable.height;
177 }
178
179 horizontal-bar := ScrollBar {
180 enabled: root.enabled;
181 width: flickable.width - vertical-bar.width;
182 height: 14px;
183 y: flickable.height + flickable.y - self.height;
184 x: flickable.x;
185 horizontal: true;
186 maximum: flickable.viewport-width - flickable.width;
187 page-size: flickable.width;
188 }
189}
190