feat(StatusQ): implement overflow pattern to StatusCommunityCard

ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml

@@ -347,11 +347,16 @@ Rectangle {
                     }
                 }
             }
-            // TODO: Replace by `StatusListItemTagRow` - To be done!
-            Row {
-                visible: root.categories.count > 0
+
+            StatusRollArea {
                 Layout.alignment: Qt.AlignVCenter
                 Layout.fillWidth: true
+
+                visible: root.categories.count > 0
+                arrowsGradientColor: d.cardColor
+
+                // TODO: Replace by `StatusListItemTagRow` - To be done!
+                content: Row {
                     spacing: 8
                     clip: true
 
@@ -375,6 +380,8 @@ Rectangle {
                     }
                 }
             }
+
+        }
     } // End of content card
 
     // Loading card

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 {
+    content: 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)
-    }
 }

ui/app/AppLayouts/CommunitiesPortal/controls/CommunityTagsRowButton.qml

@@ -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()
-    }
-}