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