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

Minor UI changes for communities

This commit is contained in:
Richard Ramos 2020-12-15 12:04:19 -04:00 committed by Iuri Matias
parent 2d3a870f60
commit 2ed3261170
8 changed files with 210 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/chat/views/community_list.nim
View File

@ -15,6 +15,7 @@ type
Admin = UserRole + 6
Joined = UserRole + 7
Verified = UserRole + 8
NumMembers = UserRole + 9
QtObject:
type
@ -54,6 +55,8 @@ QtObject:
of CommunityRoles.Admin: result = newQVariant(communityItem.admin.bool)
of CommunityRoles.Joined: result = newQVariant(communityItem.joined.bool)
of CommunityRoles.Verified: result = newQVariant(communityItem.verified.bool)
of CommunityRoles.NumMembers: result = newQVariant(communityItem.members.len)
method roleNames(self: CommunityList): Table[int, string] =
{
@ -64,7 +67,8 @@ QtObject:
CommunityRoles.Access.int: "access",
CommunityRoles.Admin.int: "admin",
CommunityRoles.Verified.int: "verified",
CommunityRoles.Joined.int: "joined"
CommunityRoles.Joined.int: "joined",
CommunityRoles.NumMembers.int: "nbMembers"
}.toTable
proc setNewData*(self: CommunityList, communityList: seq[Community]) =

38
ui/app/AppLayouts/Chat/CommunityColumn.qml
View File

