blob: 695f0374d92f442f4cf69beb335d77b32f984d23 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
// Copyright (C) 2018 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick 2.12
import QtQml.Models 2.12
import shared as Shared
Rectangle {
id: root
property Item displayItem: null
width: 300; height: 400
color: "black"
Shared.FlickrRssModel {
id: flickrModel
tags: "fjords,mountains"
}
DelegateModel {
id: visualModel
model: flickrModel
delegate: Item {
id: delegateItem
width: 76; height: 76
required property string thumbnail
Rectangle {
id: image
x: 0; y: 0; width: 76; height: 76
border.width: 1
border.color: "white"
color: "black"
Image {
anchors.fill: parent
anchors.leftMargin: 1
anchors.topMargin: 1
source: delegateItem.thumbnail
fillMode: Image.PreserveAspectFit
}
MouseArea {
id: clickArea
anchors.fill: parent
onClicked: root.displayItem = root.displayItem !== delegateItem ? delegateItem : null
}
states: [
State {
when: root.displayItem === delegateItem
name: "inDisplay";
ParentChange { target: image; parent: imageContainer; x: 75; y: 75; width: 150; height: 150 }
PropertyChanges {
image.z: 2
delegateItem.DelegateModel.inItems: false
}
},
State {
when: root.displayItem !== delegateItem
name: "inList";
ParentChange { target: image; parent: delegateItem; x: 2; y: 2; width: 75; height: 75 }
PropertyChanges {
image.z: 1
delegateItem.DelegateModel.inItems: true
}
}
]
transitions: [
Transition {
from: "inList"
SequentialAnimation {
PropertyAction { target: delegateItem; property: "DelegateModel.inPersistedItems"; value: true }
ParentAnimation {
target: image;
via: root
NumberAnimation { target: image; properties: "x,y,width,height"; duration: 1000 }
}
}
}, Transition {
from: "inDisplay"
SequentialAnimation {
ParentAnimation {
target: image
NumberAnimation { target: image; properties: "x,y,width,height"; duration: 1000 }
}
PropertyAction { target: delegateItem; property: "DelegateModel.inPersistedItems"; value: false }
}
}
]
}
}
}
PathView {
id: imagePath
anchors { left: parent.left; top: imageContainer.bottom; right: parent.right; bottom: parent.bottom }
model: visualModel
pathItemCount: 7
path: Path {
startX: -50; startY: 0
PathQuad { x: 150; y: 50; controlX: 0; controlY: 50 }
PathQuad { x: 350; y: 0; controlX: 300; controlY: 50 }
}
}
Item {
id: imageContainer
anchors { fill: parent; bottomMargin: 100 }
}
}
|
