git.maemo.org Git - mardrone/blob - mardrone/imports/com/nokia/android.1.1/ToolButton.qml

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
   4 ** All rights reserved.
   5 ** Contact: Nokia Corporation (qt-info@nokia.com)
   6 **
   7 ** This file is part of the Qt Components project.
   8 **
   9 ** $QT_BEGIN_LICENSE:BSD$
  10 ** You may use this file under the terms of the BSD license as follows:
  11 **
  12 ** "Redistribution and use in source and binary forms, with or without
  13 ** modification, are permitted provided that the following conditions are
  14 ** met:
  15 **   * Redistributions of source code must retain the above copyright
  16 **     notice, this list of conditions and the following disclaimer.
  17 **   * Redistributions in binary form must reproduce the above copyright
  18 **     notice, this list of conditions and the following disclaimer in
  19 **     the documentation and/or other materials provided with the
  20 **     distribution.
  21 **   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
  22 **     the names of its contributors may be used to endorse or promote
  23 **     products derived from this software without specific prior written
  24 **     permission.
  25 **
  26 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  27 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  28 ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  29 ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  30 ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  31 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  32 ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  33 ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  34 ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  35 ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  36 ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
  37 ** $QT_END_LICENSE$
  38 **
  39 ****************************************************************************/
  40
  41 import QtQuick 1.1
  42 import Qt.labs.components 1.1
  43 import "." 1.1
  44
  45 Item {
  46     id: root
  47
  48     // Common API
  49     property alias checkable: checkableItem.enabled
  50     property alias checked: checkableItem.checked
  51     property bool enabled: true // overridden from base class
  52     property alias text: label.text
  53     property url iconSource
  54     property bool flat: (!text && iconSource != "" && parent && !internal.isButtonRow(parent))
  55     property bool pressed: mouseArea.containsMouse && (stateGroup.state == "Pressed" || stateGroup.state == "PressAndHold")
  56
  57     // Platform API
  58     property alias platformExclusiveGroup: checkableItem.exclusiveGroup
  59     property bool platformInverted: false
  60
  61     // Common API
  62     signal clicked
  63
  64     // Platform API
  65     signal platformReleased
  66     signal platformPressAndHold
  67
  68     onFlatChanged: {
  69         background.visible = !flat || (checkableItem.enabled && checkableItem.checked && !internal.isButtonRow(parent))
  70     }
  71
  72     implicitWidth: {
  73         if (!text)
  74             return internal.iconButtonWidth()
  75         else if (iconSource == "")
  76             return Math.max(internal.iconButtonWidth(), internal.textButtonWidth())
  77         else
  78             return internal.iconButtonWidth() + internal.textButtonWidth()
  79     }
  80     implicitHeight: {
  81         if ((iconSource != "") && !text)
  82             // if there is just an icon, then it's full button height
  83             return internal.iconButtonWidth()
  84         else
  85             // Otherwise frame height is always tool bar's height in landscape, regardless of the current orientation
  86             return privateStyle.toolBarHeightLandscape
  87     }
  88
  89     BorderImage {
  90         id: background
  91
  92         source: privateStyle.imagePath(internal.imageName() + internal.modeName(), root.platformInverted)
  93         border {
  94             left: internal.isFrameGraphic ? platformStyle.borderSizeMedium : 0;
  95             top: internal.isFrameGraphic ? platformStyle.borderSizeMedium : 0;
  96             right: internal.isFrameGraphic ? platformStyle.borderSizeMedium : 0;
  97             bottom: internal.isFrameGraphic ? platformStyle.borderSizeMedium : 0;
  98         }
  99         smooth: true
 100         anchors.fill: parent
 101         visible: !flat
 102
 103         BorderImage {
 104             id: highlight
 105             border {
 106                 left: internal.isFrameGraphic ? platformStyle.borderSizeMedium : 0;
 107                 top: internal.isFrameGraphic ? platformStyle.borderSizeMedium : 0;
 108                 right: internal.isFrameGraphic ? platformStyle.borderSizeMedium : 0;
 109                 bottom: internal.isFrameGraphic ? platformStyle.borderSizeMedium : 0;
 110             }
 111             smooth: true
 112             anchors.fill: background
 113             opacity: 0
 114         }
 115     }
 116
 117     Image {
 118         id: contentIcon
 119         source: privateStyle.toolBarIconPath(iconSource, root.platformInverted)
 120         visible: iconSource != ""
 121         sourceSize.width: platformStyle.graphicSizeSmall
 122         sourceSize.height: platformStyle.graphicSizeSmall
 123         anchors {
 124             centerIn: !text ? parent : undefined
 125             verticalCenter: !text ? undefined : parent.verticalCenter
 126             left: !text ? undefined : parent.left
 127             leftMargin: !text ? 0 : 2 * platformStyle.paddingMedium
 128         }
 129         smooth: true
 130     }
 131
 132     Text {
 133         id: label
 134         clip: true
 135         horizontalAlignment: Text.AlignHCenter
 136         verticalAlignment: Text.AlignVCenter
 137         elide: Text.ElideRight
 138         font { family: platformStyle.fontFamilyRegular; pixelSize: platformStyle.fontSizeLarge }
 139         color: {
 140             if (!root.enabled)
 141                 return root.platformInverted ? platformStyle.colorDisabledLightInverted
 142                                              : platformStyle.colorDisabledLight
 143             else if (stateGroup.state == "Pressed" || stateGroup.state == "PressAndHold")
 144                 return root.platformInverted ? platformStyle.colorPressedInverted
 145                                              : platformStyle.colorPressed
 146             else
 147                 return root.platformInverted ? platformStyle.colorNormalLightInverted
 148                                              : platformStyle.colorNormalLight
 149         }
 150         visible: text
 151         anchors {
 152             top: parent.top; bottom: parent.bottom
 153             left: iconSource != "" ? contentIcon.right : parent.left; right: parent.right
 154             leftMargin: iconSource != "" ? platformStyle.paddingSmall : platformStyle.paddingMedium
 155             rightMargin: platformStyle.paddingMedium
 156         }
 157         smooth: true
 158     }
 159
 160     MouseArea {
 161         id: mouseArea
 162         anchors.fill: parent
 163
 164         onPressed: if (root.enabled) stateGroup.state = "Pressed"
 165         onReleased: if (root.enabled) stateGroup.state = ""
 166         onCanceled: {
 167             if (root.enabled) {
 168                 // Mark as canceled
 169                 stateGroup.state = "Canceled"
 170                 // Reset state. Can't expect a release since mouse was ungrabbed
 171                 stateGroup.state = ""
 172             }
 173         }
 174         onPressAndHold: if (stateGroup.state != "Canceled" && root.enabled) stateGroup.state = "PressAndHold"
 175         onExited: if (root.enabled) stateGroup.state = "Canceled"
 176     }
 177
 178     QtObject {
 179         id: internal
 180
 181         property bool isFrameGraphic : imageName().search("_fr") > 0
 182
 183         function belongsToExclusiveGroup() {
 184             return checkableItem.exclusiveGroup
 185                    || (root.parent
 186                    && root.parent.hasOwnProperty("checkedButton")
 187                    && root.parent.exclusive)
 188         }
 189
 190         function modeName() {
 191             if (isButtonRow(parent))
 192                 return parent.privateModeName(root, 1)
 193             else if (!enabled)
 194                 return "disabled"
 195             else if (flat && checkableItem.checked && !internal.isButtonRow(parent))
 196                 return "latched"
 197             else
 198                 return "normal"
 199         }
 200
 201         function iconButtonWidth() {
 202             return (screen.width < screen.height) ? privateStyle.toolBarHeightPortrait : privateStyle.toolBarHeightLandscape
 203         }
 204
 205         function textButtonWidth() {
 206             return platformStyle.paddingMedium * ((screen.width < screen.height) ? 15 : 25)
 207         }
 208
 209         function press() {
 210             if (!belongsToExclusiveGroup()) {
 211                 if (checkableItem.enabled && checkableItem.checked)
 212                     privateStyle.play(Android.SensitiveButton)
 213                 else
 214                     privateStyle.play(Android.BasicButton)
 215             } else if (checkableItem.enabled && !checkableItem.checked) {
 216                 privateStyle.play(Android.BasicButton)
 217             }
 218
 219             if (flat)
 220                 background.visible = true
 221             highlight.source = privateStyle.imagePath(internal.imageName() + "pressed", root.platformInverted)
 222             label.scale = 0.95
 223             contentIcon.scale = 0.95
 224             highlight.opacity = 1
 225         }
 226
 227         function release() {
 228             label.scale = 1
 229             contentIcon.scale = 1
 230             highlight.opacity = 0
 231
 232             if (((checkableItem.enabled && checkableItem.checked && !belongsToExclusiveGroup())
 233                 || !checkableItem.enabled) && stateGroup.state != "Canceled")
 234                 privateStyle.play(Android.BasicButton)
 235
 236             if (flat && isButtonRow(parent))
 237                 visibleEffect.restart() //Background invisible
 238             else if (flat && !checkableItem.enabled)
 239                 visibleEffect.restart() //Background invisible
 240             else
 241                 clickedEffect.restart() //Background stays visible
 242
 243             root.platformReleased()
 244         }
 245
 246         function click() {
 247             checkableItem.toggle()
 248             root.clicked()
 249         }
 250
 251         function hold() {
 252             root.platformPressAndHold()
 253         }
 254
 255         function isButtonRow(item) {
 256             return (item &&
 257                     item.hasOwnProperty("checkedButton") &&
 258                     item.hasOwnProperty("privateDirection") &&
 259                     item.privateDirection == Qt.Horizontal)
 260         }
 261
 262         // The function imageName() handles fetching correct graphics for the ToolButton.
 263         // If the parent of a ToolButton is ButtonRow, segmented-style graphics are used to create a
 264         // seamless row of buttons. Otherwise normal ToolButton graphics are utilized.
 265         function imageName() {
 266             var mirror = root.LayoutMirroring.enabled // To create binding
 267             if (isButtonRow(parent))
 268                 return parent.privateGraphicsName(root, 1)
 269             else
 270                 return (!flat || text || iconSource == "") ? "qtg_fr_toolbutton_text_" : "qtg_graf_toolbutton_"
 271         }
 272     }
 273
 274     StateGroup {
 275         id: stateGroup
 276
 277         states: [
 278             State { name: "Pressed" },
 279             State { name: "PressAndHold" },
 280             State { name: "Canceled" }
 281         ]
 282
 283         transitions: [
 284             Transition {
 285                 to: "Pressed"
 286                 ScriptAction { script: internal.press() }
 287             },
 288             Transition {
 289                 from: "Pressed"
 290                 to: "PressAndHold"
 291                 ScriptAction { script: internal.hold() }
 292             },
 293             Transition {
 294                 from: "Pressed"
 295                 to: ""
 296                 ScriptAction { script: internal.release() }
 297                 ScriptAction { script: internal.click() }
 298             },
 299             Transition {
 300                 from: "PressAndHold"
 301                 to: ""
 302                 ScriptAction { script: internal.release() }
 303                 ScriptAction { script: internal.click() }
 304             },
 305             Transition {
 306                 from: "Pressed"
 307                 to: "Canceled"
 308                 ScriptAction { script: internal.release() }
 309             },
 310             Transition {
 311                 from: "PressAndHold"
 312                 to: "Canceled"
 313                 ScriptAction { script: internal.release() }
 314             }
 315         ]
 316     }
 317
 318     ParallelAnimation {
 319         id: clickedEffect
 320         PropertyAnimation {
 321             target: label
 322             property: "scale"
 323             from: 0.95
 324             to: 1.0
 325             easing.type: Easing.Linear
 326             duration: 100
 327         }
 328         PropertyAnimation {
 329             target: contentIcon
 330             property: "scale"
 331             from: 0.95
 332             to: 1.0
 333             easing.type: Easing.Linear
 334             duration: 100
 335         }
 336         PropertyAnimation {
 337             target: highlight
 338             property: "opacity"
 339             from: 1
 340             to: 0
 341             easing.type: Easing.Linear
 342             duration: 150
 343         }
 344     }
 345
 346     SequentialAnimation {
 347         id: visibleEffect
 348         ParallelAnimation {
 349             PropertyAnimation {
 350                 target: label
 351                 property: "scale"
 352                 from: 0.95
 353                 to: 1.0
 354                 easing.type: Easing.Linear
 355                 duration: 100
 356             }
 357             PropertyAnimation {
 358                 target: contentIcon
 359                 property: "scale"
 360                 from: 0.95
 361                 to: 1.0
 362                 easing.type: Easing.Linear
 363                 duration: 100
 364             }
 365             PropertyAnimation {
 366                 target: highlight
 367                 property: "opacity"
 368                 from: 1
 369                 to: 0
 370                 easing.type: Easing.Linear
 371                 duration: 150
 372             }
 373         }
 374         PropertyAction {
 375             target: background
 376             property: "visible"
 377             value: false
 378         }
 379     }
 380
 381     Checkable {
 382         id: checkableItem
 383         value: root.text
 384     }
 385 }