Unity 8
 All Classes Functions
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  // FIXME: For now we will enable led indicator support only for messaging indicator
49  // in the future we should export a led API insted of doing that,
50  Loader {
51  id: indicatorLed
52  // only load source Component if the icons contains the new message icon
53  source: (root.icons && (String(root.icons).indexOf("indicator-messages-new") != -1)) ? Qt.resolvedUrl("Indicators/IndicatorsLight.qml") : ""
54  }
55 
56  Item {
57  id: mainItems
58  anchors.centerIn: parent
59 
60  width: leftLabelItem.width + iconsItem.width + rightLabelItem.width
61  implicitHeight: units.gu(2)
62 
63  Label {
64  id: leftLabelItem
65  objectName: "leftLabel"
66 
67  anchors {
68  left: mainItems.left
69  verticalCenter: parent.verticalCenter
70  }
71  width: contentWidth > 0 ? contentWidth + units.gu(1) : 0
72  horizontalAlignment: Text.AlignHCenter
73 
74  opacity: 1.0
75  font.family: "Ubuntu"
76  fontSize: "medium"
77  color: root.color
78  Behavior on color { ColorAnimation { duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing } }
79  }
80 
81  Item {
82  id: iconsItem
83  objectName: "icons"
84 
85  width: iconRow.width > 0 ? iconRow.width + units.gu(1) : 0
86  anchors {
87  left: leftLabelItem.right
88  verticalCenter: parent.verticalCenter
89  }
90 
91  Row {
92  id: iconRow
93  anchors.centerIn: iconsItem
94  spacing: units.gu(1)
95 
96  Repeater {
97  id: iconRepeater
98  objectName: "iconRepeater"
99 
100  model: d.useFallbackIcon ? [ "image://theme/settings" ] : root.icons
101 
102  StatusIcon {
103  id: itemImage
104  objectName: "icon"+index
105  height: iconHeight
106  source: modelData
107  sets: ["status", "actions"]
108  color: root.color
109  Behavior on color { ColorAnimation { duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing } }
110 
111  opacity: {
112  if (!expanded) return 1.0;
113  if (!selected) return 0.6;
114  return 1.0;
115  }
116  Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing } }
117  }
118  }
119  }
120  }
121 
122  Label {
123  id: rightLabelItem
124  objectName: "rightLabel"
125 
126  anchors {
127  left: iconsItem.right
128  verticalCenter: parent.verticalCenter
129  }
130  width: contentWidth > 0 ? contentWidth + units.gu(1) : 0
131  horizontalAlignment: Text.AlignHCenter
132 
133  opacity: 1.0
134  font.family: "Ubuntu"
135  fontSize: "medium"
136  color: root.color
137  Behavior on color { ColorAnimation { duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing } }
138  }
139  }
140 
141  Label {
142  id: indicatorName
143  objectName: "indicatorName"
144 
145  anchors.top: mainItems.bottom
146  anchors.topMargin: units.gu(0.5)
147  anchors.horizontalCenter: parent.horizontalCenter
148  width: contentWidth > 0 ? contentWidth + units.gu(1) : 0
149 
150  text: title !== "" ? title : identifier
151  fontSize: "x-small"
152  horizontalAlignment: Text.AlignHCenter
153  opacity: 0
154  color: root.color
155  Behavior on color { ColorAnimation { duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing } }
156  }
157 
158  StateGroup {
159  id: d
160  property bool useFallbackIcon: false
161 
162  states: [
163  State {
164  name: "minimised"
165  when: !expanded && ((icons && icons.length > 0) || leftLabel !== "" || rightLabel !== "")
166  PropertyChanges { target: indicatorName; opacity: 0}
167  },
168 
169  State {
170  name: "minimised_fallback"
171  when: !expanded && (!icons || icons.length === 0) && leftLabel == "" && rightLabel == ""
172  PropertyChanges { target: indicatorName; opacity: 0}
173  PropertyChanges { target: d; useFallbackIcon: true }
174  },
175 
176  State {
177  name: "expanded"
178  PropertyChanges { target: indicatorName; visible: true; opacity: 1}
179  PropertyChanges { target: mainItems; anchors.verticalCenterOffset: -units.gu(1) }
180  },
181 
182  State {
183  name: "expanded_icon"
184  extend: "expanded"
185  when: expanded && (icons && icons.length > 0)
186  AnchorChanges { target: iconsItem; anchors.left: undefined; anchors.horizontalCenter: parent.horizontalCenter }
187  AnchorChanges { target: leftLabelItem; anchors.left: undefined; anchors.right: iconsItem.left }
188  PropertyChanges { target: leftLabelItem; opacity: 0 }
189  PropertyChanges { target: leftLabelItem; opacity: 0 }
190  PropertyChanges { target: rightLabelItem; opacity: 0 }
191  PropertyChanges { target: root; width: Math.max(units.gu(10), Math.max(iconsItem.width, indicatorName.width)) }
192  },
193 
194  State {
195  name: "expanded_fallback"
196  extend: "expanded"
197  when: expanded && (!icons || icons.length === 0) && leftLabel == "" && rightLabel == ""
198  PropertyChanges { target: d; useFallbackIcon: true }
199  AnchorChanges { target: iconsItem; anchors.left: undefined; anchors.horizontalCenter: parent.horizontalCenter }
200  AnchorChanges { target: leftLabelItem; anchors.left: undefined; anchors.right: iconsItem.left }
201  PropertyChanges { target: leftLabelItem; opacity: 0 }
202  PropertyChanges { target: leftLabelItem; opacity: 0 }
203  PropertyChanges { target: rightLabelItem; opacity: 0 }
204  PropertyChanges { target: root; width: Math.max(units.gu(10), Math.max(iconsItem.width, indicatorName.width)) }
205  },
206 
207  State {
208  name: "expanded_rightLabel"
209  extend: "expanded"
210  when: expanded && (!icons || icons.length === 0) && rightLabel !== ""
211  AnchorChanges { target: rightLabelItem; anchors.left: undefined; anchors.horizontalCenter: parent.horizontalCenter }
212  PropertyChanges { target: iconsItem; opacity: 0 }
213  PropertyChanges { target: leftLabelItem; opacity: 0 }
214  PropertyChanges { target: root; width: Math.max(units.gu(10), Math.max(rightLabelItem.width, indicatorName.width)) }
215  },
216 
217  State {
218  name: "expanded_leftLabel"
219  extend: "expanded"
220  when: expanded && (!icons || icons.length === 0) && leftLabel !== ""
221  AnchorChanges { target: leftLabelItem; anchors.left: undefined; anchors.horizontalCenter: parent.horizontalCenter }
222  PropertyChanges { target: iconsItem; opacity: 0 }
223  PropertyChanges { target: rightLabelItem; opacity: 0 }
224  PropertyChanges { target: root; width: Math.max(units.gu(10), Math.max(leftLabelItem.width, indicatorName.width)) }
225  }
226  ]
227 
228  transitions: [
229  Transition {
230  PropertyAction { target: d; property: "useFallbackIcon" }
231  AnchorAnimation {
232  targets: [ mainItems, iconsItem, leftLabelItem, rightLabelItem ]
233  duration: UbuntuAnimation.SnapDuration; easing: UbuntuAnimation.StandardEasing
234  }
235  PropertyAnimation {
236  targets: [ root, mainItems, iconsItem, leftLabelItem, rightLabelItem, indicatorName ]
237  properties: "width, opacity, anchors.verticalCenterOffset";
238  duration: UbuntuAnimation.SnapDuration; easing: UbuntuAnimation.StandardEasing
239  }
240  }
241  ]
242  }
243 
244  onRootActionStateChanged: {
245  if (rootActionState == undefined) {
246  title = "";
247  leftLabel = "";
248  rightLabel = "";
249  icons = undefined;
250  return;
251  }
252 
253  title = rootActionState.title ? rootActionState.title : "";
254  leftLabel = rootActionState.leftLabel ? rootActionState.leftLabel : "";
255  rightLabel = rootActionState.rightLabel ? rootActionState.rightLabel : "";
256  icons = rootActionState.icons;
257  }
258 }