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

diff --git a/homescreen/qml/ShortcutIcon.qml b/homescreen/qml/ShortcutIcon.qml
index 6f8e05e..d039d36 100644
--- a/homescreen/qml/ShortcutIcon.qml
+++ b/homescreen/qml/ShortcutIcon.qml
@@ -16,30 +16,72 @@
  */
 
 import QtQuick 2.2
+import QtQuick.Controls 2.0
+import QtGraphicalEffects 1.0
 
 MouseArea {
     id: root
-    width: 195
-    height: 216.8
     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 {
+            id: inactiveIcon
+            anchors.fill: parent
+            source: './images/Shortcut/%1.svg'.arg(root.name.toLowerCase())
+            fillMode: Image.PreserveAspectFit
+        }
+        Image {
+            id: activeIcon
+            anchors.fill: parent
+            source: './images/Shortcut/%1_active.svg'.arg(root.name.toLowerCase())
+            fillMode: Image.PreserveAspectFit
+            opacity: 0.0
+        }
+        layer.enabled: true
+        layer.effect: Desaturate {
+            id: desaturate
+            desaturation: icon.desaturation
+            cached: true
+        }
     }
-    Image {
-        anchors.fill: parent
-        source: './images/Shortcut/HMI_Shortcut_%1_Active-01.png'.arg(root.name)
-        opacity: 1.0 - icon.opacity
+    Label {
+        id: name
+        width: root.width - 10
+        font.pixelSize: 15
+        font.letterSpacing: 5
+        // wrapMode: Text.WordWrap
+        anchors.centerIn: icon
+        anchors.verticalCenterOffset: icon.height * 0.2
+        //anchors.horizontalCenter: parent.horizontalCenter
+        horizontalAlignment: Text.AlignHCenter
+        color: "white"
+        text: qsTr(model.name.toUpperCase())
     }
     states: [
         State {
-            when: root.active
+            when: launcher.launching
+            PropertyChanges {
+                target: root
+                enabled: false
+            }
             PropertyChanges {
                 target: icon
+                desaturation: 1.0
+            }
+        },
+        State {
+            when: root.active
+            PropertyChanges {
+                target: inactiveIcon
                 opacity: 0.0
             }
+            PropertyChanges {
+                target: activeIcon
+                opacity: 1.0
+            }
         }
     ]
 
@@ -47,8 +89,13 @@ MouseArea {
         Transition {
             NumberAnimation {
                 properties: 'opacity'
+                duration: 500
                 easing.type: Easing.OutExpo
             }
+            NumberAnimation {
+                properties: 'desaturation'
+                duration: 250
+            }
         }
     ]
 }