fix: personal chat item wrong width

- 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
status-im · May 3, 2023 · b07ba7f · b07ba7f
1 parent f14fb65
commit b07ba7f
Show file tree

Hide file tree

Showing 10 changed files with 131 additions and 181 deletions.
diff --git a/test/ui-test/src/screens/StatusCommunityScreen.py b/test/ui-test/src/screens/StatusCommunityScreen.py
@@ -447,7 +447,7 @@ def mark_as_read(self, chatName: str):
             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

diff --git a/ui/StatusQ/src/StatusQ/Components/StatusChatList.qml b/ui/StatusQ/src/StatusQ/Components/StatusChatList.qml
@@ -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
     }
 }
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusChatListAndCategories.qml b/ui/StatusQ/src/StatusQ/Components/StatusChatListAndCategories.qml
@@ -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,20 +24,14 @@ 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)
     signal chatItemReordered(string categoryId, string chatId, int to)
     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
     }
 }
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusChatListCategoryItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusChatListCategoryItem.qml
@@ -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
-    }
 }
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusDraggableListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusDraggableListItem.qml
@@ -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 : ""

diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusChatListCategoryItemButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusChatListCategoryItemButton.qml
@@ -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
-    }
 }
-
diff --git a/ui/app/AppLayouts/Chat/stores/RootStore.qml b/ui/app/AppLayouts/Chat/stores/RootStore.qml
@@ -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
     }
 

diff --git a/ui/app/AppLayouts/Chat/views/CommunityColumnView.qml b/ui/app/AppLayouts/Chat/views/CommunityColumnView.qml
@@ -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 {