Merge lp:~mzanetti/unity8/spread-fixes into lp:unity8

[Michael Zanetti]

Fixes in the spread after design review

- add a minimum width for the tile info to prevent it going to ...
- tiles should not be interactive any more when moving to spread
- add some resistance to the drag when an app is not closeable
- allow rotating when there is no app focused
- add a fade in animation to the icons in the spread
- fix spread looking out of place when there's only one item

 * Are there any related MPs required for this MP to build/function as expected? Please list.
nope
 * Did you perform an exploratory manual test run of your code change and any related functionality?
yip yip
 * If you changed the packaging (debian), did you subscribe the ubuntu-unity team to this MP?
nope
 * If you changed the UI, has there been a design review?
yip yip

[Lukáš Tinkl (lukas-kde)]

Nice, looks good

* Did you perform an exploratory manual test run of the code change and any related functionality?

Yes

* Did CI run pass? If not, please explain why.

Not yet, dunno why, will wait with top approval

review: Approve

[Unity8 CI Bot (unity8-ci-bot)]

FAILED: Continuous integration, rev:2680
https://unity8-jenkins.ubuntu.com/job/lp-unity8-ci/2471/
Executed test runs:
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build/3258
    UNSTABLE: https://unity8-jenkins.ubuntu.com/job/test-0-autopkgtest/label=amd64,release=vivid+overlay,testname=qmluitests.sh/1865
    UNSTABLE: https://unity8-jenkins.ubuntu.com/job/test-0-autopkgtest/label=amd64,release=xenial+overlay,testname=qmluitests.sh/1865
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/test-0-autopkgtest/label=amd64,release=zesty,testname=qmluitests.sh/1865
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-0-fetch/3286
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=vivid+overlay/3140
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=vivid+overlay/3140/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=xenial+overlay/3140
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=xenial+overlay/3140/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=zesty/3140
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=zesty/3140/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=vivid+overlay/3140
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=vivid+overlay/3140/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=xenial+overlay/3140
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=xenial+overlay/3140/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=zesty/3140
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=zesty/3140/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=vivid+overlay/3140
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=vivid+overlay/3140/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=xenial+overlay/3140
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=xenial+overlay/3140/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=zesty/3140
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=zesty/3140/artifact/output/*zip*/output.zip

Click here to trigger a rebuild:
https://unity8-jenkins.ubuntu.com/job/lp-unity8-ci/2471/rebuild

review: Needs Fixing (continuous-integration)

[Lukáš Tinkl (lukas-kde)]

CI is fine, unrelated failures, passes locally just fine

review: Approve

[lp:~mzanetti/unity8/spread-fixes]

2681. By Michael Zanetti on 2016-11-07

cleanup warning, add a comment on why

2682. By Michael Zanetti on 2016-11-07

resetting the spread position should happen on tablet too

2683. By Michael Zanetti on 2016-11-07

always close the spread on left edge swipe

2684. By Michael Zanetti on 2016-11-07

nicer code

[Lukáš Tinkl (lukas-kde)]

Yup, still looking good; if design wants to get these fixes in, I'm fine with it

review: Approve

[lp:~mzanetti/unity8/spread-fixes]

2685. By Michael Zanetti on 2016-11-08

merge with spread-blur

2686. By Michael Zanetti on 2016-11-09

merge prereq

Unmerged revisions

=== modified file 'qml/Components/BlurLayer.qml'
--- qml/Components/BlurLayer.qml	2015-09-18 11:39:22 +0000
+++ qml/Components/BlurLayer.qml	2016-11-08 11:03:07 +0000
@@ -21,8 +21,9 @@
     id: root
 
     property alias source: shaderEffectSource.sourceItem
-    property alias saturation: desaturateEffect.saturationValue
-    property alias blurRadius: fastBlur.radius
+    property real saturation: 1
+    property real brightness: 1
+    property real blurRadius: 0
 
     readonly property alias ready: shaderEffectSource.ready
 
@@ -30,7 +31,8 @@
         id: desaturateEffect
         anchors.fill: root
 
-        property real saturationValue: 1
+        property real saturationValue: Math.min(Math.max(root.saturation, 0), 1)
+        property real brightnessValue: Math.min(Math.max(root.brightness, 0), 1)
 
         property variant source: ShaderEffectSource {
             id: shaderEffectSource
@@ -50,12 +52,14 @@
             varying highp vec2 qt_TexCoord0;
             uniform sampler2D source;
             uniform lowp float saturationValue;
+            uniform lowp float brightnessValue;
             void main(void)
             {
                 highp vec4 sourceColor = texture2D(source, qt_TexCoord0);
                 highp vec4 scaledColor = sourceColor * vec4(0.3, 0.59, 0.11, 1.0);
                 lowp float luminance = scaledColor.r + scaledColor.g + scaledColor.b ;
-                gl_FragColor = mix(vec4(luminance, luminance, luminance, sourceColor.a), sourceColor, saturationValue);
+                highp vec4 tmp = mix(vec4(luminance, luminance, luminance, sourceColor.a), sourceColor, saturationValue);
+                gl_FragColor = mix(vec4(0, 0, 0, 1), tmp, brightnessValue);
             }"
     }
 
