git.maemo.org Git - marketstoday/blob - src/qml/Library/TitleBar.qml

   1 /*
   2 @version: 0.5
   3 @author: Sudheer K. <scifi1947 at gmail.com>
   4 @license: GNU General Public License
   5
   6 Based on Nokia Qt Quick Demos with copyright notice below.
   7
   8 Source: http://doc.qt.nokia.com/4.7-snapshot/demos-declarative-twitter-twittercore-titlebar-qml.html
   9 */
  10
  11 /****************************************************************************
  12 **
  13 ** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
  14 ** All rights reserved.
  15 ** Contact: Nokia Corporation (qt-info@nokia.com)
  16 **
  17 ** This file is part of the QtDeclarative module of the Qt Toolkit.
  18 **
  19 ** $QT_BEGIN_LICENSE:LGPL$
  20 ** No Commercial Usage
  21 ** This file contains pre-release code and may not be distributed.
  22 ** You may use this file in accordance with the terms and conditions
  23 ** contained in the Technology Preview License Agreement accompanying
  24 ** this package.
  25 **
  26 ** GNU Lesser General Public License Usage
  27 ** Alternatively, this file may be used under the terms of the GNU Lesser
  28 ** General Public License version 2.1 as published by the Free Software
  29 ** Foundation and appearing in the file LICENSE.LGPL included in the
  30 ** packaging of this file.  Please review the following information to
  31 ** ensure the GNU Lesser General Public License version 2.1 requirements
  32 ** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
  33 **
  34 ** In addition, as a special exception, Nokia gives you certain additional
  35 ** rights.  These rights are described in the Nokia Qt LGPL Exception
  36 ** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
  37 **
  38 ** If you have questions regarding the use of this file, please contact
  39 ** Nokia at qt-info@nokia.com.
  40 **
  41 **
  42 **
  43 **
  44 **
  45 **
  46 **
  47 **
  48 ** $QT_END_LICENSE$
  49 **
  50 ****************************************************************************/
  51
  52 import Qt 4.7
  53
  54 Item {
  55     id: titleBar
  56
  57     //Default height and width will be overwritten by parent object
  58     width: 800
  59     height: 60
  60
  61     property string title: "Markets Today"
  62     property string buttonType: "Config"
  63     property bool displayMenu: false
  64     property bool displayMenuIcon: true
  65     property int displayMenuTimeout: 8000
  66     signal menuDisplayed
  67     signal settingsClicked
  68     signal closeClicked
  69     signal backClicked
  70
  71     signal tickersClicked
  72     signal optionsClicked
  73
  74     BorderImage { source: "images/titlebar.sci"; width: parent.width; height: parent.height + 14; y: -7 }
  75
  76     Item {
  77         id: container
  78         width: parent.width; height: parent.height
  79
  80         Component{
  81             id: contextMenuComponent
  82
  83             MenuBar{
  84                 id: menuBar
  85
  86                 width: 450
  87                 height: 60
  88
  89                 opacity: 0
  90                 onTickersClicked: titleBar.tickersClicked();
  91                 onOptionsClicked: titleBar.optionsClicked();
  92
  93                 states: [
  94                     State {
  95                         name: "visible"; when: titleBar.displayMenu === true;
  96                         PropertyChanges { target: menuBar; opacity:1}
  97                         AnchorChanges { target: contextMenuLoader; anchors { bottom: titleArea.bottom; top: parent.top } }
  98                         PropertyChanges { target: contextMenuLoader; anchors.topMargin: 0; anchors.bottomMargin: -5}
  99                     },
 100                     State {
 101                         name: "hidden"; when: titleBar.displayMenu === false;
 102                         PropertyChanges { target: menuBar; opacity:0}
 103                         AnchorChanges { target: contextMenuLoader; anchors { bottom: parent.top; top: parent.top } }
 104                         PropertyChanges { target: contextMenuLoader; anchors.topMargin: 0;anchors.bottomMargin: 0}
 105                     }
 106                 ]
 107
 108                 transitions: [
 109                     //Sequential transition is not working otherway round
 110                     Transition {
 111                         from: "*"; to: "visible"
 112                         SequentialAnimation{
 113                             PropertyAnimation{target: menuBar; property: "opacity"; easing.type:Easing.InExpo; duration: 1000 }
 114                             AnchorAnimation { easing.type: Easing.InOutQuad; duration: 500 }
 115                         }
 116                     },
 117                     //Hidden transition is not working as expected
 118                     Transition {
 119                         from: "*"; to: "hidden"
 120                         SequentialAnimation{
 121                             PropertyAnimation{target: menuBar; property: "opacity"; easing.type:Easing.OutExpo; duration: 1000 }
 122                             AnchorAnimation { easing.type: Easing.InExpo; duration: 500 }
 123                         }
 124                     }
 125                 ]
 126             }
 127         }
 128
 129         Timer {
 130             id: contextMenuTimer
 131             interval: displayMenuTimeout
 132             repeat: false
 133             onTriggered: {
 134                 if (displayMenu) {
 135                     displayMenu = false;
 136                 }
 137             }
 138         }
 139
 140         Loader {
 141             id: contextMenuLoader
 142             //width: 450
 143             anchors {top: parent.top; horizontalCenter: parent.horizontalCenter}
 144             z: 10
 145             sourceComponent: contextMenuComponent
 146         }
 147
 148         Rectangle {
 149             id: titleArea
 150             width: parent.width/3
 151             height: parent.height
 152             color: "#00000000"
 153
 154             anchors {
 155                 leftMargin: 5; rightMargin: 10
 156                 centerIn: parent
 157             }
 158
 159             Text {
 160                 id: categoryText
 161                 anchors.centerIn: parent
 162                 elide: Text.ElideMiddle
 163                 text: title
 164                 font.bold: true; color: "White"; style: Text.Raised; styleColor: "Black"
 165                 font.pixelSize: 20
 166             }
 167
 168             Image {
 169                 source: "images/menu_icon.png"
 170                 width: 24; height: 24
 171                 anchors.verticalCenter: parent.verticalCenter
 172                 anchors.left: categoryText.right
 173                 visible: titleBar.displayMenuIcon
 174             }
 175
 176             MouseArea{
 177                 id: contextMenuMouseArea
 178                 anchors.fill: parent
 179                 visible: displayMenuIcon
 180                 onClicked: {
 181                     if (!displayMenu) {
 182                         displayMenu = true;
 183                         //Start timer to hide context menu after 5 sec.
 184                         contextMenuTimer.start();
 185                     }
 186                 }
 187             }
 188         }
 189
 190
 191         Component {
 192             id: configButton
 193
 194             Rectangle {
 195                 id: configButtonArea
 196                 anchors.fill: parent
 197                 color: "#00000000"
 198
 199                 Image {
 200                     source: "images/config.png"
 201                     width: 32; height: 32
 202                     anchors.centerIn: parent
 203                 }
 204
 205                 MouseArea{
 206                   id: configButtonMouseArea
 207                   anchors.fill: parent
 208                   onClicked: {
 209                       titleBar.settingsClicked();
 210                   }
 211                 }
 212
 213                 states: State {
 214                          name: "pressed"; when: configButtonMouseArea.pressed
 215                          PropertyChanges { target: configButtonArea; color: "#9a9a9a"}
 216                 }
 217             }
 218         }
 219
 220         Component {
 221             id: closeButton
 222
 223             Rectangle {
 224                 id: closeButtonArea
 225                 anchors.fill: parent
 226                 color: "#00000000"
 227
 228                 Image {
 229                     source: "images/close.png"
 230                     width: 32; height: 32
 231                     anchors.centerIn: parent
 232                 }
 233
 234                 MouseArea{
 235                   id: closeButtonMouseArea
 236                   anchors.fill: parent
 237                   onClicked: titleBar.closeClicked();
 238                 }
 239
 240                 states: State {
 241                          name: "pressed"; when: closeButtonMouseArea.pressed
 242                          PropertyChanges { target: closeButtonArea; color: "#9a9a9a"}
 243                 }
 244             }
 245         }
 246
 247         Component {
 248             id: backButton
 249
 250             Rectangle {
 251                 id: backButtonArea
 252                 anchors.fill: parent
 253                 color: "#00000000"
 254
 255                 Image {
 256                     source: "images/back.png"
 257                     width: 32; height: 32
 258                     anchors.centerIn: parent
 259                 }
 260                 MouseArea{
 261                   id: backButtonMouseArea
 262                   anchors.fill: parent
 263                   onClicked: titleBar.backClicked();
 264                 }
 265
 266                 states: State {
 267                          name: "pressed"; when: backButtonMouseArea.pressed
 268                          PropertyChanges { target: backButtonArea; color: "#9a9a9a"}
 269                 }
 270             }
 271         }
 272
 273         Component {
 274             id: blankComponent
 275
 276             Item{
 277
 278             }
 279         }
 280
 281         Loader {
 282             width: 80
 283             height: parent.height
 284             anchors.right: parent.right
 285             sourceComponent: buttonType == "Config" ? configButton : (buttonType == "Close"? closeButton: (buttonType == "Back"? backButton:blankComponent))
 286         }
 287     }
 288 }