From 8abbae47727aa13e27e96858ae4680a81d2b5e85 Mon Sep 17 00:00:00 2001 From: Bart De Vries Date: Fri, 16 Apr 2021 09:59:12 +0200 Subject: [PATCH] Refactor to re-usable header for list and details pages --- src/qml/EntryListPage.qml | 86 +++++------------------------- src/qml/FeedDetailsPage.qml | 79 ++-------------------------- src/qml/GenericListHeader.qml | 99 +++++++++++++++++++++++++++++++++++ src/resources.qrc | 1 + 4 files changed, 119 insertions(+), 146 deletions(-) create mode 100644 src/qml/GenericListHeader.qml diff --git a/src/qml/EntryListPage.qml b/src/qml/EntryListPage.qml index 103cec9a..db9fabf2 100644 --- a/src/qml/EntryListPage.qml +++ b/src/qml/EntryListPage.qml @@ -82,11 +82,13 @@ Kirigami.ScrollablePage { //onOriginYChanged: contentY = originY // Why is this needed? //headerPositioning: ListView.OverlayHeader // seems broken - header: Item { - //anchors.top: parent.top - anchors.right: parent.right - anchors.left: parent.left - height: Kirigami.Units.gridUnit * 8 + header: GenericListHeader { + id: headerImage + + image: feed.image + title: feed.name + subtitle: page.feed.authors.length === 0 ? "" : i18nc("by ", "by") + " " + page.feed.authors[0].name + MouseArea { anchors.fill: parent onClicked: { @@ -95,74 +97,14 @@ Kirigami.ScrollablePage { pageStack.push("qrc:/FeedDetailsPage.qml", {"feed": feed}) } } - Image { - id: backgroundimage - source: page.feed.image === "" ? "logo.png" : "file://"+Fetcher.image(page.feed.image) - fillMode: Image.PreserveAspectCrop - anchors.fill: parent - asynchronous: true - } - GaussianBlur { - id: blur - anchors.fill: backgroundimage - source: backgroundimage - radius: 12 - samples: 16 - deviation: 6 - } - ColorOverlay { - anchors.fill: blur - source: blur - color:"#87000000" //RGBA, but first value is actually the alpha channel - } - RowLayout { - property int size: Kirigami.Units.gridUnit * 6 - property int margin: Kirigami.Units.gridUnit * 1 - height: size - anchors.bottom: parent.bottom - anchors.left: parent.left - anchors.right: parent.right - anchors.leftMargin: margin - anchors.rightMargin: margin - anchors.bottomMargin: margin + } - Image { - id: frontimage - source: page.feed.image === "" ? "logo.png" : "file://"+Fetcher.image(page.feed.image) - Layout.maximumHeight: parent.size - Layout.maximumWidth: parent.size - asynchronous: true - } - ColumnLayout { - Layout.fillWidth: true - Layout.fillHeight: true - Layout.leftMargin: parent.margin/2 - Controls.Label { - Layout.fillWidth: true - Layout.fillHeight: true - text: page.feed.name - fontSizeMode: Text.Fit - font.pointSize: 18 - minimumPointSize: 12 - horizontalAlignment: Text.AlignLeft - verticalAlignment: Text.AlignBottom - color: "white" - opacity: 1 - elide: Text.ElideRight - wrapMode: Text.WordWrap - } - Controls.Label { - Layout.fillWidth: true - text: page.feed.authors.length === 0 ? "" : i18nc("by ", "by") + " " + page.feed.authors[0].name - fontSizeMode: Text.Fit - font.pointSize: 12 - minimumPointSize: 10 - horizontalAlignment: Text.AlignLeft - color: "white" - elide: Text.ElideRight - opacity: 1 - } - } + MouseArea { + anchors.fill: page.headerImage + onClicked: { + while(pageStack.depth > 2) + pageStack.pop() + pageStack.push("qrc:/FeedDetailsPage.qml", {"feed": feed}) } } } diff --git a/src/qml/FeedDetailsPage.qml b/src/qml/FeedDetailsPage.qml index aced840e..3af3d99b 100644 --- a/src/qml/FeedDetailsPage.qml +++ b/src/qml/FeedDetailsPage.qml @@ -17,85 +17,16 @@ Kirigami.ScrollablePage { id: page property QtObject feed; - property var headerHeight: Kirigami.Units.gridUnit * 8 + title: i18nc(" - Details", "%1 - Details", feed.name) - header: Item { + header: GenericListHeader { id: headerImage - anchors.top: parent.top - anchors.right: parent.right - anchors.left: parent.left - height: headerHeight - Image { - id: backgroundimage - source: page.feed.image === "" ? "logo.png" : "file://"+Fetcher.image(page.feed.image) - fillMode: Image.PreserveAspectCrop - anchors.fill: parent - asynchronous: true - } - GaussianBlur { - id: blur - anchors.fill: backgroundimage - source: backgroundimage - radius: 12 - samples: 16 - deviation: 6 - } - ColorOverlay { - anchors.fill: blur - source: blur - color:"#87000000" //RGBA, but first value is actually the alpha channel - } - RowLayout { - property int size: Kirigami.Units.gridUnit * 6 - property int margin: Kirigami.Units.gridUnit * 1 - height: size - anchors.bottom: parent.bottom - anchors.left: parent.left - anchors.right: parent.right - anchors.leftMargin: margin - anchors.rightMargin: margin - anchors.bottomMargin: margin - Image { - id: frontimage - source: page.feed.image === "" ? "logo.png" : "file://"+Fetcher.image(page.feed.image) - Layout.maximumHeight: parent.size - Layout.maximumWidth: parent.size - asynchronous: true - } - ColumnLayout { - Layout.fillWidth: true - Layout.fillHeight: true - Layout.leftMargin: parent.margin/2 - Controls.Label { - Layout.fillWidth: true - Layout.fillHeight: true - text: page.feed.name - fontSizeMode: Text.Fit - font.pointSize: 18 - minimumPointSize: 12 - horizontalAlignment: Text.AlignLeft - verticalAlignment: Text.AlignBottom - color: "white" - opacity: 1 - elide: Text.ElideRight - wrapMode: Text.WordWrap - } - Controls.Label { - Layout.fillWidth: true - text: page.feed.authors.length === 0 ? "" : i18nc("by ", "by") + " " + page.feed.authors[0].name - fontSizeMode: Text.Fit - font.pointSize: 12 - minimumPointSize: 10 - horizontalAlignment: Text.AlignLeft - color: "white" - elide: Text.ElideRight - opacity: 1 - } - } - } + image: feed.image + title: feed.name + subtitle: page.feed.authors.length === 0 ? "" : i18nc("by ", "by") + " " + page.feed.authors[0].name } ColumnLayout { diff --git a/src/qml/GenericListHeader.qml b/src/qml/GenericListHeader.qml new file mode 100644 index 00000000..aae8799a --- /dev/null +++ b/src/qml/GenericListHeader.qml @@ -0,0 +1,99 @@ +/** + * SPDX-FileCopyrightText: 2020 Tobias Fella + * SPDX-FileCopyrightText: 2021 Bart De Vries + * + * SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL + */ + +import QtQuick 2.14 +import QtQuick.Controls 2.14 as Controls +import QtQuick.Layouts 1.14 +import QtGraphicalEffects 1.15 + +import org.kde.kirigami 2.12 as Kirigami + +import org.kde.alligator 1.0 + +Item { + required property string image + required property string title + property string subtitle: "" + property var headerHeight: Kirigami.Units.gridUnit * 8 + + //anchors.top: parent.top // this seems to cause an anchor loop + anchors.right: parent.right + anchors.left: parent.left + height: headerHeight + + Image { + id: backgroundimage + source: image === "" ? "logo.png" : "file://"+Fetcher.image(image) + fillMode: Image.PreserveAspectCrop + anchors.fill: parent + asynchronous: true + } + GaussianBlur { + id: blur + anchors.fill: backgroundimage + source: backgroundimage + radius: 12 + samples: 16 + deviation: 6 + } + ColorOverlay { + anchors.fill: blur + source: blur + color:"#87000000" //RGBA, but first value is actually the alpha channel + } + RowLayout { + property int size: Kirigami.Units.gridUnit * 6 + property int margin: Kirigami.Units.gridUnit * 1 + height: size + anchors.bottom: parent.bottom + anchors.left: parent.left + anchors.right: parent.right + anchors.leftMargin: margin + anchors.rightMargin: margin + anchors.bottomMargin: margin + + Image { + id: frontimage + source: image === "" ? "logo.png" : "file://"+Fetcher.image(image) + Layout.maximumHeight: parent.size + Layout.maximumWidth: parent.size + asynchronous: true + } + ColumnLayout { + Layout.fillWidth: true + Layout.fillHeight: true + Layout.leftMargin: parent.margin/2 + Controls.Label { + Layout.fillWidth: true + Layout.fillHeight: true + text: title + fontSizeMode: Text.Fit + font.pointSize: 18 + minimumPointSize: 12 + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignBottom + color: "white" + opacity: 1 + elide: Text.ElideRight + wrapMode: Text.WordWrap + } + Controls.Label { + Layout.fillWidth: true + text: subtitle + fontSizeMode: Text.Fit + font.pointSize: 12 + minimumPointSize: 10 + horizontalAlignment: Text.AlignLeft + color: "white" + elide: Text.ElideRight + opacity: 1 + } + } + } +} + + diff --git a/src/resources.qrc b/src/resources.qrc index 3c4a10cc..65914310 100755 --- a/src/resources.qrc +++ b/src/resources.qrc @@ -15,6 +15,7 @@ qml/FooterBar.qml qml/QueuePage.qml qml/QueueDelegate.qml + qml/GenericListHeader.qml ../logo.png qtquickcontrols2.conf