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
141
142
143
|
/***************************************************************************
* *
* Ubuntu UI Extras - A collection of QML widgets not available *
* in the default Ubuntu UI Toolkit *
* Copyright (C) 2013 Michael Spencer <sonrisesoftware@gmail.com> *
* *
* This program is free software: you can redistribute it and/or modify *
* it under the terms of the GNU General Public License as published by *
* the Free Software Foundation, either version 3 of the License, or *
* (at your option) any later version. *
* *
* This program is distributed in the hope that it will be useful, *
* but WITHOUT ANY WARRANTY; without even the implied warranty of *
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the *
* GNU General Public License for more details. *
* *
* You should have received a copy of the GNU General Public License *
* along with this program. If not, see <http://www.gnu.org/licenses/>. *
***************************************************************************/
import QtQuick 2.0
import Ubuntu.Components 0.1
import Ubuntu.Components.ListItems 0.1
/*!
\qmltype Sidebar
\brief A sidebar component for use in adaptive layouts
To use, simply add an instance to your code, and anchor other components to it.
To show or hide, set the expanded property.
By default, the sidebar has a flickable built in, and whatever contents are added
will be placed in the flickable. When you want this disabled, or want to fill the
entire sidebar, set the autoFill property to false.
Examples:
\qml
property bool wideAspect: width > units.gu(80)
Sidebar {
expanded: wideAspect
// Anchoring is automatic
}
\endqml
*/
Rectangle {
id: root
color: Qt.rgba(0.2,0.2,0.2,0.4)
property bool expanded: true
property string mode: "left" // or "right"
property alias header: headerItem.text
anchors {
left: mode === "left" ? parent.left : undefined
right: mode === "right" ? parent.right : undefined
top: parent.top
bottom: parent.bottom
}
VerticalDivider {
mode: root.mode
anchors {
top: parent.top
bottom: parent.bottom
right: mode === "left" ? parent.right : undefined
left: mode === "right" ? parent.left : undefined
rightMargin: -1
}
}
width: units.gu(35)
anchors.leftMargin: expanded ? 0 : -width
anchors.rightMargin: expanded ? 0 : -width
Behavior on anchors.leftMargin {
UbuntuNumberAnimation {}
}
Behavior on anchors.rightMargin {
UbuntuNumberAnimation {}
}
default property alias contents: contents.data
Header {
id: headerItem
visible: text !== ""
}
property bool autoFlick: true
Flickable {
id: flickable
clip: true
anchors {
top: headerItem.visible ? headerItem.bottom : parent.top
left: parent.left
right: parent.right
bottom: parent.bottom
rightMargin: mode === "left" ? 1 : 0
leftMargin: mode === "right" ? 1 : 0
}
contentWidth: width
contentHeight: autoFlick ? contents.height : height
interactive: contentHeight > height
Item {
id: contents
width: flickable.width
height: autoFlick ? childrenRect.height : flickable.height
}
function getFlickableChild(item) {
if (item && item.hasOwnProperty("children")) {
for (var i=0; i < item.children.length; i++) {
var child = item.children[i];
if (internal.isVerticalFlickable(child)) {
if (child.anchors.top === page.top || child.anchors.fill === page) {
return item.children[i];
}
}
}
}
return null;
}
}
Scrollbar {
flickableItem: flickable
}
}
|