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

Proposed by Tiago Salem Herrmann
Status: Needs review
Proposed branch: lp:~tiagosh/unity-2d/fix-dash-highlights
Merge into: lp:unity-2d
Diff against target: 218 lines (+68/-32)
7 files modified
shell/dash/CategoryHeader.qml (+16/-1)
shell/dash/FilterLoader.qml (+20/-4)
shell/dash/FilterPane.qml (+11/-16)
shell/dash/LensButton.qml (+5/-9)
shell/dash/LensView.qml (+3/-1)
shell/dash/MultiRangeButton.qml (+12/-0)
shell/dash/TickBox.qml (+1/-1)
To merge this branch: bzr merge lp:~tiagosh/unity-2d/fix-dash-highlights
Reviewer Review Type Date Requested Status
PS Jenkins bot (community) continuous-integration Approve
jenkins (community) continuous-integration Approve
Michał Sawicz Needs Fixing
Xi Zhu Pending
Review via email: mp+95445@code.launchpad.net

Description of the change

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

To post a comment you must log in.
Revision history for this message
Michał Sawicz (saviq) wrote :

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
942. By Tiago Salem Herrmann

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

Revision history for this message
Tiago Salem Herrmann (tiagosh) wrote :
Revision history for this message
Xi Zhu (xi.zhu) wrote :

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.

Revision history for this message
Xi Zhu (xi.zhu) wrote :

Sorry, the mockup is attached to the original bug.

943. By Tiago Salem Herrmann

merge trunk

944. By Tiago Salem Herrmann

fix margins

Revision history for this message
Tiago Salem Herrmann (tiagosh) wrote :
Revision history for this message
Xi Zhu (xi.zhu) wrote :

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

Revision history for this message
jenkins (martin-mrazik+qa) wrote :

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

review: Approve (continuous-integration)
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :
review: Approve (continuous-integration)

Unmerged revisions

944. By Tiago Salem Herrmann

fix margins

943. By Tiago Salem Herrmann

merge trunk

942. By Tiago Salem Herrmann

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

merge trunk

940. By Tiago Salem Herrmann

bring back the arrow
remove the lensbar highlight when not hovered

