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) ...@@ -417,7 +417,6 @@ if (Qt5Quick_FOUND AND Qt5Widgets_FOUND)
qml/ListBrowserDelegate.qml qml/ListBrowserDelegate.qml
qml/ScrollHelper.qml qml/ScrollHelper.qml
qml/FlatButtonWithToolTip.qml qml/FlatButtonWithToolTip.qml
qml/HeaderFooterToolbar.qml
qml/ElisaConfigurationDialog.qml qml/ElisaConfigurationDialog.qml
qml/FileScanningConfiguration.qml qml/FileScanningConfiguration.qml
......
...@@ -29,6 +29,9 @@ Item { ...@@ -29,6 +29,9 @@ Item {
property int hairline: Math.floor(Kirigami.Units.devicePixelRatio) 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 playListAlbumArtSize: 60
property int coverImageSize: 180 property int coverImageSize: 180
......
/* /*
SPDX-FileCopyrightText: 2016 (c) Matthieu Gallien <matthieu_gallien@yahoo.fr> 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 SPDX-License-Identifier: LGPL-3.0-or-later
*/ */
...@@ -47,38 +47,47 @@ FocusScope { ...@@ -47,38 +47,47 @@ FocusScope {
spacing: 0 spacing: 0
// Header with title // Header with title
HeaderFooterToolbar { ToolBar {
Layout.fillWidth: true Layout.fillWidth: true
toolbarType: HeaderFooterToolbar.ToolbarType.Header Layout.preferredHeight: elisaTheme.headerToolbarHeight
contentItems: [
// 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 { Image {
id: mainIcon id: mainIcon
visible: elisaTheme.nowPlayingIcon.length > 0
source: elisaTheme.nowPlayingIcon source: elisaTheme.nowPlayingIcon
height: viewTitle.height Layout.fillHeight: true
width: height Layout.topMargin: Kirigami.Units.smallSpacing
Layout.bottomMargin: Kirigami.Units.smallSpacing
Layout.rightMargin: Kirigami.Units.smallSpacing
Layout.preferredWidth: height
sourceSize.height: height sourceSize.height: height
sourceSize.width: width sourceSize.width: width
fillMode: Image.PreserveAspectFit fillMode: Image.PreserveAspectFit
asynchronous: true asynchronous: true
}
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
},
Item {
id: spacer
width: Kirigami.Units.largeSpacing
},
LabelWithToolTip { LabelWithToolTip {
id: viewTitle id: viewTitle
Layout.fillWidth: true Layout.fillWidth: true
Layout.leftMargin: Kirigami.Units.smallSpacing
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
text: i18nc("Title of the context view related to the currently playing track", "Now Playing") text: i18nc("Title of the context view related to the currently playing track", "Now Playing")
level: 1 level: 1
} }
] }
} }
// Container to hold both the blurred background and the scrollview // Container to hold both the blurred background and the scrollview
...@@ -306,20 +315,25 @@ FocusScope { ...@@ -306,20 +315,25 @@ FocusScope {
} }
// Footer with file path label // Footer with file path label
HeaderFooterToolbar { ToolBar {
visible: !topItem.nothingPlaying visible: !topItem.nothingPlaying
toolbarType: HeaderFooterToolbar.ToolbarType.Footer
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: Kirigami.Units.gridUnit * 2 Layout.preferredHeight: elisaTheme.footerToolbarHeight
contentLayoutSpacing: Kirigami.Units.largeSpacing
contentItems: [ position: ToolBar.Footer
RowLayout {
anchors.fill: parent
spacing: Kirigami.Units.largeSpacing
Image { Image {
Layout.preferredHeight: Kirigami.Units.iconSizes.smallMedium Layout.preferredHeight: Kirigami.Units.iconSizes.smallMedium
Layout.preferredWidth: Kirigami.Units.iconSizes.smallMedium Layout.preferredWidth: Kirigami.Units.iconSizes.smallMedium
sourceSize.width: Kirigami.Units.iconSizes.smallMedium sourceSize.width: Kirigami.Units.iconSizes.smallMedium
sourceSize.height: Kirigami.Units.iconSizes.smallMedium sourceSize.height: Kirigami.Units.iconSizes.smallMedium
source: elisaTheme.folderIcon source: elisaTheme.folderIcon
}, }
LabelWithToolTip { LabelWithToolTip {
id: fileNameLabel id: fileNameLabel
...@@ -328,7 +342,7 @@ FocusScope { ...@@ -328,7 +342,7 @@ FocusScope {
text: metaDataModel.fileUrl text: metaDataModel.fileUrl
elide: Text.ElideLeft 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: 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 SPDX-License-Identifier: LGPL-3.0-or-later
*/ */
...@@ -117,23 +117,31 @@ FocusScope { ...@@ -117,23 +117,31 @@ FocusScope {
spacing: 0 spacing: 0
// Header with title and toolbar buttons // Header with title and toolbar buttons
HeaderFooterToolbar { ToolBar {
Layout.fillWidth: true Layout.fillWidth: true
toolbarType: HeaderFooterToolbar.ToolbarType.Header Layout.preferredHeight: elisaTheme.headerToolbarHeight
contentItems: [
// 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 // Header title
LabelWithToolTip { LabelWithToolTip {
id: viewTitle id: viewTitle
Layout.fillWidth: true 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") 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 level: 1
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter }
},
// Toolbar buttons // Toolbar buttons
FlatButtonWithToolTip { FlatButtonWithToolTip {
text: i18nc("Show currently played track inside playlist", "Show Current Track") text: i18nc("Show currently played track inside playlist", "Show Current Track")
...@@ -144,7 +152,7 @@ FocusScope { ...@@ -144,7 +152,7 @@ FocusScope {
playListView.currentIndex = ElisaApplication.mediaPlayListProxyModel.currentTrackRow playListView.currentIndex = ElisaApplication.mediaPlayListProxyModel.currentTrackRow
playListView.currentItem.forceActiveFocus() playListView.currentItem.forceActiveFocus()
} }
}, }
FlatButtonWithToolTip { FlatButtonWithToolTip {
id: savePlaylistButton id: savePlaylistButton
text: i18nc("Save a playlist file", "Save Playlist...") text: i18nc("Save a playlist file", "Save Playlist...")
...@@ -155,7 +163,7 @@ FocusScope { ...@@ -155,7 +163,7 @@ FocusScope {
fileDialog.file = '' fileDialog.file = ''
fileDialog.open() fileDialog.open()
} }
}, }
FlatButtonWithToolTip { FlatButtonWithToolTip {
id: loadPlaylistButton id: loadPlaylistButton
text: i18nc("Load a playlist file", "Load Playlist...") text: i18nc("Load a playlist file", "Load Playlist...")
...@@ -165,14 +173,14 @@ FocusScope { ...@@ -165,14 +173,14 @@ FocusScope {
fileDialog.file = '' fileDialog.file = ''
fileDialog.open() fileDialog.open()
} }
}, }
FlatButtonWithToolTip { FlatButtonWithToolTip {
text: i18nc("Remove all tracks from play list", "Clear Playlist") text: i18nc("Remove all tracks from play list", "Clear Playlist")
icon.name: 'edit-clear-all' icon.name: 'edit-clear-all'
enabled: ElisaApplication.mediaPlayListProxyModel ? ElisaApplication.mediaPlayListProxyModel.tracksCount > 0 : false enabled: ElisaApplication.mediaPlayListProxyModel ? ElisaApplication.mediaPlayListProxyModel.tracksCount > 0 : false
onClicked: ElisaApplication.mediaPlayListProxyModel.clearPlayList() onClicked: ElisaApplication.mediaPlayListProxyModel.clearPlayList()
} }
] }
} }
Item { Item {
...@@ -240,20 +248,18 @@ FocusScope { ...@@ -240,20 +248,18 @@ FocusScope {
} }
// Footer with number of tracks label // Footer with number of tracks label
HeaderFooterToolbar { ToolBar {
toolbarType: HeaderFooterToolbar.ToolbarType.Footer position: ToolBar.Footer
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: Kirigami.Units.gridUnit * 2 Layout.preferredHeight: elisaTheme.footerToolbarHeight
contentItems: [
LabelWithToolTip {
id: trackCountLabel
Layout.fillWidth: true LabelWithToolTip {
id: trackCountLabel
anchors.fill: parent
text: i18np("1 track", "%1 tracks", (ElisaApplication.mediaPlayListProxyModel ? ElisaApplication.mediaPlayListProxyModel.tracksCount : 0)) text: i18np("1 track", "%1 tracks", (ElisaApplication.mediaPlayListProxyModel ? ElisaApplication.mediaPlayListProxyModel.tracksCount : 0))
elide: Text.ElideLeft elide: Text.ElideLeft
} }
]
} }
} }
} }
......
/* /*
SPDX-FileCopyrightText: 2016 (c) Matthieu Gallien <matthieu_gallien@yahoo.fr> 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 SPDX-License-Identifier: LGPL-3.0-or-later
*/ */
...@@ -44,11 +45,19 @@ ColumnLayout { ...@@ -44,11 +45,19 @@ ColumnLayout {
signal goBack(); signal goBack();
signal showArtist(); signal showArtist();
HeaderFooterToolbar { ToolBar {
toolbarType: filterRow.visible ? HeaderFooterToolbar.ToolbarType.Other
: HeaderFooterToolbar.ToolbarType.Header
Layout.fillWidth: true 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 { FlatButtonWithToolTip {
id: goPreviousButton id: goPreviousButton
...@@ -57,7 +66,7 @@ ColumnLayout { ...@@ -57,7 +66,7 @@ ColumnLayout {
text: i18nc("navigate back in the views stack", "Back") text: i18nc("navigate back in the views stack", "Back")
icon.name: (Qt.application.layoutDirection == Qt.RightToLeft) ? "go-next" : "go-previous" icon.name: (Qt.application.layoutDirection == Qt.RightToLeft) ? "go-next" : "go-previous"
onClicked: goBack() onClicked: goBack()
}, }
Image { Image {
id: mainIcon id: mainIcon
visible: image.toString().length > 0 visible: image.toString().length > 0
...@@ -66,6 +75,7 @@ ColumnLayout { ...@@ -66,6 +75,7 @@ ColumnLayout {
Layout.fillHeight: true Layout.fillHeight: true
Layout.topMargin: Kirigami.Units.smallSpacing Layout.topMargin: Kirigami.Units.smallSpacing
Layout.bottomMargin: Kirigami.Units.smallSpacing Layout.bottomMargin: Kirigami.Units.smallSpacing
Layout.rightMargin: Kirigami.Units.smallSpacing
Layout.preferredWidth: height Layout.preferredWidth: height
sourceSize.height: height sourceSize.height: height
sourceSize.width: width sourceSize.width: width
...@@ -73,11 +83,7 @@ ColumnLayout { ...@@ -73,11 +83,7 @@ ColumnLayout {
asynchronous: true asynchronous: true
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
}, }
Item {
Layout.preferredWidth: Kirigami.Units.smallSpacing
visible: mainIcon.visible
},
ColumnLayout { ColumnLayout {
id: authorAndAlbumLayout id: authorAndAlbumLayout
Layout.fillWidth: true Layout.fillWidth: true
...@@ -105,7 +111,7 @@ ColumnLayout { ...@@ -105,7 +111,7 @@ ColumnLayout {
elide: Text.ElideRight elide: Text.ElideRight
} }
}, }
FlatButtonWithToolTip { FlatButtonWithToolTip {
id: sortMenuButton id: sortMenuButton
...@@ -151,35 +157,35 @@ ColumnLayout { ...@@ -151,35 +157,35 @@ ColumnLayout {
text: sortMenuButton.text text: sortMenuButton.text
font: sortMenuButton.font font: sortMenuButton.font
} }
}, }
FlatButtonWithToolTip { FlatButtonWithToolTip {
objectName: 'createRadioButton' objectName: 'createRadioButton'
visible: showCreateRadioButton visible: showCreateRadioButton
text: i18nc("Create a new radio", "Create a radio") text: i18nc("Create a new radio", "Create a radio")
icon.name: "list-add" icon.name: "list-add"
onClicked: createRadio() onClicked: createRadio()
}, }
FlatButtonWithToolTip { FlatButtonWithToolTip {
objectName: 'enqueueButton' objectName: 'enqueueButton'
visible: !showCreateRadioButton visible: !showCreateRadioButton
text: i18nc("Add current list to playlist", "Enqueue") text: i18nc("Add current list to playlist", "Enqueue")
icon.name: "list-add" icon.name: "list-add"
onClicked: enqueue() onClicked: enqueue()
}, }
FlatButtonWithToolTip { FlatButtonWithToolTip {
objectName: 'replaceAndPlayButton' objectName: 'replaceAndPlayButton'
visible: !showCreateRadioButton visible: !showCreateRadioButton
text: i18n("Play now, replacing contents of Playlist") text: i18n("Play now, replacing contents of Playlist")
icon.name: "media-playback-start" icon.name: "media-playback-start"
onClicked: replaceAndPlay() onClicked: replaceAndPlay()
}, }
FlatButtonWithToolTip { FlatButtonWithToolTip {
objectName: 'showArtistButton' objectName: 'showArtistButton'
visible: allowArtistNavigation && !showCreateRadioButton visible: allowArtistNavigation && !showCreateRadioButton
text: i18nc("Button to navigate to the artist of the album", "Display Artist") text: i18nc("Button to navigate to the artist of the album", "Display Artist")
icon.name: "view-media-artist" icon.name: "view-media-artist"
onClicked: showArtist() onClicked: showArtist()
}, }
FlatButtonWithToolTip { FlatButtonWithToolTip {
objectName: 'showFilterButton' objectName: 'showFilterButton'
visible: !showCreateRadioButton visible: !showCreateRadioButton
...@@ -189,19 +195,28 @@ ColumnLayout { ...@@ -189,19 +195,28 @@ ColumnLayout {
checked: expandedFilterView checked: expandedFilterView
onClicked: persistentSettings.expandedFilterView = !persistentSettings.expandedFilterView onClicked: persistentSettings.expandedFilterView = !persistentSettings.expandedFilterView
} }
] }
} }
HeaderFooterToolbar { ToolBar {
id: filterRow id: filterRow
toolbarType: HeaderFooterToolbar.ToolbarType.Header
Layout.fillWidth: true 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 visible: opacity > 0.0
opacity: 0 opacity: 0
contentItems: [ RowLayout {
anchors.fill: parent
Kirigami.SearchField { Kirigami.SearchField {
id: filterTextInput id: filterTextInput
objectName: 'filterTextInput' objectName: 'filterTextInput'
...@@ -216,15 +231,15 @@ ColumnLayout { ...@@ -216,15 +231,15 @@ ColumnLayout {
placeholderText: i18n("Search for album name, artist, etc.") placeholderText: i18n("Search for album name, artist, etc.")
Keys.onEscapePressed: persistentSettings.expandedFilterView = false; Keys.onEscapePressed: persistentSettings.expandedFilterView = false;
}, }
Item { Item {
width: Kirigami.Units.largeSpacing width: Kirigami.Units.largeSpacing
}, }
LabelWithToolTip { LabelWithToolTip {
text: i18n("Filter by rating: ") text: i18n("Filter by rating: ")
visible: showRating visible: showRating
}, }
RatingStar { RatingStar {
id: ratingFilter id: ratingFilter
objectName: 'ratingFilter' objectName: 'ratingFilter'
...@@ -233,9 +248,8 @@ ColumnLayout { ...@@ -233,9 +248,8 @@ ColumnLayout {
hoverWidgetOpacity: 1 hoverWidgetOpacity: 1
readOnly: false readOnly: false
}