← Back to branch summary

~phablet-team/+junk/qtmultimedia

« back to all changes in this revision

Viewing changes to examples/multimedia/video/qmlvideo/qml/qmlvideo/FileBrowser.qml

  • Committer: Jim Hodapp
  • Date: 2015-05-15 19:17:49 UTC
  • Revision ID: jim.hodapp@canonical.com-20150515191749-r4xausjaaphme9ok
Initial import.

Show diffs side-by-side

added added

removed removed

Lines of Context:
examples/multimedia/video/qmlvideo/qml/qmlvideo/FileBrowser.qml
 
1
/****************************************************************************
 
2
**
 
3
** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
 
4
** Contact: http://www.qt-project.org/legal
 
5
**
 
6
** This file is part of the Qt Mobility Components.
 
7
**
 
8
** $QT_BEGIN_LICENSE:LGPL21$
 
9
** Commercial License Usage
 
10
** Licensees holding valid commercial Qt licenses may use this file in
 
11
** accordance with the commercial license agreement provided with the
 
12
** Software or, alternatively, in accordance with the terms contained in
 
13
** a written agreement between you and Digia. For licensing terms and
 
14
** conditions see http://qt.digia.com/licensing. For further information
 
15
** use the contact form at http://qt.digia.com/contact-us.
 
16
**
 
17
** GNU Lesser General Public License Usage
 
18
** Alternatively, this file may be used under the terms of the GNU Lesser
 
19
** General Public License version 2.1 or version 3 as published by the Free
 
20
** Software Foundation and appearing in the file LICENSE.LGPLv21 and
 
21
** LICENSE.LGPLv3 included in the packaging of this file. Please review the
 
22
** following information to ensure the GNU Lesser General Public License
 
23
** requirements will be met: https://www.gnu.org/licenses/lgpl.html and
 
24
** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
 
25
**
 
26
** In addition, as a special exception, Digia gives you certain additional
 
27
** rights. These rights are described in the Digia Qt LGPL Exception
 
28
** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
 
29
**
 
30
** $QT_END_LICENSE$
 
31
**
 
32
****************************************************************************/
 
33
 
 
34
import QtQuick 2.0
 
35
import Qt.labs.folderlistmodel 2.0
 
