bar icons: crossfade animation on icon change

modules/BarIcon.qml

@@ -8,8 +8,26 @@ Text {
     property string icon: ""
     property string tooltip: ""
     property bool _hovered: false
+    property string _displayIcon: icon
+    property string _pendingIcon: ""
 
-    text: icon
+    text: _displayIcon
+
+    onIconChanged: {
+        if (_crossfade.running) {
+            _pendingIcon = icon;
+        } else {
+            _pendingIcon = icon;
+            _crossfade.start();
+        }
+    }
+
+    SequentialAnimation {
+        id: _crossfade
+        NumberAnimation { target: root; property: "opacity"; to: 0; duration: 60; easing.type: Easing.InQuad }
+        ScriptAction { script: root._displayIcon = root._pendingIcon }
+        NumberAnimation { target: root; property: "opacity"; to: 1; duration: 100; easing.type: Easing.OutQuad }
+    }
     color: M.Theme.base05
     font.pixelSize: M.Theme.fontSize + 1
     font.family: M.Theme.iconFontFamily