diff --git a/src/qml/BaseTheme.qml b/src/qml/BaseTheme.qml --- a/src/qml/BaseTheme.qml +++ b/src/qml/BaseTheme.qml @@ -108,6 +108,9 @@ property int headerTitleFontSize: defaultFontPointSize * 2 + property int headerToolbarHeight: dp(48) + property int footerToolbarHeight: dp(30) + property int viewSelectorSmallSizeThreshold: 800 Label { diff --git a/src/qml/FileBrowserView.qml b/src/qml/FileBrowserView.qml --- a/src/qml/FileBrowserView.qml +++ b/src/qml/FileBrowserView.qml @@ -74,10 +74,6 @@ sortOrder: proxyModel.sortedAscending showRating: false - height: elisaTheme.navigationBarHeight - Layout.preferredHeight: height - Layout.minimumHeight: height - Layout.maximumHeight: height Layout.fillWidth: true Binding { @@ -101,7 +97,6 @@ GridView { id: contentDirectoryView - anchors.topMargin: 20 anchors.fill: parent activeFocusOnTab: true diff --git a/src/qml/GridBrowserView.qml b/src/qml/GridBrowserView.qml --- a/src/qml/GridBrowserView.qml +++ b/src/qml/GridBrowserView.qml @@ -56,10 +56,6 @@ enableGoBack: isSubPage sortOrder: if (contentModel) {contentModel.sortedAscending} else true - height: elisaTheme.navigationBarHeight - Layout.preferredHeight: height - Layout.minimumHeight: height - Layout.maximumHeight: height Layout.fillWidth: true Loader { @@ -100,7 +96,6 @@ GridView { id: contentDirectoryView - anchors.topMargin: 20 activeFocusOnTab: true keyNavigationEnabled: true diff --git a/src/qml/HeaderFooterToolbar.qml b/src/qml/HeaderFooterToolbar.qml --- a/src/qml/HeaderFooterToolbar.qml +++ b/src/qml/HeaderFooterToolbar.qml @@ -54,7 +54,11 @@ color: myPalette.window Layout.fillWidth: true - height: contentLayout.height + height: type == "footer" ? + elisaTheme.footerToolbarHeight : + elisaTheme.headerToolbarHeight + + // Content layout RowLayout { @@ -67,7 +71,6 @@ rightMargin: elisaTheme.layoutHorizontalMargin verticalCenter: parent.verticalCenter } - height: childrenRect.height + (elisaTheme.layoutVerticalMargin * 2) spacing: 0 // Items provided by the contentItems property will go here diff --git a/src/qml/ListBrowserView.qml b/src/qml/ListBrowserView.qml --- a/src/qml/ListBrowserView.qml +++ b/src/qml/ListBrowserView.qml @@ -64,10 +64,6 @@ enableGoBack: listView.isSubPage sortOrder: contentModel.sortedAscending - height: elisaTheme.navigationBarHeight - Layout.preferredHeight: height - Layout.minimumHeight: height - Layout.maximumHeight: height Layout.fillWidth: true Binding { @@ -102,7 +98,6 @@ ListView { id: contentDirectoryView - anchors.topMargin: 20 anchors.fill: parent Accessible.role: Accessible.List diff --git a/src/qml/NavigationActionBar.qml b/src/qml/NavigationActionBar.qml --- a/src/qml/NavigationActionBar.qml +++ b/src/qml/NavigationActionBar.qml @@ -26,9 +26,6 @@ spacing: 0 - anchors.topMargin: elisaTheme.layoutVerticalMargin - anchors.bottomMargin: elisaTheme.layoutVerticalMargin - property string mainTitle property string secondaryTitle property url image @@ -55,13 +52,30 @@ text: i18nc("navigate back in the views stack", "Back") iconName: (Qt.application.layoutDirection == Qt.RightToLeft) ? "go-next" : "go-previous" onTriggered: goBack() + enabled: enableGoBack + } + + Controls1.Action { + id: replaceAndPlayAction + text: i18n("Play now, replacing contents of Playlist") + iconName: "media-playback-start" + onTriggered: replaceAndPlay() + } + + Controls1.Action { + id: enqueueAction + text: i18nc("Add current list to playlist", "Enqueue") + iconName: "media-track-add-amarok" + onTriggered: enqueue() } Controls1.Action { id: showFilterAction shortcut: findAction.shortcut text: !navigationBar.expandedFilterView ? i18nc("Show filters in the navigation bar", "Show Search Options") : i18nc("Hide filters in the navigation bar", "Hide Search Options") - iconName: !navigationBar.expandedFilterView ? "go-down-search" : "go-up-search" + iconName: 'search' + checkable: true + checked: filterRow.opacity == 1.0 onTriggered: { persistentSettings.expandedFilterView = !persistentSettings.expandedFilterView expandedFilterView = persistentSettings.expandedFilterView @@ -78,340 +92,219 @@ onTriggered: sortOrder ? sort(Qt.DescendingOrder) : sort(Qt.AscendingOrder) } - RowLayout { - spacing: 0 - Layout.alignment: Qt.AlignTop - Layout.preferredHeight: elisaTheme.navigationBarHeight - Layout.minimumHeight: elisaTheme.navigationBarHeight - Layout.maximumHeight: elisaTheme.navigationBarHeight - - Controls1.ToolButton { - action: goPreviousAction - objectName: 'goPreviousButton' - - Keys.onReturnPressed: action.trigger() - Accessible.onPressAction: action.trigger() - - activeFocusOnTab: true - focus: enableGoBack - - Layout.leftMargin: !LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 - Layout.rightMargin: LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 - visible: enableGoBack - } - - Image { - id: mainIcon - source: image - - asynchronous: true - - sourceSize.height: elisaTheme.coverImageSize / 2 - sourceSize.width: elisaTheme.coverImageSize / 2 - - fillMode: Image.PreserveAspectFit - - Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft - - Layout.preferredHeight: elisaTheme.coverImageSize / 2 - Layout.minimumHeight: elisaTheme.coverImageSize / 2 - Layout.maximumHeight: elisaTheme.coverImageSize / 2 - Layout.preferredWidth: elisaTheme.coverImageSize / 2 - Layout.minimumWidth: elisaTheme.coverImageSize / 2 - Layout.maximumWidth: elisaTheme.coverImageSize / 2 - Layout.leftMargin: !LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 - Layout.rightMargin: LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 - } - - ColumnLayout { - Layout.preferredHeight: elisaTheme.coverImageSize / 1.9 - Layout.minimumHeight: elisaTheme.coverImageSize / 1.9 - Layout.maximumHeight: elisaTheme.coverImageSize / 1.9 - - spacing: 0 - - Layout.fillWidth: true - Layout.leftMargin: !LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 - Layout.rightMargin: LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 - - LabelWithToolTip { - id: albumLabel - - text: mainTitle - - Layout.fillWidth: true - Layout.alignment: Qt.AlignTop | Qt.AlignLeft - Layout.topMargin: secondaryTitle !== "" ? 0 : 9 - - elide: Text.ElideRight - fontSizeMode: Text.Fit - - Layout.preferredHeight: elisaTheme.coverImageSize / 5 - Layout.minimumHeight: elisaTheme.coverImageSize / 5 - Layout.maximumHeight: elisaTheme.coverImageSize / 5 - - color: myPalette.text + Controls1.Action { + id: showArtistAction + text: i18nc("Button to navigate to the artist of the album", "Display Artist") + iconName: "view-media-artist" + onTriggered: showArtist() + } - font { - pointSize: elisaTheme.defaultFontPointSize * 2 - } - } + HeaderFooterToolbar { + type: filterRow.visible? "other" : "header" + contentItems: [ - LabelWithToolTip { - id: authorLabel + Controls1.ToolButton { + action: goPreviousAction + objectName: 'goPreviousButton' - text: secondaryTitle + Keys.onReturnPressed: action.trigger() + Accessible.onPressAction: action.trigger() - color: myPalette.text + activeFocusOnTab: true + focus: enableGoBack + }, + Item { + id: spacer + width: elisaTheme.layoutHorizontalMargin + }, + Image { + id: mainIcon + source: image - Layout.fillWidth: true - Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter + height: authorAndAlbumLayout.height + width: height + sourceSize.height: height + sourceSize.width: width + fillMode: Image.PreserveAspectFit + asynchronous: true + + Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft + }, + Item { + width: elisaTheme.layoutHorizontalMargin + visible: mainIcon.visible + }, + ColumnLayout { + id: authorAndAlbumLayout + + LabelWithToolTip { + id: albumLabel + Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter + Layout.fillWidth: true - font { - pointSize: elisaTheme.defaultFontPointSize + text: mainTitle + font.pointSize: authorLabel.visible ? + Math.round(elisaTheme.defaultFontPointSize * 1.2) : + elisaTheme.headerTitleFontSize + font.weight: authorLabel.visible ? Font.Bold : undefined + elide: Text.ElideRight } + LabelWithToolTip { + id: authorLabel - elide: Text.ElideRight - - visible: secondaryTitle !== "" - } - - RowLayout { - Layout.fillWidth: true - spacing: 0 - Layout.bottomMargin: secondaryTitle !== "" ? 0 : 14 - - Controls1.Button { - objectName: 'enqueueButton' - text: i18nc("Add current list to playlist", "Enqueue") - iconName: "media-track-add-amarok" - - activeFocusOnTab: true - focus: true + Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter + Layout.fillWidth: true - onClicked: enqueue() - Keys.onReturnPressed: enqueue() - Accessible.onPressAction: onClicked + text: secondaryTitle + font.pointSize: elisaTheme.defaultFontPointSize + elide: Text.ElideRight - Layout.leftMargin: 0 - Layout.rightMargin: 0 + visible: secondaryTitle !== "" } + }, + Controls1.ToolButton { + action: enqueueAction + objectName: 'enqueueButton' - Controls1.Button { - objectName: 'replaceAndPlayButton' - text: i18nc("Clear playlist and play", "Replace and Play") - tooltip: i18nc("Clear playlist and add current list to it", "Replace PlayList and Play Now") - iconName: "media-playback-start" - - activeFocusOnTab: true - - onClicked: replaceAndPlay() - Keys.onReturnPressed: replaceAndPlay() - Accessible.onPressAction: onClicked + Keys.onReturnPressed: action.trigger() + Accessible.onPressAction: action.trigger() - Layout.leftMargin: !LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 - Layout.rightMargin: LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 - } + activeFocusOnTab: true + focus: true + }, + Controls1.ToolButton { + action: replaceAndPlayAction + objectName: 'replaceAndPlayButton' - Controls1.Button { - objectName: 'showArtistButton' - id: showArtistButton + Keys.onReturnPressed: action.trigger() + Accessible.onPressAction: action.trigger() - visible: allowArtistNavigation - text: i18nc("Button to navigate to the artist of the album", "Display Artist") - iconName: "view-media-artist" + activeFocusOnTab: true + }, + Controls1.ToolButton { + action: showArtistAction + objectName: 'showArtistButton' - activeFocusOnTab: true + Keys.onReturnPressed: action.trigger() + Accessible.onPressAction: action.trigger() - onClicked: showArtist() - Keys.onReturnPressed: onClicked - Accessible.onPressAction: onClicked + activeFocusOnTab: true - Layout.leftMargin: !LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 - Layout.rightMargin: LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 - } + visible: allowArtistNavigation + }, + Controls1.ToolButton { + action: sortAction + objectName: 'sortAscendingButton' - Item { - Layout.fillWidth: true - } + Keys.onReturnPressed: action.trigger() + Accessible.onPressAction: action.trigger() - Controls1.ToolButton { - action: showFilterAction - objectName: 'showFilterButton' + activeFocusOnTab: true - activeFocusOnTab: true + visible: enableSorting + }, + Controls1.ToolButton { + action: showFilterAction + objectName: 'showFilterButton' - Keys.onReturnPressed: action.trigger() - Accessible.onPressAction: action.trigger() + Keys.onReturnPressed: action.trigger() + Accessible.onPressAction: action.trigger() - Layout.alignment: Qt.AlignRight - Layout.leftMargin: !LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 - Layout.rightMargin: LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 - } + activeFocusOnTab: true } - } + ] } - RowLayout { + HeaderFooterToolbar { + type: "header" id: filterRow - spacing: 0 - visible: opacity > 0.0 opacity: 0 - Layout.preferredHeight: elisaTheme.navigationBarFilterHeight - Layout.minimumHeight: elisaTheme.navigationBarFilterHeight - Layout.maximumHeight: elisaTheme.navigationBarFilterHeight - Layout.fillWidth: true - Layout.topMargin: elisaTheme.layoutVerticalMargin * 2 - Layout.leftMargin: !LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 - Layout.rightMargin: LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 - Layout.alignment: Qt.AlignTop - - LabelWithToolTip { - text: i18nc("before the TextField input of the filter", "Search: ") - - font.bold: true - - Layout.bottomMargin: 0 - - color: myPalette.text - } - - TextField { - id: filterTextInput - objectName: 'filterTextInput' - - horizontalAlignment: TextInput.AlignLeft - - Accessible.role: Accessible.EditableText + contentItems: [ + TextField { + id: filterTextInput + objectName: 'filterTextInput' - placeholderText: i18nc("Placeholder text in the filter text box", "Album name, artist, etc.") - - Layout.bottomMargin: 0 - Layout.fillWidth: true - Layout.minimumWidth: (placeHolderTextWidth.boundingRect.width - placeHolderTextWidth.boundingRect.x) * 1.2 - implicitWidth: (placeHolderTextWidth.boundingRect.width - placeHolderTextWidth.boundingRect.x) * 1.2 - - TextMetrics { - id: placeHolderTextWidth - text: filterTextInput.placeholderText - } + Layout.fillWidth: true - Image { - anchors.top: parent.top - anchors.bottom: parent.bottom - anchors.right: parent.right - anchors.margins: elisaTheme.filterClearButtonMargin - id: clearText - fillMode: Image.PreserveAspectFit - smooth: true - visible: parent.text - source: Qt.resolvedUrl(elisaTheme.clearIcon) - height: parent.height - width: parent.height - sourceSize.width: parent.height - sourceSize.height: parent.height - mirror: LayoutMirroring.enabled - - MouseArea { - id: clear - anchors { horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter } - height: parent.parent.height - width: parent.parent.height - onClicked: { - parent.parent.text = "" - parent.parent.forceActiveFocus() + Accessible.role: Accessible.EditableText + + placeholderText: i18n("Search for album name, artist, etc.") + + Image { + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.right: parent.right + anchors.margins: elisaTheme.filterClearButtonMargin + id: clearText + fillMode: Image.PreserveAspectFit + smooth: true + visible: parent.text + source: Qt.resolvedUrl(elisaTheme.clearIcon) + height: parent.height + width: parent.height + sourceSize.width: parent.height + sourceSize.height: parent.height + mirror: LayoutMirroring.enabled + + MouseArea { + id: clear + anchors { horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter } + height: parent.parent.height + width: parent.parent.height + onClicked: { + parent.parent.text = "" + parent.parent.forceActiveFocus() + } } } - } - } - - LabelWithToolTip { - text: i18nc("before the Rating widget input of the filter", "Rating: ") - visible: showRating - - font.bold: true - - color: myPalette.text - - Layout.bottomMargin: 0 - Layout.leftMargin: !LayoutMirroring.enabled ? (elisaTheme.layoutHorizontalMargin * 2) : 0 - Layout.rightMargin: LayoutMirroring.enabled ? (elisaTheme.layoutHorizontalMargin * 2) : 0 - } - - RatingStar { - id: ratingFilter - objectName: 'ratingFilter' - - visible: showRating - hoverWidgetOpacity: 1 - - - readOnly: false - - starSize: elisaTheme.ratingStarSize - - Layout.bottomMargin: 0 - } - - Item { - Layout.fillWidth: true - implicitWidth: elisaTheme.layoutHorizontalMargin * 4 - } + }, + Item { + width: elisaTheme.layoutHorizontalMargin + }, + LabelWithToolTip { + text: i18n("Filter by rating: ") - Controls1.ToolButton { - action: sortAction - objectName: 'sortAscendingButton' + visible: showRating + }, + RatingStar { + id: ratingFilter + objectName: 'ratingFilter' - activeFocusOnTab: true + visible: showRating + hoverWidgetOpacity: 1 - Keys.onReturnPressed: action.trigger() - Accessible.onPressAction: action.trigger() + readOnly: false - Layout.alignment: Qt.AlignRight - Layout.leftMargin: !LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 - Layout.rightMargin: LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 - visible: enableSorting - } + starSize: elisaTheme.ratingStarSize + } + ] } states: [ State { name: 'collapsed' when: !expandedFilterView - PropertyChanges { - target: navigationBar - height: elisaTheme.navigationBarHeight + elisaTheme.layoutVerticalMargin * 2 - } PropertyChanges { target: filterRow opacity: 0.0 } }, State { name: 'expanded' when: expandedFilterView - PropertyChanges { - target: navigationBar - height: elisaTheme.navigationBarHeight + elisaTheme.navigationBarFilterHeight + elisaTheme.layoutVerticalMargin * 4 - } PropertyChanges { target: filterRow opacity: 1.0 } } ] transitions: Transition { from: "expanded,collapsed" - PropertyAnimation { - properties: "height" - easing.type: Easing.Linear - duration: 250 - } PropertyAnimation { properties: "opacity" easing.type: Easing.Linear