Unity 8
IndicatorItem.qml
1 /*
2  * Copyright 2013-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 Lesser 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 Lesser General Public License for more details.
12  *
13  * You should have received a copy of the GNU Lesser 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 1.1
19 import Ubuntu.Settings.Components 0.1
20 import "Indicators"
21 
22 IndicatorDelegate {
23  id: root
24 
25  property string identifier
26  property string title: indicatorName.text
27  property alias leftLabel: leftLabelItem.text
28  property alias rightLabel: rightLabelItem.text
29  property var icons: undefined
30  property bool expanded: false
31  property bool selected: false
32  property real iconHeight: units.gu(2)
33  readonly property color color: {
34  if (!expanded) return "#ededed";
35  if (!selected) return "#4c4c4c";
36  return "#ededed";
37  }
38 
39  signal clicked()
40 
41  implicitWidth: mainItems.width
42 
43  MouseArea {
44  anchors.fill: parent
45  onClicked: parent.clicked()
46  }
47 
48  Item {
49  id: mainItems
50  anchors.centerIn: parent
51 
52  width: leftLabelItem.width + iconsItem.width + rightLabelItem.width
53  implicitHeight: units.gu(2)
54 
55  Label {
56  id: leftLabelItem
57  objectName: "leftLabel"
58 
59  anchors {
60  left: mainItems.left
61  verticalCenter: parent.verticalCenter
62  }
63  width: contentWidth > 0 ? contentWidth + units.gu(1) : 0
64  horizontalAlignment: Text.AlignHCenter
65 
66  opacity: 1.0
67  font.family: "Ubuntu"
68  fontSize: "medium"
69  color: root.color
70  Behavior on color { ColorAnimation { duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing } }
71  }
72 
73  Item {
74  id: iconsItem
75  objectName: "icons"
76 
77  width: iconRow.width > 0 ? iconRow.width + units.gu(1) : 0
78  anchors {
79  left: leftLabelItem.right
80  verticalCenter: parent.verticalCenter
81  }
82 
83  Row {
84  id: iconRow
85  anchors.centerIn: iconsItem
86  spacing: units.gu(1)
87 
88  Repeater {
89  id: iconRepeater
90  objectName: "iconRepeater"
91 
92  model: d.useFallbackIcon ? [ "image://theme/settings" ] : root.icons
93 
94  Icon {
95  id: itemImage
96  objectName: "icon"+index
97  height: iconHeight
98  source: modelData
99  color: root.color
100  Behavior on color { ColorAnimation { duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing } }
101 
102  opacity: {
103  if (!expanded) return 1.0;
104  if (!selected) return 0.6;
105  return 1.0;
106  }
107  Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing } }
108  }
109  }
110  }
111  }
112 
113  Label {
114  id: rightLabelItem
115  objectName: "rightLabel"
116 
117  anchors {
118  left: iconsItem.right
119  verticalCenter: parent.verticalCenter
120  }
121  width: contentWidth > 0 ? contentWidth + units.gu(1) : 0
122  horizontalAlignment: Text.AlignHCenter
123 
124  opacity: 1.0
125  font.family: "Ubuntu"
126  fontSize: "medium"
127  color: root.color
128  Behavior on color { ColorAnimation { duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing } }
129  }
130  }
131 
132  Label {
133  id: indicatorName
134  objectName: "indicatorName"
135 
136  anchors.top: mainItems.bottom
137  anchors.topMargin: units.gu(0.5)
138  anchors.horizontalCenter: parent.horizontalCenter
139  width: contentWidth > 0 ? contentWidth + units.gu(1) : 0
140 
141  text: title !== "" ? title : identifier
142  fontSize: "x-small"
143  horizontalAlignment: Text.AlignHCenter
144  opacity: 0
145  color: root.color
146  Behavior on color { ColorAnimation { duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing } }
147  }
148 
149  StateGroup {
150  id: d
151  property bool useFallbackIcon: false
152 
153  states: [
154  State {
155  name: "minimised"
156  when: !expanded && ((icons && icons.length > 0) || leftLabel !== "" || rightLabel !== "")
157  PropertyChanges { target: indicatorName; opacity: 0}
158  },
159 
160  State {
161  name: "minimised_fallback"
162  when: !expanded && (!icons || icons.length === 0) && leftLabel == "" && rightLabel == ""
163  PropertyChanges { target: indicatorName; opacity: 0}
164  PropertyChanges { target: d; useFallbackIcon: true }
165  },
166 
167  State {
168  name: "expanded"
169  PropertyChanges { target: indicatorName; visible: true; opacity: 1}
170  PropertyChanges { target: mainItems; anchors.verticalCenterOffset: -units.gu(1) }
171  },
172 
173  State {
174  name: "expanded_icon"
175  extend: "expanded"
176  when: expanded && (icons && icons.length > 0)
177  AnchorChanges { target: iconsItem; anchors.left: undefined; anchors.horizontalCenter: parent.horizontalCenter }
178  AnchorChanges { target: leftLabelItem; anchors.left: undefined; anchors.right: iconsItem.left }
179  PropertyChanges { target: leftLabelItem; opacity: 0 }
180  PropertyChanges { target: leftLabelItem; opacity: 0 }
181  PropertyChanges { target: rightLabelItem; opacity: 0 }
182  PropertyChanges { target: root; width: Math.max(units.gu(10), Math.max(iconsItem.width, indicatorName.width)) }
183  },
184 
185  State {
186  name: "expanded_fallback"
187  extend: "expanded"
188  when: expanded && (!icons || icons.length === 0) && leftLabel == "" && rightLabel == ""
189  PropertyChanges { target: d; useFallbackIcon: true }
190  AnchorChanges { target: iconsItem; anchors.left: undefined; anchors.horizontalCenter: parent.horizontalCenter }
191  AnchorChanges { target: leftLabelItem; anchors.left: undefined; anchors.right: iconsItem.left }
192  PropertyChanges { target: leftLabelItem; opacity: 0 }
193  PropertyChanges { target: leftLabelItem; opacity: 0 }
194  PropertyChanges { target: rightLabelItem; opacity: 0 }
195  PropertyChanges { target: root; width: Math.max(units.gu(10), Math.max(iconsItem.width, indicatorName.width)) }
196  },
197 
198  State {
199  name: "expanded_rightLabel"
200  extend: "expanded"
201  when: expanded && (!icons || icons.length === 0) && rightLabel !== ""
202  AnchorChanges { target: rightLabelItem; anchors.left: undefined; anchors.horizontalCenter: parent.horizontalCenter }
203  PropertyChanges { target: iconsItem; opacity: 0 }
204  PropertyChanges { target: leftLabelItem; opacity: 0 }
205  PropertyChanges { target: root; width: Math.max(units.gu(10), Math.max(rightLabelItem.width, indicatorName.width)) }
206  },
207 
208  State {
209  name: "expanded_leftLabel"
210  extend: "expanded"
211  when: expanded && (!icons || icons.length === 0) && leftLabel !== ""
212  AnchorChanges { target: leftLabelItem; anchors.left: undefined; anchors.horizontalCenter: parent.horizontalCenter }
213  PropertyChanges { target: iconsItem; opacity: 0 }
214  PropertyChanges { target: rightLabelItem; opacity: 0 }
215  PropertyChanges { target: root; width: Math.max(units.gu(10), Math.max(leftLabelItem.width, indicatorName.width)) }
216  }
217  ]
218 
219  transitions: [
220  Transition {
221  PropertyAction { target: d; property: "useFallbackIcon" }
222  AnchorAnimation {
223  targets: [ mainItems, iconsItem, leftLabelItem, rightLabelItem ]
224  duration: UbuntuAnimation.SnapDuration; easing: UbuntuAnimation.StandardEasing
225  }
226  PropertyAnimation {
227  targets: [ root, mainItems, iconsItem, leftLabelItem, rightLabelItem, indicatorName ]
228  properties: "width, opacity, anchors.verticalCenterOffset";
229  duration: UbuntuAnimation.SnapDuration; easing: UbuntuAnimation.StandardEasing
230  }
231  }
232  ]
233  }
234 
235  onRootActionStateChanged: {
236  if (rootActionState == undefined) {
237  title = "";
238  leftLabel = "";
239  rightLabel = "";
240  icons = undefined;
241  return;
242  }
243 
244  title = rootActionState.title ? rootActionState.title : "";
245  leftLabel = rootActionState.leftLabel ? rootActionState.leftLabel : "";
246  rightLabel = rootActionState.rightLabel ? rootActionState.rightLabel : "";
247  icons = rootActionState.icons;
248  }
249 }