← Back to branch summary

~popey/ubuntu-clock-app/update-icon

« back to all changes in this revision

Viewing changes to app/alarm/AlarmSettingsPage.qml

  • Committer: Tarmac
  • Author(s): Nekhelesh Ramananthan
  • Date: 2015-04-14 21:10:50 UTC
  • mfrom: (219.1.7 improve-setting-listitem)
  • Revision ID: tarmac-20150414211050-goo9snpbe3avfrm1
Made the expandable list item used in AlarmSettings.qml into a generic component to avoid code duplication and also polished its visual style (related to side anchors and tick to indicate selected setting).

Approved by Alan Pope , Ubuntu Phone Apps Jenkins Bot.

Show diffs side-by-side

added added

removed removed

Lines of Context:
app/alarm/AlarmSettingsPage.qml
116
116
                }
117
117
            }
118
118
 
119
 
            ListItem.Expandable {
 
119
            ExpandableListItem {
120
120
                id: _alarmDuration
121
121
 
122
 
                anchors {
123
 
                    left: parent.left
124
 
                    right: parent.right
125
 
                }
126
 
 
127
 
                collapseOnClick: true
128
 
                expandedHeight: _contentColumn.height + units.gu(1)
129
 
 
130
 
                Column {
131
 
                    id: _contentColumn
132
 
 
133
 
                    anchors {
134
 
                        left: parent.left
135
 
                        right: parent.right
136
 
                        margins: units.gu(-2)
137
 
                    }
138
 
 
139
 
                    Item {
140
 
                        width: parent.width
141
 
                        height: _alarmDuration.collapsedHeight
142
 
 
143
 
                        SubtitledListItem {
144
 
                            id: _header
145
 
                            text: i18n.tr("Silence after")
146
 
                            subText: i18n.tr("%1 minute", "%1 minutes", alarmSettings.duration).arg(alarmSettings.duration)
147
 
                            onClicked: _alarmDuration.expanded = true
148
 
 
149
 
                            Icon {
150
 
                                id: _upArrow
151
 
 
152
 
                                width: units.gu(2)
153
 
                                height: width
154
 
                                anchors.right: parent.right
155
 
                                anchors.rightMargin: units.gu(2)
156
 
                                anchors.verticalCenter: parent.verticalCenter
157
 
 
158
 
                                name: "go-down"
159
 
                                color: "Grey"
160
 
                                rotation: _alarmDuration.expanded ? 180 : 0
161
 
 
162
 
                                Behavior on rotation {
163
 
                                    UbuntuNumberAnimation {}
164
 
                                }
165
 
                            }
166
 
                        }
167
 
                    }
168
 
 
169
 
                    ListView {
170
 
                        id: _resultsList
171
 
 
172
 
                        interactive: false
173
 
                        model: durationModel
174
 
                        width: parent.width
175
 
                        height: units.gu(24)
176
 
 
177
 
                        delegate: ListItem.Standard {
178
 
                            text: model.text
179
 
                            onClicked: {
180
 
                                alarmSettings.duration = duration
181
 
                                _alarmDuration.expanded = false
182
 
                            }
183
 
                        }
 
122
                listViewHeight: units.gu(24)
 
123
                text: i18n.tr("Silence after")
 
124
                subText: i18n.tr("%1 minute", "%1 minutes", alarmSettings.duration).arg(alarmSettings.duration)
 
125
 
 
126
                model: durationModel
 
127
 
 
128
                delegate: ListItem.Standard {
 
129
                    text: model.text
 
130
                    onClicked: {
 
131
                        alarmSettings.duration = duration
 
132
                        _alarmDuration.expanded = false
 
133
                    }
 
134
 
 
135
                    Icon {
 
136
                        width: units.gu(2)
 
137
                        height: width
 
138
                        name: "ok"
 
139
                        visible: alarmSettings.duration === duration
 
140
                        anchors.right: parent.right
 
141
                        anchors.rightMargin: units.gu(2)
 
142
                        anchors.verticalCenter: parent.verticalCenter
184
143
                    }
185
144
                }
186
145
            }
187
146
 
188
 
            ListItem.Expandable {
 
147
            ExpandableListItem {
189
148
                id: _alarmSnooze
190
149
 
191
 
                anchors {
192
 
                    left: parent.left
193
 
                    right: parent.right
194
 
                }
195
 
 
196
 
                collapseOnClick: true
197
 
                expandedHeight: _snoozeContentColumn.height + units.gu(1)
198
 
 
199
 
                Column {
200
 
                    id: _snoozeContentColumn
201
 
 
202
 
                    anchors {
203
 
                        left: parent.left
204
 
                        right: parent.right
205
 
                        margins: units.gu(-2)
206
 
                    }
207
 
 
208
 
                    Item {
209
 
                        width: parent.width
210
 
                        height: _alarmSnooze.collapsedHeight
211
 
 
212
 
                        SubtitledListItem {
213
 
                            id: _snoozeHeader
214
 
                            text: i18n.tr("Snooze for")
215
 
                            subText: i18n.tr("%1 minute", "%1 minutes", alarmSettings.snoozeDuration).arg(alarmSettings.snoozeDuration)
216
 
                            onClicked: _alarmSnooze.expanded = true
217
 
 
218
 
                            Icon {
219
 
                                id: _snoozeUpArrow
220
 
 
221
 
                                width: units.gu(2)
222
 
                                height: width
223
 
                                anchors.right: parent.right
224
 
                                anchors.rightMargin: units.gu(2)
225
 
                                anchors.verticalCenter: parent.verticalCenter
226
 
 
227
 
                                name: "go-down"
228
 
                                color: "Grey"
229
 
                                rotation: _alarmSnooze.expanded ? 180 : 0
230
 
 
231
 
                                Behavior on rotation {
232
 
                                    UbuntuNumberAnimation {}
233
 
                                }
234
 
                            }
235
 
                        }
236
 
                    }
237
 
 
238
 
                    ListView {
239
 
                        id: _snoozeResultsList
240
 
 
241
 
                        interactive: false
242
 
                        model: snoozeModel
243
 
                        width: parent.width
244
 
                        height: units.gu(24)
245
 
 
246
 
                        delegate: ListItem.Standard {
247
 
                            text: model.text
248
 
                            onClicked: {
249
 
                                alarmSettings.snoozeDuration = duration
250
 
                                _alarmSnooze.expanded = false
251
 
                            }
252
 
                        }
 
150
                listViewHeight: units.gu(24)
 
151
                text: i18n.tr("Snooze for")
 
152
                subText: i18n.tr("%1 minute", "%1 minutes", alarmSettings.snoozeDuration).arg(alarmSettings.snoozeDuration)
 
153
 
 
154
                model: snoozeModel
 
155
 
 
156
                delegate: ListItem.Standard {
 
157
                    text: model.text
 
158
                    onClicked: {
 
159
                        alarmSettings.snoozeDuration = duration
 
160
                        _alarmSnooze.expanded = false
 
161
                    }
 
162
 
 
163
                    Icon {
 
164
                        width: units.gu(2)
 
165
                        height: width
 
166
                        name: "ok"
 
167
                        visible: alarmSettings.snoozeDuration === duration
 
168
                        anchors.right: parent.right
 
169
                        anchors.rightMargin: units.gu(2)
 
170
                        anchors.verticalCenter: parent.verticalCenter
253
171
                    }
254
172
                }
255
173
            }