mirror of
https://github.com/KDE/kasts.git
synced 2025-01-28 16:19:56 +01:00
Work on getting feedList to look like CardsGridView
Next up, add actions somehow.
This commit is contained in:
Bart De Vries
parent
cfea2e9ad1
commit
1ebbafc87f
@ -10,54 +10,182 @@ import QtQuick.Controls 2.14 as Controls
|
||||
import QtQuick.Layouts 1.14
|
||||
import QtGraphicalEffects 1.15
|
||||
|
||||
import org.kde.kirigami 2.15 as Kirigami
|
||||
import org.kde.kirigami 2.12 as Kirigami
|
||||
|
||||
import org.kde.alligator 1.0
|
||||
|
||||
Item {
|
||||
Controls.ItemDelegate {
|
||||
id: feedDelegate
|
||||
|
||||
property int cardSize
|
||||
property int cardMargin
|
||||
required property int cardSize
|
||||
required property int cardMargin
|
||||
|
||||
Image {
|
||||
id: img
|
||||
asynchronous: true
|
||||
source: feed.image === "" ? "logo.png" : "file://" + Fetcher.image(feed.image)
|
||||
fillMode: Image.PreserveAspectFit
|
||||
x: cardMargin
|
||||
y: cardMargin
|
||||
sourceSize.width: cardSize
|
||||
sourceSize.height: cardSize
|
||||
height: cardSize - cardMargin
|
||||
width: cardSize - cardMargin
|
||||
property int borderWidth: Kirigami.Units.devicePixelRatio
|
||||
|
||||
implicitWidth: cardSize + 2 * cardMargin
|
||||
implicitHeight: cardSize + 2 * cardMargin
|
||||
|
||||
background: Kirigami.ShadowedRectangle {
|
||||
anchors.fill: parent
|
||||
anchors.margins: cardMargin
|
||||
anchors.leftMargin: cardMargin
|
||||
color: Kirigami.Theme.backgroundColor
|
||||
|
||||
radius: Kirigami.Units.smallSpacing
|
||||
|
||||
shadow.size: Kirigami.Units.largeSpacing
|
||||
shadow.color: Qt.rgba(0.0, 0.0, 0.0, 0.15)
|
||||
shadow.yOffset: borderWidth * 2
|
||||
|
||||
border.width: borderWidth
|
||||
border.color: Qt.tint(Kirigami.Theme.textColor,
|
||||
Qt.rgba(color.r, color.g, color.b, 0.6))
|
||||
}
|
||||
|
||||
contentItem: Item {
|
||||
anchors.fill: parent
|
||||
anchors.margins: cardMargin + borderWidth
|
||||
anchors.leftMargin: cardMargin + borderWidth
|
||||
implicitWidth: cardSize - 2 * borderWidth
|
||||
implicitHeight: cardSize - 2 * borderWidth
|
||||
|
||||
Loader {
|
||||
id: img
|
||||
anchors.fill: parent
|
||||
sourceComponent: (feed.image === "") ? fallbackImg : realImg
|
||||
}
|
||||
|
||||
Component {
|
||||
id: realImg
|
||||
Image {
|
||||
//id: img
|
||||
visible: feed.image !== ""
|
||||
asynchronous: true
|
||||
source: feed.image === "" ? "logo.png" : "file://" + Fetcher.image(feed.image)
|
||||
fillMode: Image.PreserveAspectFit
|
||||
sourceSize.width: cardSize - 2 * borderWidth
|
||||
sourceSize.height: cardSize - 2 * borderWidth
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: fallbackImg
|
||||
Item {
|
||||
anchors.fill: img
|
||||
Kirigami.Icon {
|
||||
visible: (feed.image === "")
|
||||
anchors.fill: parent
|
||||
source: "rss"
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: header
|
||||
opacity: 0.5
|
||||
color: "black"
|
||||
}
|
||||
|
||||
Kirigami.Heading {
|
||||
id: header
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
padding: 10
|
||||
text: feed.name
|
||||
level: 2
|
||||
color: "white"
|
||||
wrapMode: Text.Wrap
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
anchors.fill: img
|
||||
onClicked: {
|
||||
lastFeed = feed.url
|
||||
pageStack.push("qrc:/EntryListPage.qml", {"feed": feed})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: rectangle
|
||||
visible: feed.unreadEntryCount > 0
|
||||
anchors.top: img.top
|
||||
anchors.right: img.right
|
||||
width: img.width / 5
|
||||
height: img.height / 5
|
||||
color: Kirigami.Theme.highlightColor
|
||||
}
|
||||
Rectangle {
|
||||
id: countRectangle
|
||||
visible: feed.unreadEntryCount > 0
|
||||
anchors.top: img.top
|
||||
anchors.right: img.right
|
||||
width: actionsButton.width
|
||||
height: actionsButton.height
|
||||
color: Kirigami.Theme.highlightColor
|
||||
opacity: 0.8
|
||||
radius: Kirigami.Units.smallSpacing - 2 * borderWidth
|
||||
}
|
||||
|
||||
Controls.Label {
|
||||
id: countLabel
|
||||
visible: feed.unreadEntryCount > 0
|
||||
anchors.centerIn: rectangle
|
||||
anchors.margins: Kirigami.Units.smallSpacing
|
||||
text: feed.unreadEntryCount
|
||||
font.bold: true
|
||||
color: Kirigami.Theme.highlightedTextColor
|
||||
Controls.Label {
|
||||
id: countLabel
|
||||
visible: feed.unreadEntryCount > 0
|
||||
anchors.centerIn: countRectangle
|
||||
anchors.margins: Kirigami.Units.smallSpacing
|
||||
text: feed.unreadEntryCount
|
||||
font.bold: true
|
||||
color: Kirigami.Theme.highlightedTextColor
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: actionsRectangle
|
||||
visible: false //TODO: temporary hack
|
||||
anchors.fill: actionsButton
|
||||
color: "black"
|
||||
opacity: 0.5
|
||||
radius: Kirigami.Units.smallSpacing - 2 * borderWidth
|
||||
}
|
||||
|
||||
Controls.Button {
|
||||
id: actionsButton
|
||||
visible: false //TODO: temporary hack
|
||||
anchors.right: img.right
|
||||
anchors.bottom: img.bottom
|
||||
anchors.margins: 0
|
||||
padding: 0
|
||||
flat: true
|
||||
icon.name: "overflow-menu"
|
||||
icon.color: "white"
|
||||
}
|
||||
|
||||
Kirigami.ActionToolBar {
|
||||
anchors.right: img.right
|
||||
anchors.left: img.left
|
||||
anchors.bottom: img.bottom
|
||||
anchors.margins: 0
|
||||
padding: 0
|
||||
actions: [
|
||||
Kirigami.Action {
|
||||
icon.name: "delete"
|
||||
displayHint: Kirigami.Action.DisplayHint.AlwaysHide
|
||||
onTriggered: {
|
||||
if(pageStack.depth > 1 && feed.url === lastFeed)
|
||||
while(pageStack.depth > 1)
|
||||
pageStack.pop()
|
||||
feedsModel.removeFeed(index)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// Rounded edges
|
||||
layer.enabled: true
|
||||
layer.effect: OpacityMask {
|
||||
maskSource: Item {
|
||||
width: img.width
|
||||
height: img.height
|
||||
Rectangle {
|
||||
anchors.centerIn: parent
|
||||
width: img.adapt ? img.width : Math.min(img.width, img.height)
|
||||
height: img.adapt ? img.height : width
|
||||
radius: Kirigami.Units.smallSpacing - borderWidth
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*actions: [
|
||||
|
||||
@ -18,6 +18,9 @@ Kirigami.ScrollablePage {
|
||||
id: subscriptionPage
|
||||
title: i18n("Subscriptions")
|
||||
|
||||
anchors.margins: 0
|
||||
padding: 0
|
||||
|
||||
property var lastFeed: ""
|
||||
|
||||
supportsRefreshing: true
|
||||
@ -47,10 +50,6 @@ Kirigami.ScrollablePage {
|
||||
}
|
||||
]
|
||||
|
||||
AddFeedSheet {
|
||||
id: addSheet
|
||||
}
|
||||
|
||||
actions.main: Kirigami.Action {
|
||||
text: i18n("Add feed")
|
||||
iconName: "list-add"
|
||||
@ -59,6 +58,10 @@ Kirigami.ScrollablePage {
|
||||
}
|
||||
}
|
||||
|
||||
AddFeedSheet {
|
||||
id: addSheet
|
||||
}
|
||||
|
||||
Kirigami.PlaceholderMessage {
|
||||
visible: feedList.count === 0
|
||||
|
||||
@ -68,27 +71,6 @@ Kirigami.ScrollablePage {
|
||||
text: i18n("No Feeds added yet")
|
||||
}
|
||||
|
||||
GridView {
|
||||
id: feedList
|
||||
visible: count !== 0
|
||||
anchors.fill: parent
|
||||
|
||||
property int cardSize: width / 3 - cardMargin //Kirigami.Units.gridUnit * 10
|
||||
property int cardMargin: Kirigami.Units.smallSpacing
|
||||
|
||||
cellWidth: cardSize + cardMargin
|
||||
cellHeight: cardSize + cardMargin
|
||||
|
||||
model: FeedsModel {
|
||||
id: feedsModel
|
||||
}
|
||||
|
||||
delegate: FeedListDelegate {
|
||||
cardSize: feedList.cardSize
|
||||
cardMargin: feedList.cardMargin
|
||||
}
|
||||
}
|
||||
|
||||
FileDialog {
|
||||
id: importDialog
|
||||
title: i18n("Import Feeds")
|
||||
@ -105,4 +87,34 @@ Kirigami.ScrollablePage {
|
||||
onAccepted: DataManager.exportFeeds(file)
|
||||
fileMode: FileDialog.SaveFile
|
||||
}
|
||||
|
||||
|
||||
mainItem: GridView {
|
||||
id: feedList
|
||||
visible: count !== 0
|
||||
|
||||
property int minimumCardSize: 150
|
||||
property int cardMargin: Kirigami.Units.largeSpacing
|
||||
|
||||
property int columns: Math.floor(width / (minimumCardSize + 2 * cardMargin))
|
||||
|
||||
cellWidth: width / columns
|
||||
cellHeight: width / columns
|
||||
|
||||
model: FeedsModel {
|
||||
id: feedsModel
|
||||
}
|
||||
|
||||
Component {
|
||||
id: feedListDelegate
|
||||
FeedListDelegate {
|
||||
cardSize: feedList.width / feedList.columns - 2 * feedList.cardMargin
|
||||
cardMargin: feedList.cardMargin
|
||||
}
|
||||
}
|
||||
|
||||
delegate: Kirigami.DelegateRecycler {
|
||||
sourceComponent: feedListDelegate
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user