launcher/qml/IconItem.qml

   1 /*
   2  * Copyright (C) 2016 The Qt Company Ltd.
   3  * Copyright (c) 2018 TOYOTA MOTOR CORPORATION
   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 import QtQuick 2.0
  18 import QtQuick.Controls 2.0
  19 import QtGraphicalEffects 1.0
  20
  21 Item {
  22     id: main
  23     width: 320
  24     height: 320
  25     property string icon: model.icon
  26
  27     Item {
  28         id: container
  29         parent: loc
  30         x: main.x
  31         y: main.y
  32         width: main.width
  33         height: main.height
  34
  35         Image {
  36             id: item
  37             anchors.top: parent.top
  38             anchors.topMargin: 20
  39             anchors.horizontalCenter: parent.horizontalCenter
  40             width: 220
  41             height: width
  42             source: './images/%1_%2.svg'.arg(model.icon).arg(loc.pressed && (loc.index === model.index || loc.currentId === model.id) ? 'active' : 'inactive')
  43             antialiasing: item.state !== ''
  44
  45             property string initial: model.name.substring(0,1).toUpperCase()
  46
  47             Item {
  48                 id: title
  49                 width: 125
  50                 height: 125
  51                 anchors.centerIn: parent
  52                 Repeater {
  53                     delegate: Label {
  54                         style: Text.Outline
  55                         styleColor: 'red'
  56                         color: 'transparent'
  57                         font.pixelSize: 125
  58                         anchors.centerIn: parent
  59                         anchors.horizontalCenterOffset: model.index / 3 - 1
  60                         anchors.verticalCenterOffset: model.index % 3 - 1
  61                         text: item.initial
  62                     }
  63                     model: main.icon === 'blank' ? 9 : 0
  64                 }
  65                 layer.enabled: true
  66                 layer.effect: LinearGradient {
  67                     gradient: Gradient {
  68                         GradientStop { position: -0.5; color: "#6BFBFF" }
  69                         GradientStop { position: +1.5; color: "#00ADDC" }
  70                     }
  71                 }
  72             }
  73         }
  74         Label {
  75             id: name
  76             anchors.top: item.bottom
  77             anchors.left: parent.left
  78             anchors.right: parent.right
  79             anchors.margins: 20
  80             font.pixelSize: 25
  81             font.letterSpacing: 5
  82             wrapMode: Text.WordWrap
  83             horizontalAlignment: Text.AlignHCenter
  84             color: "white"
  85             text: qsTr(model.name.toUpperCase())
  86         }
  87
  88         Behavior on x { enabled: item.state !== 'active'; NumberAnimation { duration: 400; easing.type: Easing.OutCubic } }
  89         Behavior on y { enabled: item.state !== 'active'; NumberAnimation { duration: 400; easing.type: Easing.OutCubic } }
  90         SequentialAnimation on rotation {
  91             NumberAnimation { to:  5; duration: 100 }
  92             NumberAnimation { to: -5; duration: 200 }
  93             NumberAnimation { to:  0; duration: 100 }
  94             running: loc.currentId !== '' && item.state !== 'active'
  95             loops: Animation.Infinite; alwaysRunToEnd: true
  96         }
  97         states: [
  98             State {
  99                 name: 'active'
 100                 when: loc.currentId == model.id
 101                 PropertyChanges {
 102                     target: container
 103                     x: loc.mouseX - width/2
 104                     y: loc.mouseY - height/2
 105                     scale: 1.15
 106                     z: 10
 107                 }
 108             },
 109             State {
 110                 when: loc.currentId !== ''
 111                 PropertyChanges {
 112                     target: container
 113                     scale: 0.85
 114                     opacity: 0.75
 115                 }
 116             }
 117         ]
 118         transitions: Transition { NumberAnimation { properties: 'scale, opacity, x, y'; duration: 150; easing.type: Easing.OutCubic} }
 119     }
 120 }