mirror of
https://github.com/status-im/status-desktop.git
synced 2025-01-22 12:29:37 +00:00
refactor(Communities): use StatusModal in CommunitiesPopup
Closes #2891
This commit is contained in:
Pascal Precht
Iuri Matias
parent
d4e56ab6ef
commit
4b059f6190
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
@ -201,6 +201,7 @@ Item {
|
||||
Component {
|
||||
id: communitiesPopupComponent
|
||||
CommunitiesPopup {
|
||||
anchors.centerIn: parent
|
||||
onClosed: {
|
||||
destroy()
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user