Changeset View
Changeset View
Standalone View
Standalone View
src/qml/MediaTrackDelegate.qml
| Show All 33 Lines | 27 | FocusScope { | |||
|---|---|---|---|---|---|
| 34 | property string albumArtist | 34 | property string albumArtist | ||
| 35 | property string duration | 35 | property string duration | ||
| 36 | property url imageUrl | 36 | property url imageUrl | ||
| 37 | property int trackNumber | 37 | property int trackNumber | ||
| 38 | property int discNumber | 38 | property int discNumber | ||
| 39 | property int rating | 39 | property int rating | ||
| 40 | property bool isFirstTrackOfDisc | 40 | property bool isFirstTrackOfDisc | ||
| 41 | property bool isSingleDiscAlbum | 41 | property bool isSingleDiscAlbum | ||
| 42 | property bool isSelected | ||||
| 42 | property bool isAlternateColor | 43 | property bool isAlternateColor | ||
| 43 | property bool detailedView: true | 44 | property bool detailedView: true | ||
| 44 | 45 | | |||
| 45 | signal clicked() | 46 | signal clicked() | ||
| 46 | signal enqueue(var databaseId, var name) | 47 | signal enqueue(var databaseId, var name) | ||
| 47 | signal replaceAndPlay(var databaseId, var name) | 48 | signal replaceAndPlay(var databaseId, var name) | ||
| 48 | 49 | | |||
| 49 | Controls1.Action { | 50 | Controls1.Action { | ||
| Show All 38 Lines | 87 | sourceComponent: MediaTrackMetadataView { | |||
| 88 | onRejected: metadataLoader.active = false; | 89 | onRejected: metadataLoader.active = false; | ||
| 89 | } | 90 | } | ||
| 90 | } | 91 | } | ||
| 91 | 92 | | |||
| 92 | Rectangle { | 93 | Rectangle { | ||
| 93 | id: rowRoot | 94 | id: rowRoot | ||
| 94 | 95 | | |||
| 95 | anchors.fill: parent | 96 | anchors.fill: parent | ||
| 97 | z: 1 | ||||
| 96 | 98 | | |||
| 97 | color: (isAlternateColor ? myPalette.alternateBase : myPalette.base) | 99 | color: (isAlternateColor ? myPalette.alternateBase : myPalette.base) | ||
| 100 | } | ||||
| 98 | 101 | | |||
| 99 | MouseArea { | 102 | MouseArea { | ||
| 100 | id: hoverArea | 103 | id: hoverArea | ||
| 101 | 104 | | |||
| 102 | anchors.fill: parent | 105 | anchors.fill: parent | ||
| 106 | z: 2 | ||||
| 103 | 107 | | |||
| 104 | hoverEnabled: true | 108 | hoverEnabled: true | ||
| 105 | focus: true | | |||
| 106 | acceptedButtons: Qt.LeftButton | 109 | acceptedButtons: Qt.LeftButton | ||
| 107 | 110 | | |||
| 108 | onClicked: { | 111 | onClicked: { | ||
| 109 | hoverArea.forceActiveFocus() | | |||
| 110 | mediaTrack.clicked() | 112 | mediaTrack.clicked() | ||
| 111 | } | 113 | } | ||
| 112 | 114 | | |||
| 113 | onDoubleClicked: enqueue(databaseId, title) | 115 | onDoubleClicked: enqueue(databaseId, title) | ||
| 114 | 116 | | |||
| 115 | RowLayout { | 117 | RowLayout { | ||
| 116 | anchors.fill: parent | 118 | anchors.fill: parent | ||
| 117 | spacing: 0 | 119 | spacing: 0 | ||
| ▲ Show 20 Lines • Show All 222 Lines • ▼ Show 20 Line(s) | 334 | LabelWithToolTip { | |||
| 340 | horizontalAlignment: Text.AlignRight | 342 | horizontalAlignment: Text.AlignRight | ||
| 341 | 343 | | |||
| 342 | Layout.alignment: Qt.AlignVCenter | Qt.AlignRight | 344 | Layout.alignment: Qt.AlignVCenter | Qt.AlignRight | ||
| 343 | Layout.rightMargin: !LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 | 345 | Layout.rightMargin: !LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 | ||
| 344 | Layout.leftMargin: LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 | 346 | Layout.leftMargin: LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 | ||
| 345 | } | 347 | } | ||
| 346 | } | 348 | } | ||
| 347 | } | 349 | } | ||
| 348 | } | | |||
| 349 | 350 | | |||
| 350 | states: [ | 351 | states: [ | ||
| 351 | State { | 352 | State { | ||
| 352 | name: 'notSelected' | 353 | name: 'notSelected' | ||
| 353 | when: !hoverArea.containsMouse && !mediaTrack.activeFocus | 354 | when: !mediaTrack.activeFocus && !hoverArea.containsMouse && !mediaTrack.isSelected | ||
| 354 | PropertyChanges { | 355 | PropertyChanges { | ||
| 355 | target: hoverLoader | 356 | target: hoverLoader | ||
| 356 | active: false | 357 | active: false | ||
| 357 | } | 358 | } | ||
| 358 | PropertyChanges { | 359 | PropertyChanges { | ||
| 359 | target: hoverLoader | 360 | target: hoverLoader | ||
| 360 | opacity: 0.0 | 361 | opacity: 0.0 | ||
| 361 | } | 362 | } | ||
| 362 | PropertyChanges { | 363 | PropertyChanges { | ||
| 363 | target: ratingWidget | 364 | target: ratingWidget | ||
| 364 | hoverWidgetOpacity: 0.0 | 365 | hoverWidgetOpacity: 0.0 | ||
| 365 | } | 366 | } | ||
| 366 | PropertyChanges { | 367 | PropertyChanges { | ||
| 367 | target: rowRoot | 368 | target: rowRoot | ||
| 368 | color: (isAlternateColor ? myPalette.alternateBase : myPalette.base) | 369 | color: (isAlternateColor ? myPalette.alternateBase : myPalette.base) | ||
| 369 | } | 370 | } | ||
| 371 | PropertyChanges { | ||||
| 372 | target: rowRoot | ||||
| 373 | opacity: 1 | ||||
| 374 | } | ||||
| 370 | }, | 375 | }, | ||
| 371 | State { | 376 | State { | ||
| 372 | name: 'hoveredOrSelected' | 377 | name: 'hovered' | ||
| 373 | when: hoverArea.containsMouse || mediaTrack.activeFocus | 378 | when: !mediaTrack.activeFocus && hoverArea.containsMouse | ||
| 374 | PropertyChanges { | 379 | PropertyChanges { | ||
| 375 | target: hoverLoader | 380 | target: hoverLoader | ||
| 376 | active: true | 381 | active: true | ||
| 377 | } | 382 | } | ||
| 378 | PropertyChanges { | 383 | PropertyChanges { | ||
| 379 | target: hoverLoader | 384 | target: hoverLoader | ||
| 380 | opacity: 1.0 | 385 | opacity: 1.0 | ||
| 381 | } | 386 | } | ||
| 382 | PropertyChanges { | 387 | PropertyChanges { | ||
| 383 | target: ratingWidget | 388 | target: ratingWidget | ||
| 384 | hoverWidgetOpacity: 1.0 | 389 | hoverWidgetOpacity: 1.0 | ||
| 385 | } | 390 | } | ||
| 386 | PropertyChanges { | 391 | PropertyChanges { | ||
| 387 | target: rowRoot | 392 | target: rowRoot | ||
| 393 | color: myPalette.highlight | ||||
| 394 | } | ||||
| 395 | PropertyChanges { | ||||
| 396 | target: rowRoot | ||||
| 397 | opacity: 0.2 | ||||
| 398 | } | ||||
| 399 | }, | ||||
| 400 | State { | ||||
| 401 | name: 'selected' | ||||
| 402 | when: !mediaTrack.activeFocus && mediaTrack.isSelected | ||||
| 403 | PropertyChanges { | ||||
| 404 | target: hoverLoader | ||||
| 405 | active: false | ||||
| 406 | } | ||||
| 407 | PropertyChanges { | ||||
| 408 | target: hoverLoader | ||||
| 409 | opacity: 0.0 | ||||
| 410 | } | ||||
| 411 | PropertyChanges { | ||||
| 412 | target: ratingWidget | ||||
| 413 | hoverWidgetOpacity: 1.0 | ||||
| 414 | } | ||||
| 415 | PropertyChanges { | ||||
| 416 | target: rowRoot | ||||
| 388 | color: myPalette.mid | 417 | color: myPalette.mid | ||
| 389 | } | 418 | } | ||
| 419 | PropertyChanges { | ||||
| 420 | target: rowRoot | ||||
| 421 | opacity: 1. | ||||
| 422 | } | ||||
| 423 | }, | ||||
| 424 | State { | ||||
| 425 | name: 'focused' | ||||
| 426 | when: mediaTrack.activeFocus | ||||
| 427 | PropertyChanges { | ||||
| 428 | target: hoverLoader | ||||
| 429 | active: true | ||||
| 430 | } | ||||
| 431 | PropertyChanges { | ||||
| 432 | target: hoverLoader | ||||
| 433 | opacity: 1.0 | ||||
| 434 | } | ||||
| 435 | PropertyChanges { | ||||
| 436 | target: ratingWidget | ||||
| 437 | hoverWidgetOpacity: 1.0 | ||||
| 438 | } | ||||
| 439 | PropertyChanges { | ||||
| 440 | target: rowRoot | ||||
| 441 | color: myPalette.highlight | ||||
| 442 | } | ||||
| 443 | PropertyChanges { | ||||
| 444 | target: rowRoot | ||||
| 445 | opacity: 0.6 | ||||
| 446 | } | ||||
| 390 | } | 447 | } | ||
| 391 | ] | 448 | ] | ||
| 392 | 449 | | |||
| 393 | transitions: [ | 450 | transitions: [ | ||
| 394 | Transition { | 451 | Transition { | ||
| 395 | to: 'hoveredOrSelected' | | |||
| 396 | SequentialAnimation { | 452 | SequentialAnimation { | ||
| 397 | PropertyAction { | 453 | PropertyAction { | ||
| 398 | properties: "active" | 454 | properties: "active" | ||
| 399 | } | 455 | } | ||
| 400 | ParallelAnimation { | 456 | ParallelAnimation { | ||
| 401 | NumberAnimation { | 457 | NumberAnimation { | ||
| 402 | properties: "opacity, hoverWidgetOpacity" | 458 | properties: "opacity, hoverWidgetOpacity" | ||
| 403 | easing.type: Easing.InOutQuad | 459 | easing.type: Easing.InOutQuad | ||
| 404 | duration: 250 | 460 | duration: 200 | ||
| 405 | } | 461 | } | ||
| 406 | ColorAnimation { | 462 | ColorAnimation { | ||
| 407 | properties: "color" | 463 | properties: "color" | ||
| 408 | duration: 250 | 464 | duration: 350 | ||
| 409 | } | 465 | } | ||
| 410 | } | 466 | } | ||
| 411 | } | 467 | } | ||
| 412 | }, | | |||
| 413 | Transition { | | |||
| 414 | to: 'notSelected' | | |||
| 415 | SequentialAnimation { | | |||
| 416 | ParallelAnimation { | | |||
| 417 | NumberAnimation { | | |||
| 418 | properties: "opacity, hoverWidgetOpacity" | | |||
| 419 | easing.type: Easing.InOutQuad | | |||
| 420 | duration: 250 | | |||
| 421 | } | | |||
| 422 | ColorAnimation { | | |||
| 423 | properties: "color" | | |||
| 424 | duration: 250 | | |||
| 425 | } | | |||
| 426 | } | | |||
| 427 | PropertyAction { | | |||
| 428 | properties: "active" | | |||
| 429 | } | | |||
| 430 | } | | |||
| 431 | } | 468 | } | ||
| 432 | ] | 469 | ] | ||
| 433 | } | 470 | } | ||