← Back to branch summary

~mterry/unity8/power-button-on-lock

« back to all changes in this revision

Viewing changes to qml/Panel/IndicatorItem.qml

  • Committer: Michael Terry
  • Date: 2014-11-24 15:25:42 UTC
  • mfrom: (1368.1.82 unity8)
  • Revision ID: michael.terry@canonical.com-20141124152542-5cysva8ds3qfula6
Merge from trunk

Show diffs side-by-side

added added

removed removed

Lines of Context:
qml/Panel/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
}