mirror of https://github.com/KDE/kasts.git
Refactor to re-usable header for list and details pages
This commit is contained in:
Bart De Vries
parent
97d8e8290a
commit
8abbae4772
|
|
@ -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 <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 {
|
||||
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 <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
|
||||
}
|
||||
}
|
||||
MouseArea {
|
||||
anchors.fill: page.headerImage
|
||||
onClicked: {
|
||||
while(pageStack.depth > 2)
|
||||
pageStack.pop()
|
||||
pageStack.push("qrc:/FeedDetailsPage.qml", {"feed": feed})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
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 <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
|
||||
}
|
||||
}
|
||||
}
|
||||
image: feed.image
|
||||
title: feed.name
|
||||
subtitle: page.feed.authors.length === 0 ? "" : i18nc("by <author(s)>", "by") + " " + page.feed.authors[0].name
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue