From 22a9ca72b3971652b37f76cc683e239c9e48b015 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= Date: Wed, 1 May 2024 15:19:57 +0200 Subject: [PATCH] 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 | 8 +- storybook/pages/StatusCommunityCardPage.qml | 103 +++++++----------- .../Components/StatusCommunityCard.qml | 70 ++++++------ .../Components/StatusCommunityTags.qml | 7 +- .../Communities/views/CommunitiesGridView.qml | 1 + .../ProfileShowcaseCommunitiesView.qml | 13 ++- 6 files changed, 98 insertions(+), 104 deletions(-) diff --git a/storybook/pages/CommunityInfoEditor.qml b/storybook/pages/CommunityInfoEditor.qml index 715739a878..c3fd897eb5 100644 --- a/storybook/pages/CommunityInfoEditor.qml +++ b/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 - - spacing: 12 + property bool adminControlsEnabled: true 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 diff --git a/storybook/pages/StatusCommunityCardPage.qml b/storybook/pages/StatusCommunityCardPage.qml index ae3aeb60f4..cee9f116bb 100644 --- a/storybook/pages/StatusCommunityCardPage.qml +++ b/storybook/pages/StatusCommunityCardPage.qml @@ -1,23 +1,16 @@ -import QtQuick 2.14 -import QtQuick.Controls 2.14 -import QtQuick.Layouts 1.14 +import QtQuick 2.15 +import QtQuick.Controls 2.15 +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 - - readonly property string source: ` - import QtQml 2.14 - import StatusQ.Components 0.1 - Component { - StatusCommunityCard { - name: nameTextField.text - } - } - ` + orientation: Qt.Horizontal Logs { id: logs } @@ -25,72 +18,60 @@ SplitView { SplitView.fillWidth: true SplitView.fillHeight: true - HotLoader { - id: loader - + StatusCommunityCard { 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 { - target: loader.item - - function onClicked() { - logs.logEvent("StatusCommunityCard::clicked", - ["communityId"], arguments) - } + categories: ListModel { + ListElement { name: "gaming"; emoji: "🎮"; selected: false } + ListElement { name: "art"; emoji: "🖼️️"; selected: false } + ListElement { name: "crypto"; emoji: "💸"; selected: true } + ListElement { name: "nsfw"; emoji: "🍆"; selected: false } + ListElement { name: "markets"; emoji: "💎"; selected: false } } - } - Pane { - anchors.fill: parent - visible: !!loader.errors - - CompilationErrorsBox { - anchors.fill: parent - errors: loader.errors - } + onClicked: logs.logEvent("StatusCommunityCard::onClicked", ["communityId"], arguments) + onRightClicked: logs.logEvent("StatusCommunityCard::onRightClicked", ["communityId"], arguments) } } LogsAndControlsPanel { - id: logsAndControlsPanel - - SplitView.minimumHeight: 100 - SplitView.preferredHeight: 200 + SplitView.preferredWidth: 250 logsView.logText: logs.logText - RowLayout { - anchors.fill: parent + CommunityInfoEditor { + id: infoEditor + colorVisible: true + adminControlsEnabled: false - Item { - Layout.fillWidth: true - Layout.fillHeight: true - - ColumnLayout { - anchors.fill: parent - - TextField { - id: nameTextField - text: "Card name!" - } - } + Switch { + id: ctrlSize + text: "Big card" + checked: true } - SourceCodeBox { - id: sourceCodeBox - - Layout.preferredWidth: root.width / 2 - Layout.fillHeight: true - - sourceCode: root.source - hasErrors: !!loader.errors + Switch { + id: ctrlLoading + text: "Loading" + checked: false } } } } -// 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 diff --git a/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml b/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml index f33b5d3683..597ca82a7d 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml @@ -1,6 +1,6 @@ -import QtQuick 2.13 -import QtQuick.Layouts 1.14 -import QtGraphicalEffects 1.0 +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +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: (root.cardSize === StatusCommunityCard.Size.Big) + Layout.fillWidth: true 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 - clip: true + spacing: 4 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 - anchors.fill: parent - cursorShape: root.loaded ? Qt.PointingHandCursor : Qt.ArrowCursor - hoverEnabled: true - acceptedButtons: Qt.LeftButton | Qt.RightButton + cursorShape: root.loaded ? Qt.PointingHandCursor : undefined + } - 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) } } diff --git a/ui/StatusQ/src/StatusQ/Components/StatusCommunityTags.qml b/ui/StatusQ/src/StatusQ/Components/StatusCommunityTags.qml index d9dc319040..3c3c2c05b2 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusCommunityTags.qml +++ b/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"] } ] } diff --git a/ui/app/AppLayouts/Communities/views/CommunitiesGridView.qml b/ui/app/AppLayouts/Communities/views/CommunitiesGridView.qml index 2c42a093ae..9cbafcbbae 100644 --- a/ui/app/AppLayouts/Communities/views/CommunitiesGridView.qml +++ b/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) diff --git a/ui/imports/shared/views/profile/ProfileShowcaseCommunitiesView.qml b/ui/imports/shared/views/profile/ProfileShowcaseCommunitiesView.qml index 1f88ab62f8..d3fa9cfa15 100644 --- a/ui/imports/shared/views/profile/ProfileShowcaseCommunitiesView.qml +++ b/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); - root.closeRequested(); - } else { - Global.openMenu(delegatesActionsMenu, this, { communityId: model.id, url: Utils.getCommunityShareLink(model.id) }); - } + Global.switchToCommunity(model.id) + root.closeRequested() + } + onRightClicked: { + if (root.readOnly) + return + Global.openMenu(delegatesActionsMenu, this, { communityId: model.id, url: Utils.getCommunityShareLink(model.id) }) } } }