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