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
|
// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
Image {
id: corkPanel
source: Qt.resolvedUrl("images/cork.jpg")
width: ListView.view.width
height: ListView.view.height
fillMode: Image.PreserveAspectCrop
required property string name
required property var notes
TapHandler {
objectName: corkPanel.name
onTapped: corkPanel.Window.activeFocusItem.focus = false
}
Text {
text: corkPanel.name
x: 15
y: 8
height: 40
width: 370
font.pixelSize: 18
font.bold: true
color: "white"
style: Text.Outline
styleColor: "black"
wrapMode: Text.Wrap
}
Repeater {
model: corkPanel.notes
Item {
id: fulcrum
x: 100 + Math.random() * (corkPanel.width - 0.5 * paper.width)
y: 50 + Math.random() * (corkPanel.height - 0.5 * paper.height)
Item {
id: note
scale: 0.7
Image {
id: paper
x: 8 + -width * 0.6 / 2
y: -20
source: "images/note-yellow.png"
scale: 0.6
transformOrigin: Item.TopLeft
antialiasing: true
DragHandler {
target: fulcrum
xAxis.minimum: 100
xAxis.maximum: corkPanel.width - 80
yAxis.minimum: 0
yAxis.maximum: corkPanel.height - 80
}
}
TextEdit {
id: text
x: -104
y: 36
width: 215
height: 24
font.pixelSize: 24
readOnly: false
selectByMouse: activeFocus
rotation: -8
text: noteText
wrapMode: Text.Wrap
}
rotation: -flickable.horizontalVelocity / 100
Behavior on rotation {
SpringAnimation {
spring: 2.0
damping: 0.15
}
}
}
Image {
x: -width / 2
y: -height * 0.5 / 2
source: "images/tack.png"
scale: 0.7
transformOrigin: Item.TopLeft
}
states: State {
name: "pressed"
when: text.activeFocus
PropertyChanges {
target: note
rotation: 8
scale: 1
}
PropertyChanges {
target: fulcrum
z: 8
}
}
transitions: Transition {
NumberAnimation {
properties: "rotation,scale"
duration: 200
}
}
}
}
}
|
