Unity 8

Merge lp:~aacid/unity8/optionselector_filter_visual_improvements into lp:unity8

optionselector_filter_visual_improvements
Merge into trunk

Proposed by Albert Astals Cid on 2015-11-10

Status:	Merged
Approved by:	Andrea Cimitan on 2015-12-18
Approved revision:	2021
Merged at revision:	2297
Proposed branch:	lp:~aacid/unity8/optionselector_filter_visual_improvements
Merge into:	lp:unity8
Prerequisite:	lp:~aacid/unity8/optionselector_filter
Diff against target:	520 lines (+159/-111) 9 files modified plugins/Dash/ScopeStyle.qml (+1/-1) qml/Dash/DashNavigation.qml (+2/-20) qml/Dash/DashNavigationHeader.qml (+1/-3) qml/Dash/DashNavigationList.qml (+30/-19) qml/Dash/DashPageHeader.qml (+75/-53) qml/Dash/Filters/FilterOptionSelector.qml (+1/-0) qml/Dash/FiltersPopover.qml (+1/-0) qml/Dash/GenericScopeView.qml (+1/-1) qml/Dash/PageHeaderExtraPanel.qml (+47/-14)
To merge this branch:	bzr merge lp:~aacid/unity8/optionselector_filter_visual_improvements
Related bugs:	Link a bug report

Reviewer	Review Type	Date Requested	Status
Andrea Cimitan (community)		2015-11-10	Approve on 2015-12-18
PS Jenkins bot	continuous-integration		Needs Fixing on 2015-12-16
Review via email: mp+277138@code.launchpad.net

This proposal supersedes a proposal from 2015-11-10.

Commit Message

Match design visuals for the new dash navigation/page header popup

Description of the Change

* Are there any related MPs required for this MP to build/function as expected?
Prerequisite

* Did you perform an exploratory manual test run of your code change and any related functionality?
Yes

* Did you make sure that your branch does not contain spurious tags?
Yes

* If you changed the packaging (debian), did you subscribe the ubuntu-unity team to this MP?
N/A

* If you changed the UI, has there been a design review?
This is to match the visuals provided at https://docs.google.com/a/canonical.com/presentation/d/1-cJXJPLml757IxAn8QJbXoyzUJMSby-PrGYFNNTv188/edit?usp=sharing by design

PS Jenkins bot (ps-jenkins) wrote on 2015-11-10:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/6694/rebuild

review: Needs Fixing (continuous-integration)

lp:~aacid/unity8/optionselector_filter_visual_improvements updated on 2015-11-16

2011. By Albert Astals Cid on 2015-11-12: Merge
2012. By Albert Astals Cid on 2015-11-16: Merge

PS Jenkins bot (ps-jenkins) wrote on 2015-11-16:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/6710/rebuild

review: Needs Fixing (continuous-integration)

PS Jenkins bot (ps-jenkins) wrote on 2015-11-17:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/6724/rebuild

review: Needs Fixing (continuous-integration)

lp:~aacid/unity8/optionselector_filter_visual_improvements updated on 2015-11-18

2013. By Albert Astals Cid on 2015-11-18: Merge

PS Jenkins bot (ps-jenkins) wrote on 2015-11-18:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/6729/rebuild

review: Needs Fixing (continuous-integration)

lp:~aacid/unity8/optionselector_filter_visual_improvements updated on 2015-11-23

2014. By Albert Astals Cid on 2015-11-23: Merge

PS Jenkins bot (ps-jenkins) wrote on 2015-11-23:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/6771/rebuild

review: Needs Fixing (continuous-integration)

lp:~aacid/unity8/optionselector_filter_visual_improvements updated on 2015-11-23

2015. By Albert Astals Cid on 2015-11-23: Merge

PS Jenkins bot (ps-jenkins) wrote on 2015-11-23:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/6779/rebuild

review: Needs Fixing (continuous-integration)

