[notification] Fix notification handle on changing lang to Arabic

- Disappearing of part of notification handle was related to wrong anchoring one of the elements. This patch fixes it. Also added animation on hide/show counter.

Fixes: AUTOSUITE-1456
Change-Id: Ibc8288f287911a7cf8a0b5d1b247be54b1189ef7
Reviewed-by: Egor Nemtsev <enemtsev@luxoft.com>

1 files changed, 84 insertions, 10 deletions

diff --git a/sysui/notification/NotificationHandle.qml b/sysui/notification/NotificationHandle.qml
index 94d65f8f..00fb8ff8 100644
--- a/sysui/notification/NotificationHandle.qml
+++ b/sysui/notification/NotificationHandle.qml
@@ -77,38 +77,38 @@ ToolButton {
         anchors.horizontalCenter: parent.horizontalCenter
 
         Rectangle {
-            anchors.verticalCenter: parent.verticalCenter
-            width: root.notificationCounterVisible ? Sizes.dp(100) : Sizes.dp(200)
+            width: Sizes.dp(100)
             height: Sizes.dp(4)
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: countRect.left
             color: Style.contrastColor
         }
 
         Rectangle {
+            id: countRect
+
             width: Sizes.dp(45)
-            height: Sizes.dp(30)
-            radius: height / 2
+            height: Sizes.dp(4)
             anchors.centerIn: parent
-            opacity: root.notificationCounterVisible ? 1 : 0
-            visible: opacity > 0
-            color: "transparent"
+            color: Style.contrastColor
             border.color: Style.contrastColor
 
             Label {
                 id: countLabel
+
                 anchors.centerIn: parent
                 font.pixelSize: Sizes.fontSizeXS
                 text: root.notificationCount
                 color: Style.contrastColor
+                visible: false
             }
         }
 
         Rectangle {
             width: Sizes.dp(100)
             height: Sizes.dp(4)
-            anchors.right: parent.right
             anchors.verticalCenter: parent.verticalCenter
-            opacity: root.notificationCounterVisible ? 1 : 0
-            visible: opacity > 0
+            anchors.left: countRect.right
             color: Style.contrastColor
         }
     }
@@ -121,4 +121,78 @@ ToolButton {
             root.prevDragY = root.dragTarget.y;
         }
     }
+
+    states: [
+        State {
+            name: "notificationCounterVisible"
+            when: root.notificationCounterVisible
+            changes: [
+                PropertyChanges {
+                    target: countRect
+                    height: Sizes.dp(30)
+                    radius: height / 2
+                    color: "transparent"
+                },
+                PropertyChanges {
+                    target: countLabel
+                    visible: true
+                }
+            ]
+        },
+        State {
+            name: "notificationCounterInvisible"
+            when: !root.notificationCounterVisible
+            changes: [
+                PropertyChanges {
+                    target: countRect
+                    height: Sizes.dp(4)
+                    radius: 0
+                    color: Style.contrastColor
+                },
+                PropertyChanges {
+                    target: countLabel
+                    visible: false
+                }
+            ]
+        }
+    ]
+
+    transitions: [
+        Transition {
+            to: "notificationCounterInvisible"
+            SequentialAnimation {
+                PauseAnimation {
+                    duration: 400
+                }
+                PropertyAction {
+                    target: countLabel
+                    property: "visible"
+                    value: false
+                }
+                NumberAnimation {
+                    target: countRect
+                    properties: "height, radius"
+                    duration: 200
+                }
+            }
+        },
+        Transition {
+            to: "notificationCounterVisible"
+            SequentialAnimation {
+                PauseAnimation {
+                    duration: 400
+                }
+                NumberAnimation {
+                    target: countRect
+                    properties: "height, radius"
+                    duration: 200
+                }
+                PropertyAction {
+                    target: countLabel
+                    property: "visible"
+                    value: true
+                }
+            }
+        }
+    ]
 }