From 4b059f61905e809781a80ecac8ee632dfabcc01d Mon Sep 17 00:00:00 2001 From: Pascal Precht Date: Mon, 19 Jul 2021 13:21:05 +0200 Subject: [PATCH] refactor(Communities): use `StatusModal` in `CommunitiesPopup` Closes #2891 --- .../CommunityComponents/CommunitiesPopup.qml | 286 ++++++------------ ui/app/AppLayouts/Chat/ContactsColumn.qml | 1 + 2 files changed, 97 insertions(+), 190 deletions(-) diff --git a/ui/app/AppLayouts/Chat/CommunityComponents/CommunitiesPopup.qml b/ui/app/AppLayouts/Chat/CommunityComponents/CommunitiesPopup.qml index b1efc24ed9..48afd88839 100644 --- a/ui/app/AppLayouts/Chat/CommunityComponents/CommunitiesPopup.qml +++ b/ui/app/AppLayouts/Chat/CommunityComponents/CommunitiesPopup.qml @@ -3,11 +3,17 @@ import QtQuick.Controls 2.3 import QtQuick.Layouts 1.3 import QtQml.Models 2.3 import QtGraphicalEffects 1.13 + +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Controls 0.1 +import StatusQ.Components 0.1 +import StatusQ.Popups 0.1 + import "../../../../imports" import "../../../../shared" -import "../../../../shared/status" -ModalPopup { +StatusModal { id: popup onOpened: { @@ -15,203 +21,104 @@ ModalPopup { searchBox.forceActiveFocus(Qt.MouseFocusReason) } - header: Item { - height: childrenRect.height - width: parent.width + header.title: qsTr("Communities") + headerActionButton: StatusFlatRoundButton { + type: StatusFlatRoundButton.Type.Secondary + width: 32 + height: 32 + icon.name: "more" - StyledText { - id: groupName - //% "Communities" - text: qsTrId("communities") - anchors.top: parent.top - anchors.left: parent.left - font.bold: true - font.pixelSize: 17 + onClicked: contextMenu.popup(-contextMenu.width+width, height + 4) + + StatusPopupMenu { + id: contextMenu + StatusMenuItem { + icon.name: "download" + text: qsTr("Access existing community") + onTriggered: openPopup(importCommunitiesPopupComponent) + } } + } - Rectangle { - id: moreActionsBtnContainer - width: 32 - height: 32 - radius: Style.current.radius - color: Style.current.transparent - anchors.right: parent.right - anchors.rightMargin: 40 - anchors.top: parent.top - anchors.topMargin: -5 + content: Column { + width: popup.width - StyledText { - id: moreActionsBtn - text: "..." - font.letterSpacing: 0.5 - font.bold: true - lineHeight: 1.4 + Item { + height: 68 + width: parent.width - 32 + anchors.horizontalCenter: parent.horizontalCenter + SearchBox { + id: searchBox anchors.verticalCenter: parent.verticalCenter - anchors.horizontalCenter: parent.horizontalCenter - font.pixelSize: 25 - } - - MouseArea { - id: mouseArea - anchors.fill: parent - hoverEnabled: true - onEntered: { - parent.color = Style.current.border - } - onExited: { - parent.color = Style.current.transparent - } - onClicked: contextMenu.popup(-contextMenu.width + moreActionsBtn.width, moreActionsBtn.height - Style.current.smallPadding) - } - - PopupMenu { - id: contextMenu - Action { - icon.source: "../../../img/import.svg" - icon.width: 16 - icon.height: 16 - //% "Access existing community" - text: qsTrId("access-existing-community") - onTriggered: openPopup(importCommunitiesPopupComponent) - } + //% "Search for communities or topics" + placeholderText: qsTrId("search-for-communities-or-topics") + iconWidth: 17 + iconHeight: 17 + customHeight: 36 + fontPixelSize: 15 } } - Separator { - anchors.top: groupName.bottom - anchors.topMargin: Style.current.padding - anchors.left: parent.left - anchors.right: parent.right - anchors.rightMargin: -Style.current.padding - anchors.leftMargin: -Style.current.padding - } - } + StatusModalDivider {} - SearchBox { - id: searchBox - //% "Search for communities or topics" - placeholderText: qsTrId("search-for-communities-or-topics") - iconWidth: 17 - iconHeight: 17 - customHeight: 36 - fontPixelSize: 15 - } - - ScrollView { - id: scrollView - width: parent.width - anchors.topMargin: Style.current.padding - anchors.top: searchBox.bottom - anchors.bottom: parent.bottom - ScrollBar.horizontal.policy: ScrollBar.AlwaysOff - ScrollBar.vertical.policy: communitiesList.contentHeight > communitiesList.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff - - ListView { - anchors.fill: parent - model: communitiesDelegateModel - spacing: 4 + ScrollView { + width: parent.width + ScrollBar.horizontal.policy: ScrollBar.AlwaysOff + topPadding: 8 + bottomPadding: 8 + height: 400 clip: true - id: communitiesList - section.property: "name" - section.criteria: ViewSection.FirstCharacter - section.delegate: Column { - width: parent.width - height: childrenRect.height + Style.current.halfPadding - StyledText { - text: section.toUpperCase() - } - Separator { - anchors.left: popup.left - anchors.right: popup.right + ListView { + anchors.fill: parent + model: communitiesDelegateModel + spacing: 4 + clip: true + id: communitiesList + + section.property: "name" + section.criteria: ViewSection.FirstCharacter + section.delegate: Column { + + StatusBaseText { + anchors.left: parent.left + anchors.leftMargin: 16 + text: section.toUpperCase() + font.pixelSize: 15 + font.weight: Font.Medium + color: Theme.palette.directColor1 + } + + StatusModalDivider {} } } - } - DelegateModelGeneralized { - id: communitiesDelegateModel - lessThan: [ - function(left, right) { - return left.name.toLowerCase() < right.name.toLowerCase() - } - ] - - model: chatsModel.communities.list - delegate: Item { - // TODO add the search for the name and category once they exist - visible: { - if (!searchBox.text) { - return true + DelegateModelGeneralized { + id: communitiesDelegateModel + lessThan: [ + function(left, right) { + return left.name.toLowerCase() < right.name.toLowerCase() } - const lowerCaseSearchStr = searchBox.text.toLowerCase() - return name.toLowerCase().includes(lowerCaseSearchStr) || description.toLowerCase().includes(lowerCaseSearchStr) - } - height: visible ? communityImage.height + Style.current.padding : 0 - width: parent.width + ] - Loader { - id: communityImage - sourceComponent: !!thumbnailImage ? commmunityImgCmp : letterIdenticonCmp - } - - Component { - id: commmunityImgCmp - RoundedImage { - source: thumbnailImage - width: 40 - height: 40 + model: chatsModel.communities.list + delegate: StatusListItem { + visible: { + if (!searchBox.text) { + return true + } + const lowerCaseSearchStr = searchBox.text.toLowerCase() + return name.toLowerCase().includes(lowerCaseSearchStr) || description.toLowerCase().includes(lowerCaseSearchStr) } - } + height: visible ? implicitHeight : 0 + anchors.horizontalCenter: parent.horizontalCenter + title: name + subTitle: qsTr("%1 members").arg(nbMembers) + image.source: thumbnailImage + icon.isLetterIdenticon: !!!thumbnailImage + icon.background.color: communityColor - Component { - id: letterIdenticonCmp - StatusLetterIdenticon { - width: 40 - height: 40 - chatName: name - color: communityColor || Style.current.blue - } - } - - StyledText { - id: communityName - text: name - anchors.left: communityImage.right - anchors.leftMargin: Style.current.padding - font.pixelSize: 17 - font.weight: Font.Bold - } - - StyledText { - id: communityDesc - text: description - anchors.left: communityName.left - anchors.right: parent.right - anchors.top: communityName.bottom - font.pixelSize: 15 - font.weight: Font.Thin - elide: Text.ElideRight - } - - StyledText { - id: communityMembers - text: nbMembers === 1 ? - //% "1 member" - qsTrId("1-member") : - //% "%1 members" - qsTrId("-1-members").arg(nbMembers) - anchors.left: communityDesc.left - anchors.right: parent.right - anchors.top: communityDesc.bottom - font.pixelSize: 13 - color: Style.current.secondaryText - font.weight: Font.Thin - } - - MouseArea { - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - onClicked: { + sensor.onClicked: { if (joined && isMember) { chatsModel.communities.setActiveCommunity(id) } else { @@ -225,15 +132,14 @@ ModalPopup { } } - footer: StatusButton { - id: createBtn - //% "Create a community" - text: qsTrId("create-community") - anchors.right: parent.right - onClicked: { - openPopup(createCommunitiesPopupComponent) - popup.close() + rightButtons: [ + StatusButton { + text: qsTr("Create a community") + onClicked: { + openPopup(createCommunitiesPopupComponent) + popup.close() + } } - } + ] } diff --git a/ui/app/AppLayouts/Chat/ContactsColumn.qml b/ui/app/AppLayouts/Chat/ContactsColumn.qml index b661074e20..283fdc89b0 100644 --- a/ui/app/AppLayouts/Chat/ContactsColumn.qml +++ b/ui/app/AppLayouts/Chat/ContactsColumn.qml @@ -201,6 +201,7 @@ Item { Component { id: communitiesPopupComponent CommunitiesPopup { + anchors.centerIn: parent onClosed: { destroy() }