Merge lp:~tiagosh/unity-2d/fix-dash-highlights into lp:unity-2d

[Tiago Salem Herrmann]

[shell][dash] add dash keyboard highlight grey rectangles + focus-follow-mouse

[Michał Sawicz (saviq)]

Please create a set of pre/post screenshots for design to sign off.

The effects of those changes on the filter pane don't look right to me, the arrow near "Filter results" overflows the highlight and then the highlights for section headers look skewed.

review: Needs Fixing

[lp:~tiagosh/unity-2d/fix-dash-highlights]

942. By Tiago Salem Herrmann on 2012-03-01

add 1px margin to filter pane header in order to prevent the arrow to overflow the highlight
vertically center the "All" button

[Tiago Salem Herrmann (tiagosh)]

pre:
http://ubuntuone.com/6d2pWdu5tpYopCeRkfzXue

post:
http://ubuntuone.com/4X7zfDobwCUKDaqyXIIHyQ
http://ubuntuone.com/4myQquUZrRSykseXZQ9Yxj
http://ubuntuone.com/66iUnSONbdYmWIJ7ykarhG
http://ubuntuone.com/2FHu42U2QZ7BOM9FPB28YS
http://ubuntuone.com/5pDkQJyCePnMmzOfHHPcqi
http://ubuntuone.com/1ZbCkdf1pLsHj3ssXnLpxD

[Xi Zhu (xi.zhu)]

http://ubuntuone.com/4X7zfDobwCUKDaqyXIIHyQ
http://ubuntuone.com/66iUnSONbdYmWIJ7ykarhG
http://ubuntuone.com/2FHu42U2QZ7BOM9FPB28YS

The highlight of these three need to be wider, the rule is 10px away from each side, and the first one (highlight of category header) should be with 2px round corner too.

Please see the mockup below.

And highlight of content items are updated to be consistant, same mockup below.

[Xi Zhu (xi.zhu)]

Sorry, the mockup is attached to the original bug.

[lp:~tiagosh/unity-2d/fix-dash-highlights]

943. By Tiago Salem Herrmann on 2012-04-04

merge trunk

944. By Tiago Salem Herrmann on 2012-04-04

fix margins

[Tiago Salem Herrmann (tiagosh)]

more screenshots:
Pre: http://ubuntuone.com/2xHChPPYI0AqYgqFd58KbC
Post: http://ubuntuone.com/6DnjBduSQtEWg8QdEmAbah

[Xi Zhu (xi.zhu)]

Hi, the left side is 10px which is correct, the right side is 15px now which should be 10px too :)

[jenkins (martin-mrazik+qa)]

PASSED: Continuous integration, rev:944
http://s-jenkins:8080/job/unity-2d-ci/9/

review: Approve (continuous-integration)

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:944
http://s-jenkins:8080/job/unity-2d-ci/24/
Executed test runs:
    SUCCESS: http://s-jenkins:8080/job/unity-2d-ci/./distribution=precise,flavor=amd64/24/console
    SUCCESS: http://s-jenkins:8080/job/unity-2d-ci/./distribution=precise,flavor=i386/24/console

review: Approve (continuous-integration)

Unmerged revisions

944. By Tiago Salem Herrmann on 2012-04-04

fix margins

943. By Tiago Salem Herrmann on 2012-04-04

merge trunk

942. By Tiago Salem Herrmann on 2012-03-01

add 1px margin to filter pane header in order to prevent the arrow to overflow the highlight
vertically center the "All" button

941. By Tiago Salem Herrmann on 2012-03-01

merge trunk

940. By Tiago Salem Herrmann on 2012-03-01

bring back the arrow
remove the lensbar highlight when not hovered

939. By Tiago Salem Herrmann on 2012-02-27

[dash] add dash keyboard highlight grey rectangles + focus-follow-mouse

