tools/easingcurveeditor/Button.qml

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
   4 ** Contact: http://www.qt-project.org/
   5 **
   6 ** This file is part of the QtQml module of the Qt Toolkit.
   7 **
   8 ** $QT_BEGIN_LICENSE:LGPL$
   9 ** GNU Lesser General Public License Usage
  10 ** This file may be used under the terms of the GNU Lesser General Public
  11 ** License version 2.1 as published by the Free Software Foundation and
  12 ** appearing in the file LICENSE.LGPL included in the packaging of this
  13 ** file. Please review the following information to ensure the GNU Lesser
  14 ** General Public License version 2.1 requirements will be met:
  15 ** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
  16 **
  17 ** In addition, as a special exception, Nokia gives you certain additional
  18 ** rights. These rights are described in the Nokia Qt LGPL Exception
  19 ** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
  20 **
  21 ** GNU General Public License Usage
  22 ** Alternatively, this file may be used under the terms of the GNU General
  23 ** Public License version 3.0 as published by the Free Software Foundation
  24 ** and appearing in the file LICENSE.GPL included in the packaging of this
  25 ** file. Please review the following information to ensure the GNU General
  26 ** Public License version 3.0 requirements will be met:
  27 ** http://www.gnu.org/copyleft/gpl.html.
  28 **
  29 ** Other Usage
  30 ** Alternatively, this file may be used in accordance with the terms and
  31 ** conditions contained in a signed written agreement between you and Nokia.
  32 **
  33 **
  34 **
  35 **
  36 **
  37 **
  38 ** $QT_END_LICENSE$
  39 **
  40 ****************************************************************************/
  41
  42 import QtQuick 2.0
  43
  44 Item {
  45     id: button
  46
  47     signal clicked
  48
  49     Rectangle {
  50         id: normalBackground
  51         radius: 4
  52         anchors.fill: parent
  53         smooth: true
  54         gradient: Gradient {
  55             GradientStop {
  56                 position: 0
  57                 color: "#afafaf"
  58             }
  59
  60             GradientStop {
  61                 position: 0.460
  62                 color: "#808080"
  63             }
  64
  65             GradientStop {
  66                 position: 1
  67                 color: "#adadad"
  68             }
  69         }
  70         border.color: "#000000"
  71     }
  72
  73
  74     Rectangle {
  75         id: hoveredBackground
  76         x: 2
  77         y: -8
  78         radius: 4
  79         opacity: 0
  80         gradient: Gradient {
  81             GradientStop {
  82                 position: 0
  83                 color: "#cacaca"
  84             }
  85
  86             GradientStop {
  87                 position: 0.460
  88                 color: "#a2a2a2"
  89             }
  90
  91             GradientStop {
  92                 position: 1
  93                 color: "#c8c8c8"
  94             }
  95         }
  96         smooth: true
  97         anchors.fill: parent
  98         border.color: "#000000"
  99     }
 100
 101
 102     Rectangle {
 103         id: pressedBackground
 104         x: -8
 105         y: 2
 106         radius: 4
 107         opacity: 0
 108         gradient: Gradient {
 109             GradientStop {
 110                 position: 0
 111                 color: "#8b8b8b"
 112             }
 113
 114             GradientStop {
 115                 position: 0.470
 116                 color: "#626161"
 117             }
 118
 119             GradientStop {
 120                 position: 1
 121                 color: "#8f8e8e"
 122             }
 123         }
 124         smooth: true
 125         anchors.fill: parent
 126         border.color: "#000000"
 127     }
 128     states: [
 129         State {
 130             name: "hovered"
 131
 132             PropertyChanges {
 133                 target: normalBackground
 134                 opacity: 0
 135             }
 136
 137             PropertyChanges {
 138                 target: hoveredBackground
 139                 opacity: 1
 140             }
 141         },
 142         State {
 143             name: "pressed"
 144
 145             PropertyChanges {
 146                 target: normalBackground
 147                 opacity: 0
 148             }
 149
 150             PropertyChanges {
 151                 target: pressedBackground
 152                 opacity: 1
 153             }
 154         }
 155     ]
 156
 157     Text {
 158         color: "#e8e8e8"
 159         text: qsTr("Play")
 160         anchors.fill: parent
 161         horizontalAlignment: Text.AlignHCenter
 162         verticalAlignment: Text.AlignVCenter
 163         font.bold: true
 164         font.pixelSize: 20
 165     }
 166
 167     MouseArea {
 168         hoverEnabled: true
 169         anchors.fill: parent
 170         onEntered: button.state = "hovered"
 171         onExited: button.state = ""
 172         onClicked: {
 173             button.state = "pressed"
 174             button.clicked();
 175         }
 176     }
 177 }