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: 195
  25     height: 216.8
  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.svg'.arg(root.name.toLowerCase())
  36         }
  37         Image {
  38             id: activeIcon
  39             anchors.fill: parent
  40             source: './images/Shortcut/%1_active.svg'.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     Label {
  51         id: name
  52         y: 160
  53         width: root.width - 10
  54         font.pixelSize: 15
  55         font.letterSpacing: 5
  56         // wrapMode: Text.WordWrap
  57         anchors.horizontalCenter: parent.horizontalCenter
  58         horizontalAlignment: Text.AlignHCenter
  59         color: "white"
  60         text: qsTr(model.name.toUpperCase())
  61     }
  62     states: [
  63         State {
  64             when: launcher.launching
  65             PropertyChanges {
  66                 target: root
  67                 enabled: false
  68             }
  69             PropertyChanges {
  70                 target: icon
  71                 desaturation: 1.0
  72             }
  73         },
  74         State {
  75             when: root.active
  76             PropertyChanges {
  77                 target: inactiveIcon
  78                 opacity: 0.0
  79             }
  80             PropertyChanges {
  81                 target: activeIcon
  82                 opacity: 1.0
  83             }
  84         }
  85     ]
  86
  87     transitions: [
  88         Transition {
  89             NumberAnimation {
  90                 properties: 'opacity'
  91                 duration: 500
  92                 easing.type: Easing.OutExpo
  93             }
  94             NumberAnimation {
  95                 properties: 'desaturation'
  96                 duration: 250
  97             }
  98         }
  99     ]
 100 }