Differential D28873 Diff 82965 src/controls/private/SwipeTabBar.qml

Changeset View

Standalone View

View Options

src/controls/private/SwipeTabBar.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​
12​RowLayout {
13​ id: swipeTabBarRoot
martUnsubmitted
Done

QtQuickControls do have a TabBar control, instead of having a completely custom control

mart: QtQuickControls do have a TabBar control, instead of having a completely custom control
cblackAuthorUnsubmitted
Not Done

I'm aware, but I went with a custom control for more control of the presentation and functionality.

cblack: I'm aware, but I went with a custom control for more control of the presentation and…
14​ property bool small: false
15​
16​ spacing: 0
17​ anchors {
18​ top: parent.top
19​ bottom: parent.bottom
20​ horizontalCenter: parent.horizontalCenter
21​ }
22​
23​ Repeater {
24​ model: swipeNavigatorRoot.pages
25​ Rectangle {
26​ Keys.onPressed: {
27​ if (event.key == Qt.Key_Enter || event.key == Qt.Key_Return) {
28​ columnView.currentIndex = index
29​ }
30​ }
31​ activeFocusOnTab: true
32​
33​ Accessible.name: modelData.title
34​ Accessible.description: {
35​ if (!!modelData.progress) {
36​ if (index == columnView.currentIndex) {
37​ return i18nc("Accessibility text for a page tab. Keep the text as concise as possible and don't use a percent sign.", "Current page. Progress: %1 percent.", Math.round(modelData.progress*100))
38​ } else {
martUnsubmitted
Not Done

this is kinda outside of the scope of the control.
I guess you have an use case for this, but it shouldn't be a swiss army knife, just a tabbar: it's more complicated but at the same time there will always be people that miss a feature and will reimplement the whole thing for that.
I think it should just be easy to provide custom items for individual tabs, when needed (or just an item to be placed inside a tab, not sure)

mart: this is kinda outside of the scope of the control. I guess you have an use case for this, but…
39​ return i18nc("Accessibility text for a page tab. Keep the text as concise as possible.", "Navigate to %1. Progress: %1 percent.", modelData.title, Math.round(modelData.progress*100))
40​ }
41​ } else {
42​ if (index == columnView.currentIndex) {
43​ return i18nc("Accessibility text for a page tab. Keep the text as concise as possible.", "Current page.")
44​ } else if (modelData.needsAttention) {
45​ return i18nc("Accessibility text for a page tab that's requesting the user's attention. Keep the text as concise as possible.", "Navigate to %1. Demanding attention.", modelData.title)
46​ } else {
47​ return i18nc("Accessibility text for a page tab that's requesting the user's attention. Keep the text as concise as possible.", "Navigate to %1.", modelData.title)
48​ }
49​ }
50​ }
51​ Accessible.role: Accessible.PageTab
52​ Accessible.focusable: true
53​ Accessible.onPressAction: columnView.currentIndex = index
54​
55​ implicitWidth: largeTitleRow.implicitWidth
56​ border {
57​ width: activeFocus ? 2 : 0
58​ color: Kirigami.Theme.textColor
59​ }
60​ color: {
61​ if (index == columnView.currentIndex) {
62​ return Kirigami.ColorUtils.adjustColor(Kirigami.Theme.activeTextColor, {"alpha": 0.2*255})
63​ } else if (modelData.needsAttention) {
64​ return Kirigami.ColorUtils.adjustColor(Kirigami.Theme.negativeTextColor, {"alpha": 0.2*255})
65​ } else {
66​ return "transparent"
67​ }
68​ }
69​
70​ Rectangle {
71​ Accessible.ignored: true
72​ anchors {
73​ bottom: parent.bottom
74​ left: parent.left
75​ right: parent.right
76​ }
77​
78​ color: {
79​ if (index == columnView.currentIndex) {
80​ return Kirigami.Theme.activeTextColor
81​ } else if (modelData.needsAttention) {
82​ return Kirigami.Theme.negativeTextColor
83​ } else {
84​ return "transparent"
85​ }
86​ }
87​
88​ // Unlike most things, we don't want to scale with the em grid, so we don't use a Unit.
89​ height: 2
90​ }
91​
92​ Rectangle {
93​ Accessible.ignored: true
94​ visible: !!modelData.progress
95​
96​ anchors {
97​ top: parent.top
98​ bottom: parent.bottom
99​ left: parent.left
100​ }
101​ width: parent.width * modelData.progress
102​ color: Kirigami.ColorUtils.adjustColor(Kirigami.Theme.positiveTextColor, {"alpha": 0.2*255})
103​
104​ Rectangle {
105​ anchors {
106​ bottom: parent.bottom
107​ left: parent.left
108​ right: parent.right
109​ }
110​
111​ color: Kirigami.Theme.positiveTextColor
112​
113​ // Unlike most things, we don't want to scale with the em grid, so we don't use a Unit.
114​ height: 2
115​ }
116​ }
117​
118​
119​ Rectangle {
120​ Accessible.ignored: true
121​ visible: !!modelData.progress
122​
123​ anchors {
124​ top: parent.top
125​ bottom: parent.bottom
126​ right: parent.right
127​ }
128​ width: parent.width - (parent.width * modelData.progress)
129​ color: Kirigami.ColorUtils.adjustColor(Kirigami.Theme.textColor, {"alpha": 0.1*255})
130​
131​ Rectangle {
132​ anchors {
133​ bottom: parent.bottom
134​ left: parent.left
135​ right: parent.right
136​ }
137​
138​ color: Kirigami.ColorUtils.adjustColor(Kirigami.Theme.textColor, {"alpha": 0.1*255})
139​
140​ // Unlike most things, we don't want to scale with the em grid, so we don't use a Unit.
141​ height: 2
142​ }
143​ }
144​
145​ RowLayout {
146​ id: largeTitleRow
147​ anchors.fill: parent
148​ Accessible.ignored: true
149​
150​ GridLayout {
151​ Layout.margins: Kirigami.Units.largeSpacing
152​ Layout.alignment: Qt.AlignVCenter
153​
154​ columns: 2
155​ rows: 2
156​
157​ flow: swipeTabBarRoot.small ? GridLayout.TopToBottom : GridLayout.LeftToRight
158​
159​ Kirigami.Icon {
160​ visible: !!modelData.icon.name
161​ source: modelData.icon.name
162​
163​ Layout.preferredHeight: swipeNavigatorRoot.largeHeader ? Kirigami.Units.iconSizes.medium : Kirigami.Units.iconSizes.small
164​ Layout.preferredWidth: Layout.preferredHeight
165​
166​ Layout.alignment: swipeTabBarRoot.small ? Qt.AlignHCenter : (Qt.AlignLeft | Qt.AlignVCenter)
167​ }
168​ Kirigami.Heading {
169​ level: {
170​ if (swipeNavigatorRoot.largeHeader) {
171​ return 1
172​ } else if (swipeTabBarRoot.small) {
173​ return 5
174​ }
175​ return 2
176​ }
177​ fontSizeMode: {
178​ if (swipeNavigatorRoot.largeHeader) {
179​ return Text.FixedSize
180​ } else if (swipeTabBarRoot.small) {
181​ return Text.HorizontalFit
182​ }
183​ return Text.FixedSize
184​ }
185​ text: modelData.title
186​ // We fall back to Font.Normal, which will override user
187​ // font choices. Not ideal, but there doesn't seem to be
188​ // a way to reset this property.
189​ font.weight: modelData.needsAttention ? Font.Black : Font.Normal
190​
191​ Layout.fillWidth: true
192​ Layout.alignment: swipeTabBarRoot.small ? Qt.AlignHCenter : (Qt.AlignLeft | Qt.AlignVCenter)
193​ }
194​ }
195​ }
196​
197​ MouseArea {
198​ id: mouse
199​ anchors.fill: parent
200​ Accessible.ignored: true
201​ onClicked: {
202​ columnView.currentIndex = index
203​ }
204​ }
205​
206​ Layout.fillHeight: true
207​ Layout.alignment: Qt.AlignHCenter
208​ }
209​ }
210​}