fix(StatusCard): fix some visual glitches

- correct propagation of hover events, fixes card flicker
- improve the ugly thick border
- token icons are now correctly rounded
- fix text descent lines are cut of ("y" and "p" truncated at the
bottom) due to excessive clipping, set correct max line count
- fix tag outline not being visible in dark mode
- add/update the corresponding SB page, with more controls to play
around with the different params

Fixes #14555

storybook/pages/CommunityInfoEditor.qml

@@ -19,8 +19,7 @@ ColumnLayout {
     property url banner: ctrlCommunityBanner.checked ? Style.png("settings/communities@2x") : ""
     readonly property bool shardingEnabled: ctrlShardingEnabled.checked
     property alias shardIndex: ctrlShardIndex.value
-
+    property bool adminControlsEnabled: true
-    spacing: 12
 
     ColumnLayout {
         Label {
@@ -59,7 +58,7 @@ ColumnLayout {
         Slider {
             value: root.membersCount
             from: 0
-            to: 1000
+            to: 3000
             onValueChanged: root.membersCount = value
         }
     }
@@ -108,6 +107,7 @@ ColumnLayout {
     }
 
     RowLayout {
+        visible: root.adminControlsEnabled
         Label {
             text: "Is community admin:"
         }
@@ -118,6 +118,7 @@ ColumnLayout {
         }
     }
     RowLayout {
+        visible: root.adminControlsEnabled
         Label {
             text: "Is community editable:"
         }
@@ -142,6 +143,7 @@ ColumnLayout {
         }
     }
     RowLayout {
+        visible: root.adminControlsEnabled
         Layout.fillWidth: true
         CheckBox {
             id: ctrlShardingEnabled

storybook/pages/StatusCommunityCardPage.qml

@@ -1,23 +1,16 @@
-import QtQuick 2.14
+import QtQuick 2.15
-import QtQuick.Controls 2.14
+import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.14
+import QtQuick.Layouts 1.15
+
+import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
 
 import Storybook 1.0
 
 SplitView {
     id: root
 
-    orientation: Qt.Vertical
+    orientation: Qt.Horizontal
-
-    readonly property string source: `
-        import QtQml 2.14
-        import StatusQ.Components 0.1
-        Component {
-            StatusCommunityCard {
-               name: nameTextField.text
-            }
-        }
-    `
 
     Logs { id: logs }
 
@@ -25,72 +18,60 @@ SplitView {
         SplitView.fillWidth: true
         SplitView.fillHeight: true
 
-        HotLoader {
+        StatusCommunityCard {
-            id: loader
-
             anchors.centerIn: parent
-            source: sourceCodeBox.sourceCode
+            cardSize: ctrlSize.checked ? StatusCommunityCard.Size.Big : StatusCommunityCard.Size.Small
+            communityId: "community_id"
+            name: infoEditor.name
+            description: infoEditor.description
+            members: infoEditor.membersCount
+            activeUsers: members/2
+            //popularity: 4 // not visualized?
+            banner: infoEditor.banner
+            asset.source: infoEditor.image
+            asset.isImage: true
+            communityColor: infoEditor.color
+            loaded: !ctrlLoading.checked
 
-            Connections {
+            categories: ListModel {
-                target: loader.item
+                ListElement { name: "gaming"; emoji: "🎮"; selected: false }
-
+                ListElement { name: "art"; emoji: "🖼️️"; selected: false }
-                function onClicked() {
+                ListElement { name: "crypto"; emoji: "💸"; selected: true }
-                    logs.logEvent("StatusCommunityCard::clicked",
+                ListElement { name: "nsfw"; emoji: "🍆"; selected: false }
-                                  ["communityId"], arguments)
+                ListElement { name: "markets"; emoji: "💎"; selected: false }
-                }
-            }
             }
 
-        Pane {
+            onClicked: logs.logEvent("StatusCommunityCard::onClicked", ["communityId"], arguments)
-            anchors.fill: parent
+            onRightClicked: logs.logEvent("StatusCommunityCard::onRightClicked", ["communityId"], arguments)
-            visible: !!loader.errors
-
-            CompilationErrorsBox {
-                anchors.fill: parent
-                errors: loader.errors
-            }
         }
     }
 
     LogsAndControlsPanel {
-        id: logsAndControlsPanel
+        SplitView.preferredWidth: 250
-
-        SplitView.minimumHeight: 100
-        SplitView.preferredHeight: 200
 
         logsView.logText: logs.logText
 
-        RowLayout {
+        CommunityInfoEditor {
-            anchors.fill: parent
+            id: infoEditor
+            colorVisible: true
+            adminControlsEnabled: false
 
-            Item {
+            Switch {
-                Layout.fillWidth: true
+                id: ctrlSize
-                Layout.fillHeight: true
+                text: "Big card"
-
+                checked: true
-                ColumnLayout {
-                    anchors.fill: parent
-
-                    TextField {
-                        id: nameTextField
-                        text: "Card name!"
-                    }
-                }
             }
 
-            SourceCodeBox {
+            Switch {
-                id: sourceCodeBox
+                id: ctrlLoading
-
+                text: "Loading"
-                Layout.preferredWidth: root.width / 2
+                checked: false
-                Layout.fillHeight: true
-
-                sourceCode: root.source
-                hasErrors: !!loader.errors
             }
         }
     }
 }
 
-// category: Panels
+// category: Components
 
 // https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416159
 // https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416160

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

@@ -1,6 +1,6 @@
-import QtQuick 2.13
+import QtQuick 2.15
-import QtQuick.Layouts 1.14
+import QtQuick.Layouts 1.15
-import QtGraphicalEffects 1.0
+import QtGraphicalEffects 1.15
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@@ -51,7 +51,7 @@ Rectangle {
        \qmlproperty bool StatusCommunityCard::hovered
        This property indicates whether the card contains mouse.
     */
-    property bool hovered: sensor.containsMouse
+    readonly property bool hovered: sensor.hovered
     /*!
        \qmlproperty int StatusCommunityCard::titleFontSize
        This property holds the title's font size.
@@ -61,7 +61,7 @@ Rectangle {
        \qmlproperty int StatusCommunityCard::descriptionFontSize
        This property holds the description's font size.
     */
-    property int descriptionFontSize: 15
+    property int descriptionFontSize: cardSize === StatusCommunityCard.Size.Big ? 15 : 13
     /*!
        \qmlproperty string StatusCommunityCard::communityId
        This property holds the community identifier value.
@@ -136,14 +136,14 @@ Rectangle {
     property url tokenLogo: ""
 
     /*!
-       \qmlproperty Item StatusCommunityCard::rigthHeaderComponent
+       \qmlproperty Component StatusCommunityCard::rigthHeaderComponent
        This property holds an extra info header component that will be displayed on top right of the card.
        Example: Community token permissions row.
     */
     property alias rigthHeaderComponent: rightHeaderLoader.sourceComponent
 
     /*!
-       \qmlproperty Item StatusCommunityCard::bottomRowComponent
+       \qmlproperty Component StatusCommunityCard::bottomRowComponent
        This property holds an extra info bottom row component that will be displayed on bottom left of the card.
        Example: Community token permissions row.
     */
@@ -168,7 +168,13 @@ Rectangle {
         \qmlsignal StatusCommunityCard::clicked(string communityId)
         This signal is emitted when the card item is clicked.
     */
-    signal clicked(var mouse, string communityId)
+    signal clicked(string communityId)
+
+    /*!
+        \qmlsignal StatusCommunityCard::rightClicked(string communityId)
+        This signal is emitted when the card item is clicked with RMB.
+    */
+    signal rightClicked(string communityId)
 
     QtObject {
         id: d
@@ -208,15 +214,16 @@ Rectangle {
     implicitHeight: d.totalHeigth
     radius: d.bannerRadius
     color: "transparent"
+    border.color: Theme.palette.directColor8
     layer.enabled: true
     layer.effect: DropShadow {
         source: root
         horizontalOffset: 0
         verticalOffset: 2
-        radius: sensor.containsMouse ? d.bannerRadiusHovered : d.bannerRadius
+        radius: root.hovered ? d.bannerRadiusHovered : d.bannerRadius
         samples: 25
         spread: 0
-        color: sensor.containsMouse ? Theme.palette.backdropColor : Theme.palette.dropShadow
+        color: root.hovered ? Theme.palette.backdropColor : Theme.palette.dropShadow
     }
 
     // Community banner:
@@ -293,8 +300,6 @@ Rectangle {
         height: d.cardHeigth
         color: d.cardColor
         radius: d.cardRadius
-        border.color: root.border.color
-        clip: true
 
         // Right header extra info component
         Loader {
@@ -315,8 +320,7 @@ Rectangle {
             anchors.rightMargin: d.margins
             spacing: (root.cardSize === StatusCommunityCard.Size.Big) ? 6 : 0
             StatusBaseText {
-                Layout.alignment: Qt.AlignVCenter
+                Layout.fillWidth: true
-                Layout.fillWidth: (root.cardSize === StatusCommunityCard.Size.Big)
                 Layout.preferredHeight: 22
                 text: root.name
                 font.weight: d.titleFontWeight
@@ -326,16 +330,13 @@ Rectangle {
             }
             StatusBaseText {
                 Layout.fillWidth: true
-                Layout.fillHeight: (root.cardSize === StatusCommunityCard.Size.Big)
-                Layout.preferredHeight: 16
                 text: root.description
                 font.pixelSize: root.descriptionFontSize
                 lineHeight: 1.2
                 color: root.descriptionFontColor
-                maximumLineCount: 2
+                maximumLineCount: root.cardSize === StatusCommunityCard.Size.Big ? 2 : 1
                 wrapMode: Text.WordWrap
                 elide: Text.ElideRight
-                clip: true
             }
         }
         ColumnLayout {
@@ -347,7 +348,6 @@ Rectangle {
             anchors.bottomMargin: d.margins
             spacing: (root.cardSize === StatusCommunityCard.Size.Big) ? 18 : 0
             Row {
-                Layout.alignment: Qt.AlignVCenter
                 spacing: 20
                 // Members
                 visible: root.memberCountVisible
@@ -364,7 +364,7 @@ Rectangle {
                         id: membersTxt
                         Layout.alignment: Qt.AlignVCenter
                         text: d.numberFormat(root.members)
-                        font.pixelSize: 15
+                        font.pixelSize: root.descriptionFontSize
                         color: d.fontColor
                     }
                 }
@@ -382,7 +382,7 @@ Rectangle {
                         id: activeUsersTxt
                         Layout.alignment: Qt.AlignVCenter
                         text: d.numberFormat(root.activeUsers)
-                        font.pixelSize: 15
+                        font.pixelSize: root.descriptionFontSize
                         color: d.fontColor
                     }
                 }
@@ -404,16 +404,16 @@ Rectangle {
 
                     // TODO: Replace by `StatusListItemTagRow` - To be done!
                     content: Row {
-                        spacing: 8
+                        spacing: 4
-                        clip: true
 
                         Repeater {
                             model: root.categories
                             delegate: StatusListItemTag {
                                 bgColor: "transparent"
                                 bgRadius: 20
-                                bgBorderColor: Theme.palette.baseColor2
+                                bgBorderColor: Theme.palette.directColor8
                                 height: 24
+                                spacing: 0
                                 closeButtonVisible: false
                                 asset.emoji: model.emoji
                                 asset.width: 24
@@ -421,7 +421,7 @@ Rectangle {
                                 asset.color: "transparent"
                                 asset.isLetterIdenticon: true
                                 title: model.name
-                                titleText.font.pixelSize: 13
+                                titleText.font.pixelSize: 12
                                 titleText.color: d.fontColor
                             }
                         }
@@ -514,14 +514,20 @@ Rectangle {
         }
     } // End of loading card
 
-    MouseArea {
+    HoverHandler {
         id: sensor
-        enabled: root.loaded
+        cursorShape: root.loaded ? Qt.PointingHandCursor : undefined
-        anchors.fill: parent
+    }
-        cursorShape: root.loaded ? Qt.PointingHandCursor : Qt.ArrowCursor
-        hoverEnabled: true
-        acceptedButtons: Qt.LeftButton | Qt.RightButton
 
-        onClicked: root.clicked(mouse ,root.communityId)
+    TapHandler {
+        enabled: root.loaded
+        acceptedButtons: Qt.LeftButton
+        onTapped: root.clicked(root.communityId)
+        onLongPressed: root.rightClicked(root.communityId)
+    }
+    TapHandler {
+        enabled: root.loaded
+        acceptedButtons: Qt.RightButton
+        onTapped: root.rightClicked(root.communityId)
     }
 }

ui/StatusQ/src/StatusQ/Components/StatusCommunityTags.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.14
 
+import StatusQ 0.1
 import StatusQ.Core 0.1
 import StatusQ.Controls 0.1
 
@@ -53,19 +54,21 @@ Item {
                 }
 
                 filters: [
-                    ExpressionFilter {
+                    FastExpressionFilter {
                         enabled: root.filterString !== ""
                         expression: {
                             root.filterString
                             return model.name.toUpperCase().indexOf(root.filterString.toUpperCase()) !== -1
                         }
+                        expectedRoles: ["name"]
                     },
-                    ExpressionFilter {
+                    FastExpressionFilter {
                         enabled: root.mode !== StatusCommunityTags.Highlight
                         expression: {
                             root.mode
                             return filterModel.selectionPredicate(model.selected)
                         }
+                        expectedRoles: ["selected"]
                     }
                 ]
             }

ui/app/AppLayouts/Communities/views/CommunitiesGridView.qml

@@ -93,6 +93,7 @@ StatusScrollView {
                 collectiblesModel: root.collectiblesModel
                 model: card.permissionsList
                 requirementsMet: card.requirementsMet
+                overlappingBorder: 0
             }
 
             onClicked: root.cardClicked(communityId)

ui/imports/shared/views/profile/ProfileShowcaseCommunitiesView.qml

@@ -132,12 +132,13 @@ Item {
             onClicked: {
                 if (root.readOnly)
                     return
-                if (mouse.button === Qt.LeftButton) {
+                Global.switchToCommunity(model.id)
-                    Global.switchToCommunity(model.id);
+                root.closeRequested()
-                    root.closeRequested();
-                } else {
-                    Global.openMenu(delegatesActionsMenu, this, { communityId: model.id, url: Utils.getCommunityShareLink(model.id) });
             }
+            onRightClicked: {
+                if (root.readOnly)
+                    return
+                Global.openMenu(delegatesActionsMenu, this, { communityId: model.id, url: Utils.getCommunityShareLink(model.id) })
             }
         }
     }