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

Proposed by Tiago Salem Herrmann on 2012-03-01
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 on 2012-10-15
jenkins (community) continuous-integration Approve on 2012-05-31
Michał Sawicz 2012-03-01 Needs Fixing on 2012-03-01
Xi Zhu 2012-03-09 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.
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 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

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.

Xi Zhu (xi.zhu) wrote :

Sorry, the mockup is attached to the original bug.

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

merge trunk

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

fix margins

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 :)

jenkins (martin-mrazik+qa) wrote :

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

review: Approve (continuous-integration)
PS Jenkins bot (ps-jenkins) wrote :
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

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'shell/dash/CategoryHeader.qml'
2--- shell/dash/CategoryHeader.qml 2012-03-08 20:22:12 +0000
3+++ shell/dash/CategoryHeader.qml 2012-04-04 18:19:25 +0000
4@@ -45,6 +45,21 @@
5 anchors.top: parent.top
6 anchors.left: parent.left
7 anchors.right: parent.right
8+ anchors.leftMargin: 5
9+ anchors.rightMargin: 5
10+ }
11+
12+ Rectangle {
13+ id: headerHighlight
14+
15+ anchors.top: parent.top
16+ anchors.left: parent.left
17+ anchors.right: parent.right
18+ anchors.topMargin: 12
19+ height: 26
20+ color: "#21ffffff"
21+ radius: 2
22+ visible: categoryHeader.state != "default"
23 }
24
25 Image {
26@@ -57,7 +72,7 @@
27 anchors.top: divider.bottom
28 anchors.topMargin: 13
29 anchors.left: parent.left
30- anchors.leftMargin: 4
31+ anchors.leftMargin: 9
32 fillMode: Image.PreserveAspectFit
33 sourceSize.width: width
34 sourceSize.height: height
35
36=== modified file 'shell/dash/FilterLoader.qml'
37--- shell/dash/FilterLoader.qml 2012-01-24 12:14:59 +0000
38+++ shell/dash/FilterLoader.qml 2012-04-04 18:19:25 +0000
39@@ -30,7 +30,7 @@
40
41 height: childrenRect.height
42
43- FocusScope {
44+ AbstractButton {
45 id: header
46
47 function accessibleDescription() {
48@@ -49,7 +49,24 @@
49 anchors.top: parent.top
50 anchors.left: parent.left
51 anchors.right: parent.right
52- height: childrenRect.height
53+ height: 32
54+
55+ AbstractButton {
56+ id: headerHighlight
57+ anchors.top: parent.top
58+ anchors.topMargin: isFirst ? 0 : 13
59+ anchors.left: parent.left
60+ anchors.right: parent.right
61+ height: 32
62+
63+ Rectangle {
64+ anchors.fill: parent
65+ color: "white"
66+ opacity: 0.2
67+ visible: headerHighlight.state != "default" || clearButton.state != "default"
68+ radius: 2
69+ }
70+ }
71
72 Rectangle {
73 id: separatorLine
74@@ -73,7 +90,6 @@
75 text: u2d.tr(filterModel.name)
76 fontSize: "large"
77 font.bold: true
78- font.underline: ( parent.state == "selected" || parent.state == "hovered" )
79 }
80
81 TickBox {
82@@ -85,7 +101,7 @@
83 // dynamically calculate button width, but limit to 100
84 width: Math.min(100, (10 * u2d.tr("All").length) + 18)
85 height: 30
86- anchors.top: parent.top
87+ anchors.verticalCenter: headerHighlight.verticalCenter
88 anchors.topMargin: isFirst ? 0 : 13
89 anchors.right: parent.right
90
91
92=== modified file 'shell/dash/FilterPane.qml'
93--- shell/dash/FilterPane.qml 2012-03-05 14:52:17 +0000
94+++ shell/dash/FilterPane.qml 2012-04-04 18:19:25 +0000
95@@ -36,22 +36,16 @@
96
97 Accessible.name: title.text
98
99- effect: DropShadow {
100- blurRadius: {
101- switch (header.state) {
102- case "selected":
103- case "hovered":
104- return 4
105- case "pressed":
106- return 8
107- default:
108- return 0
109- }
110- }
111- offset.x: 0
112- offset.y: 0
113- color: "white"
114- }
115+ Rectangle {
116+ anchors.verticalCenter: parent.verticalCenter
117+ anchors.left: parent.left
118+ anchors.right: parent.right
119+ height: 24
120+ color: "white"
121+ opacity: 0.2
122+ visible: header.state != "default"
123+ radius: 2
124+ }
125
126 onClicked: filterPane.folded = !filterPane.folded
127
128@@ -85,6 +79,7 @@
129 anchors.verticalCenter: title.verticalCenter
130 anchors.verticalCenterOffset: 1
131 anchors.right: parent.right
132+ anchors.rightMargin: 1
133 }
134 }
135
136
137=== modified file 'shell/dash/LensButton.qml'
138--- shell/dash/LensButton.qml 2012-03-06 14:22:12 +0000
139+++ shell/dash/LensButton.qml 2012-04-04 18:19:25 +0000
140@@ -33,16 +33,12 @@
141
142 Rectangle {
143 anchors.fill: parent
144- anchors.topMargin: 7
145- anchors.bottomMargin: 7
146- anchors.leftMargin: Math.floor(iconSpacing/2)
147- anchors.rightMargin: Math.ceil(iconSpacing/2)
148-
149- border.color: "white"
150- border.width: 1
151- color: "transparent"
152+ anchors.margins: 1
153+ color: "white"
154+
155 radius: 2
156- visible: ( parent.state == "selected" )
157+ opacity: 0.2
158+ visible: ( parent.state != "default")
159 }
160
161 Image {
162
163=== modified file 'shell/dash/LensView.qml'
164--- shell/dash/LensView.qml 2012-03-30 14:56:08 +0000
165+++ shell/dash/LensView.qml 2012-04-04 18:19:25 +0000
166@@ -113,7 +113,7 @@
167
168 focus: true
169 anchors.fill: parent
170- anchors.leftMargin: 15
171+ anchors.leftMargin: 10
172
173 /* The category's delegate is chosen dynamically depending on what
174 rendererName is returned by the CategoriesModel.
175@@ -129,6 +129,8 @@
176 visible: category_model.count > 0
177 width: parent.width
178 height: item ? visible ? item.contentHeight : 0 : 0
179+ anchors.left: parent.left
180+ anchors.leftMargin: 5
181
182 property string name: model.column_0
183 property string iconHint: model.column_1
184
185=== modified file 'shell/dash/MultiRangeButton.qml'
186--- shell/dash/MultiRangeButton.qml 2012-03-19 17:28:33 +0000
187+++ shell/dash/MultiRangeButton.qml 2012-04-04 18:19:25 +0000
188@@ -29,6 +29,18 @@
189
190 Accessible.name: text
191
192+ Rectangle {
193+ anchors.top: parent.top
194+ anchors.bottom: parent.bottom
195+ anchors.left: parent.left
196+ width: isLast ? parent.width+5 : parent.width
197+ color: "white"
198+ opacity: 0.2
199+ /* FIXME: there is no way to specify which side we want to set the radius */
200+ radius: 5
201+ visible: multiRangeButton.state != "default"
202+ }
203+
204 TextCustom {
205 id: label
206 anchors.top: parent.top
207
208=== modified file 'shell/dash/TickBox.qml'
209--- shell/dash/TickBox.qml 2012-02-24 17:58:11 +0000
210+++ shell/dash/TickBox.qml 2012-04-04 18:19:25 +0000
211@@ -50,7 +50,7 @@
212 else if ( checked ) return "#cdffffff" // 13% opaque
213 else return "#21ffffff" // 80% opaque
214 border.width: ( checked ) ? 2 : 1
215- color: ( checked ) ? "#21ffffff" : "transparent"
216+ color: ( checked || tickBox.state != "default" ) ? "#21ffffff" : "transparent"
217 radius: 7
218 }
219

Subscribers

People subscribed via source and target branches