Unity 8
 All Classes Functions Properties
DashDepartmentsList.qml
1 /*
2  * Copyright (C) 2014 Canonical, Ltd.
3  *
4  * This program is free software; you can redistribute it and/or modify
5  * it under the terms of the GNU General Public License as published by
6  * the Free Software Foundation; version 3.
7  *
8  * This program is distributed in the hope that it will be useful,
9  * but WITHOUT ANY WARRANTY; without even the implied warranty of
10  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11  * GNU General Public License for more details.
12  *
13  * You should have received a copy of the GNU General Public License
14  * along with this program. If not, see <http://www.gnu.org/licenses/>.
15  */
16 
17 import QtQuick 2.2
18 import Ubuntu.Components 0.1
19 
20 Item {
21  id: root
22  property var department: null
23  property var currentDepartment: null
24  property var scopeStyle: null
25  signal enterDepartment(var newDepartmentId, bool hasChildren)
26  signal goBackToParentClicked()
27  signal allDepartmentClicked()
28 
29  readonly property int itemHeight: units.gu(5)
30  readonly property color foregroundColor: root.scopeStyle ? root.scopeStyle.foreground : "grey"
31  implicitHeight: flickable.contentHeight
32 
33  Rectangle {
34  color: !root.scopeStyle || Qt.colorEqual(root.scopeStyle.background, "transparent") ? "white" : root.scopeStyle.background
35  anchors.fill: parent
36  }
37 
38  ActivityIndicator {
39  id: loadingIndicator
40  anchors.centerIn: parent
41  running: !(department && department.loaded)
42  }
43  clip: true
44 
45  Behavior on height {
46  UbuntuNumberAnimation {
47  id: heightAnimation
48  duration: UbuntuAnimation.SnapDuration
49  }
50  }
51 
52  Flickable {
53  id: flickable
54 
55  anchors.fill: parent
56 
57  contentHeight: column.height
58  contentWidth: width
59 
60  Column {
61  id: column
62  width: parent.width
63 
64  // TODO: check if SDK ListItems could be used here
65  // and if not make them be useful since this is a quite common pattern
66 
67  AbstractButton {
68  id: backButton
69  objectName: "backButton"
70  width: parent.width
71  visible: department && !department.isRoot || false
72  height: itemHeight
73 
74  onClicked: root.goBackToParentClicked();
75 
76  Icon {
77  id: backImage
78  anchors {
79  verticalCenter: parent.verticalCenter
80  left: parent.left
81  leftMargin: units.gu(2)
82  }
83  name: "back"
84  height: units.gu(2)
85  width: height
86  color: root.foregroundColor
87  }
88 
89  Label {
90  anchors {
91  verticalCenter: parent.verticalCenter
92  left: backImage.right
93  leftMargin: units.gu(0.5)
94  }
95  text: department ? department.parentLabel : ""
96  color: root.foregroundColor
97  }
98 
99  Rectangle {
100  anchors {
101  bottom: parent.bottom
102  left: parent.left
103  right: parent.right
104  leftMargin: units.gu(2)
105  rightMargin: units.gu(2)
106  }
107  color: root.foregroundColor
108  opacity: 0.2
109  height: units.dp(1)
110  }
111  }
112 
113  AbstractButton {
114  id: allButton
115  objectName: "allButton"
116  width: parent.width
117  visible: department && (!department.isRoot || (root.currentDepartment && !root.currentDepartment.isRoot && root.currentDepartment.parentDepartmentId == department.departmentId)) || false
118  height: itemHeight
119 
120  Label {
121  anchors {
122  verticalCenter: parent.verticalCenter
123  left: parent.left
124  leftMargin: units.gu(2)
125  }
126  text: department ? (department.allLabel != "" ? department.allLabel : department.label) : ""
127  font.bold: true
128  color: root.foregroundColor
129  }
130 
131  Rectangle {
132  anchors {
133  bottom: parent.bottom
134  left: parent.left
135  right: parent.right
136  leftMargin: units.gu(2)
137  rightMargin: units.gu(2)
138  }
139  color: root.foregroundColor
140  opacity: 0.2
141  height: units.dp(1)
142  }
143 
144  onClicked: root.allDepartmentClicked();
145  }
146 
147  Repeater {
148  model: department && department.loaded ? department : null
149  clip: true
150  delegate: AbstractButton {
151  objectName: root.objectName + "child" + index
152  height: root.itemHeight
153  width: root.width
154 
155  onClicked: root.enterDepartment(departmentId, hasChildren)
156 
157  Label {
158  anchors {
159  verticalCenter: parent.verticalCenter
160  left: parent.left
161  leftMargin: units.gu(2)
162  }
163  text: label
164  color: root.foregroundColor
165  }
166 
167  Icon {
168  anchors {
169  verticalCenter: parent.verticalCenter
170  right: parent.right
171  rightMargin: units.gu(2)
172  }
173  height: units.gu(2)
174  width: height
175  name: hasChildren ? "go-next" : "tick"
176  color: root.foregroundColor
177  visible: hasChildren || isActive
178  }
179 
180  Rectangle {
181  anchors {
182  bottom: parent.bottom
183  left: parent.left
184  right: parent.right
185  leftMargin: units.gu(2)
186  rightMargin: units.gu(2)
187  }
188  color: root.foregroundColor
189  opacity: 0.1
190  height: units.dp(1)
191  visible: index != department.count - 1
192  }
193  }
194  }
195  }
196  }
197 }