From 8ccd091ebc5d2265bcdef59cc8341d7b4e505c9e Mon Sep 17 00:00:00 2001 From: Noelia Date: Tue, 18 Apr 2023 16:22:27 +0200 Subject: [PATCH] feat(CommunityPortal/StatusCommunityCard): Prepared `StatusCommunityCard` to display permissions row - `StatusCommunityCard` updated with a new hearder component. - `CommunitiesGridView` updated to use `CommunityPermissionsRow` component inside card. - Added needed models. - Updated storybook. Pending backend integration: Part of task #10410 --- .../pages/CommunitiesPortalDummyModel.qml | 30 ++++++++++--- .../pages/CommunitiesPortalLayoutPage.qml | 2 + .../StatusAppCommunitiesPortalView.qml | 1 - .../Components/StatusCommunityCard.qml | 43 ++++++------------- .../CommunitiesPortalLayout.qml | 9 +++- .../views/CommunitiesGridView.qml | 18 ++++++++ ui/app/mainui/AppMain.qml | 3 ++ 7 files changed, 66 insertions(+), 40 deletions(-) diff --git a/storybook/pages/CommunitiesPortalDummyModel.qml b/storybook/pages/CommunitiesPortalDummyModel.qml index cba4e55899..863aae04a0 100644 --- a/storybook/pages/CommunitiesPortalDummyModel.qml +++ b/storybook/pages/CommunitiesPortalDummyModel.qml @@ -38,7 +38,9 @@ ListModel { "name": "Career", "emoji": "💼", }, - ]) + ]), + permissionsModel: PermissionsModel.shortPermissionsModel, + allTokenRequirementsMet: true }, { featured: true, @@ -66,7 +68,9 @@ ListModel { "name": "Career", "emoji": "💼", }, - ]) + ]), + permissionsModel: PermissionsModel.twoShortPermissionsModel, + allTokenRequirementsMet: false }, { featured: true, @@ -90,7 +94,9 @@ ListModel { "name": "Career", "emoji": "💼", }, - ]) + ]), + permissionsModel: PermissionsModel.moreThanTwoInitialShortPermissionsModel, + allTokenRequirementsMet: false }, @@ -112,7 +118,9 @@ ListModel { "name": "Career", "emoji": "💼", }, - ]) + ]), + permissionsModel: PermissionsModel.longPermissionsModel, + allTokenRequirementsMet: false }, { featured: false, @@ -127,7 +135,9 @@ ListModel { activeMembers: 2800, popularity: 4, available: true, - tags: JSON.stringify([]) + tags: JSON.stringify([]), + permissionsModel: PermissionsModel.threeShortPermissionsModelData, + allTokenRequirementsMet: false }, { featured: false, @@ -155,7 +165,9 @@ ListModel { "name": "Books & blogs", "emoji": "📚", }, - ]) + ]), + permissionsModel: PermissionsModel.threeShortPermissionsModel, + allTokenRequirementsMet: true }, { featured: false, @@ -171,6 +183,8 @@ ListModel { popularity: 4, available: true, tags: JSON.stringify([]), + permissionsModel: PermissionsModel.threeShortPermissionsModel, + allTokenRequirementsMet: false }, { featured: false, @@ -202,7 +216,9 @@ ListModel { "name": "Career", "emoji": "💼", }, - ]) + ]), + permissionsModel: PermissionsModel.longPermissionsModel, + allTokenRequirementsMet: true }, { featured: false, diff --git a/storybook/pages/CommunitiesPortalLayoutPage.qml b/storybook/pages/CommunitiesPortalLayoutPage.qml index d9e7704b95..26fc0c2b68 100644 --- a/storybook/pages/CommunitiesPortalLayoutPage.qml +++ b/storybook/pages/CommunitiesPortalLayoutPage.qml @@ -29,6 +29,8 @@ SplitView { SplitView.fillWidth: true SplitView.fillHeight: true + assetsModel: AssetsModel {} + collectiblesModel: CollectiblesModel {} communitiesStore: CommunitiesStore { readonly property int unreadNotificationsCount: 42 readonly property string communityTags: ModelsData.communityTags diff --git a/ui/StatusQ/sandbox/demoapp/StatusAppCommunitiesPortalView.qml b/ui/StatusQ/sandbox/demoapp/StatusAppCommunitiesPortalView.qml index 5f5aeaa9aa..c5a1c52abe 100644 --- a/ui/StatusQ/sandbox/demoapp/StatusAppCommunitiesPortalView.qml +++ b/ui/StatusQ/sandbox/demoapp/StatusAppCommunitiesPortalView.qml @@ -146,7 +146,6 @@ StatusSectionLayout { activeUsers: model.activeUsers popularity: model.popularity tokenLogo: model.tokenLogo - isPrivate: model.isPrivate banner: model.banner onClicked: { d.navigateToCommunity(communityId) } diff --git a/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml b/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml index 14b2d48981..9604b20e31 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml @@ -109,18 +109,19 @@ Rectangle { If not provided, default value in Light Theme is "#4360DF" and in Dark Theme is "#88B0FF". */ property color communityColor: Theme.palette.primaryColor1 - /*! - \qmlproperty bool StatusCommunityCard::isPrivate - This property holds if the community is private. - If not provided, default value is false. - */ - property bool isPrivate: false /*! \qmlproperty url StatusCommunityCard::tokenLogo This property holds the image of the token needed if the community is private. */ property url tokenLogo: "" + /*! + \qmlproperty Item 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 + /*! \qmlsignal StatusCommunityCard::clicked(string communityId) This signal is emitted when the card item is clicked. @@ -249,36 +250,16 @@ Rectangle { color: d.cardColor radius: d.cardRadius clip: true - // Community restriccions - Rectangle { - visible: root.isPrivate + + // Right header extra info component + Loader { + id: rightHeaderLoader anchors.top: parent.top anchors.topMargin: 8 anchors.right: parent.right anchors.rightMargin: anchors.topMargin - width: 48 - height: 24 - color: d.loadingColor2 - radius: 200 - StatusIcon { - anchors.verticalCenter: parent.verticalCenter - anchors.leftMargin: 6 - anchors.left: parent.left - icon: "tiny/unlocked" - width: 16 - height: 16 - color: Theme.palette.baseColor1 - } - StatusRoundedImage { - anchors.rightMargin: 2 - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - width: 20 - height: width - image.source: root.tokenLogo - color: "transparent" - } } + // Community info ColumnLayout { anchors.fill: parent diff --git a/ui/app/AppLayouts/CommunitiesPortal/CommunitiesPortalLayout.qml b/ui/app/AppLayouts/CommunitiesPortal/CommunitiesPortalLayout.qml index 502a429df9..5cf28ea7a0 100644 --- a/ui/app/AppLayouts/CommunitiesPortal/CommunitiesPortalLayout.qml +++ b/ui/app/AppLayouts/CommunitiesPortal/CommunitiesPortalLayout.qml @@ -24,13 +24,16 @@ import "views" StatusSectionLayout { id: root - objectName: "communitiesPortalLayout" property CommunitiesStore communitiesStore: CommunitiesStore {} property var importCommunitiesPopup: importCommunitiesPopupComponent property var createCommunitiesPopup: createCommunitiesPopupComponent property var discordImportProgressPopup: discordImportProgressDialog + property alias assetsModel: communitiesGrid.assetsModel + property alias collectiblesModel: communitiesGrid.collectiblesModel + + objectName: "communitiesPortalLayout" notificationCount: activityCenterStore.unreadNotificationsCount onNotificationButtonClicked: Global.openActivityCenterPopup() @@ -166,6 +169,7 @@ StatusSectionLayout { CommunitiesGridView { id: communitiesGrid + anchors.fill: parent anchors.rightMargin: d.preventShadowClipMargin anchors.leftMargin: d.preventShadowClipMargin @@ -176,6 +180,9 @@ StatusSectionLayout { model: filteredCommunitiesModel searchLayout: d.searchMode + assetsModel: root.assetsModel + collectiblesModel: root.collectiblesModel + onCardClicked: root.communitiesStore.navigateToCommunity(communityId) } diff --git a/ui/app/AppLayouts/CommunitiesPortal/views/CommunitiesGridView.qml b/ui/app/AppLayouts/CommunitiesPortal/views/CommunitiesGridView.qml index 859ad1acc7..0ff0c3410e 100644 --- a/ui/app/AppLayouts/CommunitiesPortal/views/CommunitiesGridView.qml +++ b/ui/app/AppLayouts/CommunitiesPortal/views/CommunitiesGridView.qml @@ -10,12 +10,17 @@ import utils 1.0 import SortFilterProxyModel 0.2 +import AppLayouts.Chat.controls.community 1.0 + StatusScrollView { id: root property var model property bool searchLayout: false + property var assetsModel + property var collectiblesModel + readonly property bool isEmpty: !featuredRepeater.count && !popularRepeater.count signal cardClicked(string communityId) @@ -56,7 +61,11 @@ StatusScrollView { id: communityCardDelegate StatusCommunityCard { + id: card + readonly property string tags: model.tags + readonly property var permissionsList: model.permissionsModel + readonly property bool requirementsMet: !!model.allTokenRequirementsMet ? model.allTokenRequirementsMet : false JSONListModel { id: tagsJson @@ -75,6 +84,15 @@ StatusScrollView { popularity: model.popularity categories: tagsJson.model + // Community restriccions + rigthHeaderComponent: CommunityPermissionsRow { + visible: !!card.permissionsList + assetsModel: root.assetsModel + collectiblesModel: root.collectiblesModel + model: card.permissionsList + requirementsMet: card.requirementsMet + } + onClicked: root.cardClicked(communityId) } } diff --git a/ui/app/mainui/AppMain.qml b/ui/app/mainui/AppMain.qml index 7fe5656e40..f0018d124b 100644 --- a/ui/app/mainui/AppMain.qml +++ b/ui/app/mainui/AppMain.qml @@ -943,6 +943,9 @@ Item { CommunitiesPortalLayout { id: communitiesPortalLayoutContainer + + assetsModel: rootChatStore.assetsModel + collectiblesModel: rootChatStore.collectiblesModel } Loader {