git.iko.soy/unity8
on d6bcfae help sign in
unity8/qml/Panel/IndicatorItem.qml
254 lines 10 kB history raw
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 */
17import QtQuick 2.4
18import Ubuntu.Components 1.3
19import Ubuntu.Settings.Components 0.1
20import "Indicators"
22IndicatorDelegate {
23 id: root
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 }
39 signal clicked()
41 implicitWidth: mainItems.width
43 MouseArea {
44 anchors.fill: parent
45 onClicked: parent.clicked()
46 }
48 Item {
49 id: mainItems
50 anchors.centerIn: parent
52 width: leftLabelItem.width + iconsItem.width + rightLabelItem.width
53 implicitHeight: units.gu(2)
55 Label {
56 id: leftLabelItem
57 objectName: "leftLabel"
59 anchors {
60 left: mainItems.left
61 verticalCenter: parent.verticalCenter
62 }
63 width: contentWidth > 0 ? contentWidth + units.gu(1) : 0
64 horizontalAlignment: Text.AlignHCenter
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 }
74 Item {
75 id: iconsItem
76 objectName: "icons"
78 width: iconRow.width > 0 ? iconRow.width + units.gu(1) : 0
79 anchors {
80 left: leftLabelItem.right
81 verticalCenter: parent.verticalCenter
82 }
84 Row {
85 id: iconRow
86 anchors.centerIn: iconsItem
87 spacing: units.gu(1)
89 Repeater {
90 id: iconRepeater
91 objectName: "iconRepeater"
93 model: d.useFallbackIcon ? [ "image://theme/settings" ] : root.icons
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 } }
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 }
116 Label {
117 id: rightLabelItem
118 objectName: "rightLabel"
120 anchors {
121 left: iconsItem.right
122 verticalCenter: parent.verticalCenter
123 }
124 width: contentWidth > 0 ? contentWidth + units.gu(1) : 0
125 horizontalAlignment: Text.AlignHCenter
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 }
136 Label {
137 id: indicatorName
138 objectName: "indicatorName"
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
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 }
154 StateGroup {
155 id: d
156 property bool useFallbackIcon: false
158 states: [
159 State {
160 name: "minimised"
161 when: !expanded && ((icons && icons.length > 0) || leftLabel !== "" || rightLabel !== "")
162 PropertyChanges { target: indicatorName; opacity: 0}
163 },
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 },
172 State {
173 name: "expanded"
174 PropertyChanges { target: indicatorName; visible: true; opacity: 1}
175 PropertyChanges { target: mainItems; anchors.verticalCenterOffset: -units.gu(1) }
176 },
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 },
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 },
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 },
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 ]
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 }
240 rootActionState.onUpdated: {
241 if (rootActionState == undefined) {
242 title = "";
243 leftLabel = "";
244 rightLabel = "";
245 icons = undefined;
246 return;
247 }
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 }