mirror of
https://github.com/status-im/status-desktop.git
synced 2025-01-11 23:05:17 +00:00
feat: introduce StatusChatInfo
and StatusChatInfoButton
components
These components are used to render the chat info in the top bar of the chat view. `StatusChatInfoButton` is an clickable button that will open chat info dialogs. Closes #923
This commit is contained in:
parent
fac0e50e37
commit
599f788e67
ui
app/AppLayouts/Chat/ChatColumn
shared/status
@ -8,7 +8,7 @@ import "../components"
|
||||
|
||||
Rectangle {
|
||||
property int iconSize: 16
|
||||
|
||||
property bool reopenGroupDialog: false
|
||||
id: chatTopBarContent
|
||||
color: Style.current.background
|
||||
height: 56
|
||||
@ -16,66 +16,49 @@ Rectangle {
|
||||
border.color: Style.current.border
|
||||
border.width: 1
|
||||
|
||||
ChannelIcon {
|
||||
id: channelIcon
|
||||
channelName: chatsModel.activeChannel.name
|
||||
channelType: chatsModel.activeChannel.chatType
|
||||
channelIdenticon: chatsModel.activeChannel.identicon
|
||||
Loader {
|
||||
property bool isGroupChatOrOneToOne: (chatsModel.activeChannel.chatType === Constants.chatTypePrivateGroupChat ||
|
||||
chatsModel.activeChannel.chatType === Constants.chatTypeOneToOne)
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Style.current.padding
|
||||
anchors.leftMargin: this.isGroupChatOrOneToOne ? Style.current.padding : Style.current.padding + 4
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: Style.current.smallPadding
|
||||
anchors.topMargin: 4
|
||||
sourceComponent: this.isGroupChatOrOneToOne ? chatInfoButton : chatInfo
|
||||
}
|
||||
|
||||
StyledTextEdit {
|
||||
id: channelName
|
||||
width: 80
|
||||
height: 20
|
||||
text: {
|
||||
switch(chatsModel.activeChannel.chatType) {
|
||||
case Constants.chatTypePublic: return channelNameStr;
|
||||
case Constants.chatTypeOneToOne: return Utils.removeStatusEns(chatsModel.activeChannel.name)
|
||||
default: return chatsModel.activeChannel.name
|
||||
Component {
|
||||
id: chatInfoButton
|
||||
StatusChatInfoButton {
|
||||
chatName: chatsModel.activeChannel.name
|
||||
chatType: chatsModel.activeChannel.chatType
|
||||
identicon: chatsModel.activeChannel.identicon
|
||||
identiconSize: 36
|
||||
|
||||
onClicked: {
|
||||
switch (chatsModel.activeChannel.chatType) {
|
||||
case Constants.chatTypePrivateGroupChat:
|
||||
groupInfoPopup.open()
|
||||
break;
|
||||
case Constants.chatTypeOneToOne:
|
||||
chatTopBarContent.reopenGroupDialog = false
|
||||
profilePopup.openPopup(chatsModel.activeChannel.name, chatsModel.activeChannel.id, chatsModel.activeChannel.identicon)
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
anchors.left: channelIcon.right
|
||||
anchors.leftMargin: Style.current.smallPadding
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: Style.current.smallPadding
|
||||
font.weight: Font.Medium
|
||||
font.pixelSize: 15
|
||||
selectByMouse: true
|
||||
readOnly: true
|
||||
}
|
||||
|
||||
StyledText {
|
||||
id: channelIdentifier
|
||||
color: Style.current.darkGrey
|
||||
text: {
|
||||
switch(chatsModel.activeChannel.chatType){
|
||||
//% "Public chat"
|
||||
case Constants.chatTypePublic: return qsTrId("public-chat")
|
||||
case Constants.chatTypeOneToOne: return (profileModel.isAdded(chatsModel.activeChannel.id) ?
|
||||
//% "Contact"
|
||||
qsTrId("chat-is-a-contact") :
|
||||
//% "Not a contact"
|
||||
qsTrId("chat-is-not-a-contact"))
|
||||
case Constants.chatTypePrivateGroupChat:
|
||||
let cnt = chatsModel.activeChannel.members.rowCount();
|
||||
//% "%1 members"
|
||||
if(cnt > 1) return qsTrId("%1-members").arg(cnt);
|
||||
//% "1 member"
|
||||
return qsTrId("1-member");
|
||||
default: return "...";
|
||||
}
|
||||
Component {
|
||||
id: chatInfo
|
||||
StatusChatInfo {
|
||||
identiconSize: 36
|
||||
chatName: chatsModel.activeChannel.name
|
||||
chatType: chatsModel.activeChannel.chatType
|
||||
identicon: chatsModel.activeChannel.identicon
|
||||
}
|
||||
font.pixelSize: 12
|
||||
anchors.left: channelIcon.right
|
||||
anchors.leftMargin: Style.current.smallPadding
|
||||
anchors.top: channelName.bottom
|
||||
anchors.topMargin: 0
|
||||
}
|
||||
|
||||
|
||||
Rectangle {
|
||||
id: moreActionsBtnContainer
|
||||
width: 40
|
||||
@ -202,7 +185,8 @@ Rectangle {
|
||||
GroupInfoPopup {
|
||||
id: groupInfoPopup
|
||||
profileClick: {
|
||||
profilePopup.openPopup.bind(profilePopup)
|
||||
profilePopup.openPopup.bind(profilePopup)
|
||||
chatTopBarContent.reopenGroupDialog = true
|
||||
}
|
||||
onClosed: {
|
||||
mouseArea.menuOpened = false
|
||||
@ -212,8 +196,9 @@ Rectangle {
|
||||
ProfilePopup {
|
||||
id: profilePopup
|
||||
onClosed: {
|
||||
if (!groupInfoPopup.opened) {
|
||||
groupInfoPopup.open()
|
||||
if (!groupInfoPopup.opened && chatTopBarContent.reopenGroupDialog) {
|
||||
groupInfoPopup.open()
|
||||
chatTopBarContent.reopenGroupDialog = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
77
ui/shared/status/StatusChatInfo.qml
Normal file
77
ui/shared/status/StatusChatInfo.qml
Normal file
@ -0,0 +1,77 @@
|
||||
import QtQuick 2.13
|
||||
import QtQuick.Controls 2.13
|
||||
import "../../imports"
|
||||
import "../../shared"
|
||||
import "../../shared/status"
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
property string chatName
|
||||
property int chatType
|
||||
property string identicon
|
||||
property int identiconSize: 40
|
||||
property bool isCompact: false
|
||||
|
||||
height: 48
|
||||
width: nameAndInfo.width + chatIdenticon.width + Style.current.smallPadding
|
||||
|
||||
StatusIdenticon {
|
||||
id: chatIdenticon
|
||||
chatType: root.chatType
|
||||
chatName: root.chatName
|
||||
identicon: root.identicon
|
||||
width: root.isCompact ? 20 : root.identiconSize
|
||||
height: root.isCompact ? 20 : root.identiconSize
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Item {
|
||||
id: nameAndInfo
|
||||
height: chatName.height + chatInfo.height
|
||||
width: (chatName.width > chatInfo.width ? chatName.width : chatInfo.width)
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: chatIdenticon.right
|
||||
anchors.leftMargin: Style.current.smallPadding
|
||||
|
||||
StyledText {
|
||||
id: chatName
|
||||
text: {
|
||||
switch(root.chatType) {
|
||||
case Constants.chatTypePublic: return "#" + root.chatName;
|
||||
case Constants.chatTypeOneToOne: return Utils.removeStatusEns(root.chatName)
|
||||
default: return root.chatName
|
||||
}
|
||||
}
|
||||
|
||||
font.weight: Font.Medium
|
||||
font.pixelSize: 15
|
||||
}
|
||||
|
||||
StyledText {
|
||||
id: chatInfo
|
||||
color: Style.current.darkGrey
|
||||
text: {
|
||||
switch(root.chatType){
|
||||
//% "Public chat"
|
||||
case Constants.chatTypePublic: return qsTrId("public-chat")
|
||||
case Constants.chatTypeOneToOne: return (profileModel.isAdded(root.chatName) ?
|
||||
//% "Contact"
|
||||
qsTrId("chat-is-a-contact") :
|
||||
//% "Not a contact"
|
||||
qsTrId("chat-is-not-a-contact"))
|
||||
case Constants.chatTypePrivateGroupChat:
|
||||
let cnt = chatsModel.activeChannel.members.rowCount();
|
||||
//% "%1 members"
|
||||
if(cnt > 1) return qsTrId("%1-members").arg(cnt);
|
||||
//% "1 member"
|
||||
return qsTrId("1-member");
|
||||
default: return "...";
|
||||
}
|
||||
}
|
||||
font.pixelSize: 12
|
||||
anchors.top: chatName.bottom
|
||||
}
|
||||
}
|
||||
}
|
||||
|
40
ui/shared/status/StatusChatInfoButton.qml
Normal file
40
ui/shared/status/StatusChatInfoButton.qml
Normal file
@ -0,0 +1,40 @@
|
||||
import QtQuick 2.13
|
||||
import QtQuick.Controls 2.13
|
||||
import "../../imports"
|
||||
import "../../shared"
|
||||
import "../../shared/status"
|
||||
|
||||
Button {
|
||||
id: control
|
||||
|
||||
property string chatName
|
||||
property int chatType
|
||||
property string identicon
|
||||
property int identiconSize: 40
|
||||
property bool isCompact: false
|
||||
|
||||
implicitHeight: 48
|
||||
implicitWidth: content.width + 8
|
||||
leftPadding: 4
|
||||
rightPadding: 4
|
||||
|
||||
contentItem: StatusChatInfo {
|
||||
id: content
|
||||
chatName: control.chatName
|
||||
chatType: control.chatType
|
||||
identicon: control.identicon
|
||||
identiconSize: control.identiconSize
|
||||
isCompact: control.isCompact
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
color: control.hovered ? Style.current.grey : "transparent"
|
||||
radius: Style.current.radius
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
anchors.fill: parent
|
||||
onPressed: mouse.accepted = false
|
||||
}
|
||||
}
|
@ -1,4 +1,6 @@
|
||||
StatusButton 1.0 StatusButton.qml
|
||||
StatusChatInfo 1.0 StatusChatInfo.qml
|
||||
StatusChatInfoButton 1.0 StatusChatInfoButton.qml
|
||||
StatusImageIdenticon 1.0 StatusImageIdenticon.qml
|
||||
StatusLetterIdenticon 1.0 StatusLetterIdenticon.qml
|
||||
StatusRadioButton 1.0 StatusRadioButton.qml
|
||||
|
Loading…
x
Reference in New Issue
Block a user