Commit 7bbd5ffc authored by Nate Graham's avatar Nate Graham 🔩

Port away from HeaderFooterToolbar

When I created this component, I didn't know that the QQC2 `ToolBar`
component can do all the same things and even has built-in support for
being displayed as a header or a footer. So let's use that instead.
parent 13a8034c
Pipeline #34720 passed with stage
in 8 minutes and 51 seconds
......@@ -417,7 +417,6 @@ if (Qt5Quick_FOUND AND Qt5Widgets_FOUND)
qml/ListBrowserDelegate.qml
qml/ScrollHelper.qml
qml/FlatButtonWithToolTip.qml
qml/HeaderFooterToolbar.qml
qml/ElisaConfigurationDialog.qml
qml/FileScanningConfiguration.qml
......
......@@ -29,6 +29,9 @@ Item {
property int hairline: Math.floor(Kirigami.Units.devicePixelRatio)
property int headerToolbarHeight: Math.round(Kirigami.Units.gridUnit * 2.5)
property int footerToolbarHeight: Kirigami.Units.gridUnit * 2
property int playListAlbumArtSize: 60
property int coverImageSize: 180
......
/*
SPDX-FileCopyrightText: 2016 (c) Matthieu Gallien <matthieu_gallien@yahoo.fr>
SPDX-FileCopyrightText: 2019 (c) Nate Graham <nate@kde.org>
SPDX-FileCopyrightText: 2019-2020 (c) Nate Graham <nate@kde.org>
SPDX-License-Identifier: LGPL-3.0-or-later
*/
......@@ -47,38 +47,47 @@ FocusScope {
spacing: 0
// Header with title
HeaderFooterToolbar {
ToolBar {
Layout.fillWidth: true
toolbarType: HeaderFooterToolbar.ToolbarType.Header
contentItems: [
Layout.preferredHeight: elisaTheme.headerToolbarHeight
// QQC2 ToolBar uses Header colors by default when not a footer,but
// in this case we want to use Window colors since this ToolBar is
// not directly underneath the window titlebar
// If the main window's HeaderBar is ever removed or relocated to
// the bottom of the window, remove the following line
Kirigami.Theme.colorSet: Kirigami.Theme.Window
RowLayout {
anchors.fill: parent
Image {
id: mainIcon
visible: elisaTheme.nowPlayingIcon.length > 0
source: elisaTheme.nowPlayingIcon
height: viewTitle.height
width: height
Layout.fillHeight: true
Layout.topMargin: Kirigami.Units.smallSpacing
Layout.bottomMargin: Kirigami.Units.smallSpacing
Layout.rightMargin: Kirigami.Units.smallSpacing
Layout.preferredWidth: height
sourceSize.height: height
sourceSize.width: width
fillMode: Image.PreserveAspectFit
asynchronous: true
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
},
Item {
id: spacer
width: Kirigami.Units.largeSpacing
},
}
LabelWithToolTip {
id: viewTitle
Layout.fillWidth: true
Layout.leftMargin: Kirigami.Units.smallSpacing
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
text: i18nc("Title of the context view related to the currently playing track", "Now Playing")
level: 1
}
]
}
}
// Container to hold both the blurred background and the scrollview
......@@ -306,20 +315,25 @@ FocusScope {
}
// Footer with file path label
HeaderFooterToolbar {
ToolBar {
visible: !topItem.nothingPlaying
toolbarType: HeaderFooterToolbar.ToolbarType.Footer
Layout.fillWidth: true
Layout.preferredHeight: Kirigami.Units.gridUnit * 2
contentLayoutSpacing: Kirigami.Units.largeSpacing
contentItems: [
Layout.preferredHeight: elisaTheme.footerToolbarHeight
position: ToolBar.Footer
RowLayout {
anchors.fill: parent
spacing: Kirigami.Units.largeSpacing
Image {
Layout.preferredHeight: Kirigami.Units.iconSizes.smallMedium
Layout.preferredWidth: Kirigami.Units.iconSizes.smallMedium
sourceSize.width: Kirigami.Units.iconSizes.smallMedium
sourceSize.height: Kirigami.Units.iconSizes.smallMedium
source: elisaTheme.folderIcon
},
}
LabelWithToolTip {
id: fileNameLabel
......@@ -328,7 +342,7 @@ FocusScope {
text: metaDataModel.fileUrl
elide: Text.ElideLeft
}
]
}
}
}
......
/*
SPDX-FileCopyrightText: 2016 (c) Matthieu Gallien <matthieu_gallien@yahoo.fr>
SPDX-FileCopyrightText: 2019 (c) Nate Graham <nate@kde.org>
SPDX-License-Identifier: LGPL-3.0-or-later
*/
import QtQuick 2.10
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.5 as Kirigami
import org.kde.elisa 1.0
Rectangle {
enum ToolbarType {
Header, // separator drawn on bottom
Footer, // separator drawn on top
Other // no separator drawn; used for stacking toolbars
}
// The type of toolbar it is
property int toolbarType: HeaderFooterToolbar.ToolbarType.Header
// A list of items to be shown within the header or footer
property alias contentItems: contentLayout.children
// Spacing of content items. Defaults to Kirigami.Units.smallSpacing
property alias contentLayoutSpacing: contentLayout.spacing
implicitHeight: Math.round(Kirigami.Units.gridUnit * 2.5)
color: myPalette.window
// Top separator line for a footer
Kirigami.Separator {
visible: toolbarType == HeaderFooterToolbar.ToolbarType.Footer
width: parent.width
anchors.top: parent.top
}
// Content layout
RowLayout {
id: contentLayout
anchors.fill: parent
anchors.leftMargin: Kirigami.Units.smallSpacing
anchors.rightMargin: Kirigami.Units.smallSpacing
spacing: Kirigami.Units.smallSpacing
// Items provided by the contentItems property will go here
}
// Bottom separator line for a header
Kirigami.Separator {
visible: toolbarType == HeaderFooterToolbar.ToolbarType.Header
width: parent.width
anchors.bottom: parent.bottom
}
}
/*
SPDX-FileCopyrightText: 2016 (c) Matthieu Gallien <matthieu_gallien@yahoo.fr>
SPDX-FileCopyrightText: 2019 (c) Nate Graham <nate@kde.org>
SPDX-FileCopyrightText: 2019-2020 (c) Nate Graham <nate@kde.org>
SPDX-License-Identifier: LGPL-3.0-or-later
*/
......@@ -117,23 +117,31 @@ FocusScope {
spacing: 0
// Header with title and toolbar buttons
HeaderFooterToolbar {
ToolBar {
Layout.fillWidth: true
toolbarType: HeaderFooterToolbar.ToolbarType.Header
contentItems: [
Layout.preferredHeight: elisaTheme.headerToolbarHeight
// QQC2 ToolBar uses Header colors by default when not a footer,but
// in this case we want to use Window colors since this ToolBar is
// not directly underneath the window titlebar
// If the main window's HeaderBar is ever removed or relocated to
// the bottom of the window, remove the following line
Kirigami.Theme.colorSet: Kirigami.Theme.Window
RowLayout {
anchors.fill: parent
// Header title
LabelWithToolTip {
id: viewTitle
Layout.fillWidth: true
Layout.leftMargin: Kirigami.Units.smallSpacing
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
text: i18nc("@info Title of the view of the playlist; keep this string as short as possible because horizontal space is quite scarce", "Playlist")
level: 1
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
},
}
// Toolbar buttons
FlatButtonWithToolTip {
text: i18nc("Show currently played track inside playlist", "Show Current Track")
......@@ -144,7 +152,7 @@ FocusScope {
playListView.currentIndex = ElisaApplication.mediaPlayListProxyModel.currentTrackRow
playListView.currentItem.forceActiveFocus()
}
},
}
FlatButtonWithToolTip {
id: savePlaylistButton
text: i18nc("Save a playlist file", "Save Playlist...")
......@@ -155,7 +163,7 @@ FocusScope {
fileDialog.file = ''
fileDialog.open()
}
},
}
FlatButtonWithToolTip {
id: loadPlaylistButton
text: i18nc("Load a playlist file", "Load Playlist...")
......@@ -165,14 +173,14 @@ FocusScope {
fileDialog.file = ''
fileDialog.open()
}
},
}
FlatButtonWithToolTip {
text: i18nc("Remove all tracks from play list", "Clear Playlist")
icon.name: 'edit-clear-all'
enabled: ElisaApplication.mediaPlayListProxyModel ? ElisaApplication.mediaPlayListProxyModel.tracksCount > 0 : false
onClicked: ElisaApplication.mediaPlayListProxyModel.clearPlayList()
}
]
}
}
Item {
......@@ -240,20 +248,18 @@ FocusScope {
}
// Footer with number of tracks label
HeaderFooterToolbar {
toolbarType: HeaderFooterToolbar.ToolbarType.Footer
ToolBar {
position: ToolBar.Footer
Layout.fillWidth: true
Layout.preferredHeight: Kirigami.Units.gridUnit * 2
contentItems: [
LabelWithToolTip {
id: trackCountLabel
Layout.preferredHeight: elisaTheme.footerToolbarHeight
Layout.fillWidth: true
LabelWithToolTip {
id: trackCountLabel
anchors.fill: parent
text: i18np("1 track", "%1 tracks", (ElisaApplication.mediaPlayListProxyModel ? ElisaApplication.mediaPlayListProxyModel.tracksCount : 0))
elide: Text.ElideLeft
}
]
text: i18np("1 track", "%1 tracks", (ElisaApplication.mediaPlayListProxyModel ? ElisaApplication.mediaPlayListProxyModel.tracksCount : 0))
elide: Text.ElideLeft
}
}
}
}
......
/*
SPDX-FileCopyrightText: 2016 (c) Matthieu Gallien <matthieu_gallien@yahoo.fr>
SPDX-FileCopyrightText: 2020 (c) Nate Graham <nate@kde.org>
SPDX-License-Identifier: LGPL-3.0-or-later
*/
......@@ -44,11 +45,19 @@ ColumnLayout {
signal goBack();
signal showArtist();
HeaderFooterToolbar {
toolbarType: filterRow.visible ? HeaderFooterToolbar.ToolbarType.Other
: HeaderFooterToolbar.ToolbarType.Header
ToolBar {
Layout.fillWidth: true
contentItems: [
Layout.preferredHeight: elisaTheme.headerToolbarHeight
// QQC2 ToolBar uses Header colors by default when not a footer,but
// in this case we want to use Window colors since this ToolBar is
// not directly underneath the window titlebar
// If the main window's HeaderBar is ever removed or relocated to
// the bottom of the window, remove the following line
Kirigami.Theme.colorSet: Kirigami.Theme.Window
RowLayout {
anchors.fill: parent
FlatButtonWithToolTip {
id: goPreviousButton
......@@ -57,7 +66,7 @@ ColumnLayout {
text: i18nc("navigate back in the views stack", "Back")
icon.name: (Qt.application.layoutDirection == Qt.RightToLeft) ? "go-next" : "go-previous"
onClicked: goBack()
},
}
Image {
id: mainIcon
visible: image.toString().length > 0
......@@ -66,6 +75,7 @@ ColumnLayout {
Layout.fillHeight: true
Layout.topMargin: Kirigami.Units.smallSpacing
Layout.bottomMargin: Kirigami.Units.smallSpacing
Layout.rightMargin: Kirigami.Units.smallSpacing
Layout.preferredWidth: height
sourceSize.height: height
sourceSize.width: width
......@@ -73,11 +83,7 @@ ColumnLayout {
asynchronous: true
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
},
Item {
Layout.preferredWidth: Kirigami.Units.smallSpacing
visible: mainIcon.visible
},
}
ColumnLayout {
id: authorAndAlbumLayout
Layout.fillWidth: true
......@@ -105,7 +111,7 @@ ColumnLayout {
elide: Text.ElideRight
}
},
}
FlatButtonWithToolTip {
id: sortMenuButton
......@@ -151,35 +157,35 @@ ColumnLayout {
text: sortMenuButton.text
font: sortMenuButton.font
}
},
}
FlatButtonWithToolTip {
objectName: 'createRadioButton'
visible: showCreateRadioButton
text: i18nc("Create a new radio", "Create a radio")
icon.name: "list-add"
onClicked: createRadio()
},
}
FlatButtonWithToolTip {
objectName: 'enqueueButton'
visible: !showCreateRadioButton
text: i18nc("Add current list to playlist", "Enqueue")
icon.name: "list-add"
onClicked: enqueue()
},
}
FlatButtonWithToolTip {
objectName: 'replaceAndPlayButton'
visible: !showCreateRadioButton
text: i18n("Play now, replacing contents of Playlist")
icon.name: "media-playback-start"
onClicked: replaceAndPlay()
},
}
FlatButtonWithToolTip {
objectName: 'showArtistButton'
visible: allowArtistNavigation && !showCreateRadioButton
text: i18nc("Button to navigate to the artist of the album", "Display Artist")
icon.name: "view-media-artist"
onClicked: showArtist()
},
}
FlatButtonWithToolTip {
objectName: 'showFilterButton'
visible: !showCreateRadioButton
......@@ -189,19 +195,28 @@ ColumnLayout {
checked: expandedFilterView
onClicked: persistentSettings.expandedFilterView = !persistentSettings.expandedFilterView
}
]
}
}
HeaderFooterToolbar {
ToolBar {
id: filterRow
toolbarType: HeaderFooterToolbar.ToolbarType.Header
Layout.fillWidth: true
Layout.preferredHeight: elisaTheme.footerToolbarHeight
// QQC2 ToolBar uses Header colors by default when not a footer,but
// in this case we want to use Window colors since this ToolBar is
// not directly underneath the window titlebar
// If the main window's HeaderBar is ever removed or relocated to
// the bottom of the window, remove the following line
Kirigami.Theme.colorSet: Kirigami.Theme.Window
visible: opacity > 0.0
opacity: 0
contentItems: [
RowLayout {
anchors.fill: parent
Kirigami.SearchField {
id: filterTextInput
objectName: 'filterTextInput'
......@@ -216,15 +231,15 @@ ColumnLayout {
placeholderText: i18n("Search for album name, artist, etc.")
Keys.onEscapePressed: persistentSettings.expandedFilterView = false;
},
}
Item {
width: Kirigami.Units.largeSpacing
},
}
LabelWithToolTip {
text: i18n("Filter by rating: ")
visible: showRating
},
}
RatingStar {
id: ratingFilter
objectName: 'ratingFilter'
......@@ -233,9 +248,8 @@ ColumnLayout {
hoverWidgetOpacity: 1
readOnly: false
}
]
}
}
states: [
......
......@@ -35,7 +35,6 @@
<file>qml/ImageWithFallback.qml</file>
<file>qml/EditableMetaDataDelegate.qml</file>
<file>qml/ViewSelectorDelegate.qml</file>
<file>qml/HeaderFooterToolbar.qml</file>
<file>qml/TracksDiscHeader.qml</file>
<file>qml/NativeMenuItemFromAction.qml</file>
<file>qml/NativeTrayMenu.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