vcs.maemo.org Git - mardrone/blob - mardrone/imports/com/meego/extras/InfoBanner.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 com.nokia.meego 1.0
  43 import "constants.js" as UI
  44
  45 /*
  46    Class: InfoBanner
  47    The InfoBanner component is used to display information to the user. The number of lines of text
  48    shouldn't exceed 3.
  49 */
  50
  51 ImplicitSizeItem {
  52     id: root
  53
  54     /*
  55      * Property: iconSource
  56      * [url] The path to the icon image
  57      */
  58     property url iconSource: ""
  59
  60     /*
  61      * Property: text
  62      * [string] Text to be displayed in InfoBanner
  63      */
  64     property alias text: text.text
  65
  66     /*
  67      * Property: timerEnabled
  68      * [bool=true] Enable/disable timer that dismisses InfoBanner
  69      */
  70     property bool timerEnabled: true
  71
  72     /*
  73      * Property: timerShowTime
  74      * [int=3000ms] For setting how long InfoBanner stays visible to user before being dismissed
  75      */
  76     property alias timerShowTime: sysBannerTimer.interval
  77
  78     /*
  79      * Property: topMargin
  80      * [int=8 pix] Allows user to customize top margin if needed
  81      */
  82     property alias topMargin: root.y
  83
  84     /*
  85      * Property: leftMargin
  86      * [int=8 pix] Allows user to customize left margin if needed
  87      */
  88     property alias leftMargin: root.x
  89
  90     /*
  91      * Function: show
  92      * Show InfoBanner
  93      */
  94     function show() {
  95         animationShow.running = true;
  96         if (root.timerEnabled)
  97             sysBannerTimer.restart();
  98     }
  99
 100     /*
 101      * Function: hide
 102      * Hide InfoBanner
 103      */
 104     function hide() {
 105         animationHide.running = true;
 106     }
 107
 108     implicitHeight: internal.getBannerHeight()
 109     implicitWidth: internal.getBannerWidth()
 110     x:8; y:8
 111     scale: 0
 112
 113     BorderImage {
 114         source: "image://theme/meegotouch-notification-system-background"
 115         anchors.fill: root
 116         horizontalTileMode: BorderImage.Stretch
 117         verticalTileMode: BorderImage.Stretch
 118         border { left: 10; top: 10; right: 10; bottom: 10 }
 119         opacity: UI.INFO_BANNER_OPACITY
 120     }
 121
 122     Image {
 123         id: image
 124         anchors { left: parent.left; leftMargin: 16; top: parent.top; topMargin: 16 }
 125         source: root.iconSource
 126         visible: root.iconSource != ""
 127     }
 128
 129     Text {
 130         id: text
 131         width: internal.getTextWidth()
 132         anchors { left: (image.visible ? image.right : parent.left); leftMargin: (image.visible ? 14:16);
 133             top: parent.top; topMargin: internal.getTopMargin(); bottom: parent.bottom }
 134         color: "white"
 135         wrapMode: Text.Wrap
 136         verticalAlignment: Text.AlignHCenter
 137         font.pixelSize: UI.FONT_DEFAULT_SIZE
 138         font.family: UI.FONT_FAMILY
 139         font.letterSpacing: UI.INFO_BANNER_LETTER_SPACING
 140         maximumLineCount: 3
 141         elide: Text.ElideRight
 142     }
 143
 144     QtObject {
 145         id: internal
 146
 147         function getBannerHeight() {
 148             if (image.visible) {
 149                 if (text.lineCount <= 2)
 150                     return 80;
 151                 else
 152                     return 106;
 153             } else {
 154                 if (text.lineCount <= 1)
 155                     return 64;
 156                 else if (text.lineCount <= 2)
 157                     return 80;
 158                 else
 159                     return 106;
 160             }
 161         }
 162
 163         function getBannerWidth() {
 164             return parent.width - root.x*2;
 165         }
 166
 167         function getTopMargin() {
 168             if (text.lineCount <= 1 && !image.visible) {
 169                 // If there's only one line of text and no icon image, top and bottom margins are equal.
 170                 return (root.height-text.paintedHeight)/2;
 171             } else {
 172                 // In all other cases, top margin is 4 px more than bottom margin.
 173                 return (root.height-text.paintedHeight)/2 + 2;
 174             }
 175         }
 176
 177         function getTextWidth() {
 178             // 46(32 when there's no icon) is sum of all margins within banner. root.x*2 is sum of margins outside banner.
 179             // Text element width is dertermined by substracting parent width(screen width) by all the margins and
 180             // icon width(if applicable).
 181             return image.visible ? (parent.width-root.x*2-46-image.width) : (parent.width-root.x*2-32);
 182         }
 183
 184         function getScaleValue() {
 185             // When banner is displayed, as part of transition effect, it'll first be enlarged to the point where its width
 186             // is equal to screen width. root.x*2/root.width calculates the amount of expanding required, where root.x*2 is
 187             // equal to screen.displayWidth minus banner.width
 188             return root.x*2/root.width + 1;
 189         }
 190     }
 191
 192     Timer {
 193         id: sysBannerTimer
 194         repeat: false
 195         running: false
 196         interval: 3000
 197         onTriggered: hide()
 198     }
 199
 200     MouseArea {
 201         anchors.fill: parent
 202         onClicked: hide()
 203     }
 204
 205     SequentialAnimation {
 206         id: animationShow
 207         NumberAnimation { target: root; property: "scale"; from: 0; to: internal.getScaleValue(); duration: 200; easing.type: Easing.OutQuad}
 208         NumberAnimation { target: root; property: "scale"; from: internal.getScaleValue(); to: 1; duration: 200 }
 209     }
 210
 211     NumberAnimation {
 212         id: animationHide
 213         target: root; property: "scale"; to: 0; duration: 200; easing.type: Easing.InExpo
 214     }
 215 }
 216