blob: bc0962771a75fa7eaf38477132bb05c8977805fe (
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
/***************************************************************************************************
Copyright (C) 2025 The Qt Company Ltd.
SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
***************************************************************************************************/
import QtQuick
import QtQuick.Controls
import QtQuick.Effects
import QtQuick.Layouts
ApplicationWindow {
id: mainWindow
visible: true
width: 480
height: Screen.desktopAvailableHeight
title: "Users: " + app.users.count.toString()
UserViewApp { id: app }
ListView {
anchors.fill: parent
model: app.users
delegate: RowLayout {
id: user
required property string fullName
required property string firstName
required property string lastName
required property string email
required property string thumbnail
required property string picture
required property date birthDate
required property int age
Image {
id: userPicture
source: user.thumbnail
Layout.rowSpan: 2; Layout.column: 0; Layout.margins: 6;
Layout.preferredWidth: 64; Layout.preferredHeight: 64
layer.enabled: true;
layer.effect: MultiEffect { maskEnabled: true; maskSource: mask }
}
ColumnLayout {
Text {
Layout.alignment: Qt.AlignLeft
text: user.firstName + " " + user.lastName
font.bold: true; font.pixelSize: 20
}
Text {
Layout.alignment: Qt.AlignLeft
text: user.birthDate.toISOString().split("T")[0] + " (" + user.age.toString() + ")"
font.pixelSize: 10
}
Text {
Layout.alignment: Qt.AlignLeft
text: user.email
font.pixelSize: 14
}
}
}
section.property: "lastName"
section.criteria: ViewSection.FirstCharacter
section.delegate: Rectangle {
width: ListView.view.width; height: initial.height + 10
color: "transparent"
required property string section
Text {
id: initial; text: parent.section
color: "#00414A"; anchors.bottom: parent.bottom; anchors.bottomMargin: 2
font.bold: true; font.pixelSize: 20; font.capitalization: Font.AllUppercase
}
Rectangle {
width: parent.width; height: 2
anchors.bottom: parent.bottom
color: "#2CDE85"
}
}
add: Transition {
NumberAnimation { properties: "x,y"; from: 100; duration: 500 }
}
addDisplaced: Transition {
NumberAnimation { properties: "x,y"; duration: 500 }
}
remove: Transition {
ParallelAnimation {
NumberAnimation { property: "opacity"; to: 0; duration: 500 }
NumberAnimation { properties: "x,y"; to: 100; duration: 500 }
}
}
removeDisplaced: Transition {
NumberAnimation { properties: "x,y"; duration: 500 }
}
}
Item {
id: mask
width: 64; height: 64; layer.enabled: true; visible: false
Rectangle { width: 64; height: 64; radius: 16; color: "black" }
}
Button {
id: buttonAdd
opacity: 0.85; x: parent.width - 150; y: 10; width: 140; height: 40
text: "Add"
onClicked: {
app.add()
}
}
Button {
id: buttonRemove
opacity: 0.85; x: parent.width - 150; y: 60; width: 140; height: 40
text: "Remove"
onClicked: {
app.remove()
}
}
Connections {
target: app
function onUserAdded(args) {
popup.name = args.user.name.full
popup.picture = args.user.picture.large
popup.description = "Added on "
+ args.timestamp.toISOString().replace("T", " ").split(".")[0]
if (!popup.visible)
popup.open()
popupClose.restart();
}
function onUserRemoved(args) {
popup.name = args.user.name.full
popup.picture = args.user.picture.large
popup.description = "Removed on "
+ args.timestamp.toISOString().replace("T", " ").split(".")[0]
if (!popup.visible)
popup.open()
popupClose.restart();
}
}
Popup {
id: popup
property string name
property string picture
property string description
popupType: Popup.Item
anchors.centerIn: parent
modal: false; focus: true
closePolicy: Popup.CloseOnEscape
enter: Transition {
NumberAnimation { property: "opacity"; from: 0.0; to: 1.0 }
}
exit: Transition {
NumberAnimation { property: "opacity"; from: 1.0; to: 0.0 }
}
ColumnLayout {
Image {
source: popup.picture
Layout.margins: 6
Layout.preferredWidth: 256
Layout.preferredHeight: 256
}
Text {
Layout.alignment: Qt.AlignCenter
text: popup.name
font.bold: true; font.pixelSize: 20
}
Text {
Layout.alignment: Qt.AlignCenter
text: popup.description
font.pixelSize: 12
}
}
}
Timer {
id: popupClose
interval: 2500; running: false; repeat: false
onTriggered: popup.close()
}
}
|
