on xenial help sign in
add blur and darkening to wallpaper when in spread
commit3863244c92955d1ce00d26088cb66cd4a9fea9a3 authorMichael Zanetti <michael.zanetti@canonical.com> dateWed 26 Oct 2016, 12:53 (10 years ago) parentbc584a7
2 files changed+33−6
qml/Components/BlurLayer.qml+9−5 qml/Stage/Stage.qml+24−1
qml/Components/BlurLayer.qml+9−5
@@ -21,8 +21,9 @@ Item {
2121 id: root
2222
2323 property alias source: shaderEffectSource.sourceItem
24− property alias saturation: desaturateEffect.saturationValue
25− property alias blurRadius: fastBlur.radius
24+ property real saturation: 1
25+ property real brightness: 1
26+ property real blurRadius: 0
2627
2728 readonly property alias ready: shaderEffectSource.ready
2829
@@ -30,7 +31,8 @@ Item {
3031 id: desaturateEffect
3132 anchors.fill: root
3233
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)
3436
3537 property variant source: ShaderEffectSource {
3638 id: shaderEffectSource
@@ -50,12 +52,14 @@ Item {
5052 varying highp vec2 qt_TexCoord0;
5153 uniform sampler2D source;
5254 uniform lowp float saturationValue;
55+ uniform lowp float brightnessValue;
5356 void main(void)
5457 {
5558 highp vec4 sourceColor = texture2D(source, qt_TexCoord0);
5659 highp vec4 scaledColor = sourceColor * vec4(0.3, 0.59, 0.11, 1.0);
5760 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);
5963 }"
6064 }
6165
@@ -64,6 +68,6 @@ Item {
6468 anchors.fill: parent
6569 source: desaturateEffect
6670 visible: radius > 0
67− radius: 0
71+ radius: Math.max(root.blurRadius, 0)
6872 }
6973}
qml/Stage/Stage.qml+24−1
@@ -409,12 +409,20 @@ FocusScope {
409409 PropertyChanges { target: hoverMouseArea; enabled: true }
410410 PropertyChanges { target: rightEdgeDragArea; enabled: false }
411411 PropertyChanges { target: cancelSpreadMouseArea; enabled: true }
412+ PropertyChanges { target: blurLayer; visible: true; blurRadius: 32; brightness: .65 }
412413 },
413414 State {
414415 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+ }
415422 },
416423 State {
417424 name: "sideStagedRightEdge"; when: (rightEdgeDragArea.dragging || edgeBarrier.progress > 0) && root.mode == "stagedWithSideStage"
425+ extend: "stagedRightEdge"
418426 PropertyChanges {
419427 target: sideStage
420428 opacity: priv.sideStageDelegate.x === sideStage.x ? 1 : 0
@@ -423,9 +431,16 @@ FocusScope {
423431 },
424432 State {
425433 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+ }
426440 },
427441 State {
428442 name: "staged"; when: root.mode === "staged"
443+ PropertyChanges { target: wallpaper; visible: false }
429444 },
430445 State {
431446 name: "stagedWithSideStage"; when: root.mode === "stagedWithSideStage"
@@ -440,6 +455,7 @@ FocusScope {
440455 Transition {
441456 from: "stagedRightEdge,sideStagedRightEdge,windowedRightEdge"; to: "spread"
442457 PropertyAction { target: spreadItem; property: "highlightedIndex"; value: -1 }
458+ PropertyAnimation { target: blurLayer; properties: "brightness,blurRadius"; duration: priv.animationDuration }
443459 },
444460 Transition {
445461 to: "spread"
@@ -494,6 +510,13 @@ FocusScope {
494510 z: -2
495511 }
496512
513+ BlurLayer {
514+ id: blurLayer
515+ anchors.fill: parent
516+ source: wallpaper
517+ visible: false
518+ }
519+
497520 Spread {
498521 id: spreadItem
499522 objectName: "spreadItem"
@@ -1730,7 +1753,7 @@ FocusScope {
17301753 property var gesturePoints: []
17311754 property bool cancelled: false
17321755
1733− property real progress: dragging ? -touchPosition.x / root.width : 0
1756+ property real progress: -touchPosition.x / root.width
17341757 onProgressChanged: {
17351758 if (dragging) {
17361759 draggedProgress = progress;