Merge lp:~cimi/unity8/redesign-pinned-apps into lp:unity8

[Andrea Cimitan]

Redesign for pinned apps. Remove thindivider on top of ubuntu dash button (not needed anymore)

 * Are there any related MPs required for this MP to build/function as expected? Please list.
no
 * Did you perform an exploratory manual test run of your code change and any related functionality?
Yes
 * Did you make sure that your branch does not contain spurious tags?
Yes
 * If you changed the packaging (debian), did you subscribe the ubuntu-unity team to this MP?
n/a
 * If you changed the UI, has there been a design review?
y

[lp:~cimi/unity8/redesign-pinned-apps]

1336. By Andrea Cimitan on 2014-10-07

Default is antialiasing true for radius rectangles

[Michael Zanetti (mzanetti)]

This doesn't work yet, the count emblem hides the pinned bubble. In my last design hangout I asked how to deal with that and there wasn't yet an answer for this. Vesa told me not to move the count emblem to the right as one of the design mockups suggests. So I think this is not ready to land yet.

review: Needs Fixing

[Michael Zanetti (mzanetti)]

Also, I'm getting this warning:

QQuickShaderEffect: 'clipCorner' does not have a matching property!

review: Needs Fixing

[Michael Zanetti (mzanetti)]

Had a chat with design. Let's just shorten the count emblem to not overlap with the pinned dot. There should be half a grid unit spacing between the dot and the longest count emblem.

[Michael Zanetti (mzanetti)]

Please update the MockLauncherModel to hold a pinned item with a very long count emblem so we can easily see that case in tryLauncher

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1335
http://jenkins.qa.ubuntu.com/job/unity8-ci/4511/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/5570
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity-phablet-qmluitests-utopic/1496
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-amd64-ci/1605
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-i386-ci/1605
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-mako/5263
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/6822
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/6822/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/14239

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/4511/rebuild

review: Needs Fixing (continuous-integration)

[lp:~cimi/unity8/redesign-pinned-apps]

1337. By Andrea Cimitan on 2014-10-07

Requested design changes

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:1336
http://jenkins.qa.ubuntu.com/job/unity8-ci/4514/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/5576
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity-phablet-qmluitests-utopic/1499
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-amd64-ci/1608
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-i386-ci/1608
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-mako/5274
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/6828
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/6828/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/14251

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/4514/rebuild

review: Approve (continuous-integration)

[Michael Zanetti (mzanetti)]

 * 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.

no. because Autopilot.

 * Did you make sure that the branch does not contain spurious tags?

yes

review: Approve

=== modified file 'qml/Launcher/LauncherDelegate.qml'
--- qml/Launcher/LauncherDelegate.qml	2014-09-03 13:30:52 +0000
+++ qml/Launcher/LauncherDelegate.qml	2014-10-07 11:11:40 +0000
@@ -27,7 +27,7 @@
     property bool itemFocused: false
     property real maxAngle: 0
     property bool inverted: false
-    property bool clipCorner: false
+    property alias pinned: pin.visible
 
     readonly property int effectiveHeight: Math.cos(angle * Math.PI / 180) * itemHeight
     readonly property real foldedHeight: Math.cos(maxAngle * Math.PI / 180) * itemHeight
@@ -71,14 +71,31 @@
             height: root.itemHeight - units.gu(1)
         }
 
+        Rectangle {
+            id: pin
+            anchors {
+                left: iconShape.left
+                top: iconShape.top
+                topMargin: -units.dp(2)
+            }
+            width: units.gu(1)
+            height: width
+            radius: width / 2
+            color: "white"
+        }
+
         UbuntuShape {
+            id: countEmblem
             objectName: "countEmblem"
+
+            readonly property real pinMargin: pin.visible ? pin.width + units.gu(1) - anchors.leftMargin : 0
+
             anchors {
                 right: parent.right
                 top: parent.top
                 margins: units.dp(3)
             }
-            width: Math.min(root.itemWidth, Math.max(units.gu(2), countLabel.implicitWidth + units.gu(1)))
+            width: Math.min(root.itemWidth - pinMargin, Math.max(units.gu(2), countLabel.implicitWidth + units.gu(1)))
             height: units.gu(2)
             color: UbuntuColors.orange
             visible: root.countVisible
@@ -92,7 +109,7 @@
                 // FIXME: verticalCenter seems to be off wee bit and QML doesn't have a centerLine
                 // property for Text: https://bugreports.qt-project.org/browse/QTBUG-40479
                 anchors.verticalCenterOffset: -units.dp(.5)
-                width: root.itemWidth - units.gu(1)
+                width: root.itemWidth - units.gu(1) - countEmblem.pinMargin
                 horizontalAlignment: Text.AlignHCenter
                 elide: Text.ElideRight
                 color: "white"
@@ -149,24 +166,6 @@
         }
     }
 
