*/
import QtQuick 2.2
+import QtQuick.Controls 2.0
+import QtGraphicalEffects 1.0
MouseArea {
id: root
- width: 195
- height: 216.8
+ width: 70
+ height: 70
property string name: 'Home'
property bool active: false
- Image {
+ Item {
id: icon
+ property real desaturation: 0
anchors.fill: parent
- source: './images/Shortcut/HMI_Shortcut_%1-01.png'.arg(root.name)
- }
- Image {
- anchors.fill: parent
- source: './images/Shortcut/HMI_Shortcut_%1_Active-01.png'.arg(root.name)
- opacity: 1.0 - icon.opacity
- }
- states: [
- State {
- when: root.active
- PropertyChanges {
- target: icon
- opacity: 0.0
- }
+ Image {
+ id: inactiveIcon
+ anchors.fill: parent
+ source: './images/Shortcut/%1.png'.arg(root.name.toLowerCase())
}
- ]
+ Image {
+ id: activeIcon
+ anchors.fill: parent
+ source: './images/Shortcut/%1_active.png'.arg(root.name.toLowerCase())
+ opacity: 0.0
+ }
+ layer.enabled: true
+ layer.effect: Desaturate {
+ id: desaturate
+ desaturation: icon.desaturation
+ cached: true
+ }
+ }
transitions: [
Transition {
NumberAnimation {
properties: 'opacity'
+ duration: 500
easing.type: Easing.OutExpo
}
+ NumberAnimation {
+ properties: 'desaturation'
+ duration: 250
+ }
}
]
+
+ onPressed: {
+ activeIcon.opacity = 1.0
+ inactiveIcon.opacity = 0.0
+ }
+
+ onReleased: {
+ activeIcon.opacity = 0.0
+ inactiveIcon.opacity = 1.0
+ }
}