Changeset View
Changeset View
Standalone View
Standalone View
src/qml/GridBrowserDelegate.qml
| Show All 27 Lines | 26 | FocusScope { | |||
|---|---|---|---|---|---|
| 28 | 28 | | |||
| 29 | property var imageUrl | 29 | property var imageUrl | ||
| 30 | property bool shadowForImage | 30 | property bool shadowForImage | ||
| 31 | property alias mainText: mainLabel.text | 31 | property alias mainText: mainLabel.text | ||
| 32 | property alias secondaryText: secondaryLabel.text | 32 | property alias secondaryText: secondaryLabel.text | ||
| 33 | property var databaseId | 33 | property var databaseId | ||
| 34 | property bool delegateDisplaySecondaryText: true | 34 | property bool delegateDisplaySecondaryText: true | ||
| 35 | property bool isPartial | 35 | property bool isPartial | ||
| 36 | property bool isSelected | ||||
| 36 | 37 | | |||
| 37 | signal enqueue(var databaseId, var name) | 38 | signal enqueue(var databaseId, var name) | ||
| 38 | signal replaceAndPlay(var databaseId, var name) | 39 | signal replaceAndPlay(var databaseId, var name) | ||
| 39 | signal open() | 40 | signal open() | ||
| 40 | signal selected() | 41 | signal selected() | ||
| 41 | 42 | | |||
| 42 | Keys.onReturnPressed: open() | 43 | Keys.onReturnPressed: open() | ||
| 43 | Keys.onEnterPressed: open() | 44 | Keys.onEnterPressed: open() | ||
| 44 | 45 | | |||
| 46 | Rectangle { | ||||
| 47 | id: stateIndicator | ||||
| 48 | | ||||
| 49 | anchors.fill: parent | ||||
| 50 | z: 1 | ||||
| 51 | | ||||
| 52 | color: "transparent" | ||||
| 53 | opacity: 0.4 | ||||
| 54 | | ||||
| 55 | radius: 3 | ||||
| 56 | } | ||||
| 57 | | ||||
| 45 | ColumnLayout { | 58 | ColumnLayout { | ||
| 46 | anchors.fill: parent | 59 | anchors.fill: parent | ||
| 60 | z: 2 | ||||
| 47 | 61 | | |||
| 48 | spacing: 0 | 62 | spacing: 0 | ||
| 49 | 63 | | |||
| 50 | MouseArea { | 64 | MouseArea { | ||
| 51 | id: hoverHandle | 65 | id: hoverHandle | ||
| 52 | 66 | | |||
| 53 | hoverEnabled: true | 67 | hoverEnabled: true | ||
| 54 | acceptedButtons: Qt.LeftButton | 68 | acceptedButtons: Qt.LeftButton | ||
| ▲ Show 20 Lines • Show All 171 Lines • ▼ Show 20 Line(s) | 233 | LabelWithToolTip { | |||
| 226 | // sometimes results in font kerning issues | 240 | // sometimes results in font kerning issues | ||
| 227 | // See https://bugreports.qt.io/browse/QTBUG-49646 | 241 | // See https://bugreports.qt.io/browse/QTBUG-49646 | ||
| 228 | horizontalAlignment: Text.AlignHCenter | 242 | horizontalAlignment: Text.AlignHCenter | ||
| 229 | 243 | | |||
| 230 | Layout.topMargin: elisaTheme.layoutVerticalMargin * 0.5 | 244 | Layout.topMargin: elisaTheme.layoutVerticalMargin * 0.5 | ||
| 231 | Layout.maximumWidth: gridEntry.width * 0.9 | 245 | Layout.maximumWidth: gridEntry.width * 0.9 | ||
| 232 | Layout.minimumWidth: Layout.maximumWidth | 246 | Layout.minimumWidth: Layout.maximumWidth | ||
| 233 | Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom | 247 | Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom | ||
| 248 | Layout.bottomMargin: delegateDisplaySecondaryText ? 0 : elisaTheme.layoutVerticalMargin | ||||
| 234 | 249 | | |||
| 235 | elide: Text.ElideRight | 250 | elide: Text.ElideRight | ||
| 236 | } | 251 | } | ||
| 237 | 252 | | |||
| 238 | LabelWithToolTip { | 253 | LabelWithToolTip { | ||
| 239 | id: secondaryLabel | 254 | id: secondaryLabel | ||
| 240 | 255 | | |||
| 241 | font.weight: Font.Light | 256 | font.weight: Font.Light | ||
| 242 | color: myPalette.text | 257 | color: myPalette.text | ||
| 243 | 258 | | |||
| 244 | // FIXME: Center-aligned text looks better overall, but | 259 | // FIXME: Center-aligned text looks better overall, but | ||
| 245 | // sometimes results in font kerning issues | 260 | // sometimes results in font kerning issues | ||
| 246 | // See https://bugreports.qt.io/browse/QTBUG-49646 | 261 | // See https://bugreports.qt.io/browse/QTBUG-49646 | ||
| 247 | horizontalAlignment: Text.AlignHCenter | 262 | horizontalAlignment: Text.AlignHCenter | ||
| 248 | 263 | | |||
| 264 | Layout.bottomMargin: elisaTheme.layoutVerticalMargin | ||||
| 249 | Layout.maximumWidth: gridEntry.width * 0.9 | 265 | Layout.maximumWidth: gridEntry.width * 0.9 | ||
| 250 | Layout.minimumWidth: Layout.maximumWidth | 266 | Layout.minimumWidth: Layout.maximumWidth | ||
| 251 | Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom | 267 | Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom | ||
| 252 | 268 | | |||
| 253 | visible: delegateDisplaySecondaryText | 269 | visible: delegateDisplaySecondaryText | ||
| 254 | 270 | | |||
| 255 | elide: Text.ElideRight | 271 | elide: Text.ElideRight | ||
| 256 | } | 272 | } | ||
| 257 | } | 273 | } | ||
| 258 | } | 274 | } | ||
| 259 | 275 | | |||
| 260 | Item { | 276 | Item { | ||
| 261 | Layout.fillHeight: true | 277 | Layout.fillHeight: true | ||
| 262 | } | 278 | } | ||
| 263 | } | 279 | } | ||
| 264 | 280 | | |||
| 265 | states: [ | 281 | states: [ | ||
| 266 | State { | 282 | State { | ||
| 267 | name: 'notSelected' | 283 | name: 'notSelected' | ||
| 268 | when: !gridEntry.activeFocus && !hoverHandle.containsMouse | 284 | when: !gridEntry.activeFocus && !hoverHandle.containsMouse && !gridEntry.isSelected | ||
| 285 | PropertyChanges { | ||||
| 286 | target: stateIndicator | ||||
| 287 | color: 'transparent' | ||||
| 288 | } | ||||
| 289 | PropertyChanges { | ||||
| 290 | target: stateIndicator | ||||
| 291 | opacity: 1.0 | ||||
| 292 | } | ||||
| 269 | PropertyChanges { | 293 | PropertyChanges { | ||
| 270 | target: hoverLoader | 294 | target: hoverLoader | ||
| 271 | active: false | 295 | active: false | ||
| 272 | } | 296 | } | ||
| 273 | PropertyChanges { | 297 | PropertyChanges { | ||
| 274 | target: hoverLoader | 298 | target: hoverLoader | ||
| 275 | opacity: 0.0 | 299 | opacity: 0.0 | ||
| 276 | } | 300 | } | ||
| 277 | }, | 301 | }, | ||
| 278 | State { | 302 | State { | ||
| 303 | name: 'hovered' | ||||
| 304 | when: hoverHandle.containsMouse && !gridEntry.activeFocus | ||||
| 305 | PropertyChanges { | ||||
| 306 | target: stateIndicator | ||||
| 307 | color: myPalette.highlight | ||||
| 308 | } | ||||
| 309 | PropertyChanges { | ||||
| 310 | target: stateIndicator | ||||
| 311 | opacity: 0.2 | ||||
| 312 | } | ||||
| 313 | PropertyChanges { | ||||
| 314 | target: hoverLoader | ||||
| 315 | active: true | ||||
| 316 | } | ||||
| 317 | PropertyChanges { | ||||
| 318 | target: hoverLoader | ||||
| 319 | opacity: 1.0 | ||||
| 320 | } | ||||
| 321 | }, | ||||
| 322 | State { | ||||
| 323 | name: 'selected' | ||||
| 324 | when: gridEntry.isSelected && !gridEntry.activeFocus | ||||
| 325 | PropertyChanges { | ||||
| 326 | target: stateIndicator | ||||
| 327 | color: myPalette.mid | ||||
| 328 | } | ||||
| 329 | PropertyChanges { | ||||
| 330 | target: stateIndicator | ||||
| 331 | opacity: 0.6 | ||||
| 332 | } | ||||
| 333 | PropertyChanges { | ||||
| 334 | target: hoverLoader | ||||
| 335 | active: false | ||||
| 336 | } | ||||
| 337 | PropertyChanges { | ||||
| 338 | target: hoverLoader | ||||
| 339 | opacity: 0. | ||||
| 340 | } | ||||
| 341 | }, | ||||
| 342 | State { | ||||
| 279 | name: 'hoveredOrSelected' | 343 | name: 'hoveredOrSelected' | ||
| 280 | when: gridEntry.activeFocus || hoverHandle.containsMouse | 344 | when: gridEntry.activeFocus | ||
| 345 | PropertyChanges { | ||||
| 346 | target: stateIndicator | ||||
| 347 | color: myPalette.highlight | ||||
| 348 | } | ||||
| 349 | PropertyChanges { | ||||
| 350 | target: stateIndicator | ||||
| 351 | opacity: 0.6 | ||||
| 352 | } | ||||
| 281 | PropertyChanges { | 353 | PropertyChanges { | ||
| 282 | target: hoverLoader | 354 | target: hoverLoader | ||
| 283 | active: true | 355 | active: true | ||
| 284 | } | 356 | } | ||
| 285 | PropertyChanges { | 357 | PropertyChanges { | ||
| 286 | target: hoverLoader | 358 | target: hoverLoader | ||
| 287 | opacity: 1.0 | 359 | opacity: 1.0 | ||
| 288 | } | 360 | } | ||
| 289 | } | 361 | } | ||
| 290 | ] | 362 | ] | ||
| 291 | 363 | | |||
| 292 | transitions: [ | 364 | transitions: [ | ||
| 293 | Transition { | 365 | Transition { | ||
| 294 | to: 'hoveredOrSelected' | | |||
| 295 | SequentialAnimation { | 366 | SequentialAnimation { | ||
| 296 | PropertyAction { | 367 | PropertyAction { | ||
| 297 | properties: "active" | 368 | properties: "active" | ||
| 298 | } | 369 | } | ||
| 370 | ParallelAnimation { | ||||
| 299 | NumberAnimation { | 371 | NumberAnimation { | ||
| 300 | properties: "opacity" | 372 | properties: "opacity" | ||
| 301 | easing.type: Easing.InOutQuad | 373 | easing.type: Easing.InOutQuad | ||
| 302 | duration: 100 | 374 | duration: 300 | ||
| 303 | } | | |||
| 304 | } | 375 | } | ||
| 305 | }, | 376 | ColorAnimation { | ||
| 306 | Transition { | 377 | properties: "color" | ||
| 307 | to: 'notSelected' | | |||
| 308 | SequentialAnimation { | | |||
| 309 | NumberAnimation { | | |||
| 310 | properties: "opacity" | | |||
| 311 | easing.type: Easing.InOutQuad | 378 | easing.type: Easing.InOutQuad | ||
| 312 | duration: 100 | 379 | duration: 300 | ||
| 313 | } | 380 | } | ||
| 314 | PropertyAction { | | |||
| 315 | properties: "active" | | |||
| 316 | } | 381 | } | ||
| 317 | } | 382 | } | ||
| 318 | } | 383 | } | ||
| 319 | ] | 384 | ] | ||
| 320 | } | 385 | } | ||