Merge lp:~paolorotolo/ubuntu-clock-app/search-button into lp:ubuntu-clock-app/saucy

[Paolo Rotolo]

Revamped search button to match design specification.

Revamped search button to match design specification. Fixes Bug 1221252.

[Nekhelesh Ramananthan (nik90)]

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.

review: Needs Fixing

[lp:~paolorotolo/ubuntu-clock-app/search-button]

185. By Paolo Rotolo on 2013-09-06

Made search button smaller.

186. By Paolo Rotolo on 2013-09-06

Removed anchors.leftMargin.

[Paolo Rotolo (paolorotolo)]

I'm working on the flat edge. I don't like the current result...

[Nekhelesh Ramananthan (nik90)]

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.

[lp:~paolorotolo/ubuntu-clock-app/search-button]

187. By Paolo Rotolo on 2013-09-06

Replaced the search Button with an Item.

188. By Paolo Rotolo on 2013-09-06

Replace search_icon.png with search_icon.svg.

[Nekhelesh Ramananthan (nik90)]

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://paste.ubuntu.com/6071885/.

The result of that is http://imgur.com/ZarSv6n

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.

[lp:~paolorotolo/ubuntu-clock-app/search-button]

189. By Paolo Rotolo on 2013-09-06

Merged nik's changes.

[Paolo Rotolo (paolorotolo)]

Thanks, I've merged all your changes.

review: Approve

[Nekhelesh Ramananthan (nik90)]

lgtm!

review: Approve

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

review: Approve (continuous-integration)

=== modified file 'clock/WorldClock.qml'
--- clock/WorldClock.qml	2013-09-05 17:13:40 +0000
+++ clock/WorldClock.qml	2013-09-06 20:22:56 +0000
@@ -73,14 +73,14 @@
         TextField {
             id: searchLabel
 
-            anchors { left: parent.left; leftMargin: (worldClocks.width - width - units.gu(1) - searchButton.width)/2; top: parent.top; bottom: parent.bottom }
+            anchors { left: parent.left; leftMargin: units.gu(2); top: parent.top; bottom: parent.bottom; right: searchButton.left; rightMargin: -units.gu(1) }
             width: worldClocks.width/1.5
             hasClearButton: true
             placeholderText: i18n.tr("Search")
             primaryItem: Image {
-                height: parent.height/1.4
-                width: parent.height/1.45
-                source: Qt.resolvedUrl("../images/search_icon.png")
+                height: parent.height/2
+                width: parent.height/2
+                source: Qt.resolvedUrl("../images/search_icon.svg")
             }
 
             // Provide a small pause before going online to search
@@ -102,24 +102,35 @@
             onTextChanged: search_timer.restart()
         }
 
