From 534a0d0f454ada9a57d8236b1b8c8da77da6e048 Mon Sep 17 00:00:00 2001
From: Patryk Osmaczko <osmaczkopatryk@gmail.com>
Date: Mon, 17 Oct 2022 09:54:29 +0200
Subject: [PATCH] feat(StatusQ): implement overflow pattern to
 StatusCommunityCard

---
 .../Components/StatusCommunityCard.qml        | 49 +++++++++++--------
 .../controls/CommunityTagsRow.qml             | 38 ++------------
 .../controls/CommunityTagsRowButton.qml       | 37 --------------
 3 files changed, 32 insertions(+), 92 deletions(-)
 delete mode 100644 ui/app/AppLayouts/CommunitiesPortal/controls/CommunityTagsRowButton.qml

diff --git a/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml b/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml
index 13e6f23a57..703ce7de1e 100644
--- a/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml
@@ -347,33 +347,40 @@ Rectangle {
                     }
                 }
             }
-            // TODO: Replace by `StatusListItemTagRow` - To be done!
-            Row {
-                visible: root.categories.count > 0
+
+            StatusRollArea {
                 Layout.alignment: Qt.AlignVCenter
                 Layout.fillWidth: true
-                spacing: 8
-                clip: true
 
-                Repeater {
-                    model: root.categories
-                    delegate: StatusListItemTag {
-                        border.color: Theme.palette.baseColor2
-                        color: "transparent"
-                        height: 24
-                        radius: 20
-                        closeButtonVisible: false
-                        asset.emoji: model.emoji
-                        asset.width: 24
-                        asset.height: 24
-                        asset.color: "transparent"
-                        asset.isLetterIdenticon: true
-                        title: model.name
-                        titleText.font.pixelSize: 13
-                        titleText.color: d.fontColor
+                visible: root.categories.count > 0
+                arrowsGradientColor: d.cardColor
+
+                // TODO: Replace by `StatusListItemTagRow` - To be done!
+                content: Row {
+                    spacing: 8
+                    clip: true
+
+                    Repeater {
+                        model: root.categories
+                        delegate: StatusListItemTag {
+                            border.color: Theme.palette.baseColor2
+                            color: "transparent"
+                            height: 24
+                            radius: 20
+                            closeButtonVisible: false
+                            asset.emoji: model.emoji
+                            asset.width: 24
+                            asset.height: 24
+                            asset.color: "transparent"
+                            asset.isLetterIdenticon: true
+                            title: model.name
+                            titleText.font.pixelSize: 13
+                            titleText.color: d.fontColor
+                        }
                     }
                 }
             }
+
         }
     } // End of content card
 
diff --git a/ui/app/AppLayouts/CommunitiesPortal/controls/CommunityTagsRow.qml b/ui/app/AppLayouts/CommunitiesPortal/controls/CommunityTagsRow.qml
index 0a313316dd..efa4a79270 100644
--- a/ui/app/AppLayouts/CommunitiesPortal/controls/CommunityTagsRow.qml
+++ b/ui/app/AppLayouts/CommunitiesPortal/controls/CommunityTagsRow.qml
@@ -5,12 +5,9 @@ import utils 1.0
 import shared.panels 1.0
 
 import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
-import StatusQ.Popups 0.1
-import StatusQ.Controls 0.1
 
-Item {
+StatusRollArea {
     id: root
 
     property string tags
@@ -30,35 +27,8 @@ Item {
         property ListModel tagsModel: ListModel {}
     }
 
-    implicitHeight: tagsFlow.height
-    clip: true
-
-    StatusScrollView {
-        id: scroll
-        anchors.fill: parent
-        padding: 0
-        contentWidth: tagsFlow.width
-
-        StatusScrollBar.horizontal.policy: StatusScrollBar.AlwaysOff
-
-        StatusCommunityTags {
-            id: tagsFlow
-            model: d.tagsModel
-        }
-    }
-
-    CommunityTagsRowButton {
-        anchors.left: parent.left
-        height: parent.height
-        visible: scroll.contentX > 0
-        onClicked: scroll.flick(scroll.width, 0)
-    }
-
-    CommunityTagsRowButton {
-        anchors.right: parent.right
-        height: parent.height
-        visible: scroll.contentX + scroll.width < scroll.contentWidth
-        mirrored: true
-        onClicked: scroll.flick(-scroll.width, 0)
+    content: StatusCommunityTags {
+        id: tagsFlow
+        model: d.tagsModel
     }
 }
diff --git a/ui/app/AppLayouts/CommunitiesPortal/controls/CommunityTagsRowButton.qml b/ui/app/AppLayouts/CommunitiesPortal/controls/CommunityTagsRowButton.qml
deleted file mode 100644
index beb9023475..0000000000
--- a/ui/app/AppLayouts/CommunitiesPortal/controls/CommunityTagsRowButton.qml
+++ /dev/null
@@ -1,37 +0,0 @@
-import QtQuick 2.14
-
-import utils 1.0
-import shared.panels 1.0
-import StatusQ.Core.Theme 0.1
-
-Rectangle {
-    id: root
-
-    property bool mirrored: false
-
-    signal clicked()
-
-    width: height * 3
-
-    gradient: Gradient {
-        orientation: Gradient.Horizontal
-        GradientStop { position: mirrored ? 0.0 : 1.0; color: "transparent" }
-        GradientStop { position: 0.5; color: Theme.palette.statusAppLayout.backgroundColor }
-    }
-
-    SVGImage {
-        source: mirrored ? Style.svg("arrow-next") : Style.svg("arrow-previous")
-        anchors.right: mirrored ? parent.right : undefined
-        anchors.left: mirrored ? undefined : parent.left
-        width: parent.height
-        height: width
-    }
-
-    MouseArea {
-        anchors.fill: parent
-        preventStealing: true
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        onClicked: root.clicked()
-    }
-}