36
 
 
37
Rectangle {
 
38
    id: fileBrowser
 
39
    color: "transparent"
 
40
 
 
41
    property string folder
 
42
 
 
43
    property int itemHeight: Math.min(parent.width, parent.height) / 15
 
44
    property int buttonHeight: Math.min(parent.width, parent.height) / 12
 
45
 
 
46
    signal fileSelected(string file)
 
47
 
 
48
    function selectFile(file) {
 
49
        if (file !== "") {
 
50
            folder = loader.item.folders.folder
 
51
            fileBrowser.fileSelected(file)
 
52
        }
 
53
        loader.sourceComponent = undefined
 
54
    }
 
55
 
 
56
    Loader {
 
57
        id: loader
 
58
    }
 
59
 
 
60
    function show() {
 
61
        loader.sourceComponent = fileBrowserComponent
 
62
        loader.item.parent = fileBrowser
 
63
        loader.item.anchors.fill = fileBrowser
 
64
        loader.item.folder = fileBrowser.folder
 
65
    }
 
66
 
 
67
    Component {
 
68
        id: fileBrowserComponent
 
69
 
 
70
        Rectangle {
 
71
            id: root
 
72
            color: "black"
 
73
            property bool showFocusHighlight: false
 
74
            property variant folders: folders1
 
75
            property variant view: view1
 
76
            property alias folder: folders1.folder
 
77
            property color textColor: "white"
 
78
 
 
79
            FolderListModel {
 
80
                id: folders1
 
81
                folder: folder
 
82
            }
 
83
 
 
84
            FolderListModel {
 
85
                id: folders2
 
86
                folder: folder
 
87
            }
 
88
 
 
89
            SystemPalette {
 
90
                id: palette
 
91
            }
 
92
 
 
93
            Component {
 
94
                id: folderDelegate
 
95
 
 
96
                Rectangle {
 
97
                    id: wrapper
 
98
                    function launch() {
 
99
                        var path = "file://";
 
100
                        if (filePath.length > 2 && filePath[1] === ':') // Windows drive logic, see QUrl::fromLocalFile()
 
101
                            path += '/';
 
102
                        path += filePath;
 
103
                        if (folders.isFolder(index))
 
104
                            down(path);
 
105
                        else
 
106
                            fileBrowser.selectFile(path)
 
107
                    }
 
108
                    width: root.width
 
109
                    height: folderImage.height
 
110
                    color: "transparent"
 
111
 
 
112
                    Rectangle {
 
113
                        id: highlight
 
114
                        visible: false
 
115
                        anchors.fill: parent
 
116
                        anchors.leftMargin: 5
 
117
                        anchors.rightMargin: 5
 
118
                        color: "#212121"
 
119
                    }
 
120
 
 
121
                    Item {
 
122
                        id: folderImage
 
123
                        width: itemHeight
 
124
                        height: itemHeight
 
125
                        Image {
 
126
                            id: folderPicture
 
127
                            source: "qrc:/folder.png"
 
128
                            width: itemHeight * 0.9
 
129
                            height: itemHeight * 0.9
 
130
                            anchors.left: parent.left
 
131
                            anchors.margins: 5
 
132
                            visible: folders.isFolder(index)
 
133
                        }
 
134
                    }
 
135
 
 
136
                    Text {
 
137
                        id: nameText
 
138
                        anchors.fill: parent;
 
139
                        verticalAlignment: Text.AlignVCenter
 
140
                        text: fileName
 
141
                        anchors.leftMargin: itemHeight + 10
 
142
                        color: (wrapper.ListView.isCurrentItem && root.showFocusHighlight) ? palette.highlightedText : textColor
 
143
                        elide: Text.ElideRight
 
144
                    }
 
145
 
 
146
                    MouseArea {
 
147
                        id: mouseRegion
 
148
                        anchors.fill: parent
 
149
                        onPressed: {
 
150
                            root.showFocusHighlight = false;
 
151
                            wrapper.ListView.view.currentIndex = index;
 
152
                        }
 
153
                        onClicked: { if (folders === wrapper.ListView.view.model) launch() }
 
154
                    }
 
155
 
 
156
                    states: [
 
157
                        State {
 
158
                            name: "pressed"
 
159
                            when: mouseRegion.pressed
 
160
                            PropertyChanges { target: highlight; visible: true }
 
161
                            PropertyChanges { target: nameText; color: palette.highlightedText }
 
162
                        }
 
163
                    ]
 
164
                }
 
165
            }
 
166
 
 
167
            ListView {
 
168
                id: view1
 
169
                anchors.top: titleBar.bottom
 
170
                anchors.bottom: cancelButton.top
 
171
                width: parent.width
 
172
                model: folders1
 
173
                delegate: folderDelegate
 
174
                highlight: Rectangle {
 
175
                    color: "#212121"
 
176
                    visible: root.showFocusHighlight && view1.count != 0
 
177
                    width: view1.currentItem == null ? 0 : view1.currentItem.width
 
178
                }
 
179
                highlightMoveVelocity: 1000
 
180
                pressDelay: 100
 
181
                focus: true
 
182
                state: "current"
 
183
                states: [
 
184
                    State {
 
185
                        name: "current"
 
186
                        PropertyChanges { target: view1; x: 0 }
 
187
                    },
 
188
                    State {
 
189
                        name: "exitLeft"
 
190
                        PropertyChanges { target: view1; x: -root.width }
 
191
                    },
 
192
                    State {
 
193
                        name: "exitRight"
 
194
                        PropertyChanges { target: view1; x: root.width }
 
195
                    }
 
196
                ]
 
197
                transitions: [
 
198
                    Transition {
 
199
                        to: "current"
 
200
                        SequentialAnimation {
 
201
                            NumberAnimation { properties: "x"; duration: 250 }
 
202
                        }
 
203
                    },
 
204
                    Transition {
 
205
                        NumberAnimation { properties: "x"; duration: 250 }
 
206
                        NumberAnimation { properties: "x"; duration: 250 }
 
207
                    }
 
208
                ]
 
209
                Keys.onPressed: root.keyPressed(event.key)
 
210
            }
 
211
 
 
212
            ListView {
 
213
                id: view2
 
214
                anchors.top: titleBar.bottom
 
215
                anchors.bottom: parent.bottom
 
216
                x: parent.width
 
217
                width: parent.width
 
218
                model: folders2
 
219
                delegate: folderDelegate
 
220
                highlight: Rectangle {
 
221
                    color: "#212121"
 
222
                    visible: root.showFocusHighlight && view2.count != 0
 
223
                    width: view1.currentItem == null ? 0 : view1.currentItem.width
 
224
                }
 
225
                highlightMoveVelocity: 1000
 
226
                pressDelay: 100
 
227
                states: [
 
228
                    State {
 
229
                        name: "current"
 
230
                        PropertyChanges { target: view2; x: 0 }
 
231
                    },
 
232
                    State {
 
233
                        name: "exitLeft"
 
234
                        PropertyChanges { target: view2; x: -root.width }
 
235
                    },
 
236
                    State {
 
237
                        name: "exitRight"
 
238
                        PropertyChanges { target: view2; x: root.width }
 
239
                    }
 
240
                ]
 
241
                transitions: [
 
242
                    Transition {
 
243
                        to: "current"
 
244
                        SequentialAnimation {
 
245
                            NumberAnimation { properties: "x"; duration: 250 }
 
246
                        }
 
247
                    },
 
248
                    Transition {
 
249
                        NumberAnimation { properties: "x"; duration: 250 }
 
250
                    }
 
251
                ]
 
252
                Keys.onPressed: root.keyPressed(event.key)
 
253
            }
 
254
 
 
255
            Rectangle {
 
256
                width: parent.width
 
257
                height: buttonHeight + 10
 
258
                anchors.bottom: parent.bottom
 
259
                color: "black"
 
260
            }
 
261
 
 
262
            Rectangle {
 
263
                id: cancelButton
 
264
                width: parent.width
 
265
                height: buttonHeight
 
266
                color: "#212121"
 
267
                anchors.bottom: parent.bottom
 
268
                anchors.left: parent.left
 
269
                anchors.right: parent.right
 
270
                anchors.margins: 5
 
271
                radius: buttonHeight / 15
 
272
 
 
273
                Text {
 
274
                    anchors.fill: parent
 
275
                    text: "Cancel"
 
276
                    color: "white"
 
277
                    horizontalAlignment: Text.AlignHCenter
 
278
                    verticalAlignment: Text.AlignVCenter
 
279
                }
 
280
 
 
281
                MouseArea {
 
282
                    anchors.fill: parent
 
283
                    onClicked: fileBrowser.selectFile("")
 
284
                }
 
285
            }
 
286
 
 
287
            Keys.onPressed: {
 
288
                root.keyPressed(event.key);
 
289
                if (event.key === Qt.Key_Return || event.key === Qt.Key_Select || event.key === Qt.Key_Right) {
 
290
                    view.currentItem.launch();
 
291
                    event.accepted = true;
 
292
                } else if (event.key === Qt.Key_Left) {
 
293
                    up();
 
294
                }
 
295
            }
 
296
 
 
297
 
 
298
            Rectangle {
 
299
                id: titleBar
 
300
                width: parent.width
 
301
                height: buttonHeight + 10
 
302
                anchors.top: parent.top
 
303
                color: "black"
 
304
 
 
305
                Rectangle {
 
306
                    width: parent.width;
 
307
                    height: buttonHeight
 
308
                    color: "#212121"
 
309
                    anchors.margins: 5
 
310
                    anchors.top: parent.top
 
311
                    anchors.left: parent.left
 
312
                    anchors.right: parent.right
 
313
                    radius: buttonHeight / 15
 
314
 
 
315
                    Rectangle {
 
316
                        id: upButton
 
317
                        width: buttonHeight
 
318
                        height: buttonHeight
 
319
                        color: "transparent"
 
320
                        Image {
 
321
                            width: itemHeight
 
322
                            height: itemHeight
 
323
                            anchors.centerIn: parent
 
324
                            source: "qrc:/up.png"
 
325
                        }
 
326
                        MouseArea { id: upRegion; anchors.centerIn: parent
 
327
                            width: buttonHeight
 
328
                            height: buttonHeight
 
329
                            onClicked: up()
 
330
                        }
 
331
                        states: [
 
332
                            State {
 
333
                                name: "pressed"
 
334
                                when: upRegion.pressed
 
335
                                PropertyChanges { target: upButton; color: palette.highlight }
 
336
                            }
 
337
                        ]
 
338
                    }
 
339
 
 
340
                    Text {
 
341
                        anchors.left: upButton.right; anchors.right: parent.right; height: parent.height
 
342
                        anchors.leftMargin: 5; anchors.rightMargin: 5
 
343
                        text: folders.folder
 
344
                        color: "white"
 
345
                        elide: Text.ElideLeft;
 
346
                        horizontalAlignment: Text.AlignLeft;
 
347
                        verticalAlignment: Text.AlignVCenter
 
348
                    }
 
349
                }
 
350
            }
 
351
 
 
352
            function down(path) {
 
353
                if (folders == folders1) {
 
354
                    view = view2
 
355
                    folders = folders2;
 
356
                    view1.state = "exitLeft";
 
357
                } else {
 
358
                    view = view1
 
359
                    folders = folders1;
 
360
                    view2.state = "exitLeft";
 
361
                }
 
362
                view.x = root.width;
 
363
                view.state = "current";
 
364
                view.focus = true;
 
365
                folders.folder = path;
 
366
            }
 
367
 
 
368
            function up() {
 
369
                var path = folders.parentFolder;
 
370
                if (path.toString().length === 0 || path.toString() === 'file:')
 
371
                    return;
 
372
                if (folders == folders1) {
 
373
                    view = view2
 
374
                    folders = folders2;
 
375
                    view1.state = "exitRight";
 
376
                } else {
 
377
                    view = view1
 
378
                    folders = folders1;
 
379
                    view2.state = "exitRight";
 
380
                }
 
381
                view.x = -root.width;
 
382
                view.state = "current";
 
383
                view.focus = true;
 
384
                folders.folder = path;
 
385
            }
 
386
 
 
387
            function keyPressed(key) {
 
388
                switch (key) {
 
389
                case Qt.Key_Up:
 
390
                case Qt.Key_Down:
 
391
                case Qt.Key_Left:
 
392
                case Qt.Key_Right:
 
393
                    root.showFocusHighlight = true;
 
394
                    break;
 
395
                default:
 
396
                    // do nothing
 
397
                    break;
 
398
                }
 
399
            }
 
400
        }
 
401
    }
 
402
}