git.maemo.org Git - mardrone/blob - mardrone/imports/Qt/labs/components/native/Dialog.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.0
  43
  44 Popup {
  45     id: root
  46     objectName: "baseDialog"
  47
  48     // API
  49     property alias title: titleBar.children
  50     property alias content: contentField.children
  51     property alias buttons: buttonRow.children
  52
  53     signal accepted
  54     signal rejected
  55
  56     property Style platformStyle: DialogStyle {}
  57
  58     //Deprecated, TODO Remove this on w13
  59     property alias style: root.platformStyle
  60
  61     // private api
  62     property string __animationChief: "baseDialog"
  63     __dim: platformStyle.dim
  64     __fadeInDuration:  platformStyle.fadeInDuration
  65     __fadeOutDuration: platformStyle.fadeOutDuration
  66     __fadeInDelay:     platformStyle.fadeInDelay
  67     __fadeOutDelay:    platformStyle.fadeOutDelay
  68
  69     // true: center of the content field is center of the background rect
  70     // false: the whole dialog is centered
  71     property bool __centerContentField: false
  72
  73     width:  parent.width - platformStyle.leftMargin - platformStyle.rightMargin  // ToDo: better width heuristic
  74     height: titleBar.height + contentField.height + buttonRow.height
  75
  76     anchors.centerIn: parent
  77
  78     function reject() {
  79         close();
  80         rejected();
  81     }
  82
  83     function accept() {
  84         close();
  85         accepted();
  86     }
  87
  88     // this item contains the whole dialog (title bar + content rectangle, button row)
  89     Item {
  90         id: backgroundRect
  91
  92         height:  root.height
  93         width: root.width
  94
  95         anchors.centerIn:  root
  96
  97         // center the whole dialog, not just the content field
  98         transform: Translate {
  99             id: contentTranslation
 100             y: root.__centerContentField ? 0 : (titleBar.height - buttonRow.height) / 2
 101         }
 102
 103
 104         // title bar
 105         Item {
 106             id: titleBar
 107
 108             width: root.width
 109             height: childrenRect.height
 110
 111             anchors.left: parent.left
 112             anchors.right: parent.right
 113             anchors.bottom: contentField.top
 114
 115             // animate over bottomMargin (i.e. the distance between the content field)
 116             anchors.bottomMargin: 0
 117
 118         }
 119
 120         //content area
 121         Item {
 122             id: contentField
 123
 124             anchors.left: parent.left
 125             //anchors.right: parent.right
 126
 127            anchors.horizontalCenter: backgroundRect.horizontalCenter
 128            anchors.verticalCenter: backgroundRect.verticalCenter
 129
 130            height: childrenRect.height
 131
 132            transform: Scale {
 133                 id: contentScale
 134                 xScale: 1.0; yScale: 1.0
 135                 origin.x:  mapFromItem(root, root.width / 2, root.height / 2).x
 136                 origin.y: mapFromItem(root, root.width / 2, root.height / 2).y
 137
 138             }
 139
 140         }
 141
 142         //button row
 143         Item {
 144             id: buttonRow
 145
 146             anchors.left: parent.left
 147             anchors.right: parent.right
 148
 149             anchors.top: contentField.bottom
 150
 151             // animate over topMargin (i.e. the distance between the content field)
 152             anchors.topMargin: 0
 153
 154             height: childrenRect.height
 155         }
 156
 157     }
 158
 159     onPrivateClicked: reject()
 160
 161     StateGroup {
 162         id: statesWrapper
 163
 164         state: "hidden"
 165
 166         // needed for button and title bar animation
 167         // without resetting the button row's/title bar's coordinate system would be translated
 168         property int __buttonSaver: buttonRow.y
 169         property int __titleSaver: titleBar.y
 170
 171
 172         states: [
 173             State {
 174                 name: "visible"
 175                 when: root.__animationChief == "baseDialog" && (status == DialogStatus.Opening || status == DialogStatus.Open)
 176                 PropertyChanges {
 177                     target: backgroundRect
 178                     opacity: 1.0
 179                 }
 180             },
 181             State {
 182                 name: "hidden"
 183                 when: root.__animationChief == "baseDialog" && (status == DialogStatus.Closing || status == DialogStatus.Closed)
 184                 PropertyChanges {
 185                     target: backgroundRect
 186                     opacity: 0.0
 187                 }
 188             }
 189         ]
 190
 191         transitions: [
 192             Transition {
 193                 from: "visible"; to: "hidden"
 194                 SequentialAnimation {
 195                     ScriptAction {script: {
 196                             __fader().state = "hidden";
 197
 198                             backgroundRect.opacity = 1.0;
 199                             root.opacity = 1.0
 200
 201                             statesWrapper.__buttonSaver = buttonRow.y
 202                             statesWrapper.__titleSaver = titleBar.y
 203                             root.status = DialogStatus.Closing;
 204                         }
 205                     }
 206
 207                     // With a 100ms delay the background fades to alpha 0% (500ms, quint ease out).
 208                     // --> done in the fader
 209
 210                     PropertyAnimation { target: root; properties: "opacity"; from: 0.0; to: 1.0; duration: 0 }
 211                     PropertyAnimation { target: backgroundRect; properties: "opacity"; from: 0.0; to: 1.0; duration: 0 }
 212
 213                     // The closing transition starts with the title and both lines dimming to
 214                     // alpha 0% and moving 100 pixels in Y axis towards the center (125ms,
 215                     // quint ease in). With no delay the list fades to alpha 0% and scales to
 216                     // 80% (anchorpoint in the middle of the list, 100ms, quint ease in).
 217                     ParallelAnimation {
 218                         PropertyAnimation {target: contentField; properties: "opacity"; from: 1.0; to: 0.0; duration: 100}
 219                         PropertyAnimation {target: titleBar; properties: "opacity"; from: 1.0; to: 0.0; duration: 125}
 220                         PropertyAnimation {target: contentScale; properties: "xScale,yScale"; from: 1.0 ; to: 0.8; duration: 100; easing.type: Easing.InQuint }
 221                         PropertyAnimation {target: buttonRow; properties: "opacity"; from: 1.0; to: 0.0; duration: 125}
 222                         PropertyAnimation {target: buttonRow
 223                             properties: "anchors.topMargin"
 224                             from: 0
 225                             to: -100
 226                             duration: 125
 227                             easing.type: Easing.InQuint
 228                         }
 229                         PropertyAnimation {target: titleBar
 230                             properties: "anchors.topMargin"
 231                             from: 0
 232                             to: 100
 233                             duration: 125
 234                             easing.type: Easing.InQuint
 235                         }
 236                     }
 237
 238                     ScriptAction {script: {
 239                             // reset button and title bar
 240                             buttonRow.y = statesWrapper.__buttonSaver
 241                             titleBar.y = statesWrapper.__titleSaver
 242                             // make sure, root isn't visible:
 243                             backgroundRect = 0.0;
 244                             root.opacity = 0.0;
 245                             status = DialogStatus.Closed;
 246
 247                         }
 248                     }
 249                 }
 250             },
 251             Transition {
 252                 from: "hidden"; to: "visible"
 253                 SequentialAnimation {
 254                     ScriptAction {script: {
 255                             __fader().state = "visible";
 256
 257                             statesWrapper.__buttonSaver = buttonRow.y
 258                             statesWrapper.__titleSaver = titleBar.y
 259
 260                             root.status = DialogStatus.Opening;
 261                             // UPPERCASE-UGLY, but necessary to avoid flicker
 262                             root.opacity = 1.0;
 263                             titleBar.opacity = 0.0;
 264                             contentField.opacity = 0.0;
 265                             buttonRow.opacity = 0.0;
 266                         }
 267                     }
 268
 269                     // The opening transition starts by dimming the background to 90% (250ms,
 270                     // quint ease in). --> Done inside the fader
 271
 272                     ParallelAnimation {
 273                         SequentialAnimation {
 274                             // a 250ms delay from the beginning
 275                             PauseAnimation { duration: 250 }
 276                             // the list scales from 80% to 100% and alpha 0%
 277                             // to 100% (anchorpoint in the middle of the list, 250ms, expo ease out)
 278                             ParallelAnimation {
 279                                 PropertyAnimation {target: contentField; properties: "opacity"; from: 0.0; to: 1.0; duration: 250}
 280                                 PropertyAnimation {target: contentScale; properties: "xScale,yScale"; from: 0.8 ; to: 1.0; duration: 250; easing.type: Easing.OutExpo}
 281                             }
 282                         }
 283                         SequentialAnimation {
 284                             // a 200ms delay from the beginning
 285                             PauseAnimation { duration: 200 }
 286                             ParallelAnimation {
 287                                 //the title and both lines come from alpha 0%
 288                                 PropertyAnimation {target: buttonRow; properties: "opacity"; from: 0.0; to: 1.0; duration: 450; }
 289                                 PropertyAnimation {target: titleBar; properties: "opacity"; from: 0.0; to: 1.0; duration: 450; }
 290                                 // and move towards the edges (40 pixels in Y axis
 291                                 // away from their final destination, 450ms, custom ease).
 292                                 PropertyAnimation {target: buttonRow; properties: "anchors.topMargin"
 293                                     from: -40
 294                                     to: 0
 295                                     duration: 450
 296                                     easing.type: Easing.OutBack
 297                                 }
 298                                 PropertyAnimation {target: titleBar; properties: "anchors.bottomMargin"
 299                                     from: 40
 300                                     to: 0
 301                                     duration: 450
 302                                     easing.type: Easing.OutBack
 303                                 }
 304
 305                             }
 306                         }
 307                     }
 308
 309                     ScriptAction {script: {
 310
 311                             // reset button and title bar
 312                             buttonRow.y = statesWrapper.__buttonSaver
 313                             titleBar.y   = statesWrapper.__titleSaver
 314
 315                             root.status = DialogStatus.Open;
 316                         }
 317                     }
 318                 }
 319             }
 320         ]
 321     }
 322
 323 }