on xenial help sign in
add blur and darkening to wallpaper when in spread
3863244Michael Zanetti
qml/Components/BlurLayer.qml+9−5
@@ -21,8 +21,9 @@ Item {
21 id: root
21 id: root
22
22
23 property alias source: shaderEffectSource.sourceItem
23 property alias source: shaderEffectSource.sourceItem
24− property alias saturation: desaturateEffect.saturationValue
24+ property real saturation: 1
25+ property real brightness: 1
25− property alias blurRadius: fastBlur.radius
26+ property real blurRadius: 0
26
27
27 readonly property alias ready: shaderEffectSource.ready
28 readonly property alias ready: shaderEffectSource.ready
28
29
@@ -30,7 +31,8 @@ Item {
30 id: desaturateEffect
31 id: desaturateEffect
31 anchors.fill: root
32 anchors.fill: root
32
33
33− property real saturationValue: 1
34+ property real saturationValue: Math.min(Math.max(root.saturation, 0), 1)
35+ property real brightnessValue: Math.min(Math.max(root.brightness, 0), 1)
34
36
35 property variant source: ShaderEffectSource {
37 property variant source: ShaderEffectSource {
36 id: shaderEffectSource
38 id: shaderEffectSource
@@ -50,12 +52,14 @@ Item {
50 varying highp vec2 qt_TexCoord0;
52 varying highp vec2 qt_TexCoord0;
51 uniform sampler2D source;
53 uniform sampler2D source;
52 uniform lowp float saturationValue;
54 uniform lowp float saturationValue;
55+ uniform lowp float brightnessValue;
53 void main(void)
56 void main(void)
54 {
57 {
55 highp vec4 sourceColor = texture2D(source, qt_TexCoord0);
58 highp vec4 sourceColor = texture2D(source, qt_TexCoord0);
56 highp vec4 scaledColor = sourceColor * vec4(0.3, 0.59, 0.11, 1.0);
59 highp vec4 scaledColor = sourceColor * vec4(0.3, 0.59, 0.11, 1.0);
57 lowp float luminance = scaledColor.r + scaledColor.g + scaledColor.b ;
60 lowp float luminance = scaledColor.r + scaledColor.g + scaledColor.b ;
58− gl_FragColor = mix(vec4(luminance, luminance, luminance, sourceColor.a), sourceColor, saturationValue);
61+ highp vec4 tmp = mix(vec4(luminance, luminance, luminance, sourceColor.a), sourceColor, saturationValue);
62+ gl_FragColor = mix(vec4(0, 0, 0, 1), tmp, brightnessValue);
59 }"
63 }"
60 }
64 }
61
65
@@ -64,6 +68,6 @@ Item {
64 anchors.fill: parent
68 anchors.fill: parent
65 source: desaturateEffect
69 source: desaturateEffect
66 visible: radius > 0
70 visible: radius > 0
67− radius: 0
71+ radius: Math.max(root.blurRadius, 0)
68 }
72 }
69}
73}
qml/Stage/Stage.qml+24−1
@@ -409,12 +409,20 @@ 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 }
412 },
413 },
413 State {
414 State {
414 name: "stagedRightEdge"; when: (rightEdgeDragArea.dragging || edgeBarrier.progress > 0) && root.mode == "staged"
415 name: "stagedRightEdge"; when: (rightEdgeDragArea.dragging || edgeBarrier.progress > 0) && root.mode == "staged"
416+ PropertyChanges {
417+ target: blurLayer;
418+ visible: true;
419+ blurRadius: 32
420+ brightness: MathUtils.linearAnimation(spreadItem.rightEdgeBreakPoint, 1, 0, .65, Math.max(rightEdgeDragArea.progress, edgeBarrier.progress))
421+ }
415 },
422 },
416 State {
423 State {
417 name: "sideStagedRightEdge"; when: (rightEdgeDragArea.dragging || edgeBarrier.progress > 0) && root.mode == "stagedWithSideStage"
424 name: "sideStagedRightEdge"; when: (rightEdgeDragArea.dragging || edgeBarrier.progress > 0) && root.mode == "stagedWithSideStage"
425+ extend: "stagedRightEdge"
418 PropertyChanges {
426 PropertyChanges {
419 target: sideStage
427 target: sideStage
420 opacity: priv.sideStageDelegate.x === sideStage.x ? 1 : 0
428 opacity: priv.sideStageDelegate.x === sideStage.x ? 1 : 0
@@ -423,9 +431,16 @@ FocusScope {
423 },
431 },
424 State {
432 State {
425 name: "windowedRightEdge"; when: (rightEdgeDragArea.dragging || edgeBarrier.progress > 0) && root.mode == "windowed"
433 name: "windowedRightEdge"; when: (rightEdgeDragArea.dragging || edgeBarrier.progress > 0) && root.mode == "windowed"
434+ PropertyChanges {
435+ target: blurLayer;
436+ visible: true
437+ blurRadius: MathUtils.linearAnimation(spreadItem.rightEdgeBreakPoint, 1, 0, 32, Math.max(rightEdgeDragArea.progress, edgeBarrier.progress))
438+ brightness: MathUtils.linearAnimation(spreadItem.rightEdgeBreakPoint, 1, 1, .65, Math.max(rightEdgeDragArea.progress, edgeBarrier.progress))
439+ }
426 },
440 },
427 State {
441 State {
428 name: "staged"; when: root.mode === "staged"
442 name: "staged"; when: root.mode === "staged"
443+ PropertyChanges { target: wallpaper; visible: false }
429 },
444 },
430 State {
445 State {
431 name: "stagedWithSideStage"; when: root.mode === "stagedWithSideStage"
446 name: "stagedWithSideStage"; when: root.mode === "stagedWithSideStage"
@@ -440,6 +455,7 @@ FocusScope {
440 Transition {
455 Transition {
441 from: "stagedRightEdge,sideStagedRightEdge,windowedRightEdge"; to: "spread"
456 from: "stagedRightEdge,sideStagedRightEdge,windowedRightEdge"; to: "spread"
442 PropertyAction { target: spreadItem; property: "highlightedIndex"; value: -1 }
457 PropertyAction { target: spreadItem; property: "highlightedIndex"; value: -1 }
458+ PropertyAnimation { target: blurLayer; properties: "brightness,blurRadius"; duration: priv.animationDuration }
443 },
459 },
444 Transition {
460 Transition {
445 to: "spread"
461 to: "spread"
@@ -494,6 +510,13 @@ FocusScope {
494 z: -2
510 z: -2
495 }
511 }
496
512
513+ BlurLayer {
514+ id: blurLayer
515+ anchors.fill: parent
516+ source: wallpaper
517+ visible: false
518+ }
519+
497 Spread {
520 Spread {
498 id: spreadItem
521 id: spreadItem
499 objectName: "spreadItem"
522 objectName: "spreadItem"
@@ -1730,7 +1753,7 @@ FocusScope {
1730 property var gesturePoints: []
1753 property var gesturePoints: []
1731 property bool cancelled: false
1754 property bool cancelled: false
1732
1755
1733− property real progress: dragging ? -touchPosition.x / root.width : 0
1756+ property real progress: -touchPosition.x / root.width
1734 onProgressChanged: {
1757 onProgressChanged: {
1735 if (dragging) {
1758 if (dragging) {
1736 draggedProgress = progress;
1759 draggedProgress = progress;