status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(Communities): use `StatusModal` in `CommunitiesPopup` 

Closes #2891
This commit is contained in:
Pascal Precht 2021-07-19 13:21:05 +02:00 committed by Iuri Matias
parent d4e56ab6ef
commit 4b059f6190
2 changed files with 97 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

286
ui/app/AppLayouts/Chat/CommunityComponents/CommunitiesPopup.qml
View File

@ -3,11 +3,17 @@ import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3 import QtQuick.Layouts 1.3
import QtQml.Models 2.3 import QtQml.Models 2.3
import QtGraphicalEffects 1.13 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 "../../../../imports"
import "../../../../shared" import "../../../../shared"
import "../../../../shared/status"
ModalPopup { StatusModal {
id: popup id: popup
onOpened: { onOpened: {
@ -15,203 +21,104 @@ ModalPopup {
searchBox.forceActiveFocus(Qt.MouseFocusReason) searchBox.forceActiveFocus(Qt.MouseFocusReason)
} }
header: Item { header.title: qsTr("Communities")
height: childrenRect.height headerActionButton: StatusFlatRoundButton {
width: parent.width type: StatusFlatRoundButton.Type.Secondary
width: 32
height: 32
icon.name: "more"
StyledText { onClicked: contextMenu.popup(-contextMenu.width+width, height + 4)
id: groupName
//% "Communities" StatusPopupMenu {
text: qsTrId("communities") id: contextMenu
anchors.top: parent.top StatusMenuItem {
anchors.left: parent.left icon.name: "download"
font.bold: true text: qsTr("Access existing community")
font.pixelSize: 17 onTriggered: openPopup(importCommunitiesPopupComponent)
}
} }
}
Rectangle { content: Column {
id: moreActionsBtnContainer width: popup.width
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
StyledText { Item {
id: moreActionsBtn height: 68
text: "..." width: parent.width - 32
font.letterSpacing: 0.5 anchors.horizontalCenter: parent.horizontalCenter
font.bold: true SearchBox {
lineHeight: 1.4 id: searchBox
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter //% "Search for communities or topics"
font.pixelSize: 25 placeholderText: qsTrId("search-for-communities-or-topics")
} iconWidth: 17
iconHeight: 17
MouseArea { customHeight: 36
id: mouseArea fontPixelSize: 15
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)
}
} }
} }
Separator { StatusModalDivider {}
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
}
}
SearchBox { ScrollView {
id: searchBox width: parent.width
//% "Search for communities or topics" ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
placeholderText: qsTrId("search-for-communities-or-topics") topPadding: 8
iconWidth: 17 bottomPadding: 8
iconHeight: 17 height: 400
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
clip: true clip: true
id: communitiesList
section.property: "name" ListView {
section.criteria: ViewSection.FirstCharacter anchors.fill: parent
section.delegate: Column { model: communitiesDelegateModel
width: parent.width spacing: 4
height: childrenRect.height + Style.current.halfPadding clip: true
StyledText { id: communitiesList
text: section.toUpperCase()
} section.property: "name"
Separator { section.criteria: ViewSection.FirstCharacter
anchors.left: popup.left section.delegate: Column {
anchors.right: popup.right
StatusBaseText {
anchors.left: parent.left
anchors.leftMargin: 16
text: section.toUpperCase()
font.pixelSize: 15
font.weight: Font.Medium
color: Theme.palette.directColor1
}
StatusModalDivider {}
} }
} }
}
DelegateModelGeneralized { DelegateModelGeneralized {
id: communitiesDelegateModel id: communitiesDelegateModel
lessThan: [ lessThan: [
function(left, right) { function(left, right) {
return left.name.toLowerCase() < right.name.toLowerCase() 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
} }
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 { model: chatsModel.communities.list
id: communityImage delegate: StatusListItem {
sourceComponent: !!thumbnailImage ? commmunityImgCmp : letterIdenticonCmp visible: {
} if (!searchBox.text) {
return true
Component { }
id: commmunityImgCmp const lowerCaseSearchStr = searchBox.text.toLowerCase()
RoundedImage { return name.toLowerCase().includes(lowerCaseSearchStr) || description.toLowerCase().includes(lowerCaseSearchStr)
source: thumbnailImage
width: 40
height: 40
} }
} 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 { sensor.onClicked: {
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: {
if (joined && isMember) { if (joined && isMember) {
chatsModel.communities.setActiveCommunity(id) chatsModel.communities.setActiveCommunity(id)
} else { } else {
@ -225,15 +132,14 @@ ModalPopup {
} }
} }
footer: StatusButton { rightButtons: [
id: createBtn StatusButton {
//% "Create a community" text: qsTr("Create a community")
text: qsTrId("create-community") onClicked: {
anchors.right: parent.right openPopup(createCommunitiesPopupComponent)
onClicked: { popup.close()
openPopup(createCommunitiesPopupComponent) }
popup.close()
} }
} ]
} }

1
ui/app/AppLayouts/Chat/ContactsColumn.qml
View File

@ -201,6 +201,7 @@ Item {
Component { Component {
id: communitiesPopupComponent id: communitiesPopupComponent
CommunitiesPopup { CommunitiesPopup {
anchors.centerIn: parent
onClosed: { onClosed: {
destroy() destroy()
} }