homescreen/qml/IconItem.qml

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