@@ -64,6 +68,6 @@
         anchors.fill: parent
         source: desaturateEffect
         visible: radius > 0
-        radius: 0
+        radius: Math.max(root.blurRadius, 0)
     }
 }

=== modified file 'qml/Shell.qml'
--- qml/Shell.qml	2016-10-03 11:15:27 +0000
+++ qml/Shell.qml	2016-11-08 11:03:07 +0000
@@ -442,9 +442,10 @@
         }
 
         if (!greeter.locked && tutorial.launcherLongSwipeEnabled
-            && ApplicationManager.focusedApplicationId != "unity8-dash") {
+            && (ApplicationManager.focusedApplicationId != "unity8-dash" || stage.spreadShown)) {
             ApplicationManager.requestFocusApplication("unity8-dash")
             launcher.fadeOut();
+            stage.closeSpread();
         }
     }
 

=== modified file 'qml/Stage/Spread/Spread.qml'
--- qml/Stage/Spread/Spread.qml	2016-09-20 12:03:51 +0000
+++ qml/Stage/Spread/Spread.qml	2016-11-08 11:03:07 +0000
@@ -91,7 +91,7 @@
 
     readonly property real visibleItemCount: (spreadWidth / spreadItemWidth) / (1 - itemOverlap)
 
-    readonly property real spreadTotalWidth: totalItemCount * spreadWidth / visibleItemCount
+    readonly property real spreadTotalWidth: Math.max(2,totalItemCount) * spreadWidth / visibleItemCount
 
     readonly property real centeringOffset: Math.max(spreadWidth - spreadTotalWidth ,0) / (2 * spreadWidth)
 

=== modified file 'qml/Stage/Spread/SpreadDelegateInputArea.qml'
--- qml/Stage/Spread/SpreadDelegateInputArea.qml	2016-10-11 21:48:40 +0000
+++ qml/Stage/Spread/SpreadDelegateInputArea.qml	2016-11-08 11:03:07 +0000
@@ -119,7 +119,13 @@
                 }
             }
 
-            d.distance = tp.y - tp.startY - offset
+            if (root.closeable) {
+                d.distance = tp.y - tp.startY - offset
+            } else {
+                var value = tp.y - tp.startY - offset;
+                d.distance = Math.sqrt(Math.abs(value)) * (value < 0 ? -1 : 1) * 3
+            }
+
             d.pushDragEvent(tp);
         }
 

=== modified file 'qml/Stage/Stage.qml'
--- qml/Stage/Stage.qml	2016-10-24 11:34:20 +0000
+++ qml/Stage/Stage.qml	2016-11-08 11:03:07 +0000
@@ -53,18 +53,18 @@
     property real leftEdgeDragProgress: 0
 
     // Used by the tutorial code
-    readonly property bool spreadShown: state == "spread"
-    readonly property real rightEdgeDragProgress: rightEdgeDragArea.progress // How far left the stage has been dragged
+    readonly property real rightEdgeDragProgress: rightEdgeDragArea.dragging ? rightEdgeDragArea.progress : 0 // How far left the stage has been dragged
 
     // used by the snap windows (edge maximize) feature
     readonly property alias previewRectangle: fakeRectangle
 
+    readonly property bool spreadShown: state == "spread"
     readonly property var mainApp: priv.focusedAppDelegate ? priv.focusedAppDelegate.application : null
 
     // application windows never rotate independently
     property int mainAppWindowOrientationAngle: shellOrientationAngle
 
