X-Git-Url: https://gerrit.automotivelinux.org/gerrit/gitweb?a=blobdiff_plain;f=homescreen%2Fqml%2FShortcutIcon.qml;h=026db327924db8dca342f4d6381ea6592e33b077;hb=c5aad6f23f523bf44bf58419bb2fc41262be2180;hp=6f8e05ef6d8961d5ef43ea84b674462a30d8b750;hpb=0592a405aa68f3baf6773795efa5522e4ee16779;p=apps%2Fhomescreen.git

diff --git a/homescreen/qml/ShortcutIcon.qml b/homescreen/qml/ShortcutIcon.qml
index 6f8e05e..026db32 100644
--- a/homescreen/qml/ShortcutIcon.qml
+++ b/homescreen/qml/ShortcutIcon.qml
@@ -16,39 +16,59 @@
  */
 
 import QtQuick 2.2
+import QtQuick.Controls 2.0
+import QtGraphicalEffects 1.0
 
 MouseArea {
     id: root
-    width: 195
-    height: 216.8
+    width: 70
+    height: 70
     property string name: 'Home'
     property bool active: false
-    Image {
+    Item {
         id: icon
+        property real desaturation: 0
         anchors.fill: parent
-        source: './images/Shortcut/HMI_Shortcut_%1-01.png'.arg(root.name)
-    }
-    Image {
-        anchors.fill: parent
-        source: './images/Shortcut/HMI_Shortcut_%1_Active-01.png'.arg(root.name)
-        opacity: 1.0 - icon.opacity
-    }
-    states: [
-        State {
-            when: root.active
-            PropertyChanges {
-                target: icon
-                opacity: 0.0
-            }
+        Image {
+            id: inactiveIcon
+            anchors.fill: parent
+            source: './images/Shortcut/%1.png'.arg(root.name.toLowerCase())
         }
-    ]
+        Image {
+            id: activeIcon
+            anchors.fill: parent
+            source: './images/Shortcut/%1_active.png'.arg(root.name.toLowerCase())
+            opacity: 0.0
+        }
+        layer.enabled: true
+        layer.effect: Desaturate {
+            id: desaturate
+            desaturation: icon.desaturation
+            cached: true
+        }
+    }
 
     transitions: [
         Transition {
             NumberAnimation {
                 properties: 'opacity'
+                duration: 500
                 easing.type: Easing.OutExpo
             }
+            NumberAnimation {
+                properties: 'desaturation'
+                duration: 250
+            }
         }
     ]
+
+    onPressed: {
+        activeIcon.opacity = 1.0
+        inactiveIcon.opacity = 0.0
+    }
+
+    onReleased: {
+        activeIcon.opacity = 0.0
+        inactiveIcon.opacity = 1.0
+    }
 }