meson.build: Use 0.0.24 as the agl compositor version
[apps/homescreen.git] / 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 }