Differential D28873 Diff 80259 src/controls/SwipeNavigator.qml

Changeset View

Standalone View

View Options

src/controls/SwipeNavigator.qml

  • This file was added.
1​/*
2​ * SPDX-FileCopyrightText: 2020 Carson Black <uhhadd@gmail.com>
3​ *
4​ * SPDX-License-Identifier: LGPL-2.0-or-later
5​ */
6​
7​import QtQuick 2.12
8​import QtQuick.Layouts 1.12
9​import QtQuick.Controls 2.12
10​import org.kde.kirigami 2.12 as Kirigami
11​import "private" as Private
12​
13​ColumnLayout {
14​ id: swipeNavigatorRoot
15​ spacing: 0
16​
17​ /**
18​ * pages: list<Kirigami.Page>
19​ *
20​ * A list of pages to swipe between.
21​ */
22​ default property list<Kirigami.Page> pages
23​
24​ /**
25​ * largeHeader: bool
26​ *
27​ * Whether this SwipeNavigator should use a larger header than normal. Designed
28​ * for usage on televisions.
29​ */
30​ property bool largeHeader: false
martUnsubmitted
Not Done

perhaps any custom heading should be via a custom item (or component?) to put as a property (of type qqc2.tabbar)

mart: perhaps any custom heading should be via a custom item (or component?) to put as a property (of…
cblackAuthorUnsubmitted
Not Done

i don't see how that relates to wanting a larger (bigscreen-sized) header?

cblack: i don't see how that relates to wanting a larger (bigscreen-sized) header?
31​
32​ /**
33​ * layerStack: StackView
34​ *
35​ * The StackView holding the core item, allowing users of a SwipeNavigator
36​ * in order to push pages on top of the SwipeNavigator.
37​ */
38​ property alias layerStack: stackView
martUnsubmitted
Done

"layers", to have the same api of pageRow

mart: "layers", to have the same api of pageRow
39​
40​ /**
41​ * actions: list<QtObject>
42​ *
43​ * Actions to display in the toolbar where the page switcher resides.
44​ */
45​ property alias actions: actionToolBar.actions
46​
47​ ToolBar {
48​ id: topToolBar
49​
50​ padding: 0
51​ bottomPadding: 1
52​ position: ToolBar.Header
53​
54​ states: [
55​ State {
martUnsubmitted
Done

different tabbars should really depend only on whether it's a mobile device or not (and be at bottom if mobile): a very small window on desktop is not a mobile app

mart: different tabbars should really depend only on whether it's a mobile device or not (and be at…
cblackAuthorUnsubmitted
Not Done

it's still nice to have a collapsed form of the tabbar for small screen sizes

cblack: it's still nice to have a collapsed form of the tabbar for small screen sizes
niccoloveUnsubmitted
Not Done

I think the tabbar should not be at the bottom on mobile. It's not necessary to touch the control as swiping from any point of the page should change the page, it is more visible when put at top, it is more consistent with kde and not-kde applications and introduces a position inconsistency between devices (touchscreen laptops should also be taken into consideration).

niccolove: I think the tabbar should not be at the bottom on mobile. It's not necessary to touch the…
martUnsubmitted
Not Done

to me on mobile this is basically (or at least, is the only use i would have for such a control):
https://material.io/components/bottom-navigation

which yeah, should be at the bottom (and kirigami always had as a central point to have as much as possible controls, actions and chrome at the bottom for single hand use)

mart: to me on mobile this is basically (or at least, is the only use i would have for such a…
56​ name: "small"
57​ when: largeBar.implicitWidth > topToolBar.width
58​ },
59​ State {
60​ name: "large"
61​ when: largeBar.implicitWidth <= topToolBar.width
62​ }
63​ ]
64​
65​ Kirigami.ActionToolBar {
66​ id: actionToolBar
martUnsubmitted
Done

this should be page actions? other actions? what is the exact use case?

mart: this should be page actions? other actions? what is the exact use case?
cblackAuthorUnsubmitted
Not Done

global actions

cblack: global actions
67​ anchors {
68​ top: parent.top
69​ bottom: parent.bottom
70​ left: parent.left
71​ }
72​ }
73​
74​ Private.SwipeTabBar {
75​ visible: topToolBar.state == "large"
76​ id: largeBar
77​ }
78​
79​ Private.SwipeTabBar {
80​ visible: topToolBar.state == "small"
81​ small: true
82​ }
83​
84​ Layout.preferredHeight: swipeNavigatorRoot.largeHeader ? Kirigami.Units.gridUnit*4 : -1
martUnsubmitted
Not Done

there should be a single instance capable of changing itself between the two states

mart: there should be a single instance capable of changing itself between the two states
85​ Layout.fillWidth: true
86​
87​ Accessible.role: Accessible.PageTabList
88​ }
89​
90​ StackView {
91​ id: stackView
92​
93​ Layout.fillWidth: true
94​ Layout.fillHeight: true
95​
96​ popEnter: Transition {
97​ OpacityAnimator {
98​ from: 0
99​ to: 1
100​ duration: Units.longDuration
101​ easing.type: Easing.InOutCubic
102​ }
103​ }
104​ popExit: Transition {
105​ ParallelAnimation {
106​ OpacityAnimator {
107​ from: 1
108​ to: 0
109​ duration: Units.longDuration
110​ easing.type: Easing.InOutCubic
111​ }
112​ YAnimator {
113​ from: 0
114​ to: height/2
115​ duration: Units.longDuration
116​ easing.type: Easing.InCubic
117​ }
118​ }
119​ }
120​
121​ pushEnter: Transition {
122​ ParallelAnimation {
123​ //NOTE: It's a PropertyAnimation instead of an Animator because with an animator the item will be visible for an instant before starting to fade
124​ PropertyAnimation {
125​ property: "opacity"
126​ from: 0
127​ to: 1
128​ duration: Units.longDuration
129​ easing.type: Easing.InOutCubic
130​ }
131​ YAnimator {
132​ from: height/2
133​ to: 0
134​ duration: Units.longDuration
135​ easing.type: Easing.OutCubic
136​ }
137​ }
138​ }
139​
140​
141​ pushExit: Transition {
142​ OpacityAnimator {
143​ from: 1
144​ to: 0
145​ duration: Units.longDuration
146​ easing.type: Easing.InOutCubic
147​ }
148​ }
149​
150​ replaceEnter: Transition {
151​ ParallelAnimation {
152​ OpacityAnimator {
153​ from: 0
154​ to: 1
155​ duration: Units.longDuration
156​ easing.type: Easing.InOutCubic
157​ }
158​ YAnimator {
159​ from: height/2
160​ to: 0
161​ duration: Units.longDuration
162​ easing.type: Easing.OutCubic
163​ }
164​ }
165​ }
166​
167​ replaceExit: Transition {
168​ ParallelAnimation {
169​ OpacityAnimator {
170​ from: 1
171​ to: 0
172​ duration: Units.longDuration
173​ easing.type: Easing.InCubic
174​ }
175​ YAnimator {
176​ from: 0
177​ to: -height/2
178​ duration: Units.longDuration
179​ easing.type: Easing.InOutCubic
180​ }
181​ }
182​ }
183​
184​ Kirigami.ColumnView {
185​ id: columnView
186​ columnResizeMode: Kirigami.ColumnView.SingleColumn
187​
188​ contentChildren: swipeNavigatorRoot.pages
189​ anchors.fill: parent
190​
191​ Component.onCompleted: {
192​ columnView.currentIndex = 0
193​ }
194​ }
195​ }
196​}