-    property bool orientationChangesEnabled: priv.focusedAppDelegate && priv.focusedAppDelegate.orientationChangesEnabled
+    property bool orientationChangesEnabled: !priv.focusedAppDelegate || priv.focusedAppDelegate.orientationChangesEnabled
 
     property int supportedOrientations: {
         if (mainApp) {
@@ -105,9 +105,13 @@
         edgeBarrier.push(amount);
     }
 
+    function closeSpread() {
+        priv.goneToSpread = false;
+    }
+
     onSpreadEnabledChanged: {
-        if (!spreadEnabled && root.state == "spread") {
-            priv.goneToSpread = false;
+        if (!spreadEnabled && spreadShown) {
+            closeSpread();
         }
     }
 
@@ -409,12 +413,20 @@
             PropertyChanges { target: hoverMouseArea; enabled: true }
             PropertyChanges { target: rightEdgeDragArea; enabled: false }
             PropertyChanges { target: cancelSpreadMouseArea; enabled: true }
+            PropertyChanges { target: blurLayer; visible: true; blurRadius: 32; brightness: .65 }
         },
         State {
             name: "stagedRightEdge"; when: (rightEdgeDragArea.dragging || edgeBarrier.progress > 0) && root.mode == "staged"
+            PropertyChanges {
+                target: blurLayer;
+                visible: true;
+                blurRadius: 32
+                brightness: MathUtils.linearAnimation(spreadItem.rightEdgeBreakPoint, 1, 0, .65, Math.max(rightEdgeDragArea.progress, edgeBarrier.progress))
+            }
         },
         State {
             name: "sideStagedRightEdge"; when: (rightEdgeDragArea.dragging || edgeBarrier.progress > 0) && root.mode == "stagedWithSideStage"
+            extend: "stagedRightEdge"
             PropertyChanges {
                 target: sideStage
                 opacity: priv.sideStageDelegate.x === sideStage.x ? 1 : 0
@@ -423,9 +435,16 @@
         },
         State {
             name: "windowedRightEdge"; when: (rightEdgeDragArea.dragging || edgeBarrier.progress > 0) && root.mode == "windowed"
+            PropertyChanges {
+                target: blurLayer;
+                visible: true
+                blurRadius: MathUtils.linearAnimation(spreadItem.rightEdgeBreakPoint, 1, 0, 32, Math.max(rightEdgeDragArea.progress, edgeBarrier.progress))
+                brightness: MathUtils.linearAnimation(spreadItem.rightEdgeBreakPoint, 1, 1, .65, Math.max(rightEdgeDragArea.progress, edgeBarrier.progress))
+            }
         },
         State {
             name: "staged"; when: root.mode === "staged"
+            PropertyChanges { target: wallpaper; visible: false }
         },
         State {
             name: "stagedWithSideStage"; when: root.mode === "stagedWithSideStage"
@@ -440,6 +459,7 @@
         Transition {
             from: "stagedRightEdge,sideStagedRightEdge,windowedRightEdge"; to: "spread"
             PropertyAction { target: spreadItem; property: "highlightedIndex"; value: -1 }
+            PropertyAnimation { target: blurLayer; properties: "brightness,blurRadius"; duration: priv.animationDuration }
         },
         Transition {
             to: "spread"
@@ -462,7 +482,7 @@
             }
         },
         Transition {
-            to: "stagedRightEdge"
+            to: "stagedRightEdge,sideStagedRightEdge"
             PropertyAction { target: floatingFlickable; property: "contentX"; value: 0 }
         },
         Transition {
@@ -494,6 +514,13 @@
             z: -2
         }
 
+        BlurLayer {
+            id: blurLayer
+            anchors.fill: parent
+            source: wallpaper
+            visible: false
+        }
+
         Spread {
             id: spreadItem
             objectName: "spreadItem"
@@ -1052,6 +1079,7 @@
                             showHighlight: spreadItem.highlightedIndex === index
                             darkening: spreadItem.highlightedIndex >= 0
                             anchors.topMargin: dragArea.distance
+                            interactive: false
                         }
                         PropertyChanges {
                             target: appDelegate
@@ -1091,7 +1119,10 @@
                             scaleToPreviewSize: spreadItem.stackHeight
                             scaleToPreviewProgress: stagedRightEdgeMaths.scaleToPreviewProgress
                             shadowOpacity: .3
+                            interactive: false
                         }
+                        // make sure it's visible but transparent so it fades in when we transition to spread
+                        PropertyChanges { target: windowInfoItem; opacity: 0; visible: true }
                     },
                     State {
                         name: "windowedRightEdge"
@@ -1350,6 +1381,7 @@
                         PropertyAction { target: decoratedWindow; property: "scaleToPreviewSize" }
                         UbuntuNumberAnimation { target: appDelegate; properties: "x,y,height"; duration: priv.animationDuration }
                         UbuntuNumberAnimation { target: decoratedWindow; properties: "width,height,itemScale,angle,scaleToPreviewProgress"; duration: priv.animationDuration }
+                        UbuntuNumberAnimation { target: windowInfoItem; properties: "opacity"; duration: priv.animationDuration }
                     },
                     Transition {
                         from: "normal,staged"; to: "stagedWithSideStage"
@@ -1562,7 +1594,7 @@
                     maxWidth: {
                         var nextApp = appRepeater.itemAt(index + 1);
                         if (nextApp) {
-                            return nextApp.x - appDelegate.x - units.gu(1)
+                            return Math.max(iconHeight, nextApp.x - appDelegate.x - units.gu(1))
                         }
                         return appDelegate.width;
                     }
@@ -1730,7 +1762,7 @@
         property var gesturePoints: []
         property bool cancelled: false
 
-        property real progress: dragging ? -touchPosition.x / root.width : 0
+        property real progress: -touchPosition.x / root.width
         onProgressChanged: {
             if (dragging) {
                 draggedProgress = progress;