1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4import { Pagination } from "pagination.slint";
5import { FloatButton } from "float_button.slint";
6import { Theme } from "../theme.slint";
7import { Images } from "../images.slint";
8
9export component Navigation {
10 in-out property <int> current-index <=> i-pagination.selected-index;
11 in property <int> page-count <=> i-pagination.count;
12
13 callback pagination-clicked <=> i-pagination.clicked;
14 callback clicked;
15
16 public function hide() {
17 show-navigation = false;
18 }
19
20 private property <bool> show-navigation;
21
22 function toggle-show-navigation() {
23 show-navigation = !self.show-navigation;
24 }
25
26 function increment() {
27 current-index = max(current-index - 1, 0);
28 }
29
30 function decrement() {
31 current-index = min(current-index + 1, page-count - 1);
32 }
33
34 preferred-width: 100%;
35 preferred-height: 100%;
36
37 VerticalLayout {
38 padding-top: Theme.spaces.small;
39
40 Rectangle {
41 clip: true;
42
43 TouchArea {
44 clicked => {
45 toggle-show-navigation();
46 root.clicked();
47 }
48 }
49
50 @children
51 }
52
53 i-pagination := Pagination {}
54 }
55
56 if (show-navigation) : HorizontalLayout {
57 Rectangle {
58 visible: current-index > 0;
59 opacity: self.visible ? 1 : 0;
60 min_width: 129px;
61 background: Theme.palette.dark-left-gradient;
62
63 animate opacity { duration: Theme.durations.fast; }
64
65 VerticalLayout {
66 alignment: center;
67
68 HorizontalLayout {
69 padding-left: Theme.spaces.large;
70 alignment: start;
71
72 FloatButton {
73 icon: Images.arrow-left;
74
75 clicked => {
76 root.increment();
77 }
78 }
79 }
80 }
81 }
82
83 Rectangle {}
84
85 Rectangle {
86 visible: current-index < page-count - 1;
87 opacity: self.visible ? 1 : 0;
88 min_width: 129px;
89 background: Theme.palette.dark-right-gradient;
90
91 animate opacity { duration: Theme.durations.fast; }
92
93 VerticalLayout {
94 alignment: center;
95
96 HorizontalLayout {
97 padding-right: Theme.spaces.large;
98 alignment: end;
99
100 FloatButton {
101 icon: Images.arrow-right;
102
103 clicked => {
104 root.decrement();
105 }
106 }
107 }
108 }
109 }
110 }
111}
112