From d35c971c8bdb66420d3331d9dc3419aa9c216102 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Tue, 18 Aug 2020 11:08:33 -0400
Subject: [PATCH] fix: fix layout of input buttons when some are hidden

---
 .../AppLayouts/Chat/ChatColumn/ChatButtons.qml   | 16 +++++++++-------
 .../ChatComponents/ChatInputButton.qml           | 12 +++++++++---
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/ui/app/AppLayouts/Chat/ChatColumn/ChatButtons.qml b/ui/app/AppLayouts/Chat/ChatColumn/ChatButtons.qml
index 79b0469be2..9a037f7543 100644
--- a/ui/app/AppLayouts/Chat/ChatColumn/ChatButtons.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/ChatButtons.qml
@@ -15,15 +15,17 @@ Row {
 
     anchors.right: parent.right
     anchors.rightMargin: Style.current.padding
-    spacing: Style.current.padding / 2
+    spacing: 0
 
-    width: childrenRect.width
+    // ChildrenRect doesn't work with the width being able to change
+    width: chatSendBtn.width + emojiIconButton.width +
+           stickerIconButton.width + imageIconButton.width + commandIconButton.width
 
     Button {
         id: chatSendBtn
         visible: txtData.length > 0 || chatColumn.isImage
-        width: 30
-        height: 30
+        width: this.visible ? 30 : 0
+        height: this.width
         text: ""
         anchors.verticalCenter: parent.verticalCenter
         onClicked: {
@@ -43,7 +45,7 @@ Row {
     }
 
     ChatInputButton {
-        id: emojiIconContainer
+        id: emojiIconButton
         source: "../../../img/emojiBtn.svg"
         opened: emojiPopup.opened
         close: function () {
@@ -55,7 +57,7 @@ Row {
     }
 
     ChatInputButton {
-        id: stickerIconContainer
+        id: stickerIconButton
         visible: !chatColumn.isExtendedInput && txtData.length == 0
         source: "../../../img/stickers_icon.svg"
         opened: stickersPopup.opened
@@ -68,7 +70,7 @@ Row {
     }
 
     ChatInputButton {
-        id: imageIconContainer
+        id: imageIconButton
         visible: !chatColumn.isExtendedInput && (chatsModel.activeChannel.chatType === Constants.chatTypePrivateGroupChat || chatsModel.activeChannel.chatType === Constants.chatTypeOneToOne)
         source: "../../../img/images_icon.svg"
         opened: imageDialog.visible
diff --git a/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatInputButton.qml b/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatInputButton.qml
index ce194170ad..140e6ef92e 100644
--- a/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatInputButton.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatInputButton.qml
@@ -5,15 +5,15 @@ import "../../../../../imports"
 import "../../../../../shared"
 
 Rectangle {
-    property url source: ""
+    property url source: "../../../../img/emojiBtn.svg"
     property bool hovered: false
     property bool opened: false
     property var close: function () {}
     property var open: function () {}
 
     id: root
-    width: buttonIcon.width + chatButtonsContainer.iconPadding * 2
-    height: buttonIcon.height + chatButtonsContainer.iconPadding * 2
+    width: this.visible ? buttonIcon.width + 4 + chatButtonsContainer.iconPadding * 2 : 0
+    height: this.visible ? buttonIcon.height + chatButtonsContainer.iconPadding * 2 : 0
     radius: Style.current.radius
     color: hovered ? Style.current.secondaryBackground : Style.current.transparent
     anchors.verticalCenter: parent.verticalCenter
@@ -52,3 +52,9 @@ Rectangle {
         }
     }
 }
+
+/*##^##
+Designer {
+    D{i:0;formeditorZoom:1.5}
+}
+##^##*/