Version 0.2
[marketstoday] / src / qml / Library / TitleBar.qml
1 /*
2 @version: 0.1
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     property string title: "Markets Today"
57     property string buttonType: "Config"
58     property bool displayMenu: false
59     signal menuDisplayed
60     signal settingsClicked
61     signal closeClicked
62     signal backClicked
63
64     signal tickersClicked
65     signal optionsClicked
66
67     BorderImage { source: "images/titlebar.sci"; width: parent.width; height: parent.height + 14; y: -7 }
68
69     Item {
70         id: container
71         width: parent.width; height: parent.height
72
73         Component{
74             id: contextMenuComponent
75             MenuBar{
76                 onTickersClicked: titleBar.tickersClicked();
77                 onOptionsClicked: titleBar.optionsClicked();
78             }
79         }
80
81         Loader {
82             id: contextMenuLoader
83             width: 350
84             anchors.top: parent.top
85             anchors.horizontalCenter: parent.horizontalCenter
86             height: 40
87             z: 100
88             visible: displayMenu
89
90             onLoaded: {
91                 contextMenuLoader.state = "visible"
92             }
93
94             states: State {
95                 name: "visible"
96                 AnchorChanges { target: contextMenuLoader; anchors { bottom: undefined; top: container.top } }
97                 PropertyChanges { target: contextMenuLoader; anchors.topMargin: 5 }
98             }
99
100             transitions: Transition {
101                 AnchorAnimation { easing.type: Easing.OutQuart; duration: 500 }
102             }
103         }
104
105         Text {
106             id: categoryText            
107             anchors {
108                 leftMargin: 5; rightMargin: 10
109                 centerIn: parent
110             }
111             elide: Text.ElideMiddle
112             text: title
113             font.bold: true; color: "White"; style: Text.Raised; styleColor: "Black"
114             font.pixelSize: 18
115
116             MouseArea{
117                 id: contextMenuMouseArea
118                 anchors.fill: parent
119                 onClicked: {
120                     if (!displayMenu) {
121                         displayMenu = true;
122                         contextMenuLoader.sourceComponent = contextMenuComponent;
123                     }
124                     else{
125                         displayMenu = false;
126                     }
127                 }
128             }
129         }
130
131         Component {
132             id: configButton
133
134             Rectangle {
135                 id: configButtonArea
136                 anchors.fill: parent
137                 color: "#00000000"
138
139                 Image {
140                     source: "images/config.png"
141                     width: 40; height: 40
142                     anchors.centerIn: parent
143                 }
144
145                 MouseArea{
146                   id: configButtonMouseArea
147                   anchors.fill: parent
148                   onClicked: {
149                       titleBar.settingsClicked();
150                   }
151                 }
152
153                 states: State {
154                          name: "pressed"; when: configButtonMouseArea.pressed
155                          PropertyChanges { target: configButtonArea; color: "#9a9a9a"}
156                 }
157             }
158         }
159
160         Component {
161             id: closeButton
162
163             Rectangle {
164                 id: closeButtonArea
165                 anchors.fill: parent
166                 color: "#00000000"
167
168                 Image {
169                     source: "images/close.png"
170                     width: 32; height: 32
171                     anchors.centerIn: parent
172                 }
173
174                 MouseArea{
175                   id: closeButtonMouseArea
176                   anchors.fill: parent
177                   onClicked: titleBar.closeClicked();
178                 }
179
180                 states: State {
181                          name: "pressed"; when: closeButtonMouseArea.pressed
182                          PropertyChanges { target: closeButtonArea; color: "#9a9a9a"}
183                 }
184             }
185         }
186
187         Component {
188             id: backButton
189
190             Rectangle {
191                 id: backButtonArea
192                 anchors.fill: parent
193                 color: "#00000000"
194
195                 Image {
196                     source: "images/back.png"
197                     width: 32; height: 32
198                     anchors.centerIn: parent
199                 }
200                 MouseArea{
201                   id: backButtonMouseArea
202                   anchors.fill: parent
203                   onClicked: titleBar.backClicked();
204                 }
205
206                 states: State {
207                          name: "pressed"; when: backButtonMouseArea.pressed
208                          PropertyChanges { target: backButtonArea; color: "#9a9a9a"}
209                 }
210             }
211         }
212
213         Component {
214             id: blankComponent
215
216             Item{
217
218             }
219         }
220
221         Loader {
222             width: 80
223             height: parent.height
224             anchors.right: parent.right
225             sourceComponent: buttonType == "Config" ? configButton : (buttonType == "Close"? closeButton: (buttonType == "Back"? backButton:blankComponent))
226         }
227     }
228 }