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