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

fix(Community/InvitationBubble): Community invitation doesn't look good 

Bubble redesign by using `ColumnLayout`.

Fixes #5987
This commit is contained in:
Noelia 2022-06-08 16:43:46 +02:00 committed by Noelia
parent 524c91dbab
commit 16dec86cef
1 changed files with 145 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
ui/imports/shared/views/chat/InvitationBubbleView.qml
View File

@ -1,5 +1,6 @@
import QtQuick 2.3 import QtQuick 2.3
import QtQuick.Dialogs 1.3 import QtQuick.Dialogs 1.3
import QtQuick.Layouts 1.14
import utils 1.0 import utils 1.0
@ -101,14 +102,7 @@ Item {
property alias button: joinBtn property alias button: joinBtn
property bool isPendingRequest: root.store.isCommunityRequestPending(communityId) property bool isPendingRequest: root.store.isCommunityRequestPending(communityId)
width: 270 width: 270
height: title.height + title.anchors.topMargin + height: column.implicitHeight
invitedYou.height + invitedYou.anchors.topMargin +
sep1.height + sep1.anchors.topMargin +
communityName.height + communityName.anchors.topMargin +
communityDesc.height + communityDesc.anchors.topMargin +
communityNbMembers.height + communityNbMembers.anchors.topMargin +
sep2.height + sep2.anchors.topMargin +
btnItemId.height + btnItemId.anchors.topMargin
radius: 16 radius: 16
color: Style.current.background color: Style.current.background
border.color: Style.current.border border.color: Style.current.border
@ -193,6 +187,11 @@ Item {
// } // }
// } // }
ColumnLayout {
id: column
width: parent.width
spacing: Style.current.halfPadding
// TODO add check if verified // TODO add check if verified
StatusBaseText { StatusBaseText {
id: title id: title
@ -203,59 +202,51 @@ Item {
//% "Community invitation" //% "Community invitation"
qsTrId("community-invitation") qsTrId("community-invitation")
font.weight: Font.Medium font.weight: Font.Medium
anchors.top: parent.top Layout.topMargin: Style.current.halfPadding
anchors.topMargin: Style.current.halfPadding Layout.leftMargin: root.innerMargin
anchors.left: parent.left
anchors.leftMargin: root.innerMargin
font.pixelSize: 13 font.pixelSize: 13
} }
StatusBaseText { StatusBaseText {
id: invitedYou id: invitedYou
visible: text != ""
text: { text: {
// Not Refactored Yet // Not Refactored Yet
return "" return ""
// if (root.store.chatsModelInst.channelView.activeChannel.chatType === Constants.chatType.oneToOne) { // if (root.store.chatsModelInst.channelView.activeChannel.chatType === Constants.chatType.oneToOne) {
// return isCurrentUser ? // return isCurrentUser ?
// //% "You invited %1 to join a community" // //% "You invited %1 to join a community"
// qsTrId("you-invited--1-to-join-a-community").arg(root.store.chatsModelInst.userNameOrAlias(root.store.chatsModelInst.channelView.activeChannel.id)) // qsTrId("you-invited--1-to-join-a-community").arg(root.store.chatsModelInst.userNameOrAlias(root.store.chatsModelInst.channelView.activeChannel.id))
// //% "%1 invited you to join a community" // //% "%1 invited you to join a community"
// : qsTrId("-1-invited-you-to-join-a-community").arg(displayUserName) // : qsTrId("-1-invited-you-to-join-a-community").arg(displayUserName)
// } else { // } else {
// return isCurrentUser ? // return isCurrentUser ?
// //% "You shared a community" // //% "You shared a community"
// qsTrId("you-shared-a-community") // qsTrId("you-shared-a-community")
// //% "A community has been shared" // //% "A community has been shared"
// : qsTrId("a-community-has-been-shared") // : qsTrId("a-community-has-been-shared")
// } // }
} }
anchors.top: title.bottom Layout.leftMargin: root.innerMargin
anchors.topMargin: 4 Layout.rightMargin: root.innerMargin
anchors.left: parent.left Layout.fillWidth: true
anchors.leftMargin: root.innerMargin
anchors.right: parent.right
anchors.rightMargin: root.innerMargin
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
font.pixelSize: 15 font.pixelSize: 15
color: Theme.palette.directColor1 color: Theme.palette.directColor1
} }
Separator { Separator {
id: sep1 Layout.fillWidth: true
anchors.top: invitedYou.bottom
anchors.topMargin: Style.current.halfPadding
} }
// TODO add image when it's supported // TODO add image when it's supported
StatusBaseText { StatusBaseText {
id: communityName id: communityName
text: invitedCommunity.name text: invitedCommunity.name
anchors.top: sep1.bottom Layout.topMargin: 2
anchors.topMargin: root.innerMargin Layout.leftMargin: root.innerMargin
anchors.left: parent.left Layout.fillWidth: true
anchors.leftMargin: root.innerMargin Layout.rightMargin: root.innerMargin
anchors.right: parent.right
anchors.rightMargin: root.innerMargin
font.weight: Font.Bold font.weight: Font.Bold
wrapMode: Text.WrapAtWordBoundaryOrAnywhere wrapMode: Text.WrapAtWordBoundaryOrAnywhere
font.pixelSize: 17 font.pixelSize: 17
@ -265,12 +256,9 @@ Item {
StatusBaseText { StatusBaseText {
id: communityDesc id: communityDesc
text: invitedCommunity.description text: invitedCommunity.description
anchors.top: communityName.bottom Layout.leftMargin: root.innerMargin
anchors.topMargin: 2 Layout.rightMargin: root.innerMargin
anchors.left: parent.left Layout.fillWidth: true
anchors.leftMargin: root.innerMargin
anchors.right: parent.right
anchors.rightMargin: root.innerMargin
wrapMode: Text.WrapAtWordBoundaryOrAnywhere wrapMode: Text.WrapAtWordBoundaryOrAnywhere
font.pixelSize: 15 font.pixelSize: 15
color: Theme.palette.directColor1 color: Theme.palette.directColor1
@ -281,33 +269,27 @@ Item {
// TODO add the plural support // TODO add the plural support
//% "%1 members" //% "%1 members"
text: qsTrId("-1-members").arg(invitedCommunity.nbMembers) text: qsTrId("-1-members").arg(invitedCommunity.nbMembers)
anchors.top: communityDesc.bottom Layout.leftMargin: root.innerMargin
anchors.topMargin: 2
anchors.left: parent.left
anchors.leftMargin: root.innerMargin
font.pixelSize: 13 font.pixelSize: 13
font.weight: Font.Medium font.weight: Font.Medium
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
} }
Separator { Separator {
id: sep2 Layout.fillWidth: true
anchors.top: communityNbMembers.bottom
anchors.topMargin: Style.current.halfPadding
} }
Item { Item {
id: btnItemId id: btnItemId
width: parent.width Layout.topMargin: -column.spacing
Layout.fillWidth: true
height: 44 height: 44
anchors.bottom: parent.bottom
clip: true clip: true
StatusFlatButton { StatusFlatButton {
id: joinBtn id: joinBtn
anchors.top: parent.top anchors.fill: parent
anchors.topMargin: -Style.current.smallPadding anchors.verticalCenter: parent.verticalCenter
radius: 16 radius: 16
width: parent.width
height: 54
enabled: true enabled: true
text: qsTr("Unsupported state") text: qsTr("Unsupported state")
onClicked: { onClicked: {
@ -361,4 +343,5 @@ Item {
} }
} }
} }
}
} }