status-im/status-desktop
2
0
Fork 0
mirror of https://github.com/status-im/status-desktop.git synced 2025-01-21 20:09:37 +00:00
Code Issues Projects Releases Wiki Activity

fix: personal chat item wrong width

Browse Source 
- do not hardcode width of child elements (impossible to propagate
setting the width from the toplevel/parent component)
- made both the community and non-community chat item look the same and
according to the Figma designs (including margins, scrollbar positions,
spacing etc)
- cleaned up some hardcoded values and dead code

Fixes #10469
This commit is contained in:
Lukáš Tinkl 2023-05-02 11:37:12 +02:00 committed by Lukáš Tinkl
parent f14fb65e44
commit b07ba7fb2d
10 changed files with 129 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
test/ui-test/src/screens/StatusCommunityScreen.py
View File

@ -447,7 +447,7 @@ class StatusCommunityScreen:
draggable_item = chat_lists.itemAtIndex(i)
chat = draggable_item.item
if chat != None:
if chat.text == chatName:
if draggable_item.objectName == chatName:
right_click_obj(draggable_item)
found = True
break

52
ui/StatusQ/src/StatusQ/Components/StatusChatList.qml
View File

@ -10,7 +10,7 @@ import StatusQ.Controls 0.1
Item {
id: root
implicitWidth: statusChatListItems.width
implicitWidth: 288
implicitHeight: statusChatListItems.contentHeight
property string categoryId: ""
@ -21,8 +21,8 @@ Item {
property alias statusChatListItems: statusChatListItems
property Component popupMenu
property Component categoryPopupMenu
property alias popupMenu: popupMenuSlot.sourceComponent
property alias categoryPopupMenu: categoryPopupMenuSlot.sourceComponent
property var isEnsVerified: function(pubKey) { return false }
@ -34,8 +34,8 @@ Item {
StatusListView {
id: statusChatListItems
width: 288
height: root.height
width: parent.width
height: parent.height
objectName: "chatListItems"
model: root.model
spacing: 0
@ -44,15 +44,15 @@ Item {
delegate: DropArea {
id: chatListDelegate
objectName: model.name
width: model.isCategory ? statusChatListCategoryItem.width : statusChatListItem.width
height: model.isCategory ? statusChatListCategoryItem.height : statusChatListItem.height
width: ListView.view.width
height: isCategory ? statusChatListCategoryItem.height : statusChatListItem.height
keys: ["x-status-draggable-chat-list-item-and-categories"]
property int visualIndex: index
property string chatId: model.itemId
property string categoryId: model.categoryId
property string isCategory: model.isCategory
property Item item: isCategory ? draggableItem.actions[0] : draggableItem.actions[1]
readonly property int visualIndex: index
readonly property string chatId: model.itemId
readonly property string categoryId: model.categoryId
readonly property bool isCategory: model.isCategory
readonly property Item item: isCategory ? draggableItem.actions[0] : draggableItem.actions[1]
onEntered: function(drag) {
drag.accept();
@ -106,6 +106,7 @@ Item {
StatusChatListCategoryItem {
id: statusChatListCategoryItem
objectName: "categoryItem"
width: chatListDelegate.width
visible: draggableItem.isCategory
function setupPopup() {
@ -123,7 +124,7 @@ Item {
opened: model.categoryOpened
highlighted: draggableItem.dragActive
showAddButton: showCategoryActionButtons
showMenuButton: !!root.onPopupMenuChanged
showMenuButton: !!root.popupMenu
hasUnreadMessages: model.hasUnreadMessages
onClicked: {
if (mouse.button === Qt.RightButton && showCategoryActionButtons && !!root.categoryPopupMenu) {
@ -148,7 +149,7 @@ Item {
StatusChatListItem {
id: statusChatListItem
objectName: model.name
width: root.width
width: chatListDelegate.width
height: visible ? (statusChatListItem.implicitHeight + 4) /*spacing between non-collapsed items*/ : 0
visible: (!draggableItem.isCategory && model.categoryOpened)
originalOrder: model.position
@ -211,30 +212,15 @@ Item {
}
}
onPopupMenuChanged: {
if (!!popupMenu) {
popupMenuSlot.sourceComponent = popupMenu
}
}
onCategoryPopupMenuChanged: {
if (!!categoryPopupMenu) {
categoryPopupMenuSlot.sourceComponent = categoryPopupMenu
}
}
QtObject {
id: d
property int destinationPosition: -1
}
Loader {
id: popupMenuSlot
active: !!root.popupMenu
active: !!sourceComponent
asynchronous: true
}
Loader {
id: categoryPopupMenuSlot
active: !!root.categoryPopupMenu
active: !!sourceComponent
asynchronous: true
}
}

17
ui/StatusQ/src/StatusQ/Components/StatusChatListAndCategories.qml
View File

@ -15,13 +15,6 @@ Item {
property alias highlightItem: statusChatList.highlightItem
property StatusTooltipSettings categoryAddButtonToolTip: StatusTooltipSettings {
text: qsTr("Add channel inside category")
}
property StatusTooltipSettings categoryMenuButtonToolTip: StatusTooltipSettings {
text: qsTr("More")
}
property var model: []
property bool showCategoryActionButtons: false
property bool showPopupMenu: true
@ -31,7 +24,7 @@ Item {
property Component categoryPopupMenu
property Component chatListPopupMenu
property Component popupMenu
property alias popupMenu: popupMenuSlot.sourceComponent
signal chatItemSelected(string categoryId, string id)
signal chatItemUnmuted(string id)
@ -39,12 +32,6 @@ Item {
signal chatListCategoryReordered(string categoryId, int to)
signal categoryAddButtonClicked(string id)
onPopupMenuChanged: {
if (!!popupMenu) {
popupMenuSlot.sourceComponent = popupMenu
}
}
MouseArea {
id: sensor
anchors.top: parent.top
@ -91,6 +78,6 @@ Item {
Loader {
id: popupMenuSlot
active: !!root.popupMenu
active: !!sourceComponent
}
}

10
ui/StatusQ/src/StatusQ/Components/StatusChatListCategoryItem.qml
View File

@ -36,6 +36,11 @@ Control {
}
contentItem: Item {
HoverHandler {
id: hoverHandler
cursorShape: Qt.PointingHandCursor
}
StatusBaseText {
width: Math.min(implicitWidth, parent.width)
anchors.verticalCenter: parent.verticalCenter
@ -74,9 +79,4 @@ Control {
}
}
}
HoverHandler {
id: hoverHandler
cursorShape: Qt.PointingHandCursor
}
}

1
ui/StatusQ/src/StatusQ/Components/StatusDraggableListItem.qml
View File

@ -338,7 +338,6 @@ ItemDelegate {
Component {
id: letterIdenticonComponent
StatusLetterIdenticon {
letterSize: 14
width: root.icon.width
height: root.icon.height
emoji: root.hasEmoji ? root.icon.name : ""

10
ui/StatusQ/src/StatusQ/Controls/StatusChatListCategoryItemButton.qml
View File

@ -10,7 +10,6 @@ StatusFlatRoundButton {
radius: 4
property bool highlighted: false
property StatusTooltipSettings tooltip: StatusTooltipSettings {}
type: StatusFlatRoundButton.Type.Secondary
icon.width: 20
@ -19,13 +18,4 @@ StatusFlatRoundButton {
color: hovered || highlighted ?
Theme.palette.statusChatListCategoryItem.buttonHoverBackgroundColor :
"transparent"
StatusToolTip {
id: statusToolTip
visible: !!text && parent.hovered
text: tooltip.text
orientation: tooltip.orientation
offset: tooltip.offset
}
}

4
ui/app/AppLayouts/Chat/stores/RootStore.qml
View File

@ -136,7 +136,7 @@ QtObject {
const chatContentModule = chatCommunitySectionModule.getChatContentModule()
var result = false
let textMsg = globalUtils.plainText(StatusQUtils.Emoji.deparse(text))
let textMsg = globalUtilsInst.plainText(StatusQUtils.Emoji.deparse(text))
if (textMsg.trim() !== "") {
textMsg = interpretMessage(textMsg)
@ -231,7 +231,7 @@ QtObject {
return isCurrentUser(pubkey) ? qsTr("You") : name
}
function myPubKey() {
function myPublicKey() {
return userProfileInst.pubKey
}

15
ui/app/AppLayouts/Chat/views/CommunityColumnView.qml
View File

@ -22,7 +22,7 @@ import "../panels/communities"
Item {
id: root
objectName: "communityColumnView"
width: 304
width: Constants.chatSectionLeftColumnWidth
height: parent.height
// Important:
@ -71,7 +71,7 @@ Item {
property bool invitationPending: root.store.isCommunityRequestPending(communityData.id)
anchors.top: communityHeader.bottom
anchors.topMargin: 8
anchors.topMargin: Style.current.halfPadding
anchors.bottomMargin: Style.current.halfPadding
anchors.horizontalCenter: parent.horizontalCenter
enabled: !root.communityData.amIBanned
@ -122,7 +122,7 @@ Item {
readonly property int nbRequests: root.communityData.pendingRequestsToJoin.count || 0
anchors.top: joinCommunityButton.visible ? joinCommunityButton.bottom : communityHeader.bottom
anchors.topMargin: active ? 8 : 0
anchors.topMargin: active ? Style.current.halfPadding : 0
anchors.horizontalCenter: parent.horizontalCenter
active: communityData.amISectionAdmin && nbRequests > 0
@ -140,7 +140,7 @@ Item {
chatSectionModule: root.communitySectionModule
width: parent.width
anchors.top: membershipRequests.bottom
anchors.topMargin: active ? 8 : 0
anchors.topMargin: active ? Style.current.halfPadding : 0
}
StatusMenu {
@ -185,19 +185,16 @@ Item {
StatusScrollView {
id: scrollView
anchors.top: membershipRequests.bottom
anchors.topMargin: Style.current.padding
anchors.topMargin: Style.current.halfPadding
anchors.bottom: createChatOrCommunity.top
anchors.horizontalCenter: parent.horizontalCenter
topPadding: Style.current.padding
width: parent.width
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
contentWidth: communityChatListAndCategories.implicitWidth
contentHeight: communityChatListAndCategories.height
+ bannerColumn.height
+ Style.current.bigPadding
StatusChatListAndCategories {
id: communityChatListAndCategories
@ -460,7 +457,7 @@ Item {
id: createChatOrCommunity
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: Style.current.padding
anchors.bottomMargin: active ? Style.current.padding : 0
active: communityData.amISectionAdmin
sourceComponent: Component {
StatusBaseText {

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

@ -10,6 +10,7 @@ import StatusQ.Popups 0.1
import utils 1.0
import shared 1.0
import shared.controls 1.0
import shared.popups 1.0
import SortFilterProxyModel 0.2
@ -40,15 +41,15 @@ Item {
ColumnLayout {
anchors {
fill: parent
margins: Style.current.padding
topMargin: Style.current.smallPadding
bottomMargin: 0
}
spacing: Style.current.padding
spacing: Style.current.halfPadding
// Chat headline row
RowLayout {
Layout.fillWidth: true
Layout.leftMargin: Style.current.padding
Layout.rightMargin: Style.current.padding
StatusNavigationPanelHeadline {
objectName: "ContactsColumnView_MessagesHeadline"
@ -86,13 +87,13 @@ Item {
}
// search field
StatusInput {
SearchBox {
id: searchInput
Layout.fillWidth: true
Layout.leftMargin: Style.current.padding
Layout.rightMargin: Style.current.padding
Layout.preferredHeight: 36
maximumHeight: 36
placeholderText: qsTr("Search")
input.asset.name: "search"
leftPadding: 10
topPadding: 4
bottomPadding: 4
@ -104,120 +105,109 @@ Item {
}
}
Item {
ChatsLoadingPanel {
Layout.fillWidth: true
chatSectionModule: root.chatSectionModule
}
// chat list
StatusScrollView {
Layout.fillWidth: true
Layout.fillHeight: true
clip: true
StatusChatList {
id: channelList
objectName: "ContactsColumnView_chatList"
width: parent.availableWidth
model: SortFilterProxyModel {
sourceModel: root.chatSectionModule.model
sorters: RoleSorter {
roleName: "lastMessageTimestamp"
sortOrder: Qt.DescendingOrder
}
}
ChatsLoadingPanel {
chatSectionModule: root.chatSectionModule
width: parent.width
}
highlightItem: !root.store.openCreateChat
isEnsVerified: function(pubKey) { return Utils.isEnsVerified(pubKey) }
onChatItemSelected: {
Global.closeCreateChatView()
root.chatSectionModule.setActiveItem(id, "")
}
onChatItemUnmuted: root.chatSectionModule.unmuteChat(id)
// chat list
StatusScrollView {
id: scroll
popupMenu: ChatContextMenuView {
id: chatContextMenuView
emojiPopup: root.emojiPopup
clip: false
padding: 0
anchors.fill: parent
anchors.bottomMargin: Style.current.padding
StatusChatList {
id: channelList
objectName: "ContactsColumnView_chatList"
width: scroll.availableWidth
model: SortFilterProxyModel {
sourceModel: root.chatSectionModule.model
sorters: RoleSorter {
roleName: "lastMessageTimestamp"
sortOrder: Qt.DescendingOrder
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()
isCommunityChat = root.chatSectionModule.isCommunity()
amIChatAdmin = obj.amIChatAdmin
chatId = obj.itemId
chatName = obj.name
chatDescription = obj.description
chatEmoji = obj.emoji
chatColor = obj.color
chatIcon = obj.icon
chatType = obj.type
chatMuted = obj.muted
}
highlightItem: !root.store.openCreateChat
isEnsVerified: function(pubKey) { return Utils.isEnsVerified(pubKey) }
onChatItemSelected: {
Global.closeCreateChatView()
root.chatSectionModule.setActiveItem(id, "")
onMuteChat: {
root.chatSectionModule.muteChat(chatId)
}
onChatItemUnmuted: root.chatSectionModule.unmuteChat(id)
popupMenu: ChatContextMenuView {
id: chatContextMenuView
emojiPopup: root.emojiPopup
onUnmuteChat: {
root.chatSectionModule.unmuteChat(chatId)
}
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
}
onMarkAllMessagesRead: {
root.chatSectionModule.markAllMessagesRead(chatId)
}
currentFleet = root.chatSectionModule.getCurrentFleet()
isCommunityChat = root.chatSectionModule.isCommunity()
amIChatAdmin = obj.amIChatAdmin
chatId = obj.itemId
chatName = obj.name
chatDescription = obj.description
chatEmoji = obj.emoji
chatColor = obj.color
chatIcon = obj.icon
chatType = obj.type
chatMuted = obj.muted
}
onClearChatHistory: {
root.chatSectionModule.clearChatHistory(chatId)
}
onMuteChat: {
root.chatSectionModule.muteChat(chatId)
}
onRequestAllHistoricMessages: {
// Not Refactored Yet - Check in the `master` branch if this is applicable here.
}
onUnmuteChat: {
root.chatSectionModule.unmuteChat(chatId)
}
onLeaveChat: {
root.chatSectionModule.leaveChat(chatId)
}
onMarkAllMessagesRead: {
root.chatSectionModule.markAllMessagesRead(chatId)
}
onDeleteCommunityChat: {
// Not Refactored Yet
}
onClearChatHistory: {
root.chatSectionModule.clearChatHistory(chatId)
}
onRequestAllHistoricMessages: {
// Not Refactored Yet - Check in the `master` branch if this is applicable here.
}
onLeaveChat: {
root.chatSectionModule.leaveChat(chatId)
}
onDeleteCommunityChat: {
// Not Refactored Yet
}
onDownloadMessages: {
root.chatSectionModule.downloadMessages(chatId, file)
}
onDisplayProfilePopup: {
Global.openProfilePopup(publicKey)
}
onLeaveGroup: {
chatSectionModule.leaveChat("", chatId, true);
}
onUpdateGroupChatDetails: {
chatSectionModule.updateGroupChatDetails(
chatId,
groupName,
groupColor,
groupImage
)
}
onAddRemoveGroupMember: {
root.addRemoveGroupMemberClicked()
}
onDownloadMessages: {
root.chatSectionModule.downloadMessages(chatId, file)
}
onDisplayProfilePopup: {
Global.openProfilePopup(publicKey)
}
onLeaveGroup: {
chatSectionModule.leaveChat("", chatId, true);
}
onUpdateGroupChatDetails: {
chatSectionModule.updateGroupChatDetails(
chatId,
groupName,
groupColor,
groupImage
)
}
onAddRemoveGroupMember: {
root.addRemoveGroupMemberClicked()
}
}
}

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

@ -885,6 +885,7 @@ Item {
anchors.centerIn: parent
spacing: 6
StatusBaseText {
anchors.verticalCenter: parent.verticalCenter
text: qsTr("Loading sections...")
}
LoadingAnimation { anchors.verticalCenter: parent.verticalCenter }