demos/declarative/flickr/flickr.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 QtDeclarative module of the Qt Toolkit.
   8 **
   9 ** $QT_BEGIN_LICENSE:LGPL$
  10 ** No Commercial Usage
  11 ** This file contains pre-release code and may not be distributed.
  12 ** You may use this file in accordance with the terms and conditions
  13 ** contained in the Technology Preview License Agreement accompanying
  14 ** this package.
  15 **
  16 ** GNU Lesser General Public License Usage
  17 ** Alternatively, this file may be used under the terms of the GNU Lesser
  18 ** General Public License version 2.1 as published by the Free Software
  19 ** Foundation and appearing in the file LICENSE.LGPL included in the
  20 ** packaging of this file.  Please review the following information to
  21 ** ensure the GNU Lesser General Public License version 2.1 requirements
  22 ** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
  23 **
  24 ** In addition, as a special exception, Nokia gives you certain additional
  25 ** rights.  These rights are described in the Nokia Qt LGPL Exception
  26 ** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
  27 **
  28 ** If you have questions regarding the use of this file, please contact
  29 ** Nokia at qt-info@nokia.com.
  30 **
  31 **
  32 **
  33 **
  34 **
  35 **
  36 **
  37 **
  38 ** $QT_END_LICENSE$
  39 **
  40 ****************************************************************************/
  41
  42 import QtQuick 2.0
  43 import QtQuick.Particles 2.0
  44 import "content"
  45
  46 Item {
  47     id: screen; width: 320; height: 480
  48     property bool inGridView : false
  49
  50     Rectangle {
  51         id: background
  52         anchors.fill: parent; color: "#343434";
  53
  54         Image { source: "content/images/stripes.png"; fillMode: Image.Tile; anchors.fill: parent; opacity: 0.3 }
  55         ParticleSystem {
  56             id: bgParticles
  57             startTime: 16000
  58         }
  59         ImageParticle {
  60             particles: ["trail"]
  61             image: "content/images/particle.png"
  62             color: "#1A1A6F"
  63             alpha: 0.1
  64             colorVariation: 0.01
  65             blueVariation: 0.8
  66             system: bgParticles
  67         }
  68         Emitter {
  69             particle: "drops"
  70             width: parent.width
  71             particlesPerSecond: 0.5
  72             particleDuration: 20000
  73             speed: PointDirection{
  74                 y: {screen.height/18}
  75             }
  76             system: bgParticles
  77         }
  78         FollowEmitter {
  79             follow: "drops"
  80             particle: "trail"
  81             particlesPerParticlePerSecond: 18
  82             particleSize: 32
  83             particleEndSize: 0
  84             particleSizeVariation: 4
  85             particleDuration: 1200
  86             system: bgParticles
  87             anchors.fill: parent
  88             emissionWidth: 16
  89             emissionHeight: 16
  90             emissionShape: EllipseShape{}
  91         }
  92
  93         VisualDataModel{
  94             id: vdm
  95             delegate: UnifiedDelegate{}
  96             model: RssModel { id: rssModel }
  97         }
  98
  99         Item {
 100             id: views
 101             width: parent.width
 102             anchors.top: titleBar.bottom; anchors.bottom: toolBar.top
 103
 104             GridView {
 105                 id: photoGridView; model: vdm.parts.grid
 106                 cacheBuffer: 1000
 107                 cellWidth: (parent.width-2)/4; cellHeight: cellWidth; width: parent.width; height: parent.height
 108             }
 109
 110             StreamView{
 111                 id: photoStreamView
 112                 model: vdm.parts.stream
 113                 width: parent.width; height: parent.height
 114             }
 115
 116             states: State {
 117                 name: "GridView"; when: screen.inGridView == true
 118             }
 119
 120             transitions: Transition {
 121                 NumberAnimation { properties: "x"; duration: 500; easing.type: Easing.InOutQuad }
 122             }
 123
 124             ImageDetails { id: imageDetails; width: parent.width; anchors.left: views.right; height: parent.height }
 125
 126             Item { id: foreground; anchors.fill: parent }
 127         }
 128
 129         TitleBar { id: titleBar; width: parent.width; height: 40; opacity: 0.9 }
 130
 131         ToolBar {
 132             id: toolBar
 133             height: 40; anchors.bottom: parent.bottom; width: parent.width; opacity: 0.9
 134             button1Label: "Update"; button2Label: "View mode"
 135             onButton1Clicked: rssModel.reload()
 136             onButton2Clicked: if (screen.inGridView == true) screen.inGridView = false; else screen.inGridView = true
 137         }
 138
 139         Connections {
 140             target: imageDetails
 141             onClosed: {
 142                 if (background.state == "DetailedView") {
 143                     background.state = '';
 144                     imageDetails.photoUrl = "";
 145                 }
 146             }
 147         }
 148
 149         states: State {
 150             name: "DetailedView"
 151             PropertyChanges { target: views; x: -parent.width }
 152             PropertyChanges { target: toolBar; button1Label: "View..." }
 153             PropertyChanges {
 154                 target: toolBar
 155                 onButton1Clicked: if (imageDetails.state=='') imageDetails.state='Back'; else imageDetails.state=''
 156             }
 157             PropertyChanges { target: toolBar; button2Label: "Back" }
 158             PropertyChanges { target: toolBar; onButton2Clicked: imageDetails.closed() }
 159         }
 160
 161         transitions: Transition {
 162             NumberAnimation { properties: "x"; duration: 500; easing.type: Easing.InOutQuad }
 163         }
 164
 165     }
 166 }