tools/qmlviewer/browser/Browser.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 1.0
  43 import Qt.labs.folderlistmodel 1.0
  44
  45 Rectangle {
  46     id: root
  47     property bool showFocusHighlight: false
  48     property variant folders: folders1
  49     property variant view: view1
  50     width: 320
  51     height: 480
  52     color: palette.window
  53
  54     FolderListModel {
  55         id: folders1
  56         nameFilters: [ "*.qml" ]
  57         folder: qmlViewerFolder
  58     }
  59     FolderListModel {
  60         id: folders2
  61         nameFilters: [ "*.qml" ]
  62         folder: qmlViewerFolder
  63     }
  64
  65     SystemPalette { id: palette }
  66
  67     function down(path) {
  68         if (folders == folders1) {
  69             view = view2
  70             folders = folders2;
  71             view1.state = "exitLeft";
  72         } else {
  73             view = view1
  74             folders = folders1;
  75             view2.state = "exitLeft";
  76         }
  77         view.x = root.width;
  78         view.state = "current";
  79         view.focus = true;
  80         folders.folder = path;
  81     }
  82     function up() {
  83         var path = folders.parentFolder;
  84         if (folders == folders1) {
  85             view = view2
  86             folders = folders2;
  87             view1.state = "exitRight";
  88         } else {
  89             view = view1
  90             folders = folders1;
  91             view2.state = "exitRight";
  92         }
  93         view.x = -root.width;
  94         view.state = "current";
  95         view.focus = true;
  96         folders.folder = path;
  97     }
  98     function keyPressed(key) {
  99         switch (key) {
 100             case Qt.Key_Up:
 101             case Qt.Key_Down:
 102             case Qt.Key_Left:
 103             case Qt.Key_Right:
 104                 root.showFocusHighlight = true;
 105             break;
 106             default:
 107                 // do nothing
 108             break;
 109         }
 110     }
 111
 112     Component {
 113         id: folderDelegate
 114         Rectangle {
 115             id: wrapper
 116             function launch() {
 117                 if (folders.isFolder(index)) {
 118                     down(filePath);
 119                 } else {
 120                     qmlViewer.launch(filePath);
 121                 }
 122             }
 123             width: root.width
 124             height: 52
 125             color: "transparent"
 126             Rectangle {
 127                 id: highlight; visible: false
 128                 anchors.fill: parent
 129                 color: palette.highlight
 130                 gradient: Gradient {
 131                     GradientStop { id: t1; position: 0.0; color: palette.highlight }
 132                     GradientStop { id: t2; position: 1.0; color: Qt.lighter(palette.highlight) }
 133                 }
 134             }
 135             Item {
 136                 width: 48; height: 48
 137                 Image { source: "images/folder.png"; anchors.centerIn: parent; visible: folders.isFolder(index)}
 138             }
 139             Text {
 140                 id: nameText
 141                 anchors.fill: parent; verticalAlignment: Text.AlignVCenter
 142                 text: fileName
 143                 anchors.leftMargin: 54
 144                 font.pixelSize: 32
 145                 color: (wrapper.ListView.isCurrentItem && root.showFocusHighlight) ? palette.highlightedText : palette.windowText
 146                 elide: Text.ElideRight
 147             }
 148             MouseArea {
 149                 id: mouseRegion
 150                 anchors.fill: parent
 151                 onPressed: {
 152                     root.showFocusHighlight = false;
 153                     wrapper.ListView.view.currentIndex = index;
 154                 }
 155                 onClicked: { if (folders == wrapper.ListView.view.model) launch() }
 156             }
 157             states: [
 158                 State {
 159                     name: "pressed"
 160                     when: mouseRegion.pressed
 161                     PropertyChanges { target: highlight; visible: true }
 162                     PropertyChanges { target: nameText; color: palette.highlightedText }
 163                 }
 164             ]
 165         }
 166     }
 167
 168     ListView {
 169         id: view1
 170         anchors.top: titleBar.bottom
 171         anchors.bottom: parent.bottom
 172         x: 0
 173         width: parent.width
 174         model: folders1
 175         delegate: folderDelegate
 176         highlight: Rectangle {
 177             color: palette.highlight
 178             visible: root.showFocusHighlight && view1.count != 0
 179             gradient: Gradient {
 180                 GradientStop { id: t1; position: 0.0; color: palette.highlight }
 181                 GradientStop { id: t2; position: 1.0; color: Qt.lighter(palette.highlight) }
 182             }
 183             width: view1.currentItem == null ? 0 : view1.currentItem.width
 184         }
 185         highlightMoveSpeed: 1000
 186         pressDelay: 100
 187         focus: true
 188         state: "current"
 189         states: [
 190             State {
 191                 name: "current"
 192                 PropertyChanges { target: view1; x: 0 }
 193             },
 194             State {
 195                 name: "exitLeft"
 196                 PropertyChanges { target: view1; x: -root.width }
 197             },
 198             State {
 199                 name: "exitRight"
 200                 PropertyChanges { target: view1; x: root.width }
 201             }
 202         ]
 203         transitions: [
 204             Transition {
 205                 to: "current"
 206                 SequentialAnimation {
 207                     NumberAnimation { properties: "x"; duration: 250 }
 208                 }
 209             },
 210             Transition {
 211                 NumberAnimation { properties: "x"; duration: 250 }
 212                 NumberAnimation { properties: "x"; duration: 250 }
 213             }
 214         ]
 215         Keys.onPressed: root.keyPressed(event.key)
 216     }
 217
 218     ListView {
 219         id: view2
 220         anchors.top: titleBar.bottom
 221         anchors.bottom: parent.bottom
 222         x: parent.width
 223         width: parent.width
 224         model: folders2
 225         delegate: folderDelegate
 226         highlight: Rectangle {
 227             color: palette.highlight
 228             visible: root.showFocusHighlight && view2.count != 0
 229             gradient: Gradient {
 230                 GradientStop { id: t1; position: 0.0; color: palette.highlight }
 231                 GradientStop { id: t2; position: 1.0; color: Qt.lighter(palette.highlight) }
 232             }
 233             width: view1.currentItem == null ? 0 : view1.currentItem.width
 234         }
 235         highlightMoveSpeed: 1000
 236         pressDelay: 100
 237         states: [
 238             State {
 239                 name: "current"
 240                 PropertyChanges { target: view2; x: 0 }
 241             },
 242             State {
 243                 name: "exitLeft"
 244                 PropertyChanges { target: view2; x: -root.width }
 245             },
 246             State {
 247                 name: "exitRight"
 248                 PropertyChanges { target: view2; x: root.width }
 249             }
 250         ]
 251         transitions: [
 252             Transition {
 253                 to: "current"
 254                 SequentialAnimation {
 255                     NumberAnimation { properties: "x"; duration: 250 }
 256                 }
 257             },
 258             Transition {
 259                 NumberAnimation { properties: "x"; duration: 250 }
 260             }
 261         ]
 262         Keys.onPressed: root.keyPressed(event.key)
 263     }
 264
 265     Keys.onPressed: {
 266         root.keyPressed(event.key);
 267         if (event.key == Qt.Key_Return || event.key == Qt.Key_Select || event.key == Qt.Key_Right) {
 268             view.currentItem.launch();
 269             event.accepted = true;
 270         } else if (event.key == Qt.Key_Left) {
 271             up();
 272         }
 273     }
 274
 275     BorderImage {
 276         source: "images/titlebar.sci";
 277         width: parent.width;
 278         height: 52
 279         y: -7
 280         id: titleBar
 281
 282         Rectangle {
 283             id: upButton
 284             width: 48
 285             height: titleBar.height - 7
 286             color: "transparent"
 287
 288             Image { anchors.centerIn: parent; source: "images/up.png" }
 289             MouseArea { id: upRegion; anchors.centerIn: parent
 290                 width: 56
 291                 height: 56
 292                 onClicked: if (folders.parentFolder != "") up()
 293             }
 294             states: [
 295                 State {
 296                     name: "pressed"
 297                     when: upRegion.pressed
 298                     PropertyChanges { target: upButton; color: palette.highlight }
 299                 }
 300             ]
 301         }
 302         Rectangle {
 303             color: "gray"
 304             x: 48
 305             width: 1
 306             height: 44
 307         }
 308
 309         Text {
 310             anchors.left: upButton.right; anchors.right: parent.right; height: parent.height
 311             anchors.leftMargin: 4; anchors.rightMargin: 4
 312             text: folders.folder
 313             color: "white"
 314             elide: Text.ElideLeft; horizontalAlignment: Text.AlignRight; verticalAlignment: Text.AlignVCenter
 315             font.pixelSize: 32
 316         }
 317     }
 318 }