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(ContactsColumnView): fix layout issues to match design 

Closes #6343 and #6344

- basically switch over to a column + row layout(s), bringing consistent
margins and paddings, scratches a lot of redundant code
- fix the icon colors
- fixed another bug when opening the create chat panel, and then clicking
on an existing channel in the list, doesn't close this create panel
- remove unused signals and connections
This commit is contained in:
Lukáš Tinkl 2022-07-08 15:47:23 +02:00 committed by Lukáš Tinkl
parent 1cca25e08d
commit 61ea1d41cd
4 changed files with 174 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/app/AppLayouts/Chat/panels/EmptyViewPanel.qml
View File

@ -1,8 +1,5 @@
import QtQuick 2.13 import QtQuick 2.13
import QtQuick.Controls 2.13 import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtGraphicalEffects 1.13
import "../helpers/channelList.js" as ChannelJSON
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
@ -17,23 +14,17 @@ import utils 1.0
Rectangle { Rectangle {
id: emptyView id: emptyView
Layout.fillHeight: true
Layout.fillWidth: true
property var rootStore property var rootStore
signal suggestedMessageClicked(string channel) signal suggestedMessageClicked(string channel)
implicitWidth: 272
height: suggestionContainer.height + inviteFriendsContainer.height + Style.current.padding * 2 height: suggestionContainer.height + inviteFriendsContainer.height + Style.current.padding * 2
border.color: Style.current.secondaryMenuBorder border.color: Style.current.secondaryMenuBorder
radius: 16 radius: 16
color: Style.current.transparent color: Style.current.transparent
anchors.right: parent.right
anchors.left: parent.left
anchors.leftMargin: Style.current.padding
anchors.rightMargin: Style.current.padding
Item { Item {
id: inviteFriendsContainer id: inviteFriendsContainer
height: visible ? 190 : 0 height: visible ? 190 : 0

2
ui/app/AppLayouts/Chat/popups/community/CreateChannelPopup.qml
View File

@ -24,7 +24,7 @@ StatusModal {
property string channelColor: "" property string channelColor: ""
property bool emojiPopupOpened: false property bool emojiPopupOpened: false
property var emojiPopup: null property var emojiPopup: null
readonly property var communityColorValidator: Utils.Validate.NoEmpty readonly property int communityColorValidator: Utils.Validate.NoEmpty
| Utils.Validate.TextHexColor | Utils.Validate.TextHexColor
readonly property int maxChannelNameLength: 24 readonly property int maxChannelNameLength: 24

350
ui/app/AppLayouts/Chat/views/ContactsColumnView.qml
View File

@ -36,44 +36,82 @@ Item {
signal openProfileClicked() signal openProfileClicked()
signal openAppSearch() signal openAppSearch()
Component.onCompleted: { // main layout
appMain.openContactsPopup.connect(function(){ ColumnLayout {
Global.openPopup(contactRequestsPopup, {chatSectionModule}) anchors {
}) fill: parent
} margins: Style.current.padding
MouseArea {
anchors.fill: parent
onClicked: {
//steal focus from search field
actionButton.forceActiveFocus();
} }
} spacing: Style.current.padding
StatusNavigationPanelHeadline { // Chat headline row
id: headline RowLayout {
anchors.top: parent.top Layout.fillWidth: true
anchors.topMargin: 16
anchors.horizontalCenter: parent.horizontalCenter
text: qsTr("Chat")
}
RowLayout { StatusNavigationPanelHeadline {
id: searchInputWrapper Layout.alignment: Qt.AlignVCenter
width: 288 text: qsTr("Chat")
height: searchInput.height }
anchors.top: headline.bottom
anchors.topMargin: 16
anchors.horizontalCenter: parent.horizontalCenter
Item {
Layout.fillWidth: true
}
StatusRoundButton {
Layout.alignment: Qt.AlignVCenter
icon.name: "public-chat"
icon.color: Theme.palette.directColor1
icon.height: editBtn.icon.height
icon.width: editBtn.icon.width
implicitWidth: editBtn.implicitWidth
implicitHeight: editBtn.implicitHeight
type: StatusRoundButton.Type.Tertiary
onClicked: Global.openPopup(publicChatPopupComponent)
StatusToolTip {
text: qsTr("Join public chats")
visible: parent.hovered
orientation: StatusToolTip.Orientation.Bottom
y: parent.height + 12
}
}
StatusIconTabButton {
id: editBtn
Layout.alignment: Qt.AlignVCenter
icon.name: "edit"
icon.color: Theme.palette.directColor1
checked: root.store.openCreateChat
highlighted: checked
onClicked: {
root.store.openCreateChat = !root.store.openCreateChat
if (root.store.openCreateChat) {
Global.openCreateChatView()
} else {
Global.closeCreateChatView()
}
}
StatusToolTip {
text: qsTr("Start chat")
visible: parent.hovered
orientation: StatusToolTip.Orientation.Bottom
y: parent.height + 12
}
}
}
// search field
StatusBaseInput { StatusBaseInput {
id: searchInput id: searchInput
Layout.fillWidth: true Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter Layout.preferredHeight: 36
implicitHeight: 36
topPadding: 9
placeholderText: qsTr("Search") placeholderText: qsTr("Search")
icon.name: "search" icon.name: "search"
leftPadding: 10
topPadding: 4
bottomPadding: 4
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
@ -82,174 +120,131 @@ Item {
} }
} }
StatusRoundButton { // contact requests
icon.name: "public-chat" StatusContactRequestsIndicatorListItem {
icon.height: editBtn.icon.height id: contactRequests
icon.width: editBtn.icon.width Layout.fillWidth: true
implicitWidth: editBtn.implicitWidth Layout.preferredHeight: visible ? implicitHeight : 0
implicitHeight: editBtn.implicitHeight
type: StatusRoundButton.Type.Tertiary
onClicked: { Global.openPopup(publicChatPopupComponent) } readonly property int nbRequests: root.store.contactRequestsModel.count
StatusToolTip { visible: nbRequests > 0
text: qsTr("Join public chats") title: qsTr("Contact requests")
visible: parent.hovered requestsCount: nbRequests
}
sensor.onClicked: Global.openPopup(contactRequestsPopup)
} }
StatusIconTabButton { // chat list
id: editBtn ScrollView {
icon.name: "edit" Layout.fillWidth: true
checked: root.store.openCreateChat Layout.fillHeight: true
highlighted: root.store.openCreateChat contentHeight: channelList.childrenRect.height + emptyViewAndSuggestions.childrenRect.height
onClicked: {
root.store.openCreateChat = !root.store.openCreateChat; ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
if (!root.store.openCreateChat) {
clip: true
StatusChatList {
id: channelList
width: parent.width
model: root.chatSectionModule.model
highlightItem: !root.store.openCreateChat
onChatItemSelected: {
Global.closeCreateChatView() Global.closeCreateChatView()
} else { root.chatSectionModule.setActiveItem(id, "")
Global.openCreateChatView()
} }
} onChatItemUnmuted: root.chatSectionModule.unmuteChat(id)
StatusToolTip { popupMenu: ChatContextMenuView {
text: qsTr("Start chat") id: chatContextMenuView
visible: parent.hovered emojiPopup: root.emojiPopup
}
}
}
openHandler: function (id) {
let jsonObj = root.chatSectionModule.getItemAsJson(id)
let obj = JSON.parse(jsonObj)
if (obj.error) {
console.error("error parsing chat item json object, id: ", id, " error: ", obj.error)
close()
return
}
StatusContactRequestsIndicatorListItem { currentFleet = root.chatSectionModule.getCurrentFleet()
id: contactRequests isCommunityChat = root.chatSectionModule.isCommunity()
amIChatAdmin = obj.amIChatAdmin
property int nbRequests: root.store.contactRequestsModel.count chatId = obj.itemId
chatName = obj.name
anchors.top: searchInputWrapper.bottom chatDescription = obj.description
anchors.topMargin: visible ? Style.current.padding : 0 chatEmoji = obj.emoji
anchors.horizontalCenter: parent.horizontalCenter chatColor = obj.color
chatType = obj.type
visible: nbRequests > 0 chatMuted = obj.muted
height: visible ? implicitHeight : 0
title: qsTr("Contact requests")
requestsCount: nbRequests
sensor.onClicked: Global.openPopup(contactRequestsPopup)
}
ScrollView {
id: chatGroupsContainer
width: parent.width
height: (contentHeight < (parent.height - contactRequests.height - Style.current.padding)) ? contentHeight : (parent.height - contactRequests.height - Style.current.padding)
anchors.top: contactRequests.bottom
anchors.topMargin: Style.current.padding
anchors.bottom: root.bottom
contentHeight: channelList.childrenRect.height + emptyViewAndSuggestions.childrenRect.height
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
clip: true
StatusChatList {
id: channelList
anchors.horizontalCenter: parent.horizontalCenter
model: root.chatSectionModule.model
highlightItem: !root.store.openCreateChat
onChatItemSelected: {
root.chatSectionModule.setActiveItem(id, "")
}
onChatItemUnmuted: root.chatSectionModule.unmuteChat(id)
popupMenu: ChatContextMenuView {
id: chatContextMenuView
emojiPopup: root.emojiPopup
openHandler: function (id) {
let jsonObj = root.chatSectionModule.getItemAsJson(id)
let obj = JSON.parse(jsonObj)
if (obj.error) {
console.error("error parsing chat item json object, id: ", id, " error: ", obj.error)
close()
return
} }
currentFleet = root.chatSectionModule.getCurrentFleet() onMuteChat: {
isCommunityChat = root.chatSectionModule.isCommunity() root.chatSectionModule.muteChat(chatId)
amIChatAdmin = obj.amIChatAdmin }
chatId = obj.itemId
chatName = obj.name
chatDescription = obj.description
chatEmoji = obj.emoji
chatColor = obj.color
chatType = obj.type
chatMuted = obj.muted
}
onMuteChat: { onUnmuteChat: {
root.chatSectionModule.muteChat(chatId) root.chatSectionModule.unmuteChat(chatId)
} }
onUnmuteChat: { onMarkAllMessagesRead: {
root.chatSectionModule.unmuteChat(chatId) root.chatSectionModule.markAllMessagesRead(chatId)
} }
onMarkAllMessagesRead: { onClearChatHistory: {
root.chatSectionModule.markAllMessagesRead(chatId) root.chatSectionModule.clearChatHistory(chatId)
} }
onClearChatHistory: { onRequestAllHistoricMessages: {
root.chatSectionModule.clearChatHistory(chatId) // Not Refactored Yet - Check in the `master` branch if this is applicable here.
} }
onRequestAllHistoricMessages: { onLeaveChat: {
// Not Refactored Yet - Check in the `master` branch if this is applicable here. root.chatSectionModule.leaveChat(chatId)
} }
onLeaveChat: { onDeleteCommunityChat: {
root.chatSectionModule.leaveChat(chatId) // Not Refactored Yet
} }
onDeleteCommunityChat: { onDownloadMessages: {
// Not Refactored Yet root.chatSectionModule.downloadMessages(chatId, file)
} }
onDownloadMessages: { onDisplayProfilePopup: {
root.chatSectionModule.downloadMessages(chatId, file) Global.openProfilePopup(publicKey)
} }
onLeaveGroup: {
onDisplayProfilePopup: { chatSectionModule.leaveChat("", chatId, true);
Global.openProfilePopup(publicKey) }
} onDisplayGroupInfoPopup: {
onLeaveGroup: { chatSectionModule.prepareChatContentModuleForChatId(chatId)
chatSectionModule.leaveChat("", chatId, true); let chatContentModule = chatSectionModule.getChatContentModule()
} Global.openPopup(groupInfoPopupComponent, {
onDisplayGroupInfoPopup: { chatContentModule: chatContentModule,
chatSectionModule.prepareChatContentModuleForChatId(chatId) chatDetails: chatContentModule.chatDetails
let chatContentModule = chatSectionModule.getChatContentModule() })
Global.openPopup(groupInfoPopupComponent, { }
chatContentModule: chatContentModule, onRenameGroupChat: {
chatDetails: chatContentModule.chatDetails chatSectionModule.renameGroupChat(
}) chatId,
} groupName
onRenameGroupChat: { )
chatSectionModule.renameGroupChat( }
chatId,
groupName
)
} }
} }
}
EmptyViewPanel { EmptyViewPanel {
id: emptyViewAndSuggestions id: emptyViewAndSuggestions
visible: !localAccountSensitiveSettings.hideChannelSuggestions visible: !localAccountSensitiveSettings.hideChannelSuggestions
width: parent.width width: parent.width
anchors.top: channelList.bottom anchors.top: channelList.bottom
anchors.topMargin: Style.current.padding anchors.topMargin: Style.current.padding
rootStore: root.store rootStore: root.store
onSuggestedMessageClicked: chatSectionModule.createPublicChat(channel) onSuggestedMessageClicked: chatSectionModule.createPublicChat(channel)
}
} }
} }
@ -264,7 +259,6 @@ Item {
chatSectionModule.createPublicChat(channel) chatSectionModule.createPublicChat(channel)
close() close()
} }
onClosed: { onClosed: {
destroy() destroy()
} }
@ -328,7 +322,7 @@ Item {
Connections { Connections {
target: root.store.communitiesModuleInst target: root.store.communitiesModuleInst
onImportingCommunityStateChanged: { function onImportingCommunityStateChanged(state, errorMsg) {
let title = "" let title = ""
let loading = false let loading = false
@ -364,7 +358,7 @@ Item {
Connections { Connections {
target: root.store.mainModuleInst target: root.store.mainModuleInst
onOpenContactRequestsPopup:{ function onOpenContactRequestsPopup() {
Global.openPopup(contactRequestsPopup) Global.openPopup(contactRequestsPopup)
} }
} }

2
ui/app/mainui/AppMain.qml
View File

@ -44,8 +44,6 @@ Item {
// set from main.qml // set from main.qml
property var sysPalette property var sysPalette
signal openContactsPopup()
Connections { Connections {
target: rootStore.aboutModuleInst target: rootStore.aboutModuleInst
onAppVersionFetched: { onAppVersionFetched: {