Commit 0ae5dd3e authored by Nate Graham's avatar Nate Graham

Playlist: adopt simpler and more compact track/disc numbering and playback indicator

Elisa's playlist items currently use a bunch of very complicated code to produce a large amount of whitespace to the left of the track/album numbers that contains only the playback indicator, and aligns the right edge of the album art with the right edge of the numbers. Unfortunately this results in a lot of wasted space in the very narrow space of the playlist, and many song titles are elided.

This MR changes the visual style to reduce the whitespace and replace the track/disc number indicator with the playback indicator for the currently playing song, saving a ton of space. Doing this allows the elimination of a great deal of complex and fragile layouting code.
parent 88c89bbe
......@@ -62,6 +62,8 @@ Item {
property int trackDelegateHeight: elisaTheme.layoutVerticalMargin + fontSize.height * 2
// END FIXME
property int playListAlbumArtSize: 70
property int coverImageSize: 180
property int contextCoverImageSize: 100
property int smallImageSize: 32
......
......@@ -44,33 +44,16 @@ Rectangle {
anchors.top: parent.top
// No bottom anchor so it can grow vertically
TextMetrics {
id: trackNumberSize
text: (99).toLocaleString(Qt.locale(), 'f', 0)
}
TextMetrics {
id: fakeDiscNumberSize
text: '/9'
}
spacing: elisaTheme.layoutHorizontalMargin
spacing: elisaTheme.layoutHorizontalMargin / 4
Image {
property int widthToTrackNumber: elisaTheme.playListDelegateHeight +
elisaTheme.layoutHorizontalMargin +
(trackNumberSize.boundingRect.width - trackNumberSize.boundingRect.x) +
(fakeDiscNumberSize.boundingRect.width - fakeDiscNumberSize.boundingRect.x)
Layout.preferredWidth: widthToTrackNumber
Layout.preferredHeight: widthToTrackNumber
Layout.preferredWidth: elisaTheme.playListAlbumArtSize
Layout.preferredHeight: elisaTheme.playListAlbumArtSize
Layout.margins: elisaTheme.layoutHorizontalMargin
source: (imageUrl != '' ? imageUrl : Qt.resolvedUrl(elisaTheme.defaultAlbumImage))
sourceSize.width: widthToTrackNumber
sourceSize.height: widthToTrackNumber
sourceSize.width: elisaTheme.playListAlbumArtSize
sourceSize.height: elisaTheme.playListAlbumArtSize
fillMode: Image.PreserveAspectFit
asynchronous: true
......
......@@ -101,13 +101,17 @@ FocusScope {
spacing: elisaTheme.layoutHorizontalMargin / 4
// Container for the play/pause icon and the track/disc label
Item {
id: playIconItem
TextMetrics {
id: fakeLabel
text: '99/9'
}
implicitHeight: elisaTheme.playListDelegateHeight
implicitWidth: elisaTheme.playListDelegateHeight
Layout.maximumWidth: elisaTheme.playListDelegateHeight
Layout.maximumHeight: elisaTheme.playListDelegateHeight
Layout.minimumWidth: fakeLabel.width
Layout.preferredWidth: fakeLabel.width
Layout.maximumWidth: fakeLabel.width
Layout.preferredHeight: elisaTheme.playListDelegateHeight
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
Layout.leftMargin: !LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin / 2 : 0
Layout.rightMargin: LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin / 2 : 0
......@@ -117,14 +121,11 @@ FocusScope {
anchors.centerIn: parent
visible: isPlaying === MediaPlayList.IsPlaying || isPlaying === MediaPlayList.IsPaused
source: (isPlaying === MediaPlayList.IsPlaying ?
Qt.resolvedUrl(elisaTheme.playingIndicatorIcon) : Qt.resolvedUrl(elisaTheme.pausedIndicatorIcon))
width: elisaTheme.smallControlButtonSize
height: elisaTheme.smallControlButtonSize
sourceSize.width: elisaTheme.smallControlButtonSize
sourceSize.height: elisaTheme.smallControlButtonSize
fillMode: Image.PreserveAspectFit
......@@ -136,119 +137,37 @@ FocusScope {
color: myPalette.highlightedText
}
}
}
Item {
id: fakeDiscNumberItem
visible: isValid && (!hasValidDiscNumber || isSingleDiscAlbum)
Layout.preferredWidth: (fakeDiscNumberSize.boundingRect.width - fakeDiscNumberSize.boundingRect.x) + (elisaTheme.layoutHorizontalMargin / 4)
Layout.minimumWidth: (fakeDiscNumberSize.boundingRect.width - fakeDiscNumberSize.boundingRect.x) + (elisaTheme.layoutHorizontalMargin / 4)
Layout.maximumWidth: (fakeDiscNumberSize.boundingRect.width - fakeDiscNumberSize.boundingRect.x) + (elisaTheme.layoutHorizontalMargin / 4)
TextMetrics {
id: fakeDiscNumberSize
text: '/9'
}
}
Label {
id: trackNumberLabel
horizontalAlignment: Text.AlignRight
text: trackNumber !== -1 ? Number(trackNumber).toLocaleString(Qt.locale(), 'f', 0) : ''
font.weight: (isPlaying ? Font.Bold : Font.Light)
color: simpleMode ? myPalette.highlightedText : myPalette.text
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
visible: isValid
Layout.preferredWidth: ((trackNumberSize.boundingRect.width - trackNumberSize.boundingRect.x) > (realTrackNumberSize.boundingRect.width - realTrackNumberSize.boundingRect.x) ? (trackNumberSize.boundingRect.width - trackNumberSize.boundingRect.x) : (realTrackNumberSize.boundingRect.width - realTrackNumberSize.boundingRect.x))
Layout.minimumWidth: ((trackNumberSize.boundingRect.width - trackNumberSize.boundingRect.x) > (realTrackNumberSize.boundingRect.width - realTrackNumberSize.boundingRect.x) ? (trackNumberSize.boundingRect.width - trackNumberSize.boundingRect.x) : (realTrackNumberSize.boundingRect.width - realTrackNumberSize.boundingRect.x))
Layout.maximumWidth: ((trackNumberSize.boundingRect.width - trackNumberSize.boundingRect.x) > (realTrackNumberSize.boundingRect.width - realTrackNumberSize.boundingRect.x) ? (trackNumberSize.boundingRect.width - trackNumberSize.boundingRect.x) : (realTrackNumberSize.boundingRect.width - realTrackNumberSize.boundingRect.x))
Layout.rightMargin: !LayoutMirroring.enabled ? (discNumber !== 0 && !isSingleDiscAlbum ?
0 : elisaTheme.layoutHorizontalMargin / 2) : 0
Layout.leftMargin: LayoutMirroring.enabled ? (discNumber !== 0 && !isSingleDiscAlbum ?
0 : elisaTheme.layoutHorizontalMargin / 2) : 0
TextMetrics {
id: trackNumberSize
text: (99).toLocaleString(Qt.locale(), 'f', 0)
}
TextMetrics {
id: realTrackNumberSize
text: Number(trackNumber).toLocaleString(Qt.locale(), 'f', 0)
}
}
Label {
horizontalAlignment: Text.AlignCenter
text: '/'
visible: isValid && discNumber !== 0 && !isSingleDiscAlbum
font.weight: (isPlaying ? Font.Bold : Font.Light)
color: simpleMode ? myPalette.highlightedText : myPalette.text
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
Layout.preferredWidth: (numberSeparatorSize.boundingRect.width - numberSeparatorSize.boundingRect.x)
Layout.minimumWidth: (numberSeparatorSize.boundingRect.width - numberSeparatorSize.boundingRect.x)
Layout.maximumWidth: (numberSeparatorSize.boundingRect.width - numberSeparatorSize.boundingRect.x)
TextMetrics {
id: numberSeparatorSize
text: '/'
visible: isPlaying === MediaPlayList.IsPlaying || isPlaying === MediaPlayList.IsPaused
}
}
Label {
horizontalAlignment: Text.AlignRight
font.weight: (isPlaying ? Font.Bold : Font.Light)
color: simpleMode ? myPalette.highlightedText : myPalette.text
text: Number(discNumber).toLocaleString(Qt.locale(), 'f', 0)
visible: isValid && discNumber !== 0 && !isSingleDiscAlbum
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
Layout.preferredWidth: ((discNumberSize.boundingRect.width - discNumberSize.boundingRect.x) > (realDiscNumberSize.boundingRect.width - realDiscNumberSize.boundingRect.x) ?
(discNumberSize.boundingRect.width - discNumberSize.boundingRect.x) :
(realDiscNumberSize.boundingRect.width - realDiscNumberSize.boundingRect.x))
Layout.minimumWidth: ((discNumberSize.boundingRect.width - discNumberSize.boundingRect.x) > (realDiscNumberSize.boundingRect.width - realDiscNumberSize.boundingRect.x) ?
(discNumberSize.boundingRect.width - discNumberSize.boundingRect.x) :
(realDiscNumberSize.boundingRect.width - realDiscNumberSize.boundingRect.x))
Layout.maximumWidth: ((discNumberSize.boundingRect.width - discNumberSize.boundingRect.x) > (realDiscNumberSize.boundingRect.width - realDiscNumberSize.boundingRect.x) ?
(discNumberSize.boundingRect.width - discNumberSize.boundingRect.x) :
(realDiscNumberSize.boundingRect.width - realDiscNumberSize.boundingRect.x))
Label {
id: trackAndDiscNumberLabel
Layout.rightMargin: !LayoutMirroring.enabled ? (elisaTheme.layoutHorizontalMargin / 2) : 0
Layout.leftMargin: LayoutMirroring.enabled ? (elisaTheme.layoutHorizontalMargin / 2) : 0
anchors.fill: parent
anchors.rightMargin: LayoutMirroring.enabled ? 0 : elisaTheme.layoutHorizontalMargin
anchors.leftMargin: !LayoutMirroring.enabled ? 0 : elisaTheme.layoutHorizontalMargin
TextMetrics {
id: discNumberSize
horizontalAlignment: Text.AlignRight
text: '9'
}
text: {
var trackNumberString;
if (trackNumber !== -1) {
trackNumberString = Number(trackNumber).toLocaleString(Qt.locale(), 'f', 0);
} else {
trackNumberString = ''
}
if (!isSingleDiscAlbum && discNumber !== 0 ) {
return trackNumberString + "/" + Number(discNumber).toLocaleString(Qt.locale(), 'f', 0)
} else {
return trackNumberString
}
}
TextMetrics {
id: realDiscNumberSize
font.weight: (isPlaying ? Font.Bold : Font.Light)
color: simpleMode ? myPalette.highlightedText : myPalette.text
text: Number(discNumber).toLocaleString(Qt.locale(), 'f', 0)
visible: isValid && !playIcon.visible
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment