on xenial help sign in
Added blur and darkening to wallpaper while in spread
6813eb0Michael Zanetti
qml/Components/BlurLayer.qml+10−40
@@ -20,50 +20,20 @@ import QtGraphicalEffects 1.0
20Item {
20Item {
21 id: root
21 id: root
22
22
23− property alias source: shaderEffectSource.sourceItem
23+ property alias source: fastBlur.source
24− property alias saturation: desaturateEffect.saturationValue
24+ property real brightness: 1
25− property alias blurRadius: fastBlur.radius
25+ property real blurRadius: 0
26−
27− readonly property alias ready: shaderEffectSource.ready
28−
29− ShaderEffect {
30− id: desaturateEffect
31− anchors.fill: root
32−
33− property real saturationValue: 1
34−
35− property variant source: ShaderEffectSource {
36− id: shaderEffectSource
37− hideSource: root.visible
38− live: !root.visible
39− property bool ready: false;
40− onLiveChanged: {
41− if (!live) {
42− ready = false;
43− scheduleUpdate();
44− }
45− }
46− onScheduledUpdateCompleted: ready = true;
47− }
48−
49− fragmentShader: "
50− varying highp vec2 qt_TexCoord0;
51− uniform sampler2D source;
52− uniform lowp float saturationValue;
53− void main(void)
54− {
55− highp vec4 sourceColor = texture2D(source, qt_TexCoord0);
56− highp vec4 scaledColor = sourceColor * vec4(0.3, 0.59, 0.11, 1.0);
57− lowp float luminance = scaledColor.r + scaledColor.g + scaledColor.b ;
58− gl_FragColor = mix(vec4(luminance, luminance, luminance, sourceColor.a), sourceColor, saturationValue);
59− }"
60− }
61
26
62 FastBlur {
27 FastBlur {
63 id: fastBlur
28 id: fastBlur
64 anchors.fill: parent
29 anchors.fill: parent
65− source: desaturateEffect
66 visible: radius > 0
30 visible: radius > 0
67− radius: 0
31+ radius: Math.max(root.blurRadius, 0)
32+ }
33+
34+ Rectangle {
35+ anchors.fill: parent
36+ color: "black"
37+ opacity: 1 - root.brightness
68 }
38 }
69}
39}
qml/Stage/Stage.qml+28−2
@@ -54,7 +54,7 @@ FocusScope {
54
54
55 // Used by the tutorial code
55 // Used by the tutorial code
56 readonly property bool spreadShown: state == "spread"
56 readonly property bool spreadShown: state == "spread"
57− readonly property real rightEdgeDragProgress: rightEdgeDragArea.progress // How far left the stage has been dragged
57+ readonly property real rightEdgeDragProgress: rightEdgeDragArea.dragging ? rightEdgeDragArea.progress : 0 // How far left the stage has been dragged
58
58
59 // used by the snap windows (edge maximize) feature
59 // used by the snap windows (edge maximize) feature
60 readonly property alias previewRectangle: fakeRectangle
60 readonly property alias previewRectangle: fakeRectangle
@@ -409,12 +409,22 @@ FocusScope {
409 PropertyChanges { target: hoverMouseArea; enabled: true }
409 PropertyChanges { target: hoverMouseArea; enabled: true }
410 PropertyChanges { target: rightEdgeDragArea; enabled: false }
410 PropertyChanges { target: rightEdgeDragArea; enabled: false }
411 PropertyChanges { target: cancelSpreadMouseArea; enabled: true }
411 PropertyChanges { target: cancelSpreadMouseArea; enabled: true }
412+ PropertyChanges { target: blurLayer; visible: true; blurRadius: 32; brightness: .65; opacity: 1 }
413+ PropertyChanges { target: wallpaper; visible: false }
412 },
414 },
413 State {
415 State {
414 name: "stagedRightEdge"; when: (rightEdgeDragArea.dragging || edgeBarrier.progress > 0) && root.mode == "staged"
416 name: "stagedRightEdge"; when: (rightEdgeDragArea.dragging || edgeBarrier.progress > 0) && root.mode == "staged"
417+ PropertyChanges {
418+ target: blurLayer;
419+ visible: true;
420+ blurRadius: 32
421+ brightness: .65
422+ opacity: 1
423+ }
415 },
424 },
416 State {
425 State {
417 name: "sideStagedRightEdge"; when: (rightEdgeDragArea.dragging || edgeBarrier.progress > 0) && root.mode == "stagedWithSideStage"
426 name: "sideStagedRightEdge"; when: (rightEdgeDragArea.dragging || edgeBarrier.progress > 0) && root.mode == "stagedWithSideStage"
427+ extend: "stagedRightEdge"
418 PropertyChanges {
428 PropertyChanges {
419 target: sideStage
429 target: sideStage
420 opacity: priv.sideStageDelegate.x === sideStage.x ? 1 : 0
430 opacity: priv.sideStageDelegate.x === sideStage.x ? 1 : 0
@@ -423,9 +433,17 @@ FocusScope {
423 },
433 },
424 State {
434 State {
425 name: "windowedRightEdge"; when: (rightEdgeDragArea.dragging || edgeBarrier.progress > 0) && root.mode == "windowed"
435 name: "windowedRightEdge"; when: (rightEdgeDragArea.dragging || edgeBarrier.progress > 0) && root.mode == "windowed"
436+ PropertyChanges {
437+ target: blurLayer;
438+ visible: true
439+ blurRadius: 32
440+ brightness: .65
441+ opacity: MathUtils.linearAnimation(spreadItem.rightEdgeBreakPoint, 1, 0, 1, Math.max(rightEdgeDragArea.progress, edgeBarrier.progress))
442+ }
426 },
443 },
427 State {
444 State {
428 name: "staged"; when: root.mode === "staged"
445 name: "staged"; when: root.mode === "staged"
446+ PropertyChanges { target: wallpaper; visible: false }
429 },
447 },
430 State {
448 State {
431 name: "stagedWithSideStage"; when: root.mode === "stagedWithSideStage"
449 name: "stagedWithSideStage"; when: root.mode === "stagedWithSideStage"
@@ -440,6 +458,7 @@ FocusScope {
440 Transition {
458 Transition {
441 from: "stagedRightEdge,sideStagedRightEdge,windowedRightEdge"; to: "spread"
459 from: "stagedRightEdge,sideStagedRightEdge,windowedRightEdge"; to: "spread"
442 PropertyAction { target: spreadItem; property: "highlightedIndex"; value: -1 }
460 PropertyAction { target: spreadItem; property: "highlightedIndex"; value: -1 }
461+ PropertyAnimation { target: blurLayer; properties: "brightness,blurRadius"; duration: priv.animationDuration }
443 },
462 },
444 Transition {
463 Transition {
445 to: "spread"
464 to: "spread"
@@ -494,6 +513,13 @@ FocusScope {
494 z: -2
513 z: -2
495 }
514 }
496
515
516+ BlurLayer {
517+ id: blurLayer
518+ anchors.fill: parent
519+ source: wallpaper
520+ visible: false
521+ }
522+
497 Spread {
523 Spread {
498 id: spreadItem
524 id: spreadItem
499 objectName: "spreadItem"
525 objectName: "spreadItem"
@@ -1730,7 +1756,7 @@ FocusScope {
1730 property var gesturePoints: []
1756 property var gesturePoints: []
1731 property bool cancelled: false
1757 property bool cancelled: false
1732
1758
1733− property real progress: dragging ? -touchPosition.x / root.width : 0
1759+ property real progress: -touchPosition.x / root.width
1734 onProgressChanged: {
1760 onProgressChanged: {
1735 if (dragging) {
1761 if (dragging) {
1736 draggedProgress = progress;
1762 draggedProgress = progress;