Unity 8
IndicatorItem.qml
1 /*
2  * Copyright 2013-2016 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 QMenuModel 0.1
21 import "Indicators"
22 
23 IndicatorDelegate {
24  id: root
25 
26  property string identifier
27  property string title: indicatorName.text
28  property alias leftLabel: leftLabelItem.text
29  property alias rightLabel: rightLabelItem.text
30  property var icons: undefined
31  property bool expanded: false
32  property bool selected: false
33  property real iconHeight: units.gu(2)
34  readonly property color color: {
35  if (!expanded) return theme.palette.normal.backgroundText;
36  if (!selected) return theme.palette.disabled.backgroundText;
37  return theme.palette.normal.backgroundText;
38  }
39 
40  implicitWidth: mainItems.width
41 
42  MouseArea {
43  readonly property int stepUp: 1
44  readonly property int stepDown: -1
45 
46  anchors.fill: parent
47  acceptedButtons: Qt.MiddleButton
48  onClicked: {
49  if ((!expanded || selected) && secondaryAction.valid) {
50  secondaryAction.activate();
51  }
52  }
53  onWheel: {
54  if ((!expanded || selected) && scrollAction.valid) {
55  scrollAction.activate(wheel.angleDelta.y > 0 ? stepUp : stepDown);
56  }
57  }
58  }
59 
60  Item {
61  id: mainItems
62  anchors.centerIn: parent
63 
64  width: leftLabelItem.width + iconsItem.width + rightLabelItem.width
65  implicitHeight: units.gu(2)
66 
67  Label {
68  id: leftLabelItem
69  objectName: "leftLabel"
70 
71  anchors {
72  left: mainItems.left
73  verticalCenter: parent.verticalCenter
74  }
75  width: contentWidth > 0 ? contentWidth + units.gu(1) : 0
76  horizontalAlignment: Text.AlignHCenter
77 
78  opacity: 1.0
79  font.family: "Ubuntu"
80  fontSize: "medium"
81  font.weight: Font.Light
82  color: root.color
83  Behavior on color { ColorAnimation { duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing } }
84  }
85 
86  Item {
87  id: iconsItem
88  objectName: "icons"
89 
90  width: iconRow.width > 0 ? iconRow.width + units.gu(1) : 0
91  anchors {
92  left: leftLabelItem.right
93  verticalCenter: parent.verticalCenter
94  }
95 
96  Row {
97  id: iconRow
98  anchors.centerIn: iconsItem
99  spacing: units.gu(1)
100 
101  Repeater {
102  id: iconRepeater
103  objectName: "iconRepeater"
104 
105  model: d.useFallbackIcon ? [ "image://theme/settings" ] : root.icons
106 
107  Icon {
108  id: itemImage
109  objectName: "icon"+index
110  height: iconHeight
111  // FIXME Workaround for bug https://bugs.launchpad.net/ubuntu/+source/ubuntu-ui-toolkit/+bug/1421293
112  width: implicitWidth > 0 && implicitHeight > 0 ? (implicitWidth / implicitHeight * height) : implicitWidth;
113  source: modelData
114  color: root.color
115  Behavior on color { ColorAnimation { duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing } }
116  }
117  }
118  }
119  }
120 
121  Label {
122  id: rightLabelItem
123  objectName: "rightLabel"
124 
125  anchors {
126  left: iconsItem.right
127  verticalCenter: parent.verticalCenter
128  }
129  width: contentWidth > 0 ? contentWidth + units.gu(1) : 0
130  horizontalAlignment: Text.AlignHCenter
131 
132  opacity: 1.0
133  font.family: "Ubuntu"
134  fontSize: "medium"
135  font.weight: Font.Light
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  font.weight: Font.Light
153  horizontalAlignment: Text.AlignHCenter
154  opacity: 0
155  color: root.color
156  Behavior on color { ColorAnimation { duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing } }
157  }
158 
159  StateGroup {
160  states: [
161  State {
162  name: "minimised"
163  when: !expanded && ((icons && icons.length > 0) || leftLabel !== "" || rightLabel !== "")
164  PropertyChanges { target: indicatorName; opacity: 0}
165  },
166 
167  State {
168  name: "minimised_fallback"
169  when: !expanded && (!icons || icons.length === 0) && leftLabel == "" && rightLabel == ""
170  PropertyChanges { target: indicatorName; opacity: 0}
171  PropertyChanges { target: d; useFallbackIcon: true }
172  },
173 
174  State {
175  name: "expanded"
176  PropertyChanges { target: indicatorName; visible: true; opacity: 1}
177  PropertyChanges { target: mainItems; anchors.verticalCenterOffset: -units.gu(1) }
178  },
179 
180  State {
181  name: "expanded_icon"
182  extend: "expanded"
183  when: expanded && (icons && icons.length > 0)
184  AnchorChanges { target: iconsItem; anchors.left: undefined; anchors.horizontalCenter: parent.horizontalCenter }
185  AnchorChanges { target: leftLabelItem; anchors.left: undefined; anchors.right: iconsItem.left }
186  PropertyChanges { target: leftLabelItem; opacity: 0 }
187  PropertyChanges { target: leftLabelItem; opacity: 0 }
188  PropertyChanges { target: rightLabelItem; opacity: 0 }
189  PropertyChanges { target: root; width: Math.max(units.gu(10), Math.max(iconsItem.width, indicatorName.width)) }
190  },
191 
192  State {
193  name: "expanded_fallback"
194  extend: "expanded"
195  when: expanded && (!icons || icons.length === 0) && leftLabel == "" && rightLabel == ""
196  PropertyChanges { target: d; useFallbackIcon: true }
197  AnchorChanges { target: iconsItem; anchors.left: undefined; anchors.horizontalCenter: parent.horizontalCenter }
198  AnchorChanges { target: leftLabelItem; anchors.left: undefined; anchors.right: iconsItem.left }
199  PropertyChanges { target: leftLabelItem; opacity: 0 }
200  PropertyChanges { target: leftLabelItem; opacity: 0 }
201  PropertyChanges { target: rightLabelItem; opacity: 0 }
202  PropertyChanges { target: root; width: Math.max(units.gu(10), Math.max(iconsItem.width, indicatorName.width)) }
203  },
204 
205  State {
206  name: "expanded_rightLabel"
207  extend: "expanded"
208  when: expanded && (!icons || icons.length === 0) && rightLabel !== ""
209  AnchorChanges { target: rightLabelItem; anchors.left: undefined; anchors.horizontalCenter: parent.horizontalCenter }
210  PropertyChanges { target: iconsItem; opacity: 0 }
211  PropertyChanges { target: leftLabelItem; opacity: 0 }
212  PropertyChanges { target: root; width: Math.max(units.gu(10), Math.max(rightLabelItem.width, indicatorName.width)) }
213  },
214 
215  State {
216  name: "expanded_leftLabel"
217  extend: "expanded"
218  when: expanded && (!icons || icons.length === 0) && leftLabel !== ""
219  AnchorChanges { target: leftLabelItem; anchors.left: undefined; anchors.horizontalCenter: parent.horizontalCenter }
220  PropertyChanges { target: iconsItem; opacity: 0 }
221  PropertyChanges { target: rightLabelItem; opacity: 0 }
222  PropertyChanges { target: root; width: Math.max(units.gu(10), Math.max(leftLabelItem.width, indicatorName.width)) }
223  }
224  ]
225 
226  transitions: [
227  Transition {
228  PropertyAction { target: d; property: "useFallbackIcon" }
229  AnchorAnimation {
230  targets: [ mainItems, iconsItem, leftLabelItem, rightLabelItem ]
231  duration: UbuntuAnimation.SnapDuration; easing: UbuntuAnimation.StandardEasing
232  }
233  PropertyAnimation {
234  targets: [ root, mainItems, iconsItem, leftLabelItem, rightLabelItem, indicatorName ]
235  properties: "width, opacity, anchors.verticalCenterOffset";
236  duration: UbuntuAnimation.SnapDuration; easing: UbuntuAnimation.StandardEasing
237  }
238  }
239  ]
240  }
241 
242  rootActionState.onUpdated: {
243  if (rootActionState == undefined) {
244  title = "";
245  leftLabel = "";
246  rightLabel = "";
247  icons = undefined;
248  return;
249  }
250 
251  title = rootActionState.title ? rootActionState.title : rootActionState.accessibleName;
252  leftLabel = rootActionState.leftLabel ? rootActionState.leftLabel : "";
253  rightLabel = rootActionState.rightLabel ? rootActionState.rightLabel : "";
254  icons = rootActionState.icons;
255  }
256 
257  QtObject {
258  id: d
259 
260  property bool useFallbackIcon: false
261  property var shouldIndicatorBeShown: undefined
262 
263  onShouldIndicatorBeShownChanged: {
264  if (shouldIndicatorBeShown !== undefined) {
265  submenuAction.changeState(shouldIndicatorBeShown);
266  }
267  }
268  }
269 
270  UnityMenuAction {
271  id: secondaryAction
272  model: menuModel
273  index: 0
274  name: rootActionState.secondaryAction
275  }
276 
277  UnityMenuAction {
278  id: scrollAction
279  model: menuModel
280  index: 0
281  name: rootActionState.scrollAction
282  }
283 
284  UnityMenuAction {
285  id: submenuAction
286  model: menuModel
287  index: 0
288  name: rootActionState.submenuAction
289  }
290 
291  Binding {
292  target: d
293  property: "shouldIndicatorBeShown"
294  when: submenuAction.valid
295  value: root.selected && root.expanded
296  }
297 }