blob: 71716bb2d224b4fe1af5535e61d0b29db5dae462 (
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
|
/***************************************************************************************************
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 qmlapp
import QtQuick
import QtQuick.Controls
import QtQuick.Effects
import QtQuick.Layouts
ApplicationWindow {
id: mainWindow
visible: true
width: 480
height: Screen.desktopAvailableHeight
title: "Users"
ListView {
anchors.fill: parent
model: QmlApp.users
section.property: "lastName"
section.criteria: ViewSection.FirstCharacter
section.delegate: sectionHeading
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
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.email
font.pixelSize: 14
}
}
}
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" }
}
Component {
id: sectionHeading
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"
}
}
}
Button {
opacity: 0.85; x: parent.width - 150; y: 10; width: 90; height: 40
text: "Add"
onClicked: QmlApp.add()
}
SpinBox {
opacity: 0.85; x: parent.width - 55; y: 10; width: 45; height: 40
value: QmlApp.amountToAdd
onValueModified: QmlApp.amountToAdd = value
}
Button {
opacity: 0.85; x: parent.width - 150; y: 60; width: 140; height: 40
text: "Remove"
onClicked: QmlApp.remove()
}
Connections {
target: QmlApp
function onUserAdded(name, picture, timestamp) {
popup.name = name
popup.picture = picture
if (!popup.visible)
popup.open()
popupClose.restart();
}
function onUserRemoved(name, picture, timestamp) {
popup.name = name
popup.picture = picture
if (!popup.visible)
popup.open()
popupClose.restart();
}
}
Popup {
id: popup
property string name
property string picture
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
}
}
}
Timer {
id: popupClose
interval: 2500; running: false; repeat: false
onTriggered: popup.close()
}
}
|
