Merge lp:~rpadovani/webbrowser-app/suggestions-list-visual-update into lp:webbrowser-app

[Riccardo Padovani]

Update the visual design of suggestions list according to design spec

Update the visual design of suggestions list according to design spec.

In spec there is specified the size of text. IMO is too small now, and was better the previous size

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:988
http://jenkins.qa.ubuntu.com/job/webbrowser-app-ci/1707/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/2518/console
    SUCCESS: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-amd64-ci/464
    SUCCESS: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-armhf-ci/464
        deb: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-armhf-ci/464/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-i386-ci/464
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-vivid-mako/2180/console
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/2516
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/2516/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/20007

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/webbrowser-app-ci/1707/rebuild

review: Needs Fixing (continuous-integration)

[lp:~rpadovani/webbrowser-app/suggestions-list-visual-update]

989. By Riccardo Padovani on 2015-06-12

Merge from upstream and fix conflicts

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:989
http://jenkins.qa.ubuntu.com/job/webbrowser-app-ci/1883/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/3183
    SUCCESS: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-amd64-ci/640
    SUCCESS: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-armhf-ci/640
        deb: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-armhf-ci/640/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-i386-ci/640
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-vivid-mako/2676
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/3181
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/3181/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/21163

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/webbrowser-app-ci/1883/rebuild

review: Needs Fixing (continuous-integration)

Unmerged revisions

989. By Riccardo Padovani on 2015-06-12

Merge from upstream and fix conflicts

988. By Riccardo Padovani on 2015-04-29

Update visual design of suggestions list

=== modified file 'src/app/webbrowser/Browser.qml'
--- src/app/webbrowser/Browser.qml	2015-06-02 14:26:38 +0000
+++ src/app/webbrowser/Browser.qml	2015-06-12 09:31:31 +0000
@@ -365,10 +365,10 @@
             enabled: opacity > 0
             anchors {
                 top: chrome.bottom
-                horizontalCenter: parent.horizontalCenter
+                left: parent.left
+                right: parent.right
             }
-            width: chrome.width - units.gu(5)
-            height: enabled ? Math.min(contentHeight, tabContainer.height - chrome.height - units.gu(2)) : 0
+            height: enabled ? contentHeight : 0
 
             searchTerms: chrome.text.split(/\s+/g).filter(function(term) { return term.length > 0 })
 

=== modified file 'src/app/webbrowser/Suggestion.qml'
--- src/app/webbrowser/Suggestion.qml	2015-04-22 11:00:02 +0000
+++ src/app/webbrowser/Suggestion.qml	2015-06-12 09:31:31 +0000
@@ -23,10 +23,12 @@
 // Not using ListItem.Subtitled because it’s not themable,
 // and we want the subText to be on one line only.
 ListItem.Base {
+    id: root
     property alias title: label.text
     property alias subtitle: subLabel.text
     property alias icon: icon.name
     property url url
+    property var textColor: "#5d5d5d"
 
     signal selected(url url)
 
@@ -34,6 +36,10 @@
     // disable focus handling
     activeFocusOnPress: false
 
+    onPressedChanged: {
+        textColor = pressed ? "#db4923" : "#5d5d5d"
+    }
+
     Item  {
         id: middleVisuals
         anchors {
@@ -63,6 +69,8 @@
                 right: parent.right
             }
 
+            color: root.textColor
+            fontSize: "x-small"
             elide: Text.ElideRight
         }
 
@@ -74,7 +82,8 @@
                 leftMargin: units.gu(2)
                 right: parent.right
             }
-            fontSize: "small"
+            color: root.textColor
+            fontSize: "xx-small"
             elide: Text.ElideRight
             visible: text !== ""
         }

=== modified file 'src/app/webbrowser/Suggestions.qml'
--- src/app/webbrowser/Suggestions.qml	2015-05-12 09:56:40 +0000
+++ src/app/webbrowser/Suggestions.qml	2015-06-12 09:31:31 +0000
@@ -41,10 +41,15 @@
         id: suggestionsList
         anchors.fill: parent
 
+        boundsBehavior: childrenRect.height > height ?
+                                            Flickable.DragAndOvershootBounds :
+                                            Flickable.StopAtBounds
+
         model: suggestions.models
+
         delegate: Column {
             id: suggestionsSection
-            width: suggestionsList.width
+            anchors {left: parent.left; right: parent.right}
             height: childrenRect.height
 
             property string icon: models[index].icon
@@ -57,7 +62,12 @@
 
                 delegate: Suggestion {
                     id: suggestion
-                    width: suggestionsList.width
+
+                    anchors {
+                        left: parent ? parent.left : undefined
+                        right: parent ? parent.right : undefined
+                    }
+
                     showDivider: suggestionsSection.firstItemIndex + index <
                                  suggestions.count - 1
 
@@ -66,8 +76,8 @@
                     // expose their data differently
                     property var item: (model.modelData) ? model.modelData : model
 
-                    title: highlightTerms(item.title)
-                    subtitle: suggestionsSection.displayUrl ? highlightTerms(item.url) : ""
+                    title: highlightTerms(item.title, pressed)
+                    subtitle: suggestionsSection.displayUrl ? highlightTerms(item.url, pressed) : ""
                     icon: suggestionsSection.icon
 
                     onSelected: suggestions.selected(item.url)
@@ -89,14 +99,15 @@
         return new RegExp(escaped, 'ig')
     }
 
-    function highlightTerms(text) {
-        // Highlight the matching terms (bold and Ubuntu orange)
+    function highlightTerms(text, pressed) {
+        // Highlight the matching terms (bold and #db4923 if pressed, otherwise #752571)
+        var color = pressed ? "#db4923" : "#752571"
         if (text === undefined) {
             return ''
         }
         var highlighted = text.toString()
         var count = searchTerms.length
-        var highlight = '<b><font color="%1">$&</font></b>'.arg(UbuntuColors.orange)
+        var highlight = '<b><font color="%1">$&</font></b>'.arg(color)
         for (var i = 0; i < count; ++i) {
             var term = searchTerms[i]
             highlighted = highlighted.replace(escapeTerm(term), highlight)