git.maemo.org Git - mardrone/blob - mardrone/imports/com/nokia/android.1.1/TabButton.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 "." 1.1
  43 import "AppManager.js" as Utils
  44
  45 Item {
  46     id: root
  47
  48     // Common Public API
  49     property Item tab
  50     property bool checked: internal.tabGroup != null && internal.tabGroup.currentTab == tab
  51     property bool pressed: stateGroup.state == "Pressed" && mouseArea.containsMouse
  52     property alias text: label.text
  53     property alias iconSource: imageLoader.source
  54
  55     signal clicked
  56
  57     // Symbian specific API
  58     property bool platformInverted: false
  59
  60     implicitWidth: Math.max(2 * imageLoader.width, 2 * platformStyle.paddingMedium + privateStyle.textWidth(label.text, label.font))
  61     implicitHeight: internal.portrait ? privateStyle.tabBarHeightPortrait : privateStyle.tabBarHeightLandscape
  62
  63     QtObject {
  64         id: internal
  65
  66         property Item tabGroup: Utils.findParent(tab, "currentTab")
  67         property bool portrait: screen.currentOrientation == Screen.Portrait || screen.currentOrientation == Screen.PortraitInverted
  68
  69         function press() {
  70             privateStyle.play(Android.BasicButton)
  71         }
  72         function click() {
  73             root.clicked()
  74             privateStyle.play(Android.BasicButton)
  75             if (internal.tabGroup)
  76                 internal.tabGroup.currentTab = tab
  77         }
  78
  79         function isButtonRow(item) {
  80             return (item &&
  81                     item.hasOwnProperty("checkedButton") &&
  82                     item.hasOwnProperty("privateDirection") &&
  83                     item.privateDirection == Qt.Horizontal)
  84         }
  85
  86         function imageName() {
  87             // If the parent of a TabButton is ButtonRow, segmented-style graphics
  88             // are used to create a seamless row of buttons. Otherwise normal
  89             // TabButton graphics are utilized.
  90             var mirror = root.LayoutMirroring.enabled // To create binding
  91             if (isButtonRow(parent))
  92                 return parent.privateGraphicsName(root, 1)
  93             else
  94                 return "qtg_fr_tab_"
  95         }
  96
  97         function modeName() {
  98             if (isButtonRow(parent)) {
  99                 return parent.privateModeName(root, 1)
 100             } else {
 101                 return root.checked ? "active" : "passive_normal"
 102             }
 103         }
 104
 105         function modeNamePressed() {
 106             if (isButtonRow(parent)) {
 107                 return "pressed"
 108             } else {
 109                 return "passive_pressed"
 110             }
 111         }
 112     }
 113
 114     StateGroup {
 115         id: stateGroup
 116
 117         states: [
 118             State {
 119                 name: "Pressed"
 120                 PropertyChanges { target: pressedGraphics; opacity: 1 }
 121             },
 122             State { name: "Canceled" }
 123         ]
 124         transitions: [
 125             Transition {
 126                 to: "Pressed"
 127                 ScriptAction { script: internal.press() }
 128             },
 129             Transition {
 130                 from: "Pressed"
 131                 to: ""
 132                 NumberAnimation {
 133                     target: pressedGraphics
 134                     property: "opacity"
 135                     to: 0
 136                     duration: 150
 137                     easing.type: Easing.Linear
 138                 }
 139                 ScriptAction { script: internal.click() }
 140             }
 141         ]
 142     }
 143
 144     BorderImage {
 145         id: background
 146
 147         source: privateStyle.imagePath(internal.imageName() + internal.modeName(), root.platformInverted)
 148         anchors.fill: parent
 149         border {
 150             left: platformStyle.borderSizeMedium
 151             top: platformStyle.borderSizeMedium
 152             right: platformStyle.borderSizeMedium
 153             bottom: platformStyle.borderSizeMedium
 154         }
 155     }
 156
 157     BorderImage {
 158         id: pressedGraphics
 159
 160         source: privateStyle.imagePath(internal.imageName() + internal.modeNamePressed(), root.platformInverted)
 161         anchors.fill: parent
 162         opacity: 0
 163
 164         border {
 165             left: platformStyle.borderSizeMedium
 166             top: platformStyle.borderSizeMedium
 167             right: platformStyle.borderSizeMedium
 168             bottom: platformStyle.borderSizeMedium
 169         }
 170     }
 171
 172     Text {
 173         id: label
 174
 175         objectName: "label"
 176         // hide in landscape if icon is present
 177         visible: !(iconSource.toString() && !internal.portrait)
 178         anchors {
 179             left: parent.left
 180             right: parent.right
 181             bottom: parent.bottom
 182             leftMargin: platformStyle.paddingMedium
 183             rightMargin: platformStyle.paddingMedium
 184             bottomMargin: iconSource.toString()
 185                 ? platformStyle.paddingSmall
 186                 : Math.ceil((parent.height - label.height) / 2.0)
 187         }
 188         elide: Text.ElideRight
 189         horizontalAlignment: Text.AlignHCenter
 190         font {
 191             family: platformStyle.fontFamilyRegular;
 192             pixelSize: platformStyle.fontSizeSmall
 193             weight: Font.Light
 194         }
 195         color: {
 196             if (root.pressed)
 197                 root.platformInverted ? platformStyle.colorPressedInverted
 198                                       : platformStyle.colorPressed
 199             else if (root.checked)
 200                 root.platformInverted ? platformStyle.colorNormalLightInverted
 201                                       : platformStyle.colorNormalLight
 202             else
 203                 root.platformInverted ? platformStyle.colorNormalMidInverted
 204                                       : platformStyle.colorNormalMid
 205         }
 206     }
 207
 208     Loader {
 209         // imageLoader acts as wrapper for Image and Icon items. The Image item is
 210         // shown when the source points to a image (jpg, png). Icon item is used for
 211         // locigal theme icons which are colorised.
 212         id: imageLoader
 213
 214         property url source
 215         property string iconId: privateStyle.isTabBarIcon(source) ? source.toString() : ""
 216
 217         width : platformStyle.graphicSizeSmall
 218         height : platformStyle.graphicSizeSmall
 219         sourceComponent: {
 220             if (iconId)
 221                 return iconComponent
 222             if (source.toString())
 223                 return imageComponent
 224             return undefined
 225         }
 226         anchors {
 227             top: parent.top
 228             topMargin : !parent.text || !internal.portrait
 229                 ? Math.floor((parent.height - imageLoader.height) / 2.0)
 230                 : platformStyle.paddingSmall
 231             horizontalCenter: parent.horizontalCenter
 232         }
 233
 234         Component {
 235             id: imageComponent
 236
 237             Image {
 238                 id: image
 239
 240                 objectName: "image"
 241                 source: imageLoader.iconId ? "" : imageLoader.source
 242                 sourceSize.width: width
 243                 sourceSize.height: height
 244                 fillMode: Image.PreserveAspectFit
 245                 smooth: true
 246                 anchors.fill: parent
 247             }
 248         }
 249
 250         Component {
 251             id: iconComponent
 252
 253             Icon {
 254                 id: icon
 255
 256                 objectName: "icon"
 257                 anchors.fill: parent
 258                 iconColor: label.color
 259                 iconName: imageLoader.iconId
 260             }
 261         }
 262     }
 263
 264     MouseArea {
 265         id: mouseArea
 266
 267         onPressed: stateGroup.state = "Pressed"
 268         onReleased: stateGroup.state = ""
 269         onCanceled: {
 270             // Mark as canceled
 271             stateGroup.state = "Canceled"
 272             // Reset state
 273             stateGroup.state = ""
 274         }
 275         onExited: {
 276             if (pressed)
 277                 stateGroup.state = "Canceled"
 278         }
 279
 280         anchors.fill: parent
 281     }
 282 }