← Back to branch summary

~vthompson/music-app/remix-empty-states-001

« back to all changes in this revision

Viewing changes to common/SongsPage.qml

* Add support for CardView in AlbumsPage.qml
* Add support for header property in CardView.qml
* Add BlurredHeader.qml
* Make AlbumsPage.qml and SongsPage.qml use BlurredHeader.qml.

Approved by Victor Thompson, Ubuntu Phone Apps Jenkins Bot.

Show diffs side-by-side

added added

removed removed

Lines of Context:
common/SongsPage.qml
99
99
        model: isAlbum ? songsModel : albumTracksModel.model
100
100
        objectName: "songspage-listview"
101
101
        width: parent.width
102
 
        header: ListItem.Standard {
103
 
            id: albumInfo
104
 
            height: albumArtist.visible ? units.gu(33) : units.gu(30)
105
 
 
106
 
            BlurredBackground {
107
 
                id: blurredBackground
108
 
                height: parent.height
109
 
                art: coversImage.covers.length > 0
110
 
                     ? (coversImage.covers[0].art !== undefined
111
 
                        ? coversImage.covers[0].art
112
 
                        : decodeURIComponent("image://albumart/artist=" + coversImage.covers[0].author + "&album=" + coversImage.covers[0].album))
113
 
                     : Qt.resolvedUrl("../images/music-app-cover@30.png")
114
 
            }
115
 
 
116
 
            CoverGrid {
117
 
                id: coversImage
118
 
                anchors {
119
 
                    top: parent.top
120
 
                    left: parent.left
121
 
                    topMargin: units.gu(3)
122
 
                    bottomMargin: units.gu(2)
123
 
                    leftMargin: units.gu(2)
124
 
                    rightMargin: units.gu(2)
125
 
                }
126
 
                covers: songStackPage.covers
127
 
                size: units.gu(18)
128
 
            }
129
 
 
130
 
            Label {
131
 
                id: albumLabel
132
 
                wrapMode: Text.NoWrap
133
 
                maximumLineCount: 1
134
 
                fontSize: "x-large"
135
 
                color: styleMusic.common.music
136
 
                anchors {
137
 
                    top: coversImage.bottom
138
 
                    topMargin: units.gu(1)
139
 
                    left: coversImage.left
140
 
                    right: parent.right
141
 
                    rightMargin: units.gu(2)
142
 
                }
143
 
                elide: Text.ElideRight
144
 
                text: line2
145
 
            }
146
 
 
147
 
            Label {
148
 
                id: albumArtist
149
 
                objectName: "songsPageHeaderAlbumArtist"
150
 
                wrapMode: Text.NoWrap
151
 
                maximumLineCount: 1
152
 
                fontSize: "small"
153
 
                color: styleMusic.common.subtitle
154
 
                visible: text !== i18n.tr("Playlist") &&
155
 
                         text !== i18n.tr("Genre")
156
 
                anchors {
157
 
                    top: albumLabel.bottom
158
 
                    topMargin: units.gu(0.75)
159
 
                    left: coversImage.left
160
 
                    right: parent.right
161
 
                    rightMargin: units.gu(2)
162
 
                }
163
 
                elide: Text.ElideRight
164
 
                text: line1
165
 
            }
166
 
 
167
 
            Label {
168
 
                id: albumYear
169
 
                wrapMode: Text.NoWrap
170
 
                maximumLineCount: 1
171
 
                fontSize: "small"
172
 
                color: styleMusic.common.subtitle
173
 
                anchors {
174
 
                    top: albumArtist.visible ? albumArtist.bottom
175
 
                                             : albumLabel.bottom
176
 
                    topMargin: units.gu(1)
177
 
                    left: coversImage.left
178
 
                    right: parent.right
179
 
                    rightMargin: units.gu(2)
180
 
                }
181
 
                elide: Text.ElideRight
182
 
                text: isAlbum && line1 !== i18n.tr("Genre") ? year + " | " + i18n.tr("%1 song", "%1 songs", albumtrackslist.count).arg(albumtrackslist.count)
183
 
                                                   : i18n.tr("%1 song", "%1 songs", albumtrackslist.count).arg(albumtrackslist.count)
184
 
 
185
 
            }
186
 
 
187
 
            // Shuffle
188
 
            Button {
189
 
                id: shuffleRow
190
 
                anchors {
191
 
                    bottom: queueAllRow.top
192
 
                    bottomMargin: units.gu(2)
193
 
                    left: coversImage.right
194
 
                    leftMargin: units.gu(2)
195
 
                }
196
 
                strokeColor: UbuntuColors.green
197
 
                height: units.gu(4)
198
 
                width: units.gu(15)
199
 
                Text {
200
 
                    anchors {
201
 
                        centerIn: parent
202
 
                    }
203
 
                    color: "white"
204
 
                    text: i18n.tr("Shuffle")
205
 
                }
206
 
                MouseArea {
207
 
                    anchors.fill: parent
208
 
                    onClicked: {
209
 
                        shuffleModel(albumtrackslist.model)  // play track
210
 
 
211
 
                        if (isAlbum && songStackPage.line1 !== i18n.tr("Genre")) {
212
 
                            Library.addRecent(songStackPage.line2, songStackPage.line1, songStackPage.covers[0], songStackPage.line2, "album")
213
 
                            mainView.hasRecent = true
214
 
                            recentModel.filterRecent()
215
 
                        } else if (songStackPage.line1 === i18n.tr("Playlist")) {
216
 
                            Library.addRecent(songStackPage.line2, "Playlist", songStackPage.covers[0], songStackPage.line2, "playlist")
217
 
                            mainView.hasRecent = true
218
 
                            recentModel.filterRecent()
219
 
                        }
220
 
                    }
221
 
                }
222
 
            }
223
 
 
224
 
            // Queue
225
 
            Button {
226
 
                id: queueAllRow
227
 
                anchors {
228
 
                    bottom: playRow.top
229
 
                    bottomMargin: units.gu(2)
230
 
                    left: coversImage.right
231
 
                    leftMargin: units.gu(2)
232
 
                }
233
 
                strokeColor: UbuntuColors.green
234
 
                height: units.gu(4)
235
 
                width: units.gu(15)
236
 
                Text {
237
 
                    anchors {
238
 
                        centerIn: parent
239
 
                    }
240
 
                    color: "white"
241
 
                    text: i18n.tr("Queue all")
242
 
                }
243
 
                MouseArea {
244
 
                    anchors.fill: parent
245
 
                    onClicked: {
246
 
                        addQueueFromModel(albumtrackslist.model)
247
 
                    }
248
 
                }
249
 
            }
250
 
 
251
 
            // Play
252
 
            Button {
253
 
                id: playRow
254
 
                anchors {
255
 
                    bottom: coversImage.bottom
256
 
                    left: coversImage.right
257
 
                    leftMargin: units.gu(2)
258
 
                }
259
 
                color: UbuntuColors.green
260
 
                height: units.gu(4)
261
 
                width: units.gu(15)
262
 
                text: i18n.tr("Play all")
263
 
                MouseArea {
264
 
                    anchors.fill: parent
265
 
                    onClicked: {
266
 
                        trackClicked(albumtrackslist.model, 0)  // play track
267
 
 
268
 
                        if (isAlbum && songStackPage.line1 !== i18n.tr("Genre")) {
269
 
                            Library.addRecent(songStackPage.line2, songStackPage.line1, songStackPage.covers[0], songStackPage.line2, "album")
270
 
                            mainView.hasRecent = true
271
 
                            recentModel.filterRecent()
272
 
                        } else if (songStackPage.line1 === i18n.tr("Playlist")) {
273
 
                            Library.addRecent(songStackPage.line2, "Playlist", songStackPage.covers[0], songStackPage.line2, "playlist")
274
 
                            mainView.hasRecent = true
275
 
                            recentModel.filterRecent()
276
 
                        }
277
 
                    }
 
102
        header: BlurredHeader {
 
103
            rightColumn: Column {
 
104
                spacing: units.gu(2)
 
105
                Button {
 
106
                    id: shuffleRow
 
107
                    height: units.gu(4)
 
108
                    strokeColor: UbuntuColors.green
 
109
                    width: units.gu(15)
 
110
                    Text {
 
111
                        anchors {
 
112
                            centerIn: parent
 
113
                        }
 
114
                        color: "white"
 
115
                        text: i18n.tr("Shuffle")
 
116
                    }
 
117
                    MouseArea {
 
118
                        anchors.fill: parent
 
119
                        onClicked: {
 
120
                            shuffleModel(albumtrackslist.model)  // play track
 
121
 
 
122
                            if (isAlbum && songStackPage.line1 !== i18n.tr("Genre")) {
 
123
                                Library.addRecent(songStackPage.line2, songStackPage.line1, songStackPage.covers[0], songStackPage.line2, "album")
 
124
                                mainView.hasRecent = true
 
125
                                recentModel.filterRecent()
 
126
                            } else if (songStackPage.line1 === i18n.tr("Playlist")) {
 
127
                                Library.addRecent(songStackPage.line2, "Playlist", songStackPage.covers[0], songStackPage.line2, "playlist")
 
128
                                mainView.hasRecent = true
 
129
                                recentModel.filterRecent()
 
130
                            }
 
131
                        }
 
132
                    }
 
133
                }
 
134
                Button {
 
135
                    id: queueAllRow
 
136
                    height: units.gu(4)
 
137
                    strokeColor: UbuntuColors.green
 
138
                    width: units.gu(15)
 
139
                    Text {
 
140
                        anchors {
 
141
                            centerIn: parent
 
142
                        }
 
143
                        color: "white"
 
144
                        text: i18n.tr("Queue all")
 
145
                    }
 
146
                    MouseArea {
 
147
                        anchors.fill: parent
 
148
                        onClicked: addQueueFromModel(albumtrackslist.model)
 
149
                    }
 
150
                }
 
151
                Button {
 
152
                    id: playRow
 
153
                    color: UbuntuColors.green
 
154
                    height: units.gu(4)
 
155
                    text: i18n.tr("Play all")
 
156
                    width: units.gu(15)
 
157
                    MouseArea {
 
158
                        anchors.fill: parent
 
159
                        onClicked: {
 
160
                            trackClicked(albumtrackslist.model, 0)  // play track
 
161
 
 
162
                            if (isAlbum && songStackPage.line1 !== i18n.tr("Genre")) {
 
163
                                Library.addRecent(songStackPage.line2, songStackPage.line1, songStackPage.covers[0], songStackPage.line2, "album")
 
164
                                mainView.hasRecent = true
 
165
                                recentModel.filterRecent()
 
166
                            } else if (songStackPage.line1 === i18n.tr("Playlist")) {
 
167
                                Library.addRecent(songStackPage.line2, "Playlist", songStackPage.covers[0], songStackPage.line2, "playlist")
 
168
                                mainView.hasRecent = true
 
169
                                recentModel.filterRecent()
 
170
                            }
 
171
                        }
 
172
                    }
 
173
                }
 
174
            }
 
175
            coverSources: songStackPage.covers
 
176
            height: songStackPage.line1 !== i18n.tr("Playlist") &&
 
177
                    songStackPage.line1 !== i18n.tr("Genre") ?
 
178
                        units.gu(33) : units.gu(30)
 
179
            bottomColumn: Column {
 
180
                Label {
 
181
                    id: albumLabel
 
182
                    anchors {
 
183
                        left: parent.left
 
184
                        right: parent.right
 
185
                    }
 
186
                    color: styleMusic.common.music
 
187
                    elide: Text.ElideRight
 
188
                    fontSize: "x-large"
 
189
                    maximumLineCount: 1
 
190
                    text: line2
 
191
                    wrapMode: Text.NoWrap
 
192
                }
 
193
 
 
194
                Item {
 
195
                    height: units.gu(0.75)
 
196
                    width: parent.width
 
197
                    visible: albumArtist.visible
 
198
                }
 
199
 
 
200
                Label {
 
201
                    id: albumArtist
 
202
                    anchors {
 
203
                        left: parent.left
 
204
                        right: parent.right
 
205
                    }
 
206
                    color: styleMusic.common.subtitle
 
207
                    elide: Text.ElideRight
 
208
                    fontSize: "small"
 
209
                    maximumLineCount: 1
 
210
                    objectName: "songsPageHeaderAlbumArtist"
 
211
                    text: line1
 
212
                    visible: text !== i18n.tr("Playlist") &&
 
213
                             text !== i18n.tr("Genre")
 
214
                    wrapMode: Text.NoWrap
 
215
                }
 
216
 
 
217
                Item {
 
218
                    height: units.gu(1)
 
219
                    width: parent.width
 
220
                }
 
221
 
 
222
                Label {
 
223
                    id: albumYear
 
224
                    anchors {
 
225
                        left: parent.left
 
226
                        right: parent.right
 
227
                    }
 
228
                    color: styleMusic.common.subtitle
 
229
                    elide: Text.ElideRight
 
230
                    fontSize: "small"
 
231
                    maximumLineCount: 1
 
232
                    text: isAlbum && line1 !== i18n.tr("Genre") ? year + " | " + i18n.tr("%1 song", "%1 songs", albumtrackslist.count).arg(albumtrackslist.count)
 
233
                                                       : i18n.tr("%1 song", "%1 songs", albumtrackslist.count).arg(albumtrackslist.count)
 
234
                    wrapMode: Text.NoWrap
278
235
                }
279
236
            }
280
237
        }