From 6930ff71d0db79a99ebd4adfdb79bfb70b82c324 Mon Sep 17 00:00:00 2001 From: Bart De Vries Date: Wed, 1 Jun 2022 15:57:20 +0200 Subject: [PATCH] Re-arrange mobile player and add extra row for toolbuttons --- src/qml/PlayerControls.qml | 111 +++++++++++++++++++++++++++++-------- src/qml/main.qml | 20 +------ 2 files changed, 90 insertions(+), 41 deletions(-) diff --git a/src/qml/PlayerControls.qml b/src/qml/PlayerControls.qml index 809ddf95..2ba55128 100644 --- a/src/qml/PlayerControls.qml +++ b/src/qml/PlayerControls.qml @@ -1,5 +1,5 @@ /** - * SPDX-FileCopyrightText: 2021 Bart De Vries + * SPDX-FileCopyrightText: 2021-2022 Bart De Vries * SPDX-FileCopyrightText: 2021 Devin Lin * * SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL @@ -30,6 +30,18 @@ Kirigami.Page { Kirigami.Theme.colorSet: Kirigami.Theme.View Kirigami.Theme.inherit: false + Component { + id: slider + Controls.Slider { + enabled: AudioManager.entry + padding: 0 + from: 0 + to: AudioManager.duration / 1000 + value: AudioManager.position / 1000 + onMoved: AudioManager.seek(value * 1000) + } + } + background: Image { opacity: 0.2 source: AudioManager.entry.cachedImage @@ -58,7 +70,8 @@ Kirigami.Page { id: playerControlsColumn anchors.fill: parent anchors.topMargin: Kirigami.Units.largeSpacing * 2 - anchors.bottomMargin: Kirigami.Units.largeSpacing * 2 + anchors.bottomMargin: Kirigami.Units.largeSpacing + spacing: 0 Controls.Button { id: swipeUpButton @@ -69,6 +82,7 @@ Kirigami.Page { flat: true Layout.alignment: Qt.AlignHCenter Layout.topMargin: 0 + Layout.bottomMargin: Kirigami.Units.largeSpacing onClicked: toClose.restart() } @@ -78,13 +92,13 @@ Kirigami.Page { currentIndex: 0 Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter Layout.preferredWidth: parent.width - Layout.preferredHeight: parent.height - media.height - indicator.height - indicator.Layout.bottomMargin - swipeUpButton.height + Layout.preferredHeight: parent.height - media.height - swipeUpButton.height Layout.margins: 0 // we are unable to use Controls.Control here to set padding since it seems to eat touch events on the parent flickable Item { Item { - property int textMargin: Kirigami.Units.gridUnit // margin above and below the text below the image + property int textMargin: Kirigami.Units.largeSpacing // margin above the text below the image anchors.fill: parent anchors.leftMargin: Kirigami.Units.largeSpacing * 2 anchors.rightMargin: Kirigami.Units.largeSpacing * 2 @@ -121,7 +135,7 @@ Kirigami.Page { right: parent.right leftMargin: root.isWidescreen ? parent.textMargin : 0 topMargin: root.isWidescreen ? 0 : parent.textMargin - bottomMargin: root.isWidescreen ? 0 : parent.textMargin + bottomMargin: 0 } ColumnLayout { @@ -129,6 +143,7 @@ Kirigami.Page { anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left anchors.right: parent.right + anchors.margins: 0 Controls.Label { text: AudioManager.entry ? AudioManager.entry.title : i18n("No Title") elide: Text.ElideRight @@ -210,21 +225,14 @@ Kirigami.Page { } } - Controls.PageIndicator { - id: indicator - - count: swipeView.count - currentIndex: swipeView.currentIndex - Layout.alignment: Qt.AlignHCenter - Layout.bottomMargin: Kirigami.Units.gridUnit - } - Item { id: media implicitHeight: mediaControls.height Layout.leftMargin: Kirigami.Units.largeSpacing * 2 Layout.rightMargin: Kirigami.Units.largeSpacing * 2 + Layout.bottomMargin: 0 + Layout.topMargin: 0 Layout.fillWidth: true ColumnLayout { @@ -232,19 +240,71 @@ Kirigami.Page { anchors.left: parent.left anchors.right: parent.right + anchors.bottom: parent.bottom anchors.margins: 0 + spacing: 0 - Controls.Slider { - enabled: AudioManager.entry + RowLayout { + id: contextButtons + Layout.preferredHeight: Kirigami.Units.gridUnit * 3 + Layout.leftMargin: Kirigami.Units.largeSpacing + Layout.rightMargin: Kirigami.Units.largeSpacing + Layout.topMargin: Kirigami.Units.smallSpacing + Layout.bottomMargin: Kirigami.Units.smallSpacing + Layout.fillWidth: true + property int iconSize: Math.floor(Kirigami.Units.gridUnit * 1.3) + property int buttonSize: bottomRow.buttonSize + + Controls.ToolButton { + visible: AudioManager.entry + Layout.maximumHeight: parent.height + Layout.preferredHeight: contextButtons.buttonSize + Layout.maximumWidth: height + Layout.preferredWidth: height + icon.name: "viewimage" + icon.width: contextButtons.iconSize + icon.height: contextButtons.iconSize + onClicked: { + swipeView.currentIndex = 0; + } + } + Controls.ToolButton { + visible: AudioManager.entry + Layout.maximumHeight: parent.height + Layout.preferredHeight: contextButtons.buttonSize + Layout.maximumWidth: height + Layout.preferredWidth: height + icon.name: "help-about-symbolic" + icon.width: contextButtons.iconSize + icon.height: contextButtons.iconSize + onClicked: { + swipeView.currentIndex = 1; + } + } + Controls.ToolButton { + visible: AudioManager.entry && chapterList.count !== 0 + Layout.maximumHeight: parent.height + Layout.preferredHeight: contextButtons.buttonSize + Layout.maximumWidth: height + Layout.preferredWidth: height + icon.name: "view-media-playlist" + icon.width: contextButtons.iconSize + icon.height: contextButtons.iconSize + onClicked: { + swipeView.currentIndex = 2; + } + } + } + + Loader { + active: !root.isWidescreen + visible: !root.isWidescreen + sourceComponent: slider Layout.fillWidth: true Layout.leftMargin: Kirigami.Units.largeSpacing Layout.rightMargin: Kirigami.Units.largeSpacing - padding: 0 - from: 0 - to: AudioManager.duration / 1000 - value: AudioManager.position / 1000 - onMoved: AudioManager.seek(value * 1000) } + RowLayout { id: controls Layout.leftMargin: Kirigami.Units.largeSpacing @@ -256,8 +316,11 @@ Kirigami.Page { text: AudioManager.formattedPosition font: Kirigami.Theme.smallFont } - Item { + Loader { + active: root.isWidescreen + sourceComponent: slider Layout.fillWidth: true + } Item { Layout.alignment: Qt.AlignRight @@ -288,8 +351,8 @@ Kirigami.Page { Layout.rightMargin: Kirigami.Units.largeSpacing Layout.maximumWidth: Number.POSITIVE_INFINITY //TODO ? Layout.fillWidth: true - Layout.margins: 0 - Layout.topMargin: Kirigami.Units.largeSpacing + Layout.bottomMargin: 0 + Layout.topMargin: 0 // Make button width scale properly on narrow windows instead of overflowing property int buttonSize: Math.min(playButton.implicitWidth, ((playerControlsColumn.width - 4 * spacing) / 5 - playButton.leftPadding - playButton.rightPadding)) diff --git a/src/qml/main.qml b/src/qml/main.qml index 3ed7a6c5..28e51af5 100644 --- a/src/qml/main.qml +++ b/src/qml/main.qml @@ -1,6 +1,6 @@ /** * SPDX-FileCopyrightText: 2020 Tobias Fella - * SPDX-FileCopyrightText: 2021 Bart De Vries + * SPDX-FileCopyrightText: 2021-2022 Bart De Vries * * SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL */ @@ -35,21 +35,6 @@ Kirigami.ApplicationWindow { property string currentPage: "" property bool isWidescreen: root.width >= root.height - onIsWidescreenChanged: { - changeNavigation(!isWidescreen); - } - - function changeNavigation(isNarrow) { - if (globalDrawer) { - if (isNarrow) { - globalDrawer.collapsed = true - globalDrawer.width = Layout.implicitWidth - } else { - globalDrawer.collapsed = false - globalDrawer.width = originalWidth - } - } - } function getPage(page) { switch (page) { @@ -98,10 +83,11 @@ Kirigami.ApplicationWindow { id: sidebar active: !Kirigami.Settings.isMobile || root.isWidescreen sourceComponent: Kirigami.GlobalDrawer { - width: 200 modal: false isMenu: false collapsible: !Kirigami.Settings.isMobile + collapsed: !root.isWidescreen + width: root.isWidescreen ? root.originalWidth : Layout.implicitWidth header: Kirigami.AbstractApplicationHeader {} Kirigami.Theme.colorSet: Kirigami.Theme.Window