1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls.Basic
import FileSystemModule
Rectangle {
id: root
property alias currentTabIndex: topBar.currentIndex
required property ApplicationWindow dragWindow
readonly property int tabBarSpacing: 10
color: Colors.surface2
component SidebarEntry: Button {
id: sidebarButton
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
icon.color: down || checked ? Colors.iconIndicator : Colors.icon
icon.width: 27
icon.height: 27
topPadding: 0
rightPadding: 0
bottomPadding: 0
leftPadding: 0
background: null
Rectangle {
id: indicator
anchors.verticalCenter: parent.verticalCenter
x: 2
width: 4
height: sidebarButton.icon.height * 1.2
visible: sidebarButton.checked
color: Colors.color1
}
}
// TabBar is designed to be horizontal, whereas we need a vertical bar.
// We can easily achieve that by using a Container.
component TabBar: Container {
id: tabBarComponent
Layout.fillWidth: true
Layout.fillHeight: false
// ButtonGroup ensures that only one button can be checked at a time.
ButtonGroup {
buttons: tabBarComponent.contentChildren
// We have to manage the currentIndex ourselves, which we do by setting it to the index
// of the currently checked button. We use setCurrentIndex instead of setting the
// currentIndex property to avoid breaking bindings. See "Managing the Current Index"
// in Container's documentation for more information.
onCheckedButtonChanged: tabBarComponent.setCurrentIndex(
Math.max(0, buttons.indexOf(checkedButton)))
}
contentItem: ColumnLayout {
spacing: tabBarComponent.spacing
Repeater {
model: tabBarComponent.contentModel
}
}
}
ColumnLayout {
anchors.fill: root
anchors.topMargin: root.tabBarSpacing
anchors.bottomMargin: root.tabBarSpacing
spacing: root.tabBarSpacing
TabBar {
id: topBar
spacing: root.tabBarSpacing
// Shows help text when clicked.
SidebarEntry {
id: infoTab
icon.source: "../icons/light_bulb.svg"
checkable: true
checked: true
}
// Shows the file system when clicked.
SidebarEntry {
id: filesystemTab
icon.source: "../icons/read.svg"
checkable: true
}
}
// This item acts as a spacer to expand between the checkable and non-checkable buttons.
Item {
Layout.fillHeight: true
Layout.fillWidth: true
// Make the empty space drag our main window.
WindowDragHandler {
dragWindow: root.dragWindow
}
}
TabBar {
id: bottomBar
spacing: root.tabBarSpacing
// Opens the Qt website in the system's web browser.
SidebarEntry {
id: qtWebsiteButton
icon.source: "../icons/globe.svg"
checkable: false
onClicked: Qt.openUrlExternally("https://www.qt.io/")
}
// Opens the About Qt Window.
SidebarEntry {
id: aboutQtButton
icon.source: "../icons/info_sign.svg"
checkable: false
onClicked: aboutQtWindow.visible = !aboutQtWindow.visible
}
}
}
About {
id: aboutQtWindow
visible: false
}
}
|
