Refactor to re-usable header for list and details pages

src/qml/EntryListPage.qml

@@ -82,11 +82,13 @@ Kirigami.ScrollablePage {
         //onOriginYChanged: contentY = originY // Why is this needed?
 
         //headerPositioning: ListView.OverlayHeader  // seems broken
-        header: Item {
+        header: GenericListHeader {
-            //anchors.top: parent.top
+            id: headerImage
-            anchors.right: parent.right
+
-            anchors.left: parent.left
+            image: feed.image
-            height: Kirigami.Units.gridUnit * 8
+            title: feed.name
+            subtitle: page.feed.authors.length === 0 ? "" : i18nc("by <author(s)>", "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 {
+        MouseArea {
-                    id: frontimage
+            anchors.fill: page.headerImage
-                    source: page.feed.image === "" ? "logo.png" : "file://"+Fetcher.image(page.feed.image)
+            onClicked: {
-                    Layout.maximumHeight: parent.size
+                while(pageStack.depth > 2)
-                    Layout.maximumWidth: parent.size
+                    pageStack.pop()
-                    asynchronous: true
+                pageStack.push("qrc:/FeedDetailsPage.qml", {"feed": feed})
-                }
-                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 <author(s)>", "by") + " " + page.feed.authors[0].name
-                        fontSizeMode: Text.Fit
-                        font.pointSize: 12
-                        minimumPointSize: 10
-                        horizontalAlignment: Text.AlignLeft
-                        color: "white"
-                        elide: Text.ElideRight
-                        opacity: 1
-                    }
-                }
             }
         }
     }

src/qml/FeedDetailsPage.qml

@@ -17,85 +17,16 @@ Kirigami.ScrollablePage {
     id: page
 
     property QtObject feed;
-    property var headerHeight: Kirigami.Units.gridUnit * 8
+
 
     title: i18nc("<Feed Name> - 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 {
+        image: feed.image
-                id: frontimage
+        title: feed.name
-                source: page.feed.image === "" ? "logo.png" : "file://"+Fetcher.image(page.feed.image)
+        subtitle: page.feed.authors.length === 0 ? "" : i18nc("by <author(s)>", "by") + " " + page.feed.authors[0].name
-                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 <author(s)>", "by") + " " + page.feed.authors[0].name
-                    fontSizeMode: Text.Fit
-                    font.pointSize: 12
-                    minimumPointSize: 10
-                    horizontalAlignment: Text.AlignLeft
-                    color: "white"
-                    elide: Text.ElideRight
-                    opacity: 1
-                }
-            }
-        }
     }
 
     ColumnLayout {

src/qml/GenericListHeader.qml

@@ -0,0 +1,99 @@
+/**
+ * SPDX-FileCopyrightText: 2020 Tobias Fella <fella@posteo.de>
+ * SPDX-FileCopyrightText: 2021 Bart De Vries <bart@mogwai.be>
+ *
+ * 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
+            }
+        }
+    }
+}
+
+

src/resources.qrc

@@ -15,6 +15,7 @@
         <file alias="FooterBar.qml">qml/FooterBar.qml</file>
         <file alias="QueuePage.qml">qml/QueuePage.qml</file>
         <file alias="QueueDelegate.qml">qml/QueueDelegate.qml</file>
+        <file alias="GenericListHeader.qml">qml/GenericListHeader.qml</file>
         <file alias="logo.png">../logo.png</file>
         <file>qtquickcontrols2.conf</file>
     </qresource>