Commit 003f0ba3 authored by Nate Graham's avatar Nate Graham 🔩
Browse files

Change style in Context view to use blurred album art as the background

BUG: 417268
FIXED-IN: 20.04.0
parent e110db88
......@@ -21,6 +21,7 @@ import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQml.Models 2.2
import QtQuick.Layouts 1.2
import QtGraphicalEffects 1.0
import org.kde.elisa 1.0
......@@ -87,143 +88,150 @@ FocusScope {
]
}
// Scrollview to hold all the content
ScrollView {
clip: true
contentWidth: content.width
contentHeight: content.height
// Container to hold both the blurred background and the scrollview
// We can't make the scrollview a child of the background item since then
// everything in the scrollview will be blurred and transparent too!
Item {
Layout.fillWidth: true
Layout.fillHeight: true
// Album Art + title + metadata + lyrics
ColumnLayout {
id: content
// Blurred album art background
Image {
id: albumArtBackground
anchors.fill: parent
width: topItem.width
anchors.leftMargin: elisaTheme.layoutHorizontalMargin
anchors.rightMargin: elisaTheme.layoutHorizontalMargin
source: albumArtUrl.toString() === '' ? Qt.resolvedUrl(elisaTheme.defaultAlbumImage) : albumArtUrl
// Album art slice
Image {
id: albumIcon
source: albumArtUrl.toString() === '' ? Qt.resolvedUrl(elisaTheme.defaultAlbumImage) : albumArtUrl
sourceSize.width: topItem.width
sourceSize.height: topItem.height
Layout.maximumHeight: elisaTheme.contextCoverImageSize
Layout.preferredHeight: elisaTheme.contextCoverImageSize
Layout.fillWidth: true
Layout.bottomMargin: elisaTheme.layoutVerticalMargin
asynchronous: true
// Touch the sides of the scrollview
Layout.leftMargin: -elisaTheme.layoutHorizontalMargin
Layout.rightMargin: -elisaTheme.layoutHorizontalMargin
fillMode: Image.PreserveAspectCrop
sourceSize.width: topItem.width
sourceSize.height: topItem.width
layer.enabled: true
opacity: 0.2
layer.effect: FastBlur {
source: albumArtBackground
// anchors.fill: parent
radius: 40
}
}
asynchronous: true
// Scrollview to hold all the content
ScrollView {
anchors.fill: parent
clip: true
fillMode: Image.PreserveAspectCrop
}
contentWidth: content.width
contentHeight: content.height
// Song title
LabelWithToolTip {
id: titleLabel
// Title + metadata + lyrics
ColumnLayout {
id: content
level: 1
width: topItem.width
anchors.leftMargin: elisaTheme.layoutHorizontalMargin
anchors.rightMargin: elisaTheme.layoutHorizontalMargin
horizontalAlignment: Label.AlignHCenter
// Song title
LabelWithToolTip {
id: titleLabel
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop
level: 1
Layout.topMargin: elisaTheme.layoutVerticalMargin
}
horizontalAlignment: Label.AlignHCenter
LabelWithToolTip {
id: subtitleLabel
text: {
if (artistName !== '' && albumName !== '') {
return i18nc("display of artist and album in context view", "<i>by</i> <b>%1</b> <i>from</i> <b>%2</b>", artistName, albumName)
} else if (artistName === '' && albumName !== '') {
return i18nc("display of album in context view", "<i>from</i> <b>%1</b>", albumName)
} else if (artistName !== '' && albumName === '') {
i18nc("display of artist in context view", "<i>by</i> <b>%1</b>", artistName)
}
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop
Layout.topMargin: elisaTheme.layoutVerticalMargin
}
level: 3
opacity: 0.6
LabelWithToolTip {
id: subtitleLabel
text: {
if (artistName !== '' && albumName !== '') {
return i18nc("display of artist and album in context view", "<i>by</i> <b>%1</b> <i>from</i> <b>%2</b>", artistName, albumName)
} else if (artistName === '' && albumName !== '') {
return i18nc("display of album in context view", "<i>from</i> <b>%1</b>", albumName)
} else if (artistName !== '' && albumName === '') {
i18nc("display of artist in context view", "<i>by</i> <b>%1</b>", artistName)
}
}
horizontalAlignment: Label.AlignHCenter
level: 3
opacity: 0.6
visible: artistName !== '' && albumName !== ''
horizontalAlignment: Label.AlignHCenter
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop
}
visible: artistName !== '' && albumName !== ''
// Horizontal line separating title and subtitle from metadata
Rectangle {
Layout.fillWidth: true
Layout.leftMargin: elisaTheme.layoutHorizontalMargin * 5
Layout.rightMargin: elisaTheme.layoutHorizontalMargin * 5
Layout.topMargin: elisaTheme.layoutVerticalMargin * 2
Layout.bottomMargin: elisaTheme.layoutVerticalMargin * 2
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop
}
height: 1
// Horizontal line separating title and subtitle from metadata
Rectangle {
Layout.fillWidth: true
Layout.leftMargin: elisaTheme.layoutHorizontalMargin * 5
Layout.rightMargin: elisaTheme.layoutHorizontalMargin * 5
Layout.topMargin: elisaTheme.layoutVerticalMargin * 2
Layout.bottomMargin: elisaTheme.layoutVerticalMargin * 2
color: myPalette.mid
}
height: 1
// Metadata
ColumnLayout {
id: allMetaData
color: myPalette.mid
}
spacing: 0
Layout.fillWidth: true
// Metadata
ColumnLayout {
id: allMetaData
spacing: 0
Layout.fillWidth: true
Repeater {
id: trackData
Repeater {
id: trackData
model: metaDataModel
model: metaDataModel
delegate: MetaDataDelegate {
Layout.fillWidth: true
delegate: MetaDataDelegate {
Layout.fillWidth: true
}
}
}
}
// Horizontal line separating metadata from lyrics
Rectangle {
Layout.fillWidth: true
Layout.leftMargin: elisaTheme.layoutHorizontalMargin * 5
Layout.rightMargin: elisaTheme.layoutHorizontalMargin * 5
Layout.topMargin: elisaTheme.layoutVerticalMargin * 2
Layout.bottomMargin: elisaTheme.layoutVerticalMargin * 2
// Horizontal line separating metadata from lyrics
Rectangle {
Layout.fillWidth: true
Layout.leftMargin: elisaTheme.layoutHorizontalMargin * 5
Layout.rightMargin: elisaTheme.layoutHorizontalMargin * 5
Layout.topMargin: elisaTheme.layoutVerticalMargin * 2
Layout.bottomMargin: elisaTheme.layoutVerticalMargin * 2
height: 1
height: 1
color: myPalette.mid
color: myPalette.mid
visible: metaDataModel.lyrics !== ""
}
visible: metaDataModel.lyrics !== ""
}
// Lyrics
Label {
text: metaDataModel.lyrics
// Lyrics
Label {
text: metaDataModel.lyrics
wrapMode: Text.WordWrap
wrapMode: Text.WordWrap
horizontalAlignment: Label.AlignHCenter
horizontalAlignment: Label.AlignHCenter
Layout.fillWidth: true
Layout.bottomMargin: elisaTheme.layoutVerticalMargin
Layout.fillWidth: true
Layout.bottomMargin: elisaTheme.layoutVerticalMargin
visible: metaDataModel.lyrics !== ""
visible: metaDataModel.lyrics !== ""
}
}
}
}
......
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