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