From 1ebbafc87f0bb37e35e5b841774cedc6d3fdccb1 Mon Sep 17 00:00:00 2001 From: Bart De Vries Date: Wed, 28 Apr 2021 11:45:46 +0200 Subject: [PATCH] Work on getting feedList to look like CardsGridView Next up, add actions somehow. --- src/qml/FeedListDelegate.qml | 196 +++++++++++++++++++++++++++++------ src/qml/FeedListPage.qml | 62 ++++++----- 2 files changed, 199 insertions(+), 59 deletions(-) diff --git a/src/qml/FeedListDelegate.qml b/src/qml/FeedListDelegate.qml index 10e0d663..e3f30c75 100644 --- a/src/qml/FeedListDelegate.qml +++ b/src/qml/FeedListDelegate.qml @@ -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: [ diff --git a/src/qml/FeedListPage.qml b/src/qml/FeedListPage.qml index 176a12e4..f750496b 100644 --- a/src/qml/FeedListPage.qml +++ b/src/qml/FeedListPage.qml @@ -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 + } + } }