lp:~aacid/unity8/optionselector_filter_visual_improvements updated on 2015-11-30

2016. By Albert Astals Cid on 2015-11-30: Merge

Andrea Cimitan (cimi) wrote on 2015-11-30:

Many hardcoded colors. For some of them, we can reuse the uitk palette (like foreground for example). Can we reuse that?

review: Needs Information

PS Jenkins bot (ps-jenkins) wrote on 2015-11-30:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/6840/rebuild

review: Needs Fixing (continuous-integration)

lp:~aacid/unity8/optionselector_filter_visual_improvements updated on 2015-12-01

2017. By Albert Astals Cid on 2015-12-01: Merge

PS Jenkins bot (ps-jenkins) wrote on 2015-12-01:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/6849/rebuild

review: Needs Fixing (continuous-integration)

Albert Astals Cid (aacid) wrote on 2015-12-01:

> Many hardcoded colors. For some of them, we can reuse the uitk palette (like
> foreground for example). Can we reuse that?

The problem i see is this:
* We don't have all the colors they want in the palette
* The palette depends on the theme

So if we make some of the colors be palette based (the ones that are in there) but some others not, when you change them it will most likely look ultra weird, with some of the colors following the theme and some not. At least with the current code none of them will follow the theme, which is also bad but in my opinion less bad.

I'm open to convincing otherwise, though

lp:~aacid/unity8/optionselector_filter_visual_improvements updated on 2015-12-09

2018. By Albert Astals Cid on 2015-12-09: Merge

PS Jenkins bot (ps-jenkins) wrote on 2015-12-09:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/6895/rebuild

review: Needs Fixing (continuous-integration)

lp:~aacid/unity8/optionselector_filter_visual_improvements updated on 2015-12-14

2019. By Albert Astals Cid on 2015-12-14: Merge

PS Jenkins bot (ps-jenkins) wrote on 2015-12-14:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/6933/rebuild

review: Needs Fixing (continuous-integration)

lp:~aacid/unity8/optionselector_filter_visual_improvements updated on 2015-12-15

2020. By Albert Astals Cid on 2015-12-15: Merge

PS Jenkins bot (ps-jenkins) wrote on 2015-12-15:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/6946/rebuild

review: Needs Fixing (continuous-integration)

lp:~aacid/unity8/optionselector_filter_visual_improvements updated on 2015-12-16

2021. By Albert Astals Cid on 2015-12-16: Fix binding loop and label misplacement on the phone

PS Jenkins bot (ps-jenkins) wrote on 2015-12-16:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/6962/rebuild

review: Needs Fixing (continuous-integration)

Andrea Cimitan (cimi) wrote on 2015-12-18:

* Did you perform an exploratory manual test run of the code change and any related functionality?
y
* Did CI run pass? If not, please explain why.
unrelated
* Did you make sure that the branch does not contain spurious tags?
y

review: Approve

lp:~aacid/unity8/optionselector_filter_visual_improvements updated on 2016-03-14

2022. By Albert Astals Cid on 2016-01-11

Merge

2023. By Albert Astals Cid on 2016-01-13

Merge

2024. By Albert Astals Cid on 2016-01-22

Merge

2025. By Albert Astals Cid on 2016-01-26

Fix clicking on recent searches

2026. By Albert Astals Cid on 2016-01-26

Clicking on the (X) filters should open filters too instead of focus on search field

2027. By Albert Astals Cid on 2016-01-26

Merge

2028. By Albert Astals Cid on 2016-01-27

Merge

2029. By Albert Astals Cid on 2016-01-27

Focus the expandable on expanding

Removes focus from other filters like the range selector

2030. By Albert Astals Cid on 2016-02-04

Merge

2031. By Albert Astals Cid on 2016-02-04

Move the settings button out of the search line edit

2032. By Albert Astals Cid on 2016-02-11

Design wants to experiment/test with a bigger top margin