-    Item {
-        id: clipper
-        anchors.centerIn: parent
-        width: iconItem.width
-        height: iconItem.height
-        Rectangle {
-            anchors {
-                fill: parent
-                topMargin: -units.gu(2)
-                leftMargin: -units.gu(2)
-                rightMargin: -units.gu(2)
-                bottomMargin: units.gu(1.2)
-            }
-            color: "red"
-            rotation: root.rotation + 45
-        }
-    }
-
     ShaderEffect {
         id: transformEffect
         anchors.centerIn: parent
@@ -176,7 +175,6 @@
         property real itemOpacity: root.itemOpacity
         property real brightness: Math.max(-1, root.brightness)
         property real angle: root.angle
-        property bool clipCorner: root.clipCorner
         rotation: root.inverted ? 180 : 0
 
         property variant source: ShaderEffectSource {
@@ -185,11 +183,6 @@
             hideSource: true
         }
 
-        property var mask: ShaderEffectSource {
-            sourceItem: clipper
-            hideSource: true
-        }
-
         transform: [
             // Rotating 3 times at top/bottom because that increases the perspective.
             // This is a hack, but as QML does not support real 3D coordinates
@@ -224,19 +217,13 @@
         fragmentShader: "
             varying highp vec2 qt_TexCoord0;
             uniform sampler2D source;
-            uniform sampler2D mask;
             uniform lowp float brightness;
             uniform lowp float itemOpacity;
-            uniform bool clipCorner;
             void main(void)
             {
                 highp vec4 sourceColor = texture2D(source, qt_TexCoord0);
-                highp vec4 maskColor = texture2D(mask, qt_TexCoord0);
                 sourceColor.rgb = mix(sourceColor.rgb, vec3(step(0.0, brightness)), abs(brightness));
                 sourceColor *= itemOpacity;
-                if (clipCorner) {
-                    sourceColor *= maskColor.a;
-                }
                 gl_FragColor = sourceColor;
             }"
     }

=== modified file 'qml/Launcher/LauncherPanel.qml'
--- qml/Launcher/LauncherPanel.qml	2014-08-26 11:34:22 +0000
+++ qml/Launcher/LauncherPanel.qml	2014-10-07 11:11:40 +0000
@@ -65,15 +65,6 @@
             }
         }
 
-        ThinDivider {
-            anchors {
-                left: parent.left
-                right: parent.right
-                margins: -mainColumn.anchors.leftMargin
-            }
-            rotation: root.rotation
-        }
-
         Item {
             anchors.left: parent.left
             anchors.right: parent.right
@@ -158,7 +149,7 @@
                         count: model.count
                         countVisible: model.countVisible
                         progress: model.progress
-                        clipCorner: model.pinned
+                        pinned: model.pinned
                         itemFocused: model.focused
                         inverted: root.inverted
                         z: -Math.abs(offset)
@@ -469,10 +460,10 @@
                 width: itemWidth
                 rotation: root.rotation
                 itemOpacity: 0.9
-                clipCorner: dndArea.draggedIndex > -1 &&
-                            LauncherModel.get(dndArea.draggedIndex).pinned &&
-                            !dndArea.preDragging &&
-                            !dndArea.dragging
+                pinned: dndArea.draggedIndex > -1 &&
+                        LauncherModel.get(dndArea.draggedIndex).pinned &&
+                        !dndArea.preDragging &&
+                        !dndArea.dragging
 
                 function flatten() {
                     fakeDragItemAnimation.start();

=== modified file 'tests/mocks/Unity/Launcher/MockLauncherModel.cpp'
--- tests/mocks/Unity/Launcher/MockLauncherModel.cpp	2014-09-03 13:33:21 +0000
+++ tests/mocks/Unity/Launcher/MockLauncherModel.cpp	2014-10-07 11:11:40 +0000
@@ -54,6 +54,7 @@
     item = new MockLauncherItem("ubuntu-weather-app", "/usr/share/applications/ubuntu-weather-app.desktop", "Weather", "weather", this);
     item->setCount(1234567890);
     item->setCountVisible(true);
+    item->setPinned(true);
     m_list.append(item);
     item = new MockLauncherItem("notes-app", "/usr/share/applications/notes-app.desktop", "Notepad", "notepad", this);
     item->setProgress(50);