Merge lp:~unity-team/unity8/uitkPageHeader into lp:unity8

[Michael Terry]

Use PageHeader instead Ambiance's PageHeadStyle

This is a carry-over from https://code.launchpad.net/~cimi/unity8/uitkPageHeader/+merge/294937

I just needed to rebase it to avoid conflicts. Will carry its approval over as well.

[lp:~unity-team/unity8/uitkPageHeader]

2332. By Michael Terry on 2016-05-17

Fix splash header color

[Andrea Cimitan (cimi)]

thank you

review: Approve

[lp:~unity-team/unity8/uitkPageHeader]

2333. By Michael Terry on 2016-05-19

And specify dividerColor

=== removed file 'qml/Components/Header.qml'
--- qml/Components/Header.qml	2016-01-25 10:12:48 +0000
+++ qml/Components/Header.qml	1970-01-01 00:00:00 +0000
@@ -1,28 +0,0 @@
-/*
- * Copyright (C) 2014 Canonical, Ltd.
- *
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation; version 3.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import Ubuntu.Components 1.3
-import Ubuntu.Components.Themes.Ambiance 1.3
-
-PageHeadStyle {
-    // FIXME: Don't use this but PageHeader from Ubuntu.Components 1.3.
-    id: root
-
-    property var styledItem: root
-    property string title
-    property var config: PageHeadConfiguration {}
-    property var contents: null
-}

=== modified file 'qml/Dash/DashPageHeader.qml'
--- qml/Dash/DashPageHeader.qml	2016-04-27 15:01:10 +0000
+++ qml/Dash/DashPageHeader.qml	2016-05-19 15:22:50 +0000
@@ -16,7 +16,7 @@
 
 import QtQuick 2.4
 import Ubuntu.Components 1.3
-import Ubuntu.Components.Themes.Ambiance 1.3
+import Ubuntu.Components.Popups 1.3
 import Ubuntu.Components.ListItems 1.3
 import "../Components"
 
@@ -78,13 +78,13 @@
         }
     }
 
-    function closePopup(keepFocus) {
+    function closePopup(keepFocus, keepSearch) {
         if (extraPanel.visible) {
             extraPanel.visible = false;
         } else if (!keepFocus) {
-            unfocus();
+            unfocus(keepSearch);
         }
-        if (!searchTextField.text && !root.navigationTag && searchHistory.count == 0) {
+        if (!keepSearch && !searchTextField.text && !root.navigationTag && searchHistory.count == 0) {
             headerContainer.showSearch = false;
         }
     }
@@ -97,9 +97,9 @@
         closePopup(keepFocus);
     }
 
-    function unfocus() {
+    function unfocus(keepSearch) {
         searchTextField.focus = false;
-        if (!searchTextField.text && !root.navigationTag) {
+        if (!keepSearch && !searchTextField.text && !root.navigationTag) {
             headerContainer.showSearch = false;
         }
     }
@@ -142,7 +142,7 @@
         objectName: "headerContainer"
         clip: contentY < height
         anchors { left: parent.left; top: parent.top; right: parent.right }
-        height: header.contentHeight
+        height: header.__styleInstance.contentHeight
         contentHeight: headersColumn.height
         interactive: false
         contentY: showSearch ? 0 : height
@@ -173,22 +173,18 @@
             id: headersColumn
             anchors { left: parent.left; right: parent.right }
 
-            PageHeadStyle {
-                // FIXME: Replace PageHeadStyle from the Ambiance theme by the new PageHeader from Ubuntu.Components 1.3.
+            PageHeader {
                 id: searchHeader
                 anchors { left: parent.left; right: parent.right }
                 opacity: headerContainer.clip || headerContainer.showSearch ? 1 : 0 // setting visible false cause column to relayout
-                __separator_visible: false
-                // Required to keep PageHeadStyle noise down as it expects the Page's properties around.
-                property var styledItem: searchHeader
-                property color dividerColor: "transparent" // Doesn't matter as we don't have PageHeadSections
-                property color panelColor: background.topColor
-                panelForegroundColor: config.foregroundColor
-                backgroundColor: "transparent"
-                config: PageHeadConfiguration {
+
+                StyleHints {
                     foregroundColor: root.scopeStyle ? root.scopeStyle.headerForeground : theme.palette.normal.baseText
+                    backgroundColor: "transparent"
+                    dividerColor: "transparent"
                 }
-                property var contents: Item {
+
+                contents: Item {
                     anchors.fill: parent
 
                     TextField {
@@ -273,7 +269,7 @@
                             anchors.fill: parent
                             anchors.margins: units.gu(2)
                             name: "filters"
-                            color: root.activeFiltersCount > 0 ? UbuntuColors.orange : header.config.foregroundColor
+                            color: root.activeFiltersCount > 0 ? UbuntuColors.orange : header.__styleInstance.foregroundColor
                         }
 
                         onClicked: {
@@ -283,6 +279,7 @@
 
                     AbstractButton {
                         id: cancelButton
+                        objectName: "cancelButton"
                         width: cancelLabel.width + cancelLabel.anchors.rightMargin + cancelLabel.anchors.leftMargin
                         anchors {
                             top: parent.top
@@ -296,7 +293,7 @@
                         Label {
                             id: cancelLabel
                             text: i18n.tr("Cancel")
-                            color: header.panelForegroundColor
+                            color: header.__styleInstance.foregroundColor
                             verticalAlignment: Text.AlignVCenter
                             anchors {
                                 verticalCenter: parent.verticalCenter
@@ -309,28 +306,27 @@
                 }
             }
 
-            PageHeadStyle {
-                // FIXME: Replace PageHeadStyle from the Ambiance theme by the new PageHeader from Ubuntu.Components 1.3.
+            PageHeader {
                 id: header
                 objectName: "innerPageHeader"
                 anchors { left: parent.left; right: parent.right }
                 height: headerContainer.height
                 opacity: headerContainer.clip || !headerContainer.showSearch ? 1 : 0 // setting visible false cause column to relayout
-                __separator_visible: false
-                property var styledItem: header
-                property color dividerColor: "transparent" // Doesn't matter as we don't have PageHeadSections
-                property color panelColor: background.topColor
-                panelForegroundColor: config.foregroundColor
-                backgroundColor: "transparent"
-                config: PageHeadConfiguration {
-                    title: root.title
+                title: root.title
+
+                StyleHints {
                     foregroundColor: root.scopeStyle ? root.scopeStyle.headerForeground : theme.palette.normal.baseText
-                    backAction: Action {
-                        iconName: backIsClose ? "close" : "back"
-                        visible: root.showBackButton
-                        onTriggered: root.backClicked()
-                    }
-
+                    backgroundColor: "transparent"
+                    dividerColor: "transparent"
+                }
+
+                leadingActionBar.actions: Action {
+                    iconName: backIsClose ? "close" : "back"
+                    visible: root.showBackButton
+                    onTriggered: root.backClicked()
+                }
+
+                trailingActionBar {
                     actions: [
                         Action {
                             objectName: "store"
@@ -366,7 +362,6 @@
                     ]
                 }
 
-                property var contents: null
                 Component.onCompleted: root.refreshLogo()
 
                 Component {

=== modified file 'qml/Dash/GenericScopeView.qml'
--- qml/Dash/GenericScopeView.qml	2016-05-04 18:08:35 +0000
+++ qml/Dash/GenericScopeView.qml	2016-05-19 15:22:50 +0000
@@ -662,6 +662,10 @@
             onShowFiltersPopup: { // item
                 extraPanel.visible = false;
                 scopeView.filtersPopover = PopupUtils.open(Qt.resolvedUrl("FiltersPopover.qml"), item, { "contentWidth": scopeView.width - units.gu(2) } );
+                scopeView.filtersPopover.Component.onDestruction.connect(function () {
+                    categoryView.pageHeader.closePopup(false, true);
+                    categoryView.pageHeader.unfocus(true); // remove the focus from the search field
+                })
             }
         }
 
@@ -683,6 +687,7 @@
             onHistoryItemClicked: {
                 SearchHistoryModel.addQuery(text);
                 categoryView.pageHeader.searchQuery = text;
+                categoryView.pageHeader.unfocus();
             }
 
             onDashNavigationLeafClicked: {

=== modified file 'qml/Stages/Splash.qml'
--- qml/Stages/Splash.qml	2016-03-08 20:59:22 +0000
+++ qml/Stages/Splash.qml	2016-05-19 15:22:50 +0000
@@ -29,7 +29,7 @@
     property color footerColor: d.undefinedColor
     property alias imageSource: overlaidImage.source
     property url icon
-    property alias title: headerConfig.title
+    property alias title: header.title
     property alias showHeader: header.visible
 
     Ambiance.Palette {
@@ -75,25 +75,14 @@
         style: Component { MainViewStyle {theme: styledItem.fakeTheme} }
     }
 
-    Ambiance.PageHeadStyle {
-        // FIXME: Replace PageHeadStyle by PageHeader from Ubuntu.Components 1.3.
+    PageHeader {
         id: header
-        anchors {
-            left: parent.left;
-            right: parent.right
-        }
-        property var styledItem: header
-        // FIXME Keep in sync with SDK's MainView.qml values of these two colors
-        property color dividerColor: Qt.darker(styledItem.backgroundColor, 1.1)
-        property color panelColor: Qt.lighter(styledItem.backgroundColor, 1.1)
-        panelForegroundColor: config.foregroundColor
-        backgroundColor: "transparent"
-        config: PageHeadConfiguration {
-            id: headerConfig
+        anchors { left: parent.left; right: parent.right }
+        StyleHints {
             foregroundColor: styledItem.fakeTheme.palette.normal.backgroundText
+            backgroundColor: "transparent"
+            dividerColor: styledItem.fakeTheme.palette.normal.base
         }
-
-        property var contents: null
     }
 
     Image {

=== modified file 'tests/qmltests/Dash/tst_Dash.qml'
--- tests/qmltests/Dash/tst_Dash.qml	2016-05-19 15:22:49 +0000
+++ tests/qmltests/Dash/tst_Dash.qml	2016-05-19 15:22:50 +0000
@@ -125,7 +125,7 @@
             // Go back
             var scopesList = findChild(dash, "scopesList");
             var scopesListPageHeader = findChild(scopesList, "pageHeader");
-            var backButton = findChild(findChild(scopesListPageHeader, "innerPageHeader"), "customBackButton");
+            var backButton = findChild(scopesListPageHeader, "innerPageHeader").leadingActionBar;
             mouseClick(backButton);
             tryCompare(bottomEdgeController, "progress", 0);
         }
@@ -200,7 +200,7 @@
 
             // Go back
             var dashTempScopeItemHeader = findChild(dashTempScopeItem, "scopePageHeader");
-            var backButton = findChild(findChild(dashTempScopeItemHeader, "innerPageHeader"), "customBackButton");
+            var backButton = findChild(dashTempScopeItemHeader, "innerPageHeader").leadingActionBar;
             mouseClick(backButton);
 
             // Check temp scope is gone
@@ -226,7 +226,7 @@
             // Go back
             var scopesList = findChild(dash, "scopesList");
             var scopesListPageHeader = findChild(scopesList, "pageHeader");
-            var backButton = findChild(findChild(scopesListPageHeader, "innerPageHeader"), "customBackButton");
+            var backButton = findChild(scopesListPageHeader, "innerPageHeader").leadingActionBar;
             mouseClick(backButton);
             tryCompare(bottomEdgeController, "progress", 0);
         }
@@ -338,7 +338,7 @@
             // Exit edit mode and go back
             var scopesList = findChild(dash, "scopesList");
             var scopesListPageHeader = findChild(scopesList, "pageHeader");
-            var backButton = findChild(findChild(scopesListPageHeader, "innerPageHeader"), "customBackButton");
+            var backButton = findChild(scopesListPageHeader, "innerPageHeader").leadingActionBar;
             mouseClick(backButton);
             mouseClick(backButton);
             tryCompare(bottomEdgeController, "progress", 0);
@@ -383,7 +383,7 @@
             // Exit edit mode
             var scopesList = findChild(dash, "scopesList");
             var scopesListPageHeader = findChild(scopesList, "pageHeader");
-            var backButton = findChild(findChild(scopesListPageHeader, "innerPageHeader"), "customBackButton");
+            var backButton = findChild(scopesListPageHeader, "innerPageHeader").leadingActionBar;
             mouseClick(backButton);
 
             // Click on third scope
@@ -493,7 +493,7 @@
 
             // Go back
             var dashTempScopeItemHeader = findChild(dashTempScopeItem, "scopePageHeader");
-            var backButton = findChild(findChild(dashTempScopeItemHeader, "innerPageHeader"), "customBackButton");
+            var backButton = findChild(dashTempScopeItemHeader, "innerPageHeader").leadingActionBar;
             mouseClick(backButton);
 
             // Check temp scope is gone
@@ -561,7 +561,7 @@
 
             // Go back
             var dashTempScopeItemHeader = findChild(dashTempScopeItem, "scopePageHeader");
-            var backButton = findChild(findChild(dashTempScopeItemHeader, "innerPageHeader"), "customBackButton");
+            var backButton = findChild(dashTempScopeItemHeader, "innerPageHeader").leadingActionBar;
             mouseClick(backButton);
 
             // Check temp scope is gone
@@ -593,7 +593,7 @@
 
             // Go back
             var dashTempScopeItemHeader = findChild(dashTempScopeItem, "scopePageHeader");
-            var backButton = findChild(findChild(dashTempScopeItemHeader, "innerPageHeader"), "customBackButton");
+            var backButton = findChild(dashTempScopeItemHeader, "innerPageHeader").leadingActionBar;
             mouseClick(backButton);
 
             // Check temp scope is gone

=== modified file 'tests/qmltests/Dash/tst_DashContent.qml'
--- tests/qmltests/Dash/tst_DashContent.qml	2016-03-29 03:47:39 +0000
+++ tests/qmltests/Dash/tst_DashContent.qml	2016-05-19 15:22:50 +0000
@@ -215,7 +215,7 @@
             verify(pageHeader, "Could not find the scope page header.");
             var innerHeader = findChild(pageHeader, "innerPageHeader");
             verify(innerHeader, "Could not find the scope page header.");
-            compare(innerHeader.config.title, scopesModel.getScope(data.index).name);
+            compare(innerHeader.title, scopesModel.getScope(data.index).name);
         }
 
         function test_is_active_data() {
@@ -515,10 +515,18 @@
         }
 
         function test_navigationShowFilterPopup() {
-            goToSecondLevel();
-
             var dashContentList = findChild(dashContent, "dashContentList");
+            var pageHeader = findChild(dashContentList.currentItem, "scopePageHeader")
             var settingsButton = findChild(dashContentList.currentItem, "settingsButton");
+            var searchButton = findChild(dashContentList.currentItem, "search_button");
+            var cancelButton = findChild(dashContentList.currentItem, "cancelButton");
+            var searchTextField = findChild(pageHeader, "searchTextField");
+            var peExtraPanel = findChild(dashContentList.currentItem, "peExtraPanel");
+            var headerContainer = findChild(pageHeader, "headerContainer");
+
+            // test that closing the filters popover without a search unfocuses and removes the navigation
+            mouseClick(searchButton);
+            tryCompare(peExtraPanel, "visible", true);
 
             var filtersPopover = findChild(shell, "filtersPopover")
             verify(!filtersPopover);
@@ -526,8 +534,33 @@
             mouseClick(settingsButton);
 
             filtersPopover = findChild(shell, "filtersPopover")
-
-            verify(filtersPopover);
+            verify(filtersPopover);
+
+            mouseClick(shell, shell.width - 1, shell.height - 1);
+
+            tryCompare(pageHeader.extraPanel, "visible", false);
+            tryCompare(headerContainer, "showSearch", true);
+            tryCompare(searchTextField, "focus", false);
+
+            mouseClick(cancelButton);
+            tryCompare(headerContainer, "showSearch", false);
+            tryCompare(headerContainer, "contentY", headerContainer.height);
+
+            // test within a navigation
+            goToSecondLevel();
+
+            filtersPopover = findChild(shell, "filtersPopover")
+            verify(!filtersPopover);
+
+            mouseClick(settingsButton);
+
+            filtersPopover = findChild(shell, "filtersPopover")
+            verify(filtersPopover);
+
+            mouseClick(shell, shell.width - 1, shell.height - 1);
+
+            tryCompare(pageHeader.extraPanel, "visible", false);
+            tryCompare(headerContainer, "showSearch", true);
         }
 
         function test_primaryFilter() {
@@ -625,5 +658,31 @@
             tryCompareFunction(function() { return dashContentList.currentItem.item.scope.id == nextScopeId; }, true);
             compare(dashContentList.currentIndex, 0);
         }
+
+        function test_extraPanel() {
+            var dashContentList = findChild(dashContent, "dashContentList");
+            var pageHeader = findChild(dashContentList.currentItem, "scopePageHeader")
+            pageHeader.searchEntryEnabled = true;
+            pageHeader.searchHistory.clear();
+
+            pageHeader.searchHistory.addQuery("Search1");
+            pageHeader.searchHistory.addQuery("Search2");
+
+            pageHeader.triggerSearch();
+            tryCompare(pageHeader.extraPanel, "visible", true);
+
+            var searchTextField = findChild(pageHeader, "searchTextField");
+            compare(searchTextField.focus, true);
+
+            var recentSearches = findChild(pageHeader.extraPanel, "recentSearchesRepeater");
+            verify(recentSearches, "Could not find recent searches");
+
+            waitForRendering(recentSearches);
+
+            mouseClick(recentSearches.itemAt(0));
+            compare(pageHeader.searchQuery, "Search2");
+            tryCompare(pageHeader.extraPanel, "visible", false);
+            compare(searchTextField.focus, false);
+        }
     }
 }

=== modified file 'tests/qmltests/Dash/tst_DashPageHeader.qml'
--- tests/qmltests/Dash/tst_DashPageHeader.qml	2016-03-29 03:47:39 +0000
+++ tests/qmltests/Dash/tst_DashPageHeader.qml	2016-05-19 15:22:50 +0000
@@ -147,30 +147,6 @@
             doResetSearch();
         }
 
-        function test_extraPanel() {
-            searchEnabled = true;
-            pageHeader.searchHistory.clear();
-
-            pageHeader.searchHistory.addQuery("Search1");
-            pageHeader.searchHistory.addQuery("Search2");
-
-            pageHeader.triggerSearch();
-
-            tryCompare(pageHeader.extraPanel, "visible", true);
-
-            var searchTextField = findChild(pageHeader, "searchTextField");
-            compare(searchTextField.focus, true);
-
-            var recentSearches = findChild(pageHeader.extraPanel, "recentSearchesRepeater");
-            verify(recentSearches, "Could not find recent searches");
-            waitForRendering(recentSearches);
-            mouseClick(recentSearches.itemAt(0));
-
-            compare(pageHeader.searchQuery, "Search2");
-            tryCompare(pageHeader.extraPanel, "visible", false);
-            compare(searchTextField.focus, false);
-        }
-
         function test_popup_closing_data() {
             return [
                         { tag: "with search text", searchText: "foobar", hideSearch: false },

=== modified file 'tests/qmltests/Dash/tst_GenericScopeView.qml'
--- tests/qmltests/Dash/tst_GenericScopeView.qml	2016-03-29 03:47:39 +0000
+++ tests/qmltests/Dash/tst_GenericScopeView.qml	2016-05-19 15:22:50 +0000
@@ -442,8 +442,8 @@
 
                 var innerHeader = findChild(header, "innerPageHeader");
                 verify(innerHeader, "Could not find the inner header");
-                verify(Qt.colorEqual(innerHeader.config.foregroundColor, data.foreground),
-                       "Foreground color not equal: %1 != %2".arg(innerHeader.config.foregroundColor).arg(data.foreground));
+                verify(Qt.colorEqual(innerHeader.__styleInstance.foregroundColor, data.foreground),
+                       "Foreground color not equal: %1 != %2".arg(innerHeader.__styleInstance.foregroundColor).arg(data.foreground));
 
                 var background = findChild(header, "headerBackground");
                 verify(background, "Could not find the background");

=== modified file 'tests/qmltests/Dash/tst_PreviewView.qml'
--- tests/qmltests/Dash/tst_PreviewView.qml	2016-03-29 03:47:39 +0000
+++ tests/qmltests/Dash/tst_PreviewView.qml	2016-05-19 15:22:50 +0000
@@ -98,7 +98,7 @@
             var header = findChild(view, "innerPageHeader");
             verify(header, "Could not find the preview header");
 
-            compare(header.config.title, "Mock Scope");
+            compare(header.title, "Mock Scope");
         }
 
         function test_header_style() {
@@ -107,8 +107,8 @@
 
             var innerHeader = findChild(header, "innerPageHeader");
             verify(innerHeader, "Could not find the inner header");
-            verify(Qt.colorEqual(innerHeader.config.foregroundColor, UbuntuColors.darkGrey),
-                   "Foreground color not equal: %1 != %2".arg(innerHeader.config.foregroundColor).arg(UbuntuColors.darkGrey));
+            verify(Qt.colorEqual(innerHeader.__styleInstance.foregroundColor, UbuntuColors.darkGrey),
+                   "Foreground color not equal: %1 != %2".arg(innerHeader.__styleInstance.foregroundColor).arg(UbuntuColors.darkGrey));
 
             var background = findChild(header, "headerBackground");
             verify(background, "Could not find the background");