2033. By Albert Astals Cid on 2016-02-11

we show filter button all the time now if there's filters

2034. By Albert Astals Cid on 2016-02-19

Merge

2035. By Albert Astals Cid on 2016-02-22

Merge

2036. By Albert Astals Cid on 2016-03-03

Make the cancelButton be bigger than jsut exactly the cancel text

2037. By Albert Astals Cid on 2016-03-03

less warnings on rebuilding of the repeater

2038. By Albert Astals Cid on 2016-03-03

Fix height calculations

2039. By Albert Astals Cid on 2016-03-03

Hide the extraPanel when showing the popup

2040. By Albert Astals Cid on 2016-03-03

Merge

2041. By Albert Astals Cid on 2016-03-07

Merge

2042. By Albert Astals Cid on 2016-03-08

Merge

2043. By Albert Astals Cid on 2016-03-08

We need to clip here

Otherwise you can touch the items that "outside" the popover when there are too many that the flickable height != contentHeight

2044. By Albert Astals Cid on 2016-03-14

Merge

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk

Subscribers

People subscribed via source and target branches

to all changes:

Albert Astals Cid

Mohammad Rakibul Hasan

Unity Team

 === modified file 'plugins/Dash/ScopeStyle.qml'
 --- plugins/Dash/ScopeStyle.qml	2015-07-15 15:07:19 +0000
 +++ plugins/Dash/ScopeStyle.qml	2016-03-14 08:53:47 +0000
@@ -58,7 +58,7 @@
      readonly property url headerLogo: "logo" in d.headerStyle ? d.headerStyle["logo"] : ""
      /// Background style for the header
--    readonly property url headerBackground: "background" in d.headerStyle ? d.headerStyle["background"] : "color:///#f5f5f5"
++    readonly property url headerBackground: "background" in d.headerStyle ? d.headerStyle["background"] : "color:///#ffffff"
      /// Foreground color for the header
      readonly property color headerForeground: "foreground-color" in d.headerStyle ? d.headerStyle["foreground-color"] : foreground
 === modified file 'qml/Dash/DashNavigation.qml'
 --- qml/Dash/DashNavigation.qml	2016-03-14 08:53:46 +0000
 +++ qml/Dash/DashNavigation.qml	2016-03-14 08:53:47 +0000
@@ -24,7 +24,6 @@
      // set by parent
      property var scope: null
--    property var scopeStyle: null
      property real availableHeight
      signal leafClicked()
