Merge lp:~paolorotolo/ubuntu-clock-app/search-button into lp:ubuntu-clock-app/saucy
- search-button
- Merge into saucy
Status: | Merged |
---|---|
Approved by: | Nekhelesh Ramananthan |
Approved revision: | 189 |
Merged at revision: | 186 |
Proposed branch: | lp:~paolorotolo/ubuntu-clock-app/search-button |
Merge into: | lp:ubuntu-clock-app/saucy |
Diff against target: |
336 lines (+281/-12) 3 files modified
clock/WorldClock.qml (+23/-12) images/search_icon@8.svg (+153/-0) images/search_item@8.svg (+105/-0) |
To merge this branch: | bzr merge lp:~paolorotolo/ubuntu-clock-app/search-button |
Related bugs: |
Reviewer | Review Type | Date Requested | Status |
---|---|---|---|
Ubuntu Phone Apps Jenkins Bot | continuous-integration | Approve | |
Nekhelesh Ramananthan | Approve | ||
Paolo Rotolo (community) | Approve | ||
Review via email: mp+184170@code.launchpad.net |
Commit message
Revamped search button to match design specification.
Description of the change
Revamped search button to match design specification. Fixes Bug 1221252.
- 185. By Paolo Rotolo
-
Made search button smaller.
- 186. By Paolo Rotolo
-
Removed anchors.leftMargin.
Paolo Rotolo (paolorotolo) wrote : | # |
I'm working on the flat edge. I don't like the current result...
Nekhelesh Ramananthan (nik90) wrote : | # |
Sure if that can be done, it would be always be great. Btw do not specify width: 40. It should be expressed in terms of units.gu(). Just for future reference.
- 187. By Paolo Rotolo
-
Replaced the search Button with an Item.
- 188. By Paolo Rotolo
-
Replace search_icon.png with search_icon.svg.
Nekhelesh Ramananthan (nik90) wrote : | # |
As mentioned during our conversation on IRC, I wanted to add some more modifications to your MP instead of creating a new MP myself. You can see the code changes that need to be done at http://
The result of that is http://
The code changes do the following,
- Reduces the size of the magnifier icon (pointed out by the designer during my chat with him)
- Changes the anchoring of the searchLabel and searchButton such that they span the entire width of the app. I also tested it on the desktop and it looks good.
That's pretty much. Merge this in to your branch and we are good to merge your MP into trunk.
- 189. By Paolo Rotolo
-
Merged nik's changes.
Paolo Rotolo (paolorotolo) wrote : | # |
Thanks, I've merged all your changes.
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) : | # |
Preview Diff
1 | === modified file 'clock/WorldClock.qml' |
2 | --- clock/WorldClock.qml 2013-09-05 17:13:40 +0000 |
3 | +++ clock/WorldClock.qml 2013-09-06 20:22:56 +0000 |
4 | @@ -73,14 +73,14 @@ |
5 | TextField { |
6 | id: searchLabel |
7 | |
8 | - anchors { left: parent.left; leftMargin: (worldClocks.width - width - units.gu(1) - searchButton.width)/2; top: parent.top; bottom: parent.bottom } |
9 | + anchors { left: parent.left; leftMargin: units.gu(2); top: parent.top; bottom: parent.bottom; right: searchButton.left; rightMargin: -units.gu(1) } |
10 | width: worldClocks.width/1.5 |
11 | hasClearButton: true |
12 | placeholderText: i18n.tr("Search") |
13 | primaryItem: Image { |
14 | - height: parent.height/1.4 |
15 | - width: parent.height/1.45 |
16 | - source: Qt.resolvedUrl("../images/search_icon.png") |
17 | + height: parent.height/2 |
18 | + width: parent.height/2 |
19 | + source: Qt.resolvedUrl("../images/search_icon.svg") |
20 | } |
21 | |
22 | // Provide a small pause before going online to search |
23 | @@ -102,24 +102,35 @@ |
24 | onTextChanged: search_timer.restart() |
25 | } |
26 | |
27 | - Button { |
28 | + Item { |
29 | id: searchButton; |
30 | |
31 | - anchors { left: searchLabel.right; leftMargin: units.gu(1); top: parent.top; bottom: parent.bottom } |
32 | + anchors { right: parent.right; rightMargin: units.gu(6.5); top: parent.top; bottom: parent.bottom } |
33 | + height: searchLabel.height |
34 | visible: !searchActivity.running |
35 | - text: i18n.tr("Search") |
36 | + Image { |
37 | + id: name |
38 | + source: Qt.resolvedUrl("../images/search_item.svg") |
39 | + } |
40 | |
41 | - onClicked: { |
42 | - if (searchLabel.text != "") { |
43 | - search_string = searchLabel.text; |
44 | - searchCityModel.source = searchCityUrl(search_string); |
45 | + // Make searchButton clickable |
46 | + MouseArea { |
47 | + id: searchArea; |
48 | + enabled: true; |
49 | + anchors.fill: searchButton |
50 | + onClicked: { |
51 | + if (searchLabel.text != "") { |
52 | + search_string = searchLabel.text; |
53 | + searchCityModel.source = searchCityUrl(search_string); |
54 | + } |
55 | } |
56 | } |
57 | } |
58 | |
59 | + |
60 | ActivityIndicator { |
61 | id: searchActivity |
62 | - anchors.centerIn: searchButton |
63 | + anchors { verticalCenter: searchButton.verticalCenter; left: searchButton.left; leftMargin: units.gu(1.5) } |
64 | running: searchCityModel.status === XmlListModel.Loading |
65 | |
66 | } |
67 | |
68 | === removed file 'images/search_icon@8.png' |
69 | Binary files images/search_icon@8.png 2013-07-18 15:26:43 +0000 and images/search_icon@8.png 1970-01-01 00:00:00 +0000 differ |
70 | === added file 'images/search_icon@8.svg' |
71 | --- images/search_icon@8.svg 1970-01-01 00:00:00 +0000 |
72 | +++ images/search_icon@8.svg 2013-09-06 20:22:56 +0000 |
73 | @@ -0,0 +1,153 @@ |
74 | +<?xml version="1.0" encoding="UTF-8" standalone="no"?> |
75 | +<!-- Created with Inkscape (http://www.inkscape.org/) --> |
76 | + |
77 | +<svg |
78 | + xmlns:dc="http://purl.org/dc/elements/1.1/" |
79 | + xmlns:cc="http://creativecommons.org/ns#" |
80 | + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" |
81 | + xmlns:svg="http://www.w3.org/2000/svg" |
82 | + xmlns="http://www.w3.org/2000/svg" |
83 | + xmlns:xlink="http://www.w3.org/1999/xlink" |
84 | + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" |
85 | + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" |
86 | + width="32" |
87 | + height="32" |
88 | + id="svg3133" |
89 | + version="1.1" |
90 | + inkscape:version="0.48.4 r9939" |
91 | + sodipodi:docname="search.svg"> |
92 | + <defs |
93 | + id="defs3135"> |
94 | + <linearGradient |
95 | + inkscape:collect="always" |
96 | + id="linearGradient3803"> |
97 | + <stop |
98 | + style="stop-color:#e7e5e5;stop-opacity:1;" |
99 | + offset="0" |
100 | + id="stop3805" /> |
101 | + <stop |
102 | + style="stop-color:#e2dfdf;stop-opacity:1" |
103 | + offset="1" |
104 | + id="stop3807" /> |
105 | + </linearGradient> |
106 | + <linearGradient |
107 | + inkscape:collect="always" |
108 | + xlink:href="#linearGradient3803" |
109 | + id="linearGradient3809" |
110 | + x1="53.012165" |
111 | + y1="-102.79017" |
112 | + x2="53.012165" |
113 | + y2="-66.661224" |
114 | + gradientUnits="userSpaceOnUse" /> |
115 | + <linearGradient |
116 | + inkscape:collect="always" |
117 | + xlink:href="#linearGradient3803" |
118 | + id="linearGradient3813" |
119 | + gradientUnits="userSpaceOnUse" |
120 | + x1="53.012165" |
121 | + y1="-102.79017" |
122 | + x2="53.012165" |
123 | + y2="-66.661224" |
124 | + gradientTransform="translate(-625,0)" /> |
125 | + </defs> |
126 | + <sodipodi:namedview |
127 | + id="base" |
128 | + pagecolor="#ffffff" |
129 | + bordercolor="#666666" |
130 | + borderopacity="1.0" |
131 | + inkscape:pageopacity="0.0" |
132 | + inkscape:pageshadow="2" |
133 | + inkscape:zoom="11.313708" |
134 | + inkscape:cx="27.957393" |
135 | + inkscape:cy="7.2819708" |
136 | + inkscape:document-units="px" |
137 | + inkscape:current-layer="g3842" |
138 | + showgrid="true" |
139 | + inkscape:window-width="1855" |
140 | + inkscape:window-height="1056" |
141 | + inkscape:window-x="65" |
142 | + inkscape:window-y="24" |
143 | + inkscape:window-maximized="1" |
144 | + inkscape:snap-grids="true" |
145 | + inkscape:snap-global="true" |
146 | + fit-margin-top="0" |
147 | + fit-margin-left="0" |
148 | + fit-margin-right="0" |
149 | + fit-margin-bottom="0" |
150 | + inkscape:snap-bbox="true" |
151 | + inkscape:bbox-paths="true" |
152 | + inkscape:bbox-nodes="true" |
153 | + inkscape:snap-bbox-edge-midpoints="true" |
154 | + inkscape:snap-bbox-midpoints="true" |
155 | + inkscape:object-paths="true" |
156 | + inkscape:snap-intersection-paths="true" |
157 | + inkscape:snap-midpoints="true" |
158 | + inkscape:snap-smooth-nodes="true" |
159 | + inkscape:object-nodes="true" |
160 | + inkscape:snap-object-midpoints="true" |
161 | + inkscape:snap-center="true"> |
162 | + <inkscape:grid |
163 | + type="xygrid" |
164 | + id="grid3016" |
165 | + empspacing="6" |
166 | + visible="true" |
167 | + enabled="true" |
168 | + snapvisiblegridlinesonly="true" |
169 | + originx="-2.98e-06px" |
170 | + originy="2.6171874e-06px" /> |
171 | + </sodipodi:namedview> |
172 | + <metadata |
173 | + id="metadata3138"> |
174 | + <rdf:RDF> |
175 | + <cc:Work |
176 | + rdf:about=""> |
177 | + <dc:format>image/svg+xml</dc:format> |
178 | + <dc:type |
179 | + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> |
180 | + <dc:title></dc:title> |
181 | + </cc:Work> |
182 | + </rdf:RDF> |
183 | + </metadata> |
184 | + <g |
185 | + inkscape:label="Layer 1" |
186 | + inkscape:groupmode="layer" |
187 | + id="layer1" |
188 | + transform="translate(-2.98e-6,-1020.3622)" |
189 | + style="display:inline"> |
190 | + <g |
191 | + transform="matrix(0.99934414,0,0,1,-106.92982,549.00002)" |
192 | + id="g3842" |
193 | + style="display:inline"> |
194 | + <rect |
195 | + style="opacity:0.05;color:#000000;fill:none;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" |
196 | + id="rect3844" |
197 | + width="32.021008" |
198 | + height="32.000011" |
199 | + x="107" |
200 | + y="-503.36218" |
201 | + transform="scale(1,-1)" /> |
202 | + <path |
203 | + sodipodi:type="arc" |
204 | + style="color:#000000;fill:none;stroke:#808080;stroke-width:10.49972248;stroke-miterlimit:4;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" |
205 | + id="path2995" |
206 | + sodipodi:cx="35.999996" |
207 | + sodipodi:cy="36.500011" |
208 | + sodipodi:rx="33" |
209 | + sodipodi:ry="33.5" |
210 | + d="m 68.999996,36.500011 a 33,33.5 0 1 1 -65.9999998,0 33,33.5 0 1 1 65.9999998,0 z" |
211 | + transform="matrix(0.30695569,0,0,0.30279797,111.9601,476.31005)" /> |
212 | + <path |
213 | + style="font-size:xx-small;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#808080;fill-opacity:1;stroke:none;stroke-width:6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" |
214 | + d="m 131.23812,494.07329 -1.51211,1.51111 4.26947,4.26666 1.5121,-1.5111 z" |
215 | + id="path3765" |
216 | + inkscape:connector-curvature="0" |
217 | + sodipodi:nodetypes="ccccc" /> |
218 | + <path |
219 | + style="font-size:xx-small;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#808080;fill-opacity:1;stroke:none;stroke-width:11.80387211;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" |
220 | + d="m 133.30117,495.55563 c -0.82645,0.004 -1.62501,0.54578 -1.9348,1.31198 -0.30979,0.7662 -0.11199,1.71055 0.47924,2.28802 l 3.12758,3.12885 c 1.43195,1.51965 1.74071,1.31459 3.0114,0.0447 1.27069,-1.26986 1.47821,-1.48946 -0.0447,-3.01141 l -3.12758,-3.12885 c -0.39175,-0.40166 -0.95004,-0.63566 -1.51111,-0.63333 z" |
221 | + id="path3767" |
222 | + inkscape:connector-curvature="0" |
223 | + sodipodi:nodetypes="cscczccc" /> |
224 | + </g> |
225 | + </g> |
226 | +</svg> |
227 | |
228 | === added file 'images/search_item@8.svg' |
229 | --- images/search_item@8.svg 1970-01-01 00:00:00 +0000 |
230 | +++ images/search_item@8.svg 2013-09-06 20:22:56 +0000 |
231 | @@ -0,0 +1,105 @@ |
232 | +<?xml version="1.0" encoding="UTF-8" standalone="no"?> |
233 | +<!-- Created with Inkscape (http://www.inkscape.org/) --> |
234 | + |
235 | +<svg |
236 | + xmlns:dc="http://purl.org/dc/elements/1.1/" |
237 | + xmlns:cc="http://creativecommons.org/ns#" |
238 | + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" |
239 | + xmlns:svg="http://www.w3.org/2000/svg" |
240 | + xmlns="http://www.w3.org/2000/svg" |
241 | + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" |
242 | + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" |
243 | + id="svg2" |
244 | + version="1.1" |
245 | + inkscape:version="0.48.4 r9939" |
246 | + width="40" |
247 | + height="32" |
248 | + sodipodi:docname="search_item@8.svg"> |
249 | + <metadata |
250 | + id="metadata8"> |
251 | + <rdf:RDF> |
252 | + <cc:Work |
253 | + rdf:about=""> |
254 | + <dc:format>image/svg+xml</dc:format> |
255 | + <dc:type |
256 | + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> |
257 | + <dc:title /> |
258 | + </cc:Work> |
259 | + </rdf:RDF> |
260 | + </metadata> |
261 | + <defs |
262 | + id="defs6"> |
263 | + <linearGradient |
264 | + id="linearGradient4265"> |
265 | + <stop |
266 | + style="stop-color:#333333;stop-opacity:1;" |
267 | + offset="0" |
268 | + id="stop4267" /> |
269 | + <stop |
270 | + id="stop4273" |
271 | + offset="0.5" |
272 | + style="stop-color:#333333;stop-opacity:0.24855492;" /> |
273 | + <stop |
274 | + style="stop-color:#333333;stop-opacity:0;" |
275 | + offset="1" |
276 | + id="stop4269" /> |
277 | + </linearGradient> |
278 | + </defs> |
279 | + <sodipodi:namedview |
280 | + pagecolor="#ffffff" |
281 | + bordercolor="#666666" |
282 | + borderopacity="1" |
283 | + objecttolerance="10" |
284 | + gridtolerance="10" |
285 | + guidetolerance="10" |
286 | + inkscape:pageopacity="0" |
287 | + inkscape:pageshadow="2" |
288 | + inkscape:window-width="1855" |
289 | + inkscape:window-height="1056" |
290 | + id="namedview4" |
291 | + showgrid="false" |
292 | + showguides="true" |
293 | + inkscape:guide-bbox="true" |
294 | + inkscape:zoom="45.254834" |
295 | + inkscape:cx="12.76993" |
296 | + inkscape:cy="14.390292" |
297 | + inkscape:window-x="65" |
298 | + inkscape:window-y="24" |
299 | + inkscape:window-maximized="1" |
300 | + inkscape:current-layer="svg2" |
301 | + inkscape:snap-bbox="false"> |
302 | + <sodipodi:guide |
303 | + orientation="0,1" |
304 | + position="53.5,37.5" |
305 | + id="guide3007" /> |
306 | + </sodipodi:namedview> |
307 | + <rect |
308 | + style="fill:#d05164;fill-opacity:1;stroke:none" |
309 | + id="rect2982-5" |
310 | + width="8.0715103" |
311 | + height="31.993458" |
312 | + x="1.6336422" |
313 | + y="0.0012737503" |
314 | + ry="0" /> |
315 | + <rect |
316 | + style="fill:#d05164;fill-opacity:1;stroke:none" |
317 | + id="rect2982" |
318 | + width="36.046421" |
319 | + height="31.998526" |
320 | + x="1.6873904" |
321 | + y="0.0084995022" |
322 | + ry="8.0643663" /> |
323 | + <path |
324 | + id="path2987-23-0-9-7-5" |
325 | + style="fill:#ffffff;fill-opacity:1;stroke-width:1.5406878;stroke-miterlimit:4;stroke-dasharray:1.5406878, 6.1627512;stroke-dashoffset:0.7703439" |
326 | + d="m 20.969828,18.441773 c 0,0.888623 -0.720412,1.608978 -1.609035,1.608978 -0.888622,0 -1.608979,-0.720355 -1.608979,-1.608978 0,-0.888624 0.720357,-1.609036 1.608979,-1.609036 0.888623,0 1.609035,0.720412 1.609035,1.609036 z m 2.380792,-3.519786 c 0,0.888623 -0.720356,1.609033 -1.608978,1.609033 -0.888624,0 -1.609036,-0.72041 -1.609036,-1.609033 0,-0.888623 0.720412,-1.60898 1.609036,-1.60898 0.888622,0 1.608978,0.720357 1.608978,1.60898 z m -4.715156,-9.78e-4 c 0,0.888623 -0.720355,1.608978 -1.608978,1.608978 -0.888624,0 -1.608979,-0.720355 -1.608979,-1.608978 0,-0.888623 0.720355,-1.609035 1.608979,-1.609035 0.888623,0 1.608978,0.720412 1.608978,1.609035 z m 7.24089,-3.684795 c 0,0.979475 -0.794056,1.773531 -1.773588,1.773531 -0.979531,0 -1.773586,-0.794056 -1.773586,-1.773531 0,-0.979531 0.794055,-1.7735855 1.773586,-1.7735855 0.979532,0 1.773588,0.7940545 1.773588,1.7735855 z m -4.708009,0.01713 c 0,0.979531 -0.794056,1.773586 -1.773532,1.773586 -0.979531,0 -1.773586,-0.794055 -1.773586,-1.773586 0,-0.979531 0.794055,-1.7735296 1.773586,-1.7735296 0.979476,0 1.773532,0.7939986 1.773532,1.7735296 z m -4.760671,-0.01713 c 0,0.979531 -0.794056,1.773586 -1.773587,1.773586 -0.979531,-1.5e-5 -1.773586,-0.794069 -1.773586,-1.7736 0,-0.979476 0.794055,-1.7735311 1.773586,-1.7735311 0.979531,0 1.773587,0.7940551 1.773587,1.7735311 z" |
327 | + inkscape:connector-curvature="0" /> |
328 | + <rect |
329 | + style="fill:#323232;fill-opacity:1;stroke:none" |
330 | + id="rect4263" |
331 | + width="1.6118982" |
332 | + height="32.040779" |
333 | + x="1.6351844" |
334 | + y="0.0034180922" |
335 | + ry="0" /> |
336 | +</svg> |
The overall implementation looks good now. Just need some very minor fixes.
1. Try reducing the width of the button
2. Remove the anchors.leftMargin: units.gu(1) to bring it closer to the search field as shown in the design.
Atm we are ignoring the flat edge as shown in the design since I am not sure how to implement that. One way would be replacing the Button with an Image, but then you would not get the indent effect that you get when you press a button.