← Back to branch summary

~vthompson/ubuntu-weather-app/reboot-day-details-width

« back to all changes in this revision

Viewing changes to app/components/HomeTempInfo.qml

* Implement extra info expandable for today info
* Add autopilot test for expanding the today info. Fixes: https://bugs.launchpad.net/bugs/1478255, https://bugs.launchpad.net/bugs/1496422.

Approved by Victor Thompson, Ubuntu Phone Apps Jenkins Bot.

Show diffs side-by-side

added added

removed removed

Lines of Context:
app/components/HomeTempInfo.qml
19
19
import QtQuick 2.4
20
20
import Ubuntu.Components 1.2
21
21
 
22
 
 
23
 
Column {
 
22
Item {
 
23
    id: homeTempInfoItem
24
24
    anchors {
25
25
        left: parent.left
26
26
        right: parent.right
27
27
    }
28
 
    spacing: units.gu(1)
29
 
 
30
 
    property alias description: descriptionLabel.text
31
 
    property alias high: highLabel.text
32
 
    property alias low: lowLabel.text
 
28
    clip: true
 
29
    height: collapsedHeight
 
30
    objectName: "homeTempInfo"
 
31
    state: "normal"
 
32
    states: [
 
33
        State {
 
34
            name: "normal"
 
35
            PropertyChanges {
 
36
                target: homeTempInfoItem
 
37
                height: collapsedHeight
 
38
            }
 
39
            PropertyChanges {
 
40
                target: expandedInfo
 
41
                opacity: 0
 
42
            }
 
43
        },
 
44
        State {
 
45
            name: "expanded"
 
46
            PropertyChanges {
 
47
                target: homeTempInfoItem
 
48
                height: expandedHeight
 
49
            }
 
50
            PropertyChanges {
 
51
                target: expandedInfo
 
52
                opacity: 1
 
53
            }
 
54
        }
 
55
    ]
 
56
    transitions: [
 
57
        Transition {
 
58
            from: "normal"
 
59
            to: "expanded"
 
60
            SequentialAnimation {
 
61
                ScriptAction {
 
62
                    script: expandedInfo.active = true
 
63
                }
 
64
                NumberAnimation {
 
65
                    easing.type: Easing.InOutQuad
 
66
                    properties: "height,opacity"
 
67
                }
 
68
            }
 
69
        },
 
70
        Transition {
 
71
            from: "expanded"
 
72
            to: "normal"
 
73
            SequentialAnimation {
 
74
                NumberAnimation {
 
75
                    easing.type: Easing.InOutQuad
 
76
                    properties: "height,opacity"
 
77
                }
 
78
                ScriptAction {
 
79
                    script: expandedInfo.active = false
 
80
                }
 
81
            }
 
82
        }
 
83
    ]
 
84
 
 
85
    property int collapsedHeight: units.gu(14)
 
86
    property int expandedHeight: collapsedHeight + units.gu(4) + (expandedInfo.item ? expandedInfo.item.height : 0)
 
87
 
 
88
    property var modelData
 
89
 
33
90
    property alias now: nowLabel.text
34
91
 
35
 
    Label {
36
 
        font.weight: Font.Light
37
 
        fontSize: "small"
38
 
        text: i18n.tr("Today")
39
 
    }
40
 
 
41
 
    Label {
42
 
        id: descriptionLabel
43
 
        font.capitalization: Font.Capitalize
44
 
        font.weight: Font.Normal
45
 
        fontSize: "large"
46
 
    }
47
 
 
48
 
    Row {
49
 
        spacing: units.gu(2)
 
92
    Column {
 
93
        id: labelColumn
 
94
        anchors {
 
95
            left: parent.left
 
96
            right: parent.right
 
97
        }
 
98
        spacing: units.gu(1)
50
99
 
51
100
        Label {
52
 
            id: nowLabel
53
 
            color: UbuntuColors.orange
54
 
            font.pixelSize: units.gu(8)
55
101
            font.weight: Font.Light
56
 
            height: units.gu(8)
57
 
            verticalAlignment: Text.AlignBottom  // AlignBottom seems to put it at the top?
58
 
        }
59
 
 
60
 
        Column {
61
 
            Label {
62
 
                id: lowLabel
63
 
                font.weight: Font.Light
64
 
                fontSize: "medium"
65
 
            }
66
 
 
67
 
            Label {
68
 
                id: highLabel
69
 
                font.weight: Font.Light
70
 
                fontSize: "medium"
71
 
            }
72
 
        }
 
102
            fontSize: "small"
 
103
            text: i18n.tr("Today")
 
104
        }
 
105
 
 
106
        Label {
 
107
            id: descriptionLabel
 
108
            font.capitalization: Font.Capitalize
 
109
            font.weight: Font.Normal
 
110
            fontSize: "large"
 
111
            text: modelData.condition
 
112
        }
 
113
 
 
114
        Row {
 
115
            spacing: units.gu(2)
 
116
 
 
117
            Label {
 
118
                id: nowLabel
 
119
                color: UbuntuColors.orange
 
120
                font.pixelSize: units.gu(8)
 
121
                font.weight: Font.Light
 
122
                height: units.gu(8)
 
123
                verticalAlignment: Text.AlignBottom  // AlignBottom seems to put it at the top?
 
124
            }
 
125
 
 
126
            Column {
 
127
                Label {
 
128
                    id: lowLabel
 
129
                    font.weight: Font.Light
 
130
                    fontSize: "medium"
 
131
                    text: modelData.low
 
132
                }
 
133
 
 
134
                Label {
 
135
                    id: highLabel
 
136
                    font.weight: Font.Light
 
137
                    fontSize: "medium"
 
138
                    text: modelData.high
 
139
                }
 
140
            }
 
141
        }
 
142
    }
 
143
 
 
144
    Loader {
 
145
        id: expandedInfo
 
146
        active: false
 
147
        anchors {
 
148
            left: parent.left
 
149
            leftMargin: units.gu(2)
 
150
            right: parent.right
 
151
            rightMargin: units.gu(2)
 
152
            top: labelColumn.bottom
 
153
            topMargin: units.gu(2)
 
154
        }
 
155
        asynchronous: true
 
156
        opacity: 0
 
157
        source: "DayDelegateExtraInfo.qml"
 
158
 
 
159
        property var modelData: {
 
160
            var tmp = ({});
 
161
 
 
162
            // Remove the condition only for modelData
 
163
            // as it is needed in todayData in the Column above
 
164
            if (todayData) {
 
165
                tmp = todayData;
 
166
                tmp.condition = "";
 
167
            }
 
168
 
 
169
            return tmp;
 
170
        }
 
171
    }
 
172
 
 
173
    MouseArea {
 
174
        anchors {
 
175
            fill: parent
 
176
        }
 
177
        onClicked: {
 
178
            parent.state = parent.state === "normal" ? "expanded" : "normal"
 
179
            // -2 as this is in header (not a delegate) and needs a fake index
 
180
            locationPages.collapseOtherDelegates(-2)
 
181
        }
 
182
    }
 
183
 
 
184
    Behavior on height {
 
185
        NumberAnimation {
 
186
            easing.type: Easing.InOutQuad
 
187
        }
 
188
    }
 
189
 
 
190
    Component.onCompleted: {
 
191
        locationPages.collapseOtherDelegates.connect(function(otherIndex) {
 
192
            // -2 as this is in header (not a delegate) and needs a fake index
 
193
            if (homeTempInfoItem && typeof index !== "undefined" && otherIndex !== -2) {
 
194
                state = "normal"
 
195
            }
 
196
        });
73
197
    }
74
198
}
 
199