@@ -43,13 +42,6 @@
+         }
+     }
--    QtObject {
--        id: d
--        readonly property color foregroundColor: root.scopeStyle
--                                                 ? root.scopeStyle.getTextColor(backgroundItem.luminance)
--                                                 : theme.palette.normal.baseText
--    }
--
      Column {
          id: headersColumn
          anchors {
@@ -82,11 +74,10 @@
              delegate: DashNavigationHeader {
                  objectName: "dashNavigationHeader" + index
                  height: index == 0 && headersModel.count > 1 ? 0 : units.gu(5)
--                width: parent.width
++                width: headersColumn.width
                  backVisible: index != 0
                  text: headerText
--                foregroundColor: d.foregroundColor
                  onBackClicked: {
                      scope.setNavigationState(parentNavigationId);
@@ -124,12 +115,7 @@
              left: parent.left
              right: parent.right
+         }
--        property int maxHeight: -1
--        Component.onCompleted: updateMaxHeight();
--        function updateMaxHeight()
--        {
--            maxHeight = root.availableHeight - mapToItem(root, 0, 0).y;
--        }
++        readonly property int maxHeight: root.availableHeight - navigationListView.y
          property int prevHeight: maxHeight
          height: currentItem ? currentItem.height : maxHeight
@@ -143,13 +129,9 @@
              objectName: "navigation" + index
              visible: height > 0
              width: navigationListView.width
--            itemsIndent: index != 0 ? units.gu(5) : 0
--            scopeStyle: root.scopeStyle
--            foregroundColor: d.foregroundColor
              property real desiredHeight: {
                  if (navigation && navigation.loaded && x == navigationListView.contentX)
+                 {
--                    navigationListView.updateMaxHeight();
                      return Math.min(implicitHeight, navigationListView.maxHeight);
                  } else {
                      return navigationListView.prevHeight;
 === modified file 'qml/Dash/DashNavigationHeader.qml'
 --- qml/Dash/DashNavigationHeader.qml	2016-03-14 08:53:46 +0000
 +++ qml/Dash/DashNavigationHeader.qml	2016-03-14 08:53:47 +0000
@@ -22,7 +22,6 @@
      id: root
      property alias backVisible: backImageItem.visible
--    property alias foregroundColor: backImage.color
      property alias textEnabled: textItem.enabled
      property alias text: textLabel.text
@@ -63,8 +62,7 @@
                  leftMargin: backImageItem.visible ? 0 : units.gu(2)
                  rightMargin: units.gu(2)
+             }
--            font.bold: true
--            color: root.foregroundColor
++            color: "#5D5D5D"
              wrapMode: Text.Wrap
              maximumLineCount: 2
              elide: Text.ElideMiddle
 === modified file 'qml/Dash/DashNavigationList.qml'
 --- qml/Dash/DashNavigationList.qml	2016-03-14 08:53:46 +0000
 +++ qml/Dash/DashNavigationList.qml	2016-03-14 08:53:47 +0000
@@ -16,16 +16,12 @@
  import QtQuick 2.4
  import Ubuntu.Components 1.3
--import Ubuntu.Components.ListItems 1.3 as ListItem
  import "../Components"
  Item {
      id: root
--    property real itemsIndent: 0
      property var navigation: null
      property var currentNavigation: null
--    property var scopeStyle: null
--    property color foregroundColor: theme.palette.normal.baseText
      signal enterNavigation(var newNavigationId, string newNavigationLabel, bool hasChildren)
      readonly property int itemHeight: units.gu(5)
@@ -56,27 +52,42 @@
              Repeater {
                  model: navigation && navigation.loaded ? navigation : null
                  clip: true
--                delegate: ListItem.Standard {
++                delegate: ListItem {
                      objectName: root.objectName + "child" + index
                      height: root.itemHeight
--                    showDivider: index != navigation.count - 1
--                    selected: isActive
--                    anchors.left: parent.left
--                    anchors.leftMargin: itemsIndent
--                    anchors.right: parent.right
++                    width: column.width
++                    anchors {
++                        left: column.left
++                        right: column.right
++                        leftMargin: units.gu(2)
++                        rightMargin: units.gu(2)
++                    }
                      onClicked: root.enterNavigation(navigationId, allLabel != "" ? allLabel : label, hasChildren)
++                    Icon {
++                        id: leftIcon
++                        anchors {
++                            verticalCenter: parent.verticalCenter
++                            left: parent.left
++                        }
++                        height: units.gu(2)
++                        width: height
++                        name: "tick"
++                        color: "#3EB34F"
++                        visible: isActive
++                    }
++
                      Label {
                          anchors {
                              verticalCenter: parent.verticalCenter
--                            left: parent.left
--                            leftMargin: itemsIndent > 0 ? 0 : units.gu(2)
--                            right: rightIcon.visible ? rightIcon.left : parent.right
--                            rightMargin: rightIcon.visible ? units.gu(0.5) : units.gu(2)
++                            left: leftIcon.right
++                            leftMargin: units.gu(1)
++                            right: rightIcon.left
++                            rightMargin: units.gu(2)
+                         }
                          text: label
--                        color: root.foregroundColor
++                        color: isActive ? "#333333" : "#888888"
                          wrapMode: Text.Wrap
                          maximumLineCount: 2
                          elide: Text.ElideMiddle
@@ -87,14 +98,14 @@
                          anchors {
                              verticalCenter: parent.verticalCenter
                              right: parent.right
--                            rightMargin: units.gu(2)
+                         }
                          height: units.gu(2)
                          width: height
--                        name: hasChildren ? "go-next" : "tick"
--                        color: root.foregroundColor
--                        visible: hasChildren || isActive
++                        name: "go-next"
++                        visible: hasChildren
+                     }
++
++                    divider.visible: index != navigation.count - 1
+                 }
+             }
+         }
 === modified file 'qml/Dash/DashPageHeader.qml'
 --- qml/Dash/DashPageHeader.qml	2016-03-14 08:53:46 +0000
 +++ qml/Dash/DashPageHeader.qml	2016-03-14 08:53:47 +0000
@@ -202,51 +202,43 @@
                              left: parent.left
                              bottom: parent.bottom
                              bottomMargin: units.gu(1)
--                            right: cancelLabel.left
--                            rightMargin: units.gu(1)
--                        }
--
--                        readonly property bool clearIsSettings: !searchTextField.focus && root.scopeHasFilters
--
--                        primaryItem: Label {
--                            text: root.navigationTag
--                        }
--
--                        secondaryItem: Row {
++                            right: settingsButton.left
++                            rightMargin: settingsButton.visible ? 0 : units.gu(2)
++                        }
++
++                        primaryItem: Rectangle {
++                            color: "#F5F4F5"
++                            width: root.navigationTag != "" ? tagLabel.width + units.gu(2) : 0
++                            height: root.navigationTag != "" ? tagLabel.height + units.gu(1) : 0
++                            radius: units.gu(0.5)
++                            Label {
++                                id: tagLabel
++                                text: root.navigationTag
++                                anchors.centerIn: parent
++                                color: "#333333"
++                            }
++                        }
++
++                        secondaryItem: AbstractButton {
++                            id: clearButton
                              height: searchTextField.height
--
--                            AbstractButton {
--                                id: clearOrSettingsButton
--                                height: parent.height
--                                width: height
--                                enabled: searchTextField.text.length > 0 || root.navigationTag != ""
--
--                                Image {
--                                    objectName: "clearIcon"
--                                    anchors.fill: parent
--                                    anchors.margins: units.gu(.75)
--                                    source: searchTextField.clearIsSettings ? "image://theme/settings" : "image://theme/clear"
--                                    opacity: parent.enabled
--                                    visible: opacity > 0
--                                    Behavior on opacity {
--                                        UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
--                                    }
--                                }
--
--                                onClicked: {
--                                    if (searchTextField.clearIsSettings) {
--                                        root.showFiltersPopup(clearOrSettingsButton);
--                                    } else {
--                                        root.clearSearch(true);
--                                    }
++                            width: height
++                            enabled: searchTextField.text.length > 0 || root.navigationTag != ""
++
++                            Image {
++                                objectName: "clearIcon"
++                                anchors.fill: parent
++                                anchors.margins: units.gu(1)
++                                source: "image://theme/clear"
++                                opacity: parent.enabled
++                                visible: opacity > 0
++                                Behavior on opacity {
++                                    UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
+                                 }
+                             }
--                            Label {
--                                visible: searchTextField.clearIsSettings && root.activeFiltersCount > 0
--                                height: parent.height
--                                text: root.activeFiltersCount
--                                verticalAlignment: Text.AlignVCenter
++                            onClicked: {
++                                root.clearSearch(true);
+                             }
+                         }
@@ -264,22 +256,52 @@
+                         }
+                     }
--                    Label {
--                        id: cancelLabel
--                        text: i18n.tr("Cancel")
--                        color: header.panelForegroundColor
--                        verticalAlignment: Text.AlignVCenter
++                    AbstractButton {
++                        id: settingsButton
++
++                        width: root.scopeHasFilters ? height : 0
++                        visible: width > 0
++                        anchors {
++                            top: parent.top
++                            right: cancelButton.left
++                            bottom: parent.bottom
++                            rightMargin: units.gu(-1)
++                        }
++
++                        Icon {
++                            anchors.fill: parent
++                            anchors.margins: units.gu(2)
++                            name: "filters"
++                            color: root.activeFiltersCount > 0 ? UbuntuColors.orange : Qt.rgba(0.0, 0.0, 0.0, 0.0)
++                        }
++
++                        onClicked: {
++                            root.showFiltersPopup(settingsButton);
++                        }
++                    }
++
++                    AbstractButton {
++                        id: cancelButton
++                        width: cancelLabel.width + cancelLabel.anchors.rightMargin + cancelLabel.anchors.leftMargin
                          anchors {
                              top: parent.top
                              right: parent.right
                              bottom: parent.bottom
--                            margins: units.gu(1)
--                        }
--                        AbstractButton {
--                            anchors.fill: parent
--                            onClicked: {
--                                root.clearSearch(false);
--                                headerContainer.showSearch = false;
++                        }
++                        onClicked: {
++                            root.clearSearch(false);
++                            headerContainer.showSearch = false;
++                        }
++                        Label {
++                            id: cancelLabel
++                            text: i18n.tr("Cancel")
++                            color: header.panelForegroundColor
++                            verticalAlignment: Text.AlignVCenter
++                            anchors {
++                                verticalCenter: parent.verticalCenter
++                                right: parent.right
++                                rightMargin: units.gu(2)
++                                leftMargin: units.gu(1)
+                             }
+                         }
+                     }
 === modified file 'qml/Dash/Filters/FilterOptionSelector.qml'
 --- qml/Dash/Filters/FilterOptionSelector.qml	2016-03-14 08:53:46 +0000
 +++ qml/Dash/Filters/FilterOptionSelector.qml	2016-03-14 08:53:47 +0000
@@ -34,6 +34,7 @@
          onClicked: {
              expanded = !expanded;
++            forceActiveFocus();
+         }
          Item {
 === modified file 'qml/Dash/FiltersPopover.qml'
 --- qml/Dash/FiltersPopover.qml	2016-03-14 08:53:46 +0000
 +++ qml/Dash/FiltersPopover.qml	2016-03-14 08:53:47 +0000
@@ -37,6 +37,7 @@
              var parentAndKeyboard = root.parent.height - posToRootParent - (Qt.inputMethod.visible ? Qt.inputMethod.keyboardRectangle.height + units.gu(3) : 0)
              return Math.min(parentAndKeyboard, Math.min(threeQuartersParent, column.height));
+         }
++        clip: true
          contentHeight: column.height
          contentWidth: width
 === modified file 'qml/Dash/GenericScopeView.qml'
 --- qml/Dash/GenericScopeView.qml	2016-03-14 08:53:46 +0000
 +++ qml/Dash/GenericScopeView.qml	2016-03-14 08:53:47 +0000
@@ -651,6 +651,7 @@
+                 }
+             }
              onShowFiltersPopup: { // item
++                extraPanel.visible = false;
                  scopeView.filtersPopover = PopupUtils.open(Qt.resolvedUrl("FiltersPopover.qml"), item, { "contentWidth": scopeView.width - units.gu(2) } );
+             }
+         }
@@ -668,7 +669,6 @@
              searchHistory: SearchHistoryModel
              scope: scopeView.scope
--            scopeStyle: scopeView.scopeStyle
              windowHeight: scopeView.height
              onHistoryItemClicked: {
 === modified file 'qml/Dash/PageHeaderExtraPanel.qml'
 --- qml/Dash/PageHeaderExtraPanel.qml	2016-03-14 08:53:46 +0000
 +++ qml/Dash/PageHeaderExtraPanel.qml	2016-03-14 08:53:47 +0000
@@ -16,20 +16,19 @@
  import QtQuick 2.4
  import Ubuntu.Components 1.3
--import Ubuntu.Components.ListItems 1.3
++import Ubuntu.Components.ListItems 1.3 as ListItems
  import "Filters" as Filters
  Item {
      id: root
--    readonly property real searchesHeight: recentSearchesRepeater.count > 0 ? searchColumn.height + recentSearchesLabels.height + recentSearchesLabels.anchors.margins : 0
++    readonly property real searchesHeight: recentSearchesRepeater.count > 0 ? searchColumn.height + recentSearchesLabels.height + recentSearchesLabels.anchors.topMargin : 0
--    implicitHeight: searchesHeight + dashNavigation.implicitHeight + primaryFilter.height
++    implicitHeight: searchesHeight + dashNavigation.implicitHeight + dashNavigation.anchors.topMargin + primaryFilter.height + primaryFilter.anchors.topMargin
      // Set by parent
      property ListModel searchHistory
      property var scope: null
--    property var scopeStyle: null
      property real windowHeight
      // Used by PageHeader
@@ -47,6 +46,10 @@
          anchors.fill: parent
+     }
++    ListItems.ThinDivider {
++        anchors.top: parent.top
++    }
++
      Label {
          id: recentSearchesLabels
          text: i18n.tr("Recent Searches")
@@ -54,7 +57,8 @@
          anchors {
              top: parent.top
              left: parent.left
--            margins: units.gu(1)
++            margins: units.gu(2)
++            topMargin: units.gu(3)
+         }
+     }
@@ -65,7 +69,8 @@
          anchors {
              top: parent.top
              right: parent.right
--            margins: units.gu(1)
++            margins: units.gu(2)
++            topMargin: units.gu(3)
+         }
          AbstractButton {
@@ -87,13 +92,40 @@
              objectName: "recentSearchesRepeater"
              model: searchHistory
--            delegate: Standard {
--                showDivider: index < recentSearchesRepeater.count - 1
--                height: units.gu(4)
--                text: query
--                iconName: "search"
--                iconFrame: false
--                onClicked: root.historyItemClicked(text)
++            delegate: ListItem {
++                anchors {
++                    left: parent.left
++                    right: parent.right
++                    leftMargin: units.gu(2)
++                    rightMargin: units.gu(2)
++                }
++                height: units.gu(5)
++
++                Icon {
++                    id: searchIcon
++                    anchors {
++                        verticalCenter: parent.verticalCenter
++                        left: parent.left
++                    }
++                    height: units.gu(1.5)
++                    width: height
++                    name: "search"
++                }
++
++                Label {
++                    anchors {
++                        verticalCenter: parent.verticalCenter
++                        left: searchIcon.right
++                        leftMargin: units.gu(1)
++                        right: parent.right
++                    }
++                    text: query
++                    color: "#888888"
++                }
++
++                divider.visible: index != repeater.count - 1 || (scope && scope.hasNavigation) || primaryFilter.active
++
++                onClicked: root.historyItemClicked(query)
+             }
+         }
+     }
@@ -103,10 +135,10 @@
          scope: root.scope
          anchors {
              top: recentSearchesRepeater.count > 0 ? searchColumn.bottom : parent.top
++            topMargin: implicitHeight && recentSearchesRepeater.count > 0 ? units.gu(2) : 0
              left: parent.left
              right: parent.right
+         }
--        scopeStyle: root.scopeStyle
          availableHeight: windowHeight * 4 / 6 - searchesHeight
          onLeafClicked: root.dashNavigationLeafClicked();
@@ -120,6 +152,7 @@
          anchors {
              top: recentSearchesRepeater.count > 0 ? searchColumn.bottom : parent.top
++            topMargin: active && recentSearchesRepeater.count > 0 ? units.gu(2) : 0
              left: parent.left
              right: parent.right
+         }