-        Button {
+        Item {
             id: searchButton;
 
-            anchors { left: searchLabel.right; leftMargin: units.gu(1); top: parent.top; bottom: parent.bottom }
+            anchors { right: parent.right; rightMargin: units.gu(6.5); top: parent.top; bottom: parent.bottom }
+            height: searchLabel.height
             visible: !searchActivity.running
-            text: i18n.tr("Search")
+            Image {
+                id: name
+                source: Qt.resolvedUrl("../images/search_item.svg")
+            }
 
-            onClicked: {
-                if (searchLabel.text != "") {
-                    search_string = searchLabel.text;
-                    searchCityModel.source = searchCityUrl(search_string);
+            // Make searchButton clickable
+            MouseArea {
+                id: searchArea;
+                enabled: true;
+                anchors.fill: searchButton
+                onClicked: {
+                    if (searchLabel.text != "") {
+                        search_string = searchLabel.text;
+                        searchCityModel.source = searchCityUrl(search_string);
+                    }
                 }
             }
         }
 
+
         ActivityIndicator {
             id: searchActivity
-            anchors.centerIn: searchButton
+            anchors { verticalCenter: searchButton.verticalCenter; left: searchButton.left; leftMargin: units.gu(1.5) }
             running: searchCityModel.status === XmlListModel.Loading
 
         }
 
=== removed file 'images/[e-mail]'
 Binary files images/[e-mail]	2013-07-18 15:26:43 +0000 and images/[e-mail]	1970-01-01 00:00:00 +0000 differ
=== added file 'images/[e-mail]'
--- images/[e-mail]	1970-01-01 00:00:00 +0000
+++ images/[e-mail]	2013-09-06 20:22:56 +0000
@@ -0,0 +1,153 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="32"
+   height="32"
+   id="svg3133"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="search.svg">
+  <defs
+     id="defs3135">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3803">
+      <stop
+         style="stop-color:#e7e5e5;stop-opacity:1;"
+         offset="0"
+         id="stop3805" />
+      <stop
+         style="stop-color:#e2dfdf;stop-opacity:1"
+         offset="1"
+         id="stop3807" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3803"
+       id="linearGradient3809"
+       x1="53.012165"
+       y1="-102.79017"
+       x2="53.012165"
+       y2="-66.661224"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3803"
+       id="linearGradient3813"
+       gradientUnits="userSpaceOnUse"
+       x1="53.012165"
+       y1="-102.79017"
+       x2="53.012165"
+       y2="-66.661224"
+       gradientTransform="translate(-625,0)" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313708"
+     inkscape:cx="27.957393"
+     inkscape:cy="7.2819708"
+     inkscape:document-units="px"
+     inkscape:current-layer="g3842"
+     showgrid="true"
+     inkscape:window-width="1855"
+     inkscape:window-height="1056"
+     inkscape:window-x="65"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:snap-grids="true"
+     inkscape:snap-global="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:object-paths="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-object-midpoints="true"
+     inkscape:snap-center="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3016"
+       empspacing="6"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       originx="-2.98e-06px"
+       originy="2.6171874e-06px" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata3138">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-2.98e-6,-1020.3622)"
+     style="display:inline">
+    <g
+       transform="matrix(0.99934414,0,0,1,-106.92982,549.00002)"
+       id="g3842"
+       style="display:inline">
+      <rect
+         style="opacity:0.05;color:#000000;fill:none;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         id="rect3844"
+         width="32.021008"
+         height="32.000011"
+         x="107"
+         y="-503.36218"
+         transform="scale(1,-1)" />
+      <path
+         sodipodi:type="arc"
+         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"
+         id="path2995"
+         sodipodi:cx="35.999996"
+         sodipodi:cy="36.500011"
+         sodipodi:rx="33"
+         sodipodi:ry="33.5"
+         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"
+         transform="matrix(0.30695569,0,0,0.30279797,111.9601,476.31005)" />
+      <path
+         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"
+         d="m 131.23812,494.07329 -1.51211,1.51111 4.26947,4.26666 1.5121,-1.5111 z"
+         id="path3765"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccccc" />
+      <path
+         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"
+         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"
+         id="path3767"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="cscczccc" />
+    </g>
+  </g>
+</svg>
 
=== added file 'images/[e-mail]'
--- images/[e-mail]	1970-01-01 00:00:00 +0000
+++ images/[e-mail]	2013-09-06 20:22:56 +0000
@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   width="40"
+   height="32"
+   sodipodi:docname="[e-mail]">
+  <metadata
+     id="metadata8">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs6">
+    <linearGradient
+       id="linearGradient4265">
+      <stop
+         style="stop-color:#333333;stop-opacity:1;"
+         offset="0"
+         id="stop4267" />
+      <stop
+         id="stop4273"
+         offset="0.5"
+         style="stop-color:#333333;stop-opacity:0.24855492;" />
+      <stop
+         style="stop-color:#333333;stop-opacity:0;"
+         offset="1"
+         id="stop4269" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1855"
+     inkscape:window-height="1056"
+     id="namedview4"
+     showgrid="false"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:zoom="45.254834"
+     inkscape:cx="12.76993"
+     inkscape:cy="14.390292"
+     inkscape:window-x="65"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     inkscape:snap-bbox="false">
+    <sodipodi:guide
+       orientation="0,1"
+       position="53.5,37.5"
+       id="guide3007" />
+  </sodipodi:namedview>
+  <rect
+     style="fill:#d05164;fill-opacity:1;stroke:none"
+     id="rect2982-5"
+     width="8.0715103"
+     height="31.993458"
+     x="1.6336422"
+     y="0.0012737503"
+     ry="0" />
+  <rect
+     style="fill:#d05164;fill-opacity:1;stroke:none"
+     id="rect2982"
+     width="36.046421"
+     height="31.998526"
+     x="1.6873904"
+     y="0.0084995022"
+     ry="8.0643663" />
+  <path
+     id="path2987-23-0-9-7-5"
+     style="fill:#ffffff;fill-opacity:1;stroke-width:1.5406878;stroke-miterlimit:4;stroke-dasharray:1.5406878, 6.1627512;stroke-dashoffset:0.7703439"
+     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"
+     inkscape:connector-curvature="0" />
+  <rect
+     style="fill:#323232;fill-opacity:1;stroke:none"
+     id="rect4263"
+     width="1.6118982"
+     height="32.040779"
+     x="1.6351844"
+     y="0.0034180922"
+     ry="0" />
+</svg>