From 7bbd5ffc1c5c3d9e5c1514589975c89dc0dec233 Mon Sep 17 00:00:00 2001 From: Nate Graham Date: Fri, 18 Sep 2020 13:25:49 -0600 Subject: [PATCH] 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. --- src/CMakeLists.txt | 1 - src/qml/BaseTheme.qml | 3 ++ src/qml/ContextView.qml | 56 ++++++++++++++++++----------- src/qml/HeaderFooterToolbar.qml | 60 ------------------------------- src/qml/MediaPlayListView.qml | 52 +++++++++++++++------------ src/qml/NavigationActionBar.qml | 64 ++++++++++++++++++++------------- src/resources.qrc | 1 - 7 files changed, 106 insertions(+), 131 deletions(-) delete mode 100644 src/qml/HeaderFooterToolbar.qml diff --git a/src/CMakeLists.txt b/src/CMakeLists.txt index acc4bbce..6d2f11a1 100644 --- a/src/CMakeLists.txt +++ b/src/CMakeLists.txt @@ -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 diff --git a/src/qml/BaseTheme.qml b/src/qml/BaseTheme.qml index 92197f10..c0084f9e 100644 --- a/src/qml/BaseTheme.qml +++ b/src/qml/BaseTheme.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 diff --git a/src/qml/ContextView.qml b/src/qml/ContextView.qml index 6c077b06..0aecfe86 100644 --- a/src/qml/ContextView.qml +++ b/src/qml/ContextView.qml @@ -1,6 +1,6 @@ /* SPDX-FileCopyrightText: 2016 (c) Matthieu Gallien - SPDX-FileCopyrightText: 2019 (c) Nate Graham + SPDX-FileCopyrightText: 2019-2020 (c) Nate Graham 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 } - ] + } } } diff --git a/src/qml/HeaderFooterToolbar.qml b/src/qml/HeaderFooterToolbar.qml deleted file mode 100644 index abe0f339..00000000 --- a/src/qml/HeaderFooterToolbar.qml +++ /dev/null @@ -1,60 +0,0 @@ -/* - SPDX-FileCopyrightText: 2016 (c) Matthieu Gallien - SPDX-FileCopyrightText: 2019 (c) Nate Graham - - 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 - } -} diff --git a/src/qml/MediaPlayListView.qml b/src/qml/MediaPlayListView.qml index 8c5c24aa..c9777e5f 100644 --- a/src/qml/MediaPlayListView.qml +++ b/src/qml/MediaPlayListView.qml @@ -1,6 +1,6 @@ /* SPDX-FileCopyrightText: 2016 (c) Matthieu Gallien - SPDX-FileCopyrightText: 2019 (c) Nate Graham + SPDX-FileCopyrightText: 2019-2020 (c) Nate Graham 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 + } } } } diff --git a/src/qml/NavigationActionBar.qml b/src/qml/NavigationActionBar.qml index fce5d5be..bb7b975d 100644 --- a/src/qml/NavigationActionBar.qml +++ b/src/qml/NavigationActionBar.qml @@ -1,5 +1,6 @@ /* SPDX-FileCopyrightText: 2016 (c) Matthieu Gallien + SPDX-FileCopyrightText: 2020 (c) Nate Graham 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: [ diff --git a/src/resources.qrc b/src/resources.qrc index f6da361b..f83b2e51 100644 --- a/src/resources.qrc +++ b/src/resources.qrc @@ -35,7 +35,6 @@ qml/ImageWithFallback.qml qml/EditableMetaDataDelegate.qml qml/ViewSelectorDelegate.qml - qml/HeaderFooterToolbar.qml qml/TracksDiscHeader.qml qml/NativeMenuItemFromAction.qml qml/NativeTrayMenu.qml -- GitLab