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.4
18 import Ubuntu.Components 1.3
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 "#ffffff";
35  if (!selected) return "#888888";
36  return "#ffffff";
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  font.weight: Font.Light
70  color: root.color
71  Behavior on color { ColorAnimation { duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing } }
72  }
73 
74  Item {
75  id: iconsItem
76  objectName: "icons"
77 
78  width: iconRow.width > 0 ? iconRow.width + units.gu(1) : 0
79  anchors {
80  left: leftLabelItem.right
81  verticalCenter: parent.verticalCenter
82  }
83 
84  Row {
85  id: iconRow
86  anchors.centerIn: iconsItem
87  spacing: units.gu(1)
88 
89  Repeater {
90  id: iconRepeater
91  objectName: "iconRepeater"
92 
93  model: d.useFallbackIcon ? [ "image://theme/settings" ] : root.icons
94 
95  Icon {
96  id: itemImage
97  objectName: "icon"+index
98  height: iconHeight
99  // FIXME Workaround for bug https://bugs.launchpad.net/ubuntu/+source/ubuntu-ui-toolkit/+bug/1421293
100  width: implicitWidth > 0 && implicitHeight > 0 ? (implicitWidth / implicitHeight * height) : implicitWidth;
101  source: modelData
102  color: root.color
103  Behavior on color { ColorAnimation { duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing } }
104 
105  opacity: {
106  if (!expanded) return 1.0;
107  if (!selected) return 0.6;
108  return 1.0;
109  }
110  Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing } }
111  }
112  }
113  }
114  }
115 
116  Label {
117  id: rightLabelItem
118  objectName: "rightLabel"
119 
120  anchors {
121  left: iconsItem.right
122  verticalCenter: parent.verticalCenter
123  }
124  width: contentWidth > 0 ? contentWidth + units.gu(1) : 0
125  horizontalAlignment: Text.AlignHCenter
126 
127  opacity: 1.0
128  font.family: "Ubuntu"
129  fontSize: "medium"
130  font.weight: Font.Light
131  color: root.color
132  Behavior on color { ColorAnimation { duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing } }
133  }
134  }
135 
136  Label {
137  id: indicatorName
138  objectName: "indicatorName"
139 
140  anchors.top: mainItems.bottom
141  anchors.topMargin: units.gu(0.5)
142  anchors.horizontalCenter: parent.horizontalCenter
143  width: contentWidth > 0 ? contentWidth + units.gu(1) : 0
144 
145  text: title !== "" ? title : identifier
146  fontSize: "x-small"
147  font.weight: Font.Light
148  horizontalAlignment: Text.AlignHCenter
149  opacity: 0
150  color: root.color
151  Behavior on color { ColorAnimation { duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing } }
152  }
153 
154  StateGroup {
155  id: d
156  property bool useFallbackIcon: false
157 
158  states: [
159  State {
160  name: "minimised"
161  when: !expanded && ((icons && icons.length > 0) || leftLabel !== "" || rightLabel !== "")
162  PropertyChanges { target: indicatorName; opacity: 0}
163  },
164 
165  State {
166  name: "minimised_fallback"
167  when: !expanded && (!icons || icons.length === 0) && leftLabel == "" && rightLabel == ""
168  PropertyChanges { target: indicatorName; opacity: 0}
169  PropertyChanges { target: d; useFallbackIcon: true }
170  },
171 
172  State {
173  name: "expanded"
174  PropertyChanges { target: indicatorName; visible: true; opacity: 1}
175  PropertyChanges { target: mainItems; anchors.verticalCenterOffset: -units.gu(1) }
176  },
177 
178  State {
179  name: "expanded_icon"
180  extend: "expanded"
181  when: expanded && (icons && icons.length > 0)
182  AnchorChanges { target: iconsItem; anchors.left: undefined; anchors.horizontalCenter: parent.horizontalCenter }
183  AnchorChanges { target: leftLabelItem; anchors.left: undefined; anchors.right: iconsItem.left }
184  PropertyChanges { target: leftLabelItem; opacity: 0 }
185  PropertyChanges { target: leftLabelItem; opacity: 0 }
186  PropertyChanges { target: rightLabelItem; opacity: 0 }
187  PropertyChanges { target: root; width: Math.max(units.gu(10), Math.max(iconsItem.width, indicatorName.width)) }
188  },
189 
190  State {
191  name: "expanded_fallback"
192  extend: "expanded"
193  when: expanded && (!icons || icons.length === 0) && leftLabel == "" && rightLabel == ""
194  PropertyChanges { target: d; useFallbackIcon: true }
195  AnchorChanges { target: iconsItem; anchors.left: undefined; anchors.horizontalCenter: parent.horizontalCenter }
196  AnchorChanges { target: leftLabelItem; anchors.left: undefined; anchors.right: iconsItem.left }
197  PropertyChanges { target: leftLabelItem; opacity: 0 }
198  PropertyChanges { target: leftLabelItem; opacity: 0 }
199  PropertyChanges { target: rightLabelItem; opacity: 0 }
200  PropertyChanges { target: root; width: Math.max(units.gu(10), Math.max(iconsItem.width, indicatorName.width)) }
201  },
202 
203  State {
204  name: "expanded_rightLabel"
205  extend: "expanded"
206  when: expanded && (!icons || icons.length === 0) && rightLabel !== ""
207  AnchorChanges { target: rightLabelItem; anchors.left: undefined; anchors.horizontalCenter: parent.horizontalCenter }
208  PropertyChanges { target: iconsItem; opacity: 0 }
209  PropertyChanges { target: leftLabelItem; opacity: 0 }
210  PropertyChanges { target: root; width: Math.max(units.gu(10), Math.max(rightLabelItem.width, indicatorName.width)) }
211  },
212 
213  State {
214  name: "expanded_leftLabel"
215  extend: "expanded"
216  when: expanded && (!icons || icons.length === 0) && leftLabel !== ""
217  AnchorChanges { target: leftLabelItem; anchors.left: undefined; anchors.horizontalCenter: parent.horizontalCenter }
218  PropertyChanges { target: iconsItem; opacity: 0 }
219  PropertyChanges { target: rightLabelItem; opacity: 0 }
220  PropertyChanges { target: root; width: Math.max(units.gu(10), Math.max(leftLabelItem.width, indicatorName.width)) }
221  }
222  ]
223 
224  transitions: [
225  Transition {
226  PropertyAction { target: d; property: "useFallbackIcon" }
227  AnchorAnimation {
228  targets: [ mainItems, iconsItem, leftLabelItem, rightLabelItem ]
229  duration: UbuntuAnimation.SnapDuration; easing: UbuntuAnimation.StandardEasing
230  }
231  PropertyAnimation {
232  targets: [ root, mainItems, iconsItem, leftLabelItem, rightLabelItem, indicatorName ]
233  properties: "width, opacity, anchors.verticalCenterOffset";
234  duration: UbuntuAnimation.SnapDuration; easing: UbuntuAnimation.StandardEasing
235  }
236  }
237  ]
238  }
239 
240  rootActionState.onUpdated: {
241  if (rootActionState == undefined) {
242  title = "";
243  leftLabel = "";
244  rightLabel = "";
245  icons = undefined;
246  return;
247  }
248 
249  title = rootActionState.title ? rootActionState.title : rootActionState.accessibleName;
250  leftLabel = rootActionState.leftLabel ? rootActionState.leftLabel : "";
251  rightLabel = rootActionState.rightLabel ? rootActionState.rightLabel : "";
252  icons = rootActionState.icons;
253  }
254 }