Commit bde3a48f authored by Nate Graham's avatar Nate Graham

Merge branch 'fix-elided-text-in-playlist-header' into 'master'

Fix elided text in playlist headers and clean code and design somewhat

See merge request !58
parents b0677dd4 d35c830c
......@@ -388,7 +388,6 @@ if (Qt5Quick_FOUND AND Qt5Widgets_FOUND)
qml/PlayListBasicView.qml
qml/PlayListEntry.qml
qml/SimplePlayListView.qml
qml/PlayListAlbumHeader.qml
qml/BasicPlayListAlbumHeader.qml
qml/MetaDataDelegate.qml
......
......@@ -59,9 +59,6 @@ Item {
font.weight: Font.Bold
}
property int playListDelegateHeight: (playListTrackTextHeight.height > 28) ? playListTrackTextHeight.height : 28
property int playListHeaderHeight: elisaTheme.layoutVerticalMargin * 5 +
playListAuthorTextHeight.height +
playListAlbumTextHeight.height
property int trackDelegateHeight: elisaTheme.layoutVerticalMargin + fontSize.height * 2
// END FIXME
......
......@@ -23,104 +23,99 @@ import org.kde.elisa 1.0
import QtQuick 2.0
RowLayout {
id: headerRow
Rectangle {
id: background
property var headerData
property string album: headerData[0]
property string albumArtist: headerData[1]
property url imageUrl: headerData[2]
property alias textColor: mainLabel.color
property alias backgroundColor: background.color
TextMetrics {
id: trackNumberSize
implicitHeight: contentLayout.implicitHeight
text: (99).toLocaleString(Qt.locale(), 'f', 0)
}
color: myPalette.midlight
TextMetrics {
id: fakeDiscNumberSize
RowLayout {
id: contentLayout
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
// No bottom anchor so it can grow vertically
text: '/9'
}
TextMetrics {
id: trackNumberSize
text: (99).toLocaleString(Qt.locale(), 'f', 0)
}
spacing: elisaTheme.layoutHorizontalMargin
TextMetrics {
id: fakeDiscNumberSize
Item {
property int widthToTrackNumber: elisaTheme.playListDelegateHeight +
elisaTheme.layoutHorizontalMargin +
(trackNumberSize.boundingRect.width - trackNumberSize.boundingRect.x) +
(fakeDiscNumberSize.boundingRect.width - fakeDiscNumberSize.boundingRect.x)
text: '/9'
}
Layout.minimumWidth: widthToTrackNumber
Layout.maximumWidth: widthToTrackNumber
Layout.preferredWidth: widthToTrackNumber
Layout.fillHeight: true
spacing: elisaTheme.layoutHorizontalMargin
Image {
id: mainIcon
property int widthToTrackNumber: elisaTheme.playListDelegateHeight +
elisaTheme.layoutHorizontalMargin +
(trackNumberSize.boundingRect.width - trackNumberSize.boundingRect.x) +
(fakeDiscNumberSize.boundingRect.width - fakeDiscNumberSize.boundingRect.x)
source: (imageUrl != '' ? imageUrl : Qt.resolvedUrl(elisaTheme.defaultAlbumImage))
Layout.preferredWidth: widthToTrackNumber
Layout.preferredHeight: widthToTrackNumber
Layout.margins: elisaTheme.layoutHorizontalMargin
anchors.right: parent.right
width: headerRow.height
height: headerRow.height
sourceSize.width: headerRow.height
sourceSize.height: headerRow.height
source: (imageUrl != '' ? imageUrl : Qt.resolvedUrl(elisaTheme.defaultAlbumImage))
sourceSize.width: widthToTrackNumber
sourceSize.height: widthToTrackNumber
fillMode: Image.PreserveAspectFit
asynchronous: true
opacity: 1
}
}
ColumnLayout {
id: albumHeaderTextColumn
Layout.fillWidth: true
Layout.fillHeight: true
Layout.leftMargin: !LayoutMirroring.enabled ? - elisaTheme.layoutHorizontalMargin / 4 : 0
Layout.rightMargin: LayoutMirroring.enabled ? - elisaTheme.layoutHorizontalMargin / 4 : 0
spacing: 0
LabelWithToolTip {
id: mainLabel
text: album
level: 2
font.weight: Font.Bold
horizontalAlignment: Text.AlignLeft
ColumnLayout {
id: albumHeaderTextColumn
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
Layout.fillHeight: true
Layout.leftMargin: !LayoutMirroring.enabled ? - elisaTheme.layoutHorizontalMargin / 4 : 0
Layout.rightMargin: LayoutMirroring.enabled ? - elisaTheme.layoutHorizontalMargin / 4 : 0
Layout.topMargin: elisaTheme.layoutVerticalMargin
Layout.bottomMargin: elisaTheme.layoutVerticalMargin
elide: Text.ElideRight
}
spacing: elisaTheme.layoutVerticalMargin
Item {
Layout.fillHeight: true
}
LabelWithToolTip {
id: mainLabel
LabelWithToolTip {
id: authorLabel
Layout.fillWidth: true
Layout.alignment: Qt.AlignBottom | Qt.AlignLeft
text: albumArtist
text: album
level: 2
font.weight: Font.Bold
font.weight: Font.Light
color: mainLabel.color
elide: Text.ElideRight
wrapMode: Text.WordWrap
maximumLineCount: 2
}
horizontalAlignment: Text.AlignLeft
LabelWithToolTip {
id: authorLabel
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
Layout.bottomMargin: elisaTheme.layoutVerticalMargin
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop | Qt.AlignLeft
text: albumArtist
color: mainLabel.color
elide: Text.ElideRight
elide: Text.ElideRight
wrapMode: Text.WordWrap
maximumLineCount: 2
}
}
}
}
/*
* Copyright 2016-2017 Matthieu Gallien <matthieu_gallien@yahoo.fr>
*
* This program is free software: you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 3 of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import QtQuick 2.7
import QtQuick.Layouts 1.2
import QtQuick.Controls 2.3
import org.kde.elisa 1.0
import QtQuick 2.0
Rectangle {
property alias headerData: albumHeader.headerData
color: myPalette.midlight
BasicPlayListAlbumHeader {
id: albumHeader
anchors {
fill: parent
topMargin: elisaTheme.layoutVerticalMargin * 1.5
bottomMargin: elisaTheme.layoutVerticalMargin * 1.5
leftMargin: elisaTheme.layoutHorizontalMargin
rightMargin: elisaTheme.layoutHorizontalMargin
}
}
}
......@@ -43,10 +43,9 @@ ListView {
section.property: 'albumSection'
section.criteria: ViewSection.FullString
section.labelPositioning: ViewSection.InlineLabels
section.delegate: PlayListAlbumHeader {
section.delegate: BasicPlayListAlbumHeader {
headerData: JSON.parse(section)
width: scrollBar.visible ? (!LayoutMirroring.enabled ? playListView.width - scrollBar.width : playListView.width) : playListView.width
height: elisaTheme.playListHeaderHeight
}
ScrollBar.vertical: ScrollBar {
......
......@@ -40,8 +40,9 @@ ListView {
section.delegate: BasicPlayListAlbumHeader {
headerData: JSON.parse(section)
width: scrollBar.visible ? (!LayoutMirroring.enabled ? playListView.width - scrollBar.width : playListView.width) : playListView.width
height: elisaTheme.playListHeaderHeight - 3 * elisaTheme.layoutVerticalMargin
// In party mode, adjust the colors to be suitable for a dark background
textColor: myPalette.highlightedText
backgroundColor: "transparent"
}
ScrollBar.vertical: ScrollBar {
......
......@@ -31,7 +31,6 @@
<file>qml/PlayListBasicView.qml</file>
<file>qml/SimplePlayListView.qml</file>
<file>qml/ViewSelector.qml</file>
<file>qml/PlayListAlbumHeader.qml</file>
<file>qml/BasicPlayListAlbumHeader.qml</file>
<file>qml/MetaDataDelegate.qml</file>
<file>qml/EditableMetaDataDelegate.qml</file>
......
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