chatview: scale button animation along with opacity

Also uses behavior instead of states and suppresses the animation
during conversation load.

Change-Id: I7082fc7b04660236641b9aa0745356f5b09cdc52

src/mainview/components/MessageBar.qml

@@ -32,6 +32,8 @@ ColumnLayout {
     property alias text: textArea.text
     property var textAreaObj: textArea
     property real marginSize: 10
+    property bool sendButtonVisibility: false
+    property bool animate: false
 
     signal sendMessageButtonClicked
     signal sendFileButtonClicked
@@ -39,15 +41,6 @@ ColumnLayout {
     signal videoRecordMessageButtonClicked
     signal emojiButtonClicked
 
-    function showSendMessageButton() {
-        sendMessageButton.visible = true
-        sendMessageButton.state = "buttonFadeOut"
-    }
-
-    function hideSendMessageButton() {
-        sendMessageButton.state = "buttonFadeIn"
-    }
-
     implicitHeight: messageBarRowLayout.height
 
     spacing: 0
@@ -181,7 +174,7 @@ ColumnLayout {
 
             Layout.alignment: Qt.AlignVCenter
             Layout.rightMargin: visible ? marginSize : 0
-            Layout.preferredWidth: JamiTheme.messageWebViewFooterButtonSize
+            Layout.preferredWidth: scale * JamiTheme.messageWebViewFooterButtonSize
             Layout.preferredHeight: JamiTheme.messageWebViewFooterButtonSize
 
             radius: JamiTheme.messageWebViewFooterButtonRadius
@@ -194,37 +187,18 @@ ColumnLayout {
             normalColor: JamiTheme.primaryBackgroundColor
             imageColor: JamiTheme.messageWebViewFooterButtonImageColor
 
-            opacity: 0
-            visible: false
-            states: [
-                State {
-                    name: "buttonFadeIn"
-                    PropertyChanges {
-                        target: sendMessageButton
-                        opacity: 0
-                    }
-                },
-                State {
-                    name: "buttonFadeOut"
-                    PropertyChanges {
-                        target: sendMessageButton
-                        opacity: 1
-                    }
-                }
-            ]
-            transitions: Transition {
+            opacity: sendButtonVisibility ? 1 : 0
+            visible: opacity
+            scale: opacity
+
+            Behavior on opacity {
+                enabled: animate
                 NumberAnimation {
-                    properties: "opacity"
+                    duration: JamiTheme.shortFadeDuration
                     easing.type: Easing.InOutQuad
-                    duration: 300
                 }
             }
 
-            onOpacityChanged: {
-                if (opacity === 0)
-                    visible = false
-            }
-
             onClicked: root.sendMessageButtonClicked()
         }
 

src/mainview/components/MessageWebViewFooter.qml

@@ -53,6 +53,9 @@ Rectangle {
                                             messageBar.text);
             }
 
+            // turn off the button animations when switching convs
+            messageBar.animate = false
+
             messageBar.textAreaObj.clearText()
             previousConvId = LRCInstance.selectedConvUid
 
@@ -60,6 +63,8 @@ Rectangle {
                                                               LRCInstance.currentAccountId);
             if (restoredContent)
                 messageBar.textAreaObj.insertText(restoredContent)
+
+            messageBar.animate = true
         }
     }
 
@@ -122,12 +127,8 @@ Rectangle {
             Layout.preferredWidth: footerColumnLayout.width
             Layout.preferredHeight: implicitHeight
 
-            onTextChanged: {
-                if (text)
-                    showSendMessageButton()
-                else if (!dataTransferSendContainer.filesToSendCount)
-                    hideSendMessageButton()
-            }
+            sendButtonVisibility: text ||
+                                  dataTransferSendContainer.filesToSendCount
 
             onEmojiButtonClicked: {
                 JamiQmlUtils.updateMessageBarButtonsPoints()