Changeset View
Changeset View
Standalone View
Standalone View
src/qml/FileBrowserDelegate.qml
Show All 17 Lines | |||||
18 | 18 | | |||
19 | import QtQuick 2.7 | 19 | import QtQuick 2.7 | ||
20 | import QtQuick.Controls 2.2 | 20 | import QtQuick.Controls 2.2 | ||
21 | import QtQuick.Layouts 1.2 | 21 | import QtQuick.Layouts 1.2 | ||
22 | 22 | | |||
23 | import org.kde.elisa 1.0 | 23 | import org.kde.elisa 1.0 | ||
24 | 24 | | |||
25 | FocusScope { | 25 | FocusScope { | ||
26 | id: fileDelegate | 26 | id: gridEntry | ||
27 | 27 | | |||
28 | property var fileName | 28 | property var fileName | ||
29 | property var fileUrl | 29 | property var fileUrl | ||
30 | property var imageUrl | 30 | property var imageUrl | ||
31 | property var contentModel | 31 | property var contentModel | ||
32 | property bool isDirectory | 32 | property bool isDirectory | ||
33 | property bool isPlayList | 33 | property bool isPlayList | ||
34 | property bool isSelected | ||||
34 | 35 | | |||
35 | signal enqueue(var data) | 36 | signal enqueue(var data) | ||
36 | signal replaceAndPlay(var data) | 37 | signal replaceAndPlay(var data) | ||
37 | signal loadPlayList(var data) | 38 | signal loadPlayList(var data) | ||
38 | signal open(var data) | 39 | signal open(var data) | ||
39 | signal selected() | 40 | signal selected() | ||
40 | 41 | | |||
41 | Loader { | 42 | Loader { | ||
42 | id: metadataLoader | 43 | id: metadataLoader | ||
43 | active: false | 44 | active: false | ||
44 | onLoaded: item.show() | 45 | onLoaded: item.show() | ||
45 | 46 | | |||
46 | sourceComponent: MediaTrackMetadataView { | 47 | sourceComponent: MediaTrackMetadataView { | ||
47 | fileName: fileDelegate.fileUrl | 48 | fileName: gridEntry.fileUrl | ||
48 | onRejected: metadataLoader.active = false; | 49 | onRejected: metadataLoader.active = false; | ||
49 | } | 50 | } | ||
50 | } | 51 | } | ||
51 | 52 | | |||
52 | Keys.onReturnPressed: fileDelegate.enqueue(fileUrl) | 53 | Keys.onReturnPressed: gridEntry.enqueue(fileUrl) | ||
53 | Keys.onEnterPressed: fileDelegate.enqueue(fileUrl) | 54 | Keys.onEnterPressed: gridEntry.enqueue(fileUrl) | ||
55 | | ||||
56 | Rectangle { | ||||
57 | id: stateIndicator | ||||
58 | | ||||
59 | anchors.fill: parent | ||||
60 | z: 1 | ||||
61 | | ||||
62 | color: "transparent" | ||||
63 | opacity: 0.4 | ||||
64 | | ||||
65 | radius: 3 | ||||
66 | } | ||||
54 | 67 | | |||
55 | ColumnLayout { | 68 | ColumnLayout { | ||
56 | anchors.fill: parent | 69 | anchors.fill: parent | ||
70 | z: 2 | ||||
57 | 71 | | |||
58 | spacing: 0 | 72 | spacing: 0 | ||
59 | 73 | | |||
60 | MouseArea { | 74 | MouseArea { | ||
61 | id: hoverArea | 75 | id: hoverArea | ||
62 | 76 | | |||
63 | hoverEnabled: true | 77 | hoverEnabled: true | ||
64 | acceptedButtons: Qt.LeftButton | 78 | acceptedButtons: Qt.LeftButton | ||
65 | 79 | | |||
66 | Layout.preferredHeight: fileDelegate.width * 0.85 + elisaTheme.layoutVerticalMargin * 0.5 + | 80 | Layout.preferredHeight: gridEntry.width * 0.85 + elisaTheme.layoutVerticalMargin * 0.5 + | ||
67 | (mainLabelSize.boundingRect.height - mainLabelSize.boundingRect.y) | 81 | (mainLabelSize.boundingRect.height - mainLabelSize.boundingRect.y) | ||
68 | Layout.fillWidth: true | 82 | Layout.fillWidth: true | ||
69 | 83 | | |||
70 | onClicked: fileDelegate.selected() | 84 | onClicked: gridEntry.selected() | ||
71 | 85 | | |||
72 | onDoubleClicked: fileDelegate.open(fileUrl) | 86 | onDoubleClicked: gridEntry.open(fileUrl) | ||
73 | 87 | | |||
74 | TextMetrics { | 88 | TextMetrics { | ||
75 | id: mainLabelSize | 89 | id: mainLabelSize | ||
76 | font: mainLabel.font | 90 | font: mainLabel.font | ||
77 | text: mainLabel.text | 91 | text: mainLabel.text | ||
78 | } | 92 | } | ||
79 | 93 | | |||
80 | ColumnLayout { | 94 | ColumnLayout { | ||
81 | id: mainData | 95 | id: mainData | ||
82 | 96 | | |||
83 | spacing: 0 | 97 | spacing: 0 | ||
84 | anchors.fill: parent | 98 | anchors.fill: parent | ||
85 | 99 | | |||
86 | Item { | 100 | Item { | ||
87 | Layout.preferredHeight: fileDelegate.width * 0.85 | 101 | Layout.preferredHeight: gridEntry.width * 0.85 | ||
88 | Layout.preferredWidth: fileDelegate.width * 0.85 | 102 | Layout.preferredWidth: gridEntry.width * 0.85 | ||
89 | 103 | | |||
90 | Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter | 104 | Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter | ||
91 | 105 | | |||
92 | Loader { | 106 | Loader { | ||
93 | id: hoverLoader | 107 | id: hoverLoader | ||
94 | active: false | 108 | active: false | ||
95 | 109 | | |||
96 | anchors { | 110 | anchors { | ||
▲ Show 20 Lines • Show All 95 Lines • ▼ Show 20 Line(s) | 202 | LabelWithToolTip { | |||
192 | color: myPalette.text | 206 | color: myPalette.text | ||
193 | 207 | | |||
194 | // FIXME: Center-aligned text looks better overall, but | 208 | // FIXME: Center-aligned text looks better overall, but | ||
195 | // sometimes results in font kerning issues | 209 | // sometimes results in font kerning issues | ||
196 | // See https://bugreports.qt.io/browse/QTBUG-49646 | 210 | // See https://bugreports.qt.io/browse/QTBUG-49646 | ||
197 | horizontalAlignment: Text.AlignHCenter | 211 | horizontalAlignment: Text.AlignHCenter | ||
198 | 212 | | |||
199 | Layout.topMargin: elisaTheme.layoutVerticalMargin * 0.5 | 213 | Layout.topMargin: elisaTheme.layoutVerticalMargin * 0.5 | ||
200 | Layout.maximumWidth: fileDelegate.width * 0.9 | 214 | Layout.maximumWidth: gridEntry.width * 0.9 | ||
201 | Layout.minimumWidth: Layout.maximumWidth | 215 | Layout.minimumWidth: Layout.maximumWidth | ||
202 | Layout.maximumHeight: (mainLabelSize.boundingRect.height - mainLabelSize.boundingRect.y) * 2 | 216 | Layout.maximumHeight: (mainLabelSize.boundingRect.height - mainLabelSize.boundingRect.y) * 2 | ||
203 | Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom | 217 | Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom | ||
204 | 218 | | |||
205 | text: fileName | 219 | text: fileName | ||
206 | wrapMode: Label.Wrap | 220 | wrapMode: Label.Wrap | ||
207 | elide: Text.ElideRight | 221 | elide: Text.ElideRight | ||
208 | } | 222 | } | ||
209 | 223 | | |||
210 | Item { | 224 | Item { | ||
211 | Layout.fillHeight: true | 225 | Layout.fillHeight: true | ||
212 | } | 226 | } | ||
213 | } | 227 | } | ||
214 | } | 228 | } | ||
215 | 229 | | |||
216 | Item { | 230 | Item { | ||
217 | Layout.fillHeight: true | 231 | Layout.fillHeight: true | ||
218 | } | 232 | } | ||
219 | } | 233 | } | ||
220 | 234 | | |||
221 | states: [ | 235 | states: [ | ||
222 | State { | 236 | State { | ||
223 | name: 'notSelected' | 237 | name: 'notSelected' | ||
224 | when: !fileDelegate.activeFocus && !hoverArea.containsMouse | 238 | when: !gridEntry.activeFocus && !hoverHandle.containsMouse && !gridEntry.isSelected | ||
239 | PropertyChanges { | ||||
240 | target: stateIndicator | ||||
241 | color: 'transparent' | ||||
242 | } | ||||
243 | PropertyChanges { | ||||
244 | target: stateIndicator | ||||
245 | opacity: 1.0 | ||||
246 | } | ||||
225 | PropertyChanges { | 247 | PropertyChanges { | ||
226 | target: hoverLoader | 248 | target: hoverLoader | ||
227 | active: false | 249 | active: false | ||
228 | } | 250 | } | ||
229 | PropertyChanges { | 251 | PropertyChanges { | ||
230 | target: hoverLoader | 252 | target: hoverLoader | ||
231 | opacity: 0.0 | 253 | opacity: 0.0 | ||
232 | } | 254 | } | ||
233 | }, | 255 | }, | ||
234 | State { | 256 | State { | ||
257 | name: 'hovered' | ||||
258 | when: hoverHandle.containsMouse && !gridEntry.activeFocus | ||||
259 | PropertyChanges { | ||||
260 | target: stateIndicator | ||||
261 | color: myPalette.highlight | ||||
262 | } | ||||
263 | PropertyChanges { | ||||
264 | target: stateIndicator | ||||
265 | opacity: 0.2 | ||||
266 | } | ||||
267 | PropertyChanges { | ||||
268 | target: hoverLoader | ||||
269 | active: true | ||||
270 | } | ||||
271 | PropertyChanges { | ||||
272 | target: hoverLoader | ||||
273 | opacity: 1.0 | ||||
274 | } | ||||
275 | }, | ||||
276 | State { | ||||
277 | name: 'selected' | ||||
278 | when: gridEntry.isSelected && !gridEntry.activeFocus | ||||
279 | PropertyChanges { | ||||
280 | target: stateIndicator | ||||
281 | color: myPalette.mid | ||||
282 | } | ||||
283 | PropertyChanges { | ||||
284 | target: stateIndicator | ||||
285 | opacity: 0.6 | ||||
286 | } | ||||
287 | PropertyChanges { | ||||
288 | target: hoverLoader | ||||
289 | active: false | ||||
290 | } | ||||
291 | PropertyChanges { | ||||
292 | target: hoverLoader | ||||
293 | opacity: 0. | ||||
294 | } | ||||
295 | }, | ||||
296 | State { | ||||
235 | name: 'hoveredOrSelected' | 297 | name: 'hoveredOrSelected' | ||
236 | when: fileDelegate.activeFocus || hoverArea.containsMouse | 298 | when: gridEntry.activeFocus | ||
299 | PropertyChanges { | ||||
300 | target: stateIndicator | ||||
301 | color: myPalette.highlight | ||||
302 | } | ||||
303 | PropertyChanges { | ||||
304 | target: stateIndicator | ||||
305 | opacity: 0.6 | ||||
306 | } | ||||
237 | PropertyChanges { | 307 | PropertyChanges { | ||
238 | target: hoverLoader | 308 | target: hoverLoader | ||
239 | active: true | 309 | active: true | ||
240 | } | 310 | } | ||
241 | PropertyChanges { | 311 | PropertyChanges { | ||
242 | target: hoverLoader | 312 | target: hoverLoader | ||
243 | opacity: 1.0 | 313 | opacity: 1.0 | ||
244 | } | 314 | } | ||
245 | } | 315 | } | ||
246 | ] | 316 | ] | ||
247 | 317 | | |||
248 | transitions: [ | 318 | transitions: [ | ||
249 | Transition { | 319 | Transition { | ||
250 | to: 'hoveredOrSelected' | | |||
251 | SequentialAnimation { | 320 | SequentialAnimation { | ||
252 | PropertyAction { | 321 | PropertyAction { | ||
253 | properties: "active" | 322 | properties: "active" | ||
254 | } | 323 | } | ||
324 | ParallelAnimation { | ||||
255 | NumberAnimation { | 325 | NumberAnimation { | ||
256 | properties: "opacity" | 326 | properties: "opacity" | ||
257 | easing.type: Easing.InOutQuad | 327 | easing.type: Easing.InOutQuad | ||
258 | duration: 100 | 328 | duration: 300 | ||
259 | } | | |||
260 | } | 329 | } | ||
261 | }, | 330 | ColorAnimation { | ||
262 | Transition { | 331 | properties: "color" | ||
263 | to: 'notSelected' | | |||
264 | SequentialAnimation { | | |||
265 | NumberAnimation { | | |||
266 | properties: "opacity" | | |||
267 | easing.type: Easing.InOutQuad | 332 | easing.type: Easing.InOutQuad | ||
268 | duration: 100 | 333 | duration: 300 | ||
269 | } | 334 | } | ||
270 | PropertyAction { | | |||
271 | properties: "active" | | |||
272 | } | 335 | } | ||
273 | } | 336 | } | ||
274 | } | 337 | } | ||
275 | ] | 338 | ] | ||
276 | } | 339 | } | ||
277 | 340 | |