homescreen/qml/ShortcutIcon.qml

   1 /*
   2  * Copyright (C) 2016 The Qt Company Ltd.
   3  * Copyright (C) 2016, 2017 Mentor Graphics Development (Deutschland) GmbH
   4  *
   5  * Licensed under the Apache License, Version 2.0 (the "License");
   6  * you may not use this file except in compliance with the License.
   7  * You may obtain a copy of the License at
   8  *
   9  *      http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  * Unless required by applicable law or agreed to in writing, software
  12  * distributed under the License is distributed on an "AS IS" BASIS,
  13  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  * See the License for the specific language governing permissions and
  15  * limitations under the License.
  16  */
  17
  18 import QtQuick 2.2
  19 import QtQuick.Controls 2.0
  20 import QtGraphicalEffects 1.0
  21
  22 MouseArea {
  23     id: root
  24     width: 70
  25     height: 70
  26     property string name: 'Home'
  27     property bool active: false
  28     Item {
  29         id: icon
  30         property real desaturation: 0
  31         anchors.fill: parent
  32         Image {
  33             id: inactiveIcon
  34             anchors.fill: parent
  35             source: './images/Shortcut/%1.png'.arg(root.name.toLowerCase())
  36         }
  37         Image {
  38             id: activeIcon
  39             anchors.fill: parent
  40             source: './images/Shortcut/%1_active.png'.arg(root.name.toLowerCase())
  41             opacity: 0.0
  42         }
  43         layer.enabled: true
  44         layer.effect: Desaturate {
  45             id: desaturate
  46             desaturation: icon.desaturation
  47             cached: true
  48         }
  49     }
  50
  51     transitions: [
  52         Transition {
  53             NumberAnimation {
  54                 properties: 'opacity'
  55                 duration: 500
  56                 easing.type: Easing.OutExpo
  57             }
  58             NumberAnimation {
  59                 properties: 'desaturation'
  60                 duration: 250
  61             }
  62         }
  63     ]
  64
  65     onPressed: {
  66         activeIcon.opacity = 1.0
  67         inactiveIcon.opacity = 0.0
  68     }
  69
  70     onReleased: {
  71         activeIcon.opacity = 0.0
  72         inactiveIcon.opacity = 1.0
  73     }
  74 }