Initial commit
[qml-presentation-made-with-qml:qml-presentation-made-with-qml.git] / flickr / flickr-mobile.qml
1 import Qt 4.6
2 import "common" as Common
3 import "mobile" as Mobile
4
5 Item {
6     id: screen; width: 320; height: 480
7     property bool inListView : false
8
9     Rectangle {
10         id: background
11         anchors.fill: parent; color: "#343434";
12
13         Image { source: "mobile/images/stripes.png"; fillMode: "Tile"; anchors.fill: parent; opacity: 0.3 }
14
15         Common.RssModel { id: rssModel }
16         Common.Loading { anchors.centerIn: parent; visible: rssModel.status == 2 }
17
18         Item {
19             id: views
20             x: 2; width: parent.width - 4
21             anchors.top: titleBar.bottom; anchors.bottom: toolBar.top
22
23             Mobile.GridDelegate { id: gridDelegate }
24             GridView {
25                 id: photoGridView; model: rssModel; delegate: gridDelegate; cacheBuffer: 100
26                 cellWidth: 79; cellHeight: 79; width: parent.width; height: parent.height - 1; z: 6
27             }
28
29             Mobile.ListDelegate { id: listDelegate }
30             ListView {
31                 id: photoListView; model: rssModel; delegate: listDelegate; z: 6
32                 width: parent.width; height: parent.height; x: -(parent.width * 1.5); cacheBuffer: 100;
33             }
34             states: State {
35                 name: "ListView"; when: screen.inListView == true
36                 PropertyChanges { target: photoListView; x: 0 }
37                 PropertyChanges { target: photoGridView; x: -(parent.width * 1.5) }
38             }
39
40             transitions: Transition {
41                 NumberAnimation { properties: "x"; duration: 500; easing: "easeInOutQuad" }
42             }
43         }
44
45         Mobile.ImageDetails { id: imageDetails; width: parent.width; anchors.left: views.right; height: parent.height; z:1 }
46         Mobile.TitleBar { id: titleBar; z: 5; width: parent.width; height: 40; opacity: 0.9 }
47
48         Mobile.ToolBar {
49             id: toolBar; z: 5
50             height: 40; anchors.bottom: parent.bottom; width: parent.width; opacity: 0.9
51             button1Label: "Update"; button2Label: "View mode"
52             onButton1Clicked: rssModel.reload()
53             onButton2Clicked: if (screen.inListView == true) screen.inListView = false; else screen.inListView = true
54         }
55
56         Connection {
57             sender: imageDetails; signal: "closed()"
58             script: {
59                 if (background.state == "DetailedView") {
60                     background.state = '';
61                     imageDetails.photoUrl = "";
62                 }
63             }
64         }
65
66         states: State {
67             name: "DetailedView"
68             PropertyChanges { target: views; x: -parent.width }
69             PropertyChanges { target: toolBar; button1Label: "More..." }
70             PropertyChanges {
71                 target: toolBar
72                 onButton1Clicked: if (imageDetails.state=='') imageDetails.state='Back'; else imageDetails.state=''
73             }
74             PropertyChanges { target: toolBar; button2Label: "Back" }
75             PropertyChanges { target: toolBar; onButton2Clicked: imageDetails.closed() }
76         }
77
78         transitions: Transition {
79             NumberAnimation { properties: "x"; duration: 500; easing: "easeInOutQuad" }
80         }
81     }
82 }