accountcombobox: use smooth mouse state transitions

Change-Id: I11a89c5e58b4cfcb844ec88fe5801bc70c84c2dd

src/mainview/components/AccountComboBox.qml

@@ -85,7 +85,7 @@ ComboBox {
 
         anchors.left: userImageRoot.right
         anchors.leftMargin: 16
-        anchors.top: rootItemBackground.top
+        anchors.top: background.top
         anchors.topMargin: 16
 
         text: textMetricsUserAliasRoot.elidedText
@@ -140,7 +140,7 @@ ComboBox {
     }
 
     background: Rectangle {
-        id: rootItemBackground
+        id: background
 
         implicitWidth: root.width
         implicitHeight: root.height
@@ -156,6 +156,37 @@ ComboBox {
             }
             color: JamiTheme.tabbarBorderColor
         }
+
+        states: [
+            State {
+                name: "open"; when: comboBoxPopup.opened
+                PropertyChanges {
+                    target: background
+                    color: Qt.lighter(JamiTheme.hoverColor, 1.0)
+                }
+            },
+            State {
+                name: "hovered"
+                PropertyChanges {
+                    target: background
+                    color: Qt.lighter(JamiTheme.hoverColor, 1.05)
+                }
+            },
+            State {
+                name: "normal"
+                PropertyChanges {
+                    target: background
+                    color: JamiTheme.backgroundColor
+                }
+            }
+        ]
+
+        transitions: [
+            Transition {
+                to: "hovered"; reversible: true
+                ColorAnimation { duration: JamiTheme.fadeDuration }
+            }
+        ]
     }
 
     MouseArea {
@@ -171,52 +202,57 @@ ComboBox {
                 root.popup.open()
             }
         }
-        onEntered: rootItemBackground.color = Qt.lighter(JamiTheme.hoverColor, 1.05)
-        onExited: rootItemBackground.color = JamiTheme.backgroundColor
+        onEntered: background.state = "hovered"
+        onExited: {
+            if (!comboBoxPopup.opened)
+                background.state = "normal"
+        }
     }
 
-    PushButton {
-        id: qrCodeGenerateButton
+    Row {
+        spacing: 10
 
-        anchors.right: settingsButton.left
+        anchors.right: root.right
         anchors.rightMargin: 10
         anchors.verticalCenter: root.verticalCenter
 
-        width: visible ? preferredSize : 0
-        height: visible ? preferredSize : 0
+        PushButton {
+            id: qrCodeGenerateButton
 
-        visible: AccountAdapter.currentAccountType === Profile.Type.RING
-        toolTipText: JamiStrings.displayQRCode
+            width: visible ? preferredSize : 0
+            height: visible ? preferredSize : 0
 
-        source: "qrc:/images/icons/qr_code-24px.svg"
+            visible: AccountAdapter.currentAccountType === Profile.Type.RING
+            toolTipText: JamiStrings.displayQRCode
 
-        onClicked: {
-            if (visible)
-                qrDialog.open()
-        }
-    }
+            source: "qrc:/images/icons/qr_code-24px.svg"
 
-    PushButton {
-        id: settingsButton
+            onClicked: {
+                if (visible)
+                    qrDialog.open()
+            }
+        }
 
-        anchors.right: root.right
-        anchors.rightMargin: 10
-        anchors.verticalCenter: root.verticalCenter
+        PushButton {
+            id: settingsButton
 
-        source: !mainViewWindow.inSettingsView ?
-                    "qrc:/images/icons/round-settings-24px.svg" :
-                    "qrc:/images/icons/round-close-24px.svg"
+            source: !mainViewWindow.inSettingsView ?
+                        "qrc:/images/icons/round-settings-24px.svg" :
+                        "qrc:/images/icons/round-close-24px.svg"
 
-        toolTipText: !mainViewWindow.inSettingsView ?
-                         JamiStrings.openSettings :
-                         JamiStrings.closeSettings
+            toolTipText: !mainViewWindow.inSettingsView ?
+                             JamiStrings.openSettings :
+                             JamiStrings.closeSettings
 
-        onClicked: {
-            settingBtnClicked()
-            rootItemBackground.color = JamiTheme.backgroundColor
+            onClicked: {
+                settingBtnClicked()
+                background.state = "normal"
+            }
         }
     }
 
+
+
     indicator: null
 
     // Overwrite the combo box pop up to add footer (for add accounts).