=== modified file 'shell/dash/CategoryHeader.qml'
--- shell/dash/CategoryHeader.qml	2012-03-08 20:22:12 +0000
+++ shell/dash/CategoryHeader.qml	2012-04-04 18:19:25 +0000
@@ -45,6 +45,21 @@
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
+        anchors.leftMargin: 5
+        anchors.rightMargin: 5
+    }
+    
+    Rectangle { 
+        id: headerHighlight
+
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.topMargin: 12
+        height: 26
+        color: "#21ffffff"
+        radius: 2
+        visible: categoryHeader.state != "default"
     }
 
     Image {
@@ -57,7 +72,7 @@
         anchors.top: divider.bottom
         anchors.topMargin: 13
         anchors.left: parent.left
-        anchors.leftMargin: 4
+        anchors.leftMargin: 9
         fillMode: Image.PreserveAspectFit
         sourceSize.width: width
         sourceSize.height: height

=== modified file 'shell/dash/FilterLoader.qml'
--- shell/dash/FilterLoader.qml	2012-01-24 12:14:59 +0000
+++ shell/dash/FilterLoader.qml	2012-04-04 18:19:25 +0000
@@ -30,7 +30,7 @@
 
     height: childrenRect.height
 
-    FocusScope {
+    AbstractButton  {
         id: header
 
         function accessibleDescription() {
@@ -49,7 +49,24 @@
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
-        height: childrenRect.height
+        height: 32
+
+        AbstractButton {
+            id: headerHighlight
+            anchors.top: parent.top
+            anchors.topMargin: isFirst ? 0 : 13
+            anchors.left: parent.left
+            anchors.right: parent.right
+            height: 32
+
+            Rectangle {
+                anchors.fill: parent
+                color: "white"
+                opacity: 0.2
+                visible: headerHighlight.state != "default" || clearButton.state != "default"
+                radius: 2
+            }
+        }
 
         Rectangle {
             id: separatorLine
@@ -73,7 +90,6 @@
             text: u2d.tr(filterModel.name)
             fontSize: "large"
             font.bold: true
-            font.underline: ( parent.state == "selected" || parent.state == "hovered" )
         }
 
         TickBox {
@@ -85,7 +101,7 @@
             // dynamically calculate button width, but limit to 100
             width: Math.min(100, (10 * u2d.tr("All").length) + 18)
             height: 30
-            anchors.top: parent.top
+            anchors.verticalCenter: headerHighlight.verticalCenter
             anchors.topMargin: isFirst ? 0 : 13
             anchors.right: parent.right
 

=== modified file 'shell/dash/FilterPane.qml'
--- shell/dash/FilterPane.qml	2012-03-05 14:52:17 +0000
+++ shell/dash/FilterPane.qml	2012-04-04 18:19:25 +0000
@@ -36,22 +36,16 @@
 
         Accessible.name: title.text
 
-        effect: DropShadow {
-                    blurRadius: {
-                        switch (header.state) {
-                            case "selected":
-                            case "hovered":
-                                return 4
-                            case "pressed":
-                                return 8
-                            default:
-                                return 0
-                        }
-                    }
-                    offset.x: 0
-                    offset.y: 0
-                    color: "white"
-                }
+        Rectangle {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            anchors.right: parent.right
+            height: 24
+            color: "white"
+            opacity: 0.2
+            visible: header.state != "default"
+            radius: 2
+        }
 
         onClicked: filterPane.folded = !filterPane.folded
 
@@ -85,6 +79,7 @@
             anchors.verticalCenter: title.verticalCenter
             anchors.verticalCenterOffset: 1
             anchors.right: parent.right
+            anchors.rightMargin: 1
         }
     }
 

=== modified file 'shell/dash/LensButton.qml'
--- shell/dash/LensButton.qml	2012-03-06 14:22:12 +0000
+++ shell/dash/LensButton.qml	2012-04-04 18:19:25 +0000
@@ -33,16 +33,12 @@
 
     Rectangle {
         anchors.fill: parent
-        anchors.topMargin: 7
-        anchors.bottomMargin: 7
-        anchors.leftMargin: Math.floor(iconSpacing/2)
-        anchors.rightMargin: Math.ceil(iconSpacing/2)
-
-        border.color: "white"
-        border.width: 1
-        color: "transparent"
+        anchors.margins: 1
+        color: "white"
+         
         radius: 2
-        visible: ( parent.state == "selected" )
+        opacity: 0.2
+        visible: ( parent.state != "default")
     }
 
     Image {

=== modified file 'shell/dash/LensView.qml'
--- shell/dash/LensView.qml	2012-03-30 14:56:08 +0000
+++ shell/dash/LensView.qml	2012-04-04 18:19:25 +0000
@@ -113,7 +113,7 @@
 
         focus: true
         anchors.fill: parent
-        anchors.leftMargin: 15
+        anchors.leftMargin: 10
 
         /* The category's delegate is chosen dynamically depending on what
            rendererName is returned by the CategoriesModel.
@@ -129,6 +129,8 @@
             visible: category_model.count > 0
             width: parent.width
             height: item ? visible ? item.contentHeight : 0 : 0
+            anchors.left: parent.left
+            anchors.leftMargin: 5
 
             property string name: model.column_0
             property string iconHint: model.column_1

=== modified file 'shell/dash/MultiRangeButton.qml'
--- shell/dash/MultiRangeButton.qml	2012-03-19 17:28:33 +0000
+++ shell/dash/MultiRangeButton.qml	2012-04-04 18:19:25 +0000
@@ -29,6 +29,18 @@
 
     Accessible.name: text
 
+    Rectangle {
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        width: isLast ? parent.width+5 : parent.width
+        color: "white"
+        opacity: 0.2
+        /* FIXME: there is no way to specify which side we want to set the radius */
+        radius: 5
+        visible: multiRangeButton.state != "default"
+    }
+
     TextCustom {
         id: label
         anchors.top: parent.top

=== modified file 'shell/dash/TickBox.qml'
--- shell/dash/TickBox.qml	2012-02-24 17:58:11 +0000
+++ shell/dash/TickBox.qml	2012-04-04 18:19:25 +0000
@@ -50,7 +50,7 @@
                       else if ( checked ) return "#cdffffff" // 13% opaque
                       else return "#21ffffff" // 80% opaque
         border.width: ( checked ) ? 2 : 1
-        color: ( checked ) ? "#21ffffff" : "transparent"
+        color: ( checked || tickBox.state != "default" ) ? "#21ffffff" : "transparent"
         radius: 7
     }