@ -27,7 +27,7 @@ Item {
Item {
id: communityHeader
width: parent.width
height: communityImage.height
height: communityHeaderButton.height
anchors.top: parent.top
anchors.topMargin: Style.current.padding
@ -42,35 +42,11 @@ Item {
onClicked: chatsModel.activeCommunity.active = false
}
RoundedImage {
id: communityImage
width: 40
height: 40
// TODO get the real image once it's available
source: "../../img/ens-header-dark@2x.png"
CommunityHeaderButton {
id: communityHeaderButton
anchors.left: backArrow.right
anchors.leftMargin: Style.current.smallPadding
anchors.verticalCenter: parent.verticalCenter
}
StyledText {
id: communityName
text: chatsModel.activeCommunity.name
anchors.left: communityImage.right
anchors.leftMargin: Style.current.halfPadding
font.pixelSize: 15
font.weight: Font.Medium
}
StyledText {
id: communityNbMember
// TOD get real numbers
text: qsTr("%1 members").arg(12)
anchors.left: communityName.left
anchors.bottom: parent.bottom
font.pixelSize: 12
font.weight: Font.Thin
color: Style.current.secondaryText
anchors.top: parent.top
anchors.topMargin: -4
}
StatusIconButton {
@ -137,6 +113,10 @@ Item {
anchors.top: channelList.bottom
anchors.topMargin: Style.current.padding
}
CommunityProfilePopup {
id: communityProfilePopup
}
}
}

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

@ -19,6 +19,7 @@ ModalPopup {
SearchBox {
id: searchBox
placeholderText: qsTr("Search for communities or topics")
iconWidth: 17
iconHeight: 17
customHeight: 36
@ -40,6 +41,21 @@ ModalPopup {
spacing: 4
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
}
Separator {
anchors.left: popup.left
anchors.right: popup.right
}
}
delegate: Item {
// TODO add the serach for the name and category once they exist
visible: {
@ -49,7 +65,7 @@ ModalPopup {
const lowerCaseSearchStr = searchBox.text.toLowerCase()
return name.toLowerCase().includes(lowerCaseSearchStr) || description.toLowerCase().includes(lowerCaseSearchStr)
}
height: visible ? communityImage.height + Style.current.smallPadding : 0
height: visible ? communityImage.height + Style.current.padding : 0
width: parent.width
RoundedImage {
@ -80,6 +96,19 @@ ModalPopup {
elide: Text.ElideRight
}
StyledText {
id: communityMembers
text: nbMembers === 1 ?
qsTr("1 member") :
qsTr("%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

9
ui/app/AppLayouts/Chat/CommunityComponents/CommunityDetailPopup.qml
View File

@ -62,7 +62,7 @@ ModalPopup {
StyledText {
id: descriptionText
text: popup.description
wrapMode: Text.WrapAnywhere
wrapMode: Text.Wrap
width: parent.width
font.pixelSize: 15
font.weight: Font.Thin
@ -84,7 +84,9 @@ ModalPopup {
StyledText {
text: qsTr("%1 members").arg(popup.nbMembers)
text: nbMembers === 1 ?
qsTr("1 member") :
qsTr("%1 members").arg(popup.nbMembers)
wrapMode: Text.WrapAnywhere
width: parent.width
anchors.left: memberImage.right
@ -123,7 +125,7 @@ ModalPopup {
anchors.bottom: parent.bottom
clip: true
model: community.chats
boundsBehavior: Flickable.StopAtBounds
delegate: Channel {
id: channelItem
unviewedMessagesCount: ""
@ -133,6 +135,7 @@ ModalPopup {
contentType: Constants.messageType
border.width: 0
color: Style.current.transparent
enableMouseArea: false
}
}

65
ui/app/AppLayouts/Chat/CommunityComponents/CommunityHeaderButton.qml Normal file
View File

@ -0,0 +1,65 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import "../../../../shared"
import "../../../../imports"
import "../components"
import "./"
Button {
implicitWidth: Math.max(communityImage.width + communityName.width + Style.current.padding, 200)
implicitHeight: communityImage.height + Style.current.padding
background: Rectangle {
id: btnBackground
radius: Style.current.radius
}
contentItem: Item {
id: content
RoundedImage {
id: communityImage
width: 40
height: 40
// TODO get the real image once it's available
source: "../../../img/ens-header-dark@2x.png"
anchors.verticalCenter: parent.verticalCenter
}
StyledText {
id: communityName
text: chatsModel.activeCommunity.name
anchors.left: communityImage.right
anchors.leftMargin: Style.current.halfPadding
anchors.top: parent.top
font.pixelSize: 15
font.weight: Font.Medium
}
StyledText {
id: communityNbMember
text: chatsModel.activeCommunity.nbMembers === 1 ?
qsTr("1 member") :
qsTr("%1 members").arg(chatsModel.activeCommunity.nbMembers)
anchors.left: communityName.left
anchors.top: communityName.bottom
font.pixelSize: 12
font.weight: Font.Thin
color: Style.current.secondaryText
}
}
MouseArea {
id: mouseAreaBtn
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onPressed: communityProfilePopup.open();
hoverEnabled: true
onExited: {
btnBackground.color = "transparent"
}
onEntered: {
btnBackground.color = Style.current.topBarChatInfoColor
}
}
}

91
ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopup.qml Normal file
View File

@ -0,0 +1,91 @@
import QtQuick 2.12
import QtQuick.Dialogs 1.3
import "../../../../imports"
import "../../../../shared"
import "../../../../shared/status"
import "../ContactsColumn"
ModalPopup {
property QtObject community: chatsModel.activeCommunity
property string communityId: community.id
property string name: community.name
property string description: community.description
property int access: community.access
// TODO get the real image once it's available
property string source: "../../../img/ens-header-dark@2x.png"
property int nbMembers: community.nbMembers
id: popup
header: Item {
height: childrenRect.height
width: parent.width
RoundedImage {
id: communityImg
source: popup.source
width: 40
height: 40
}
StyledTextEdit {
id: communityName
text: popup.name
anchors.top: parent.top
anchors.topMargin: 2
anchors.left: communityImg.right
anchors.leftMargin: Style.current.smallPadding
font.bold: true
font.pixelSize: 17
readOnly: true
}
StyledText {
text: {
switch(access) {
case Constants.communityChatPublicAccess: return qsTr("Public community");
case Constants.communityChatInvitationOnlyAccess: return qsTr("Invitation only community");
case Constants.communityChatOnRequestAccess: return qsTr("On request community");
default: return qsTr("Unknown community");
}
}
anchors.left: communityName.left
anchors.top: communityName.bottom
anchors.topMargin: 2
font.pixelSize: 15
font.weight: Font.Thin
color: Style.current.secondaryText
}
}
StyledText {
id: descriptionText
text: popup.description
wrapMode: Text.Wrap
width: parent.width
font.pixelSize: 15
font.weight: Font.Thin
}
Separator {
id: sep1
anchors.left: parent.left
anchors.right: parent.right
anchors.top: descriptionText.bottom
anchors.topMargin: Style.current.smallPadding
anchors.leftMargin: -Style.current.padding
anchors.rightMargin: -Style.current.padding
}
StyledText {
id: chatsTitle
text: qsTr("TODO:")
anchors.top: sep1.bottom
anchors.topMargin: Style.current.bigPadding
font.pixelSize: 15
font.weight: Font.Thin
}
}

4
ui/app/AppLayouts/Chat/CommunityComponents/CommunityWelcomeBanner.qml
View File

@ -83,8 +83,6 @@ Rectangle {
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: Style.current.padding
onClicked: {
console.log('Manage')
}
onClicked: communityProfilePopup.open()
}
}

4
ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml
View File

@ -19,6 +19,7 @@ Rectangle {
property int contentType: 1
property bool muted: false
property bool hovered: false
property bool enableMouseArea: true
property string profileImage: chatType === Constants.chatTypeOneToOne ? appMain.getProfileImage(chatId) || "" : ""
@ -151,7 +152,8 @@ Rectangle {
}
MouseArea {
cursorShape: Qt.PointingHandCursor
enabled: enableMouseArea
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton
anchors.fill: parent
hoverEnabled: true