939. By Tiago Salem Herrmann

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

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
=== 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 @@
45 anchors.top: parent.top45 anchors.top: parent.top
46 anchors.left: parent.left46 anchors.left: parent.left
47 anchors.right: parent.right47 anchors.right: parent.right
48 anchors.leftMargin: 5
49 anchors.rightMargin: 5
50 }
51
52 Rectangle {
53 id: headerHighlight
54
55 anchors.top: parent.top
56 anchors.left: parent.left
57 anchors.right: parent.right
58 anchors.topMargin: 12
59 height: 26
60 color: "#21ffffff"
61 radius: 2
62 visible: categoryHeader.state != "default"
48 }63 }
4964
50 Image {65 Image {
@@ -57,7 +72,7 @@
57 anchors.top: divider.bottom72 anchors.top: divider.bottom
58 anchors.topMargin: 1373 anchors.topMargin: 13
59 anchors.left: parent.left74 anchors.left: parent.left
60 anchors.leftMargin: 475 anchors.leftMargin: 9
61 fillMode: Image.PreserveAspectFit76 fillMode: Image.PreserveAspectFit
62 sourceSize.width: width77 sourceSize.width: width
63 sourceSize.height: height78 sourceSize.height: height
6479
=== 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 @@
3030
31 height: childrenRect.height31 height: childrenRect.height
3232
33 FocusScope {33 AbstractButton {
34 id: header34 id: header
3535
36 function accessibleDescription() {36 function accessibleDescription() {
@@ -49,7 +49,24 @@
49 anchors.top: parent.top49 anchors.top: parent.top
50 anchors.left: parent.left50 anchors.left: parent.left
51 anchors.right: parent.right51 anchors.right: parent.right
52 height: childrenRect.height52 height: 32
53
54 AbstractButton {
55 id: headerHighlight
56 anchors.top: parent.top
57 anchors.topMargin: isFirst ? 0 : 13
58 anchors.left: parent.left
59 anchors.right: parent.right
60 height: 32
61
62 Rectangle {
63 anchors.fill: parent
64 color: "white"
65 opacity: 0.2
66 visible: headerHighlight.state != "default" || clearButton.state != "default"
67 radius: 2
68 }
69 }
5370
54 Rectangle {71 Rectangle {
55 id: separatorLine72 id: separatorLine
@@ -73,7 +90,6 @@
73 text: u2d.tr(filterModel.name)90 text: u2d.tr(filterModel.name)
74 fontSize: "large"91 fontSize: "large"
75 font.bold: true92 font.bold: true
76 font.underline: ( parent.state == "selected" || parent.state == "hovered" )
77 }93 }
7894
79 TickBox {95 TickBox {
@@ -85,7 +101,7 @@
85 // dynamically calculate button width, but limit to 100101 // dynamically calculate button width, but limit to 100
86 width: Math.min(100, (10 * u2d.tr("All").length) + 18)102 width: Math.min(100, (10 * u2d.tr("All").length) + 18)
87 height: 30103 height: 30
88 anchors.top: parent.top104 anchors.verticalCenter: headerHighlight.verticalCenter
89 anchors.topMargin: isFirst ? 0 : 13105 anchors.topMargin: isFirst ? 0 : 13
90 anchors.right: parent.right106 anchors.right: parent.right
91107
92108
=== 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 @@
3636
37 Accessible.name: title.text37 Accessible.name: title.text
3838
39 effect: DropShadow {39 Rectangle {
40 blurRadius: {40 anchors.verticalCenter: parent.verticalCenter
41 switch (header.state) {41 anchors.left: parent.left
42 case "selected":42 anchors.right: parent.right
43 case "hovered":43 height: 24
44 return 444 color: "white"
45 case "pressed":45 opacity: 0.2
46 return 846 visible: header.state != "default"
47 default:47 radius: 2
48 return 048 }
49 }
50 }
51 offset.x: 0
52 offset.y: 0
53 color: "white"
54 }
5549
56 onClicked: filterPane.folded = !filterPane.folded50 onClicked: filterPane.folded = !filterPane.folded
5751
@@ -85,6 +79,7 @@
85 anchors.verticalCenter: title.verticalCenter79 anchors.verticalCenter: title.verticalCenter
86 anchors.verticalCenterOffset: 180 anchors.verticalCenterOffset: 1
87 anchors.right: parent.right81 anchors.right: parent.right
82 anchors.rightMargin: 1
88 }83 }
89 }84 }
9085
9186
=== 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 @@
3333
34 Rectangle {34 Rectangle {
35 anchors.fill: parent35 anchors.fill: parent
36 anchors.topMargin: 736 anchors.margins: 1
37 anchors.bottomMargin: 737 color: "white"
38 anchors.leftMargin: Math.floor(iconSpacing/2)38
39 anchors.rightMargin: Math.ceil(iconSpacing/2)
40
41 border.color: "white"
42 border.width: 1
43 color: "transparent"
44 radius: 239 radius: 2
45 visible: ( parent.state == "selected" )40 opacity: 0.2
41 visible: ( parent.state != "default")
46 }42 }
4743
48 Image {44 Image {
4945
=== 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 @@
113113
114 focus: true114 focus: true
115 anchors.fill: parent115 anchors.fill: parent
116 anchors.leftMargin: 15116 anchors.leftMargin: 10
117117
118 /* The category's delegate is chosen dynamically depending on what118 /* The category's delegate is chosen dynamically depending on what
119 rendererName is returned by the CategoriesModel.119 rendererName is returned by the CategoriesModel.
@@ -129,6 +129,8 @@
129 visible: category_model.count > 0129 visible: category_model.count > 0
130 width: parent.width130 width: parent.width
131 height: item ? visible ? item.contentHeight : 0 : 0131 height: item ? visible ? item.contentHeight : 0 : 0
132 anchors.left: parent.left
133 anchors.leftMargin: 5
132134
133 property string name: model.column_0135 property string name: model.column_0
134 property string iconHint: model.column_1136 property string iconHint: model.column_1
135137
=== 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 @@
2929
30 Accessible.name: text30 Accessible.name: text
3131
32 Rectangle {
33 anchors.top: parent.top
34 anchors.bottom: parent.bottom
35 anchors.left: parent.left
36 width: isLast ? parent.width+5 : parent.width
37 color: "white"
38 opacity: 0.2
39 /* FIXME: there is no way to specify which side we want to set the radius */
40 radius: 5
41 visible: multiRangeButton.state != "default"
42 }
43
32 TextCustom {44 TextCustom {
33 id: label45 id: label
34 anchors.top: parent.top46 anchors.top: parent.top
3547
=== 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 @@
50 else if ( checked ) return "#cdffffff" // 13% opaque50 else if ( checked ) return "#cdffffff" // 13% opaque
51 else return "#21ffffff" // 80% opaque51 else return "#21ffffff" // 80% opaque
52 border.width: ( checked ) ? 2 : 152 border.width: ( checked ) ? 2 : 1
53 color: ( checked ) ? "#21ffffff" : "transparent"53 color: ( checked || tickBox.state != "default" ) ? "#21ffffff" : "transparent"
54 radius: 754 radius: 7
55 }55 }
5656

Subscribers

People subscribed via source and target branches