on xenial help sign in
Use PageHeader instead Ambiance's PageHeadStyle
commitc7bb0ec75d1331f64492bdabf8740569155967c7 authorMichael Terry <michael.terry@canonical.com> dateTue 17 May 2016, 16:38 (10 years ago) parent0e32fda
9 files changed+117−122
qml/Components/Header.qml−28 qml/Dash/DashPageHeader.qml+31−36 qml/Dash/GenericScopeView.qml+5 qml/Stages/Splash.qml+6−18 tests/qmltests/Dash/tst_Dash.qml+8−8 tests/qmltests/Dash/tst_DashContent.qml+62−3 tests/qmltests/Dash/tst_DashPageHeader.qml−24 tests/qmltests/Dash/tst_GenericScopeView.qml+2−2 tests/qmltests/Dash/tst_PreviewView.qml+3−3
qml/Components/Header.qmldeleted−28
@@ -1,28 +0,0 @@
1−/*
2− * Copyright (C) 2014 Canonical, Ltd.
3− *
4− * This program is free software; you can redistribute it and/or modify
5− * it under the terms of the GNU General Public License as published by
6− * the Free Software Foundation; version 3.
7− *
8− * This program is distributed in the hope that it will be useful,
9− * but WITHOUT ANY WARRANTY; without even the implied warranty of
10− * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11− * GNU General Public License for more details.
12− *
13− * You should have received a copy of the GNU General Public License
14− * along with this program. If not, see <http://www.gnu.org/licenses/>.
15− */
16−
17−import Ubuntu.Components 1.3
18−import Ubuntu.Components.Themes.Ambiance 1.3
19−
20−PageHeadStyle {
21− // FIXME: Don't use this but PageHeader from Ubuntu.Components 1.3.
22− id: root
23−
24− property var styledItem: root
25− property string title
26− property var config: PageHeadConfiguration {}
27− property var contents: null
28−}
qml/Dash/DashPageHeader.qml+31−36
@@ -16,7 +16,7 @@
1616
1717import QtQuick 2.4
1818import Ubuntu.Components 1.3
19−import Ubuntu.Components.Themes.Ambiance 1.3
19+import Ubuntu.Components.Popups 1.3
2020import Ubuntu.Components.ListItems 1.3
2121import "../Components"
2222
@@ -78,13 +78,13 @@ Item {
7878 }
7979 }
8080
81− function closePopup(keepFocus) {
81+ function closePopup(keepFocus, keepSearch) {
8282 if (extraPanel.visible) {
8383 extraPanel.visible = false;
8484 } else if (!keepFocus) {
85− unfocus();
85+ unfocus(keepSearch);
8686 }
87− if (!searchTextField.text && !root.navigationTag && searchHistory.count == 0) {
87+ if (!keepSearch && !searchTextField.text && !root.navigationTag && searchHistory.count == 0) {
8888 headerContainer.showSearch = false;
8989 }
9090 }
@@ -97,9 +97,9 @@ Item {
9797 closePopup(keepFocus);
9898 }
9999
100− function unfocus() {
100+ function unfocus(keepSearch) {
101101 searchTextField.focus = false;
102− if (!searchTextField.text && !root.navigationTag) {
102+ if (!keepSearch && !searchTextField.text && !root.navigationTag) {
103103 headerContainer.showSearch = false;
104104 }
105105 }
@@ -142,7 +142,7 @@ Item {
142142 objectName: "headerContainer"
143143 clip: contentY < height
144144 anchors { left: parent.left; top: parent.top; right: parent.right }
145− height: header.contentHeight
145+ height: header.__styleInstance.contentHeight
146146 contentHeight: headersColumn.height
147147 interactive: false
148148 contentY: showSearch ? 0 : height
@@ -173,22 +173,18 @@ Item {
173173 id: headersColumn
174174 anchors { left: parent.left; right: parent.right }
175175
176− PageHeadStyle {
177− // FIXME: Replace PageHeadStyle from the Ambiance theme by the new PageHeader from Ubuntu.Components 1.3.
176+ PageHeader {
178177 id: searchHeader
179178 anchors { left: parent.left; right: parent.right }
180179 opacity: headerContainer.clip || headerContainer.showSearch ? 1 : 0 // setting visible false cause column to relayout
181− __separator_visible: false
182− // Required to keep PageHeadStyle noise down as it expects the Page's properties around.
183− property var styledItem: searchHeader
184− property color dividerColor: "transparent" // Doesn't matter as we don't have PageHeadSections
185− property color panelColor: background.topColor
186− panelForegroundColor: config.foregroundColor
187− backgroundColor: "transparent"
188− config: PageHeadConfiguration {
180+
181+ StyleHints {
189182 foregroundColor: root.scopeStyle ? root.scopeStyle.headerForeground : theme.palette.normal.baseText
183+ backgroundColor: "transparent"
184+ dividerColor: "transparent"
190185 }
191− property var contents: Item {
186+
187+ contents: Item {
192188 anchors.fill: parent
193189
194190 TextField {
@@ -273,7 +269,7 @@ Item {
273269 anchors.fill: parent
274270 anchors.margins: units.gu(2)
275271 name: "filters"
276− color: root.activeFiltersCount > 0 ? UbuntuColors.orange : header.config.foregroundColor
272+ color: root.activeFiltersCount > 0 ? UbuntuColors.orange : header.__styleInstance.foregroundColor
277273 }
278274
279275 onClicked: {
@@ -283,6 +279,7 @@ Item {
283279
284280 AbstractButton {
285281 id: cancelButton
282+ objectName: "cancelButton"
286283 width: cancelLabel.width + cancelLabel.anchors.rightMargin + cancelLabel.anchors.leftMargin
287284 anchors {
288285 top: parent.top
@@ -296,7 +293,7 @@ Item {
296293 Label {
297294 id: cancelLabel
298295 text: i18n.tr("Cancel")
299− color: header.panelForegroundColor
296+ color: header.__styleInstance.foregroundColor
300297 verticalAlignment: Text.AlignVCenter
301298 anchors {
302299 verticalCenter: parent.verticalCenter
@@ -309,28 +306,27 @@ Item {
309306 }
310307 }
311308
312− PageHeadStyle {
313− // FIXME: Replace PageHeadStyle from the Ambiance theme by the new PageHeader from Ubuntu.Components 1.3.
309+ PageHeader {
314310 id: header
315311 objectName: "innerPageHeader"
316312 anchors { left: parent.left; right: parent.right }
317313 height: headerContainer.height
318314 opacity: headerContainer.clip || !headerContainer.showSearch ? 1 : 0 // setting visible false cause column to relayout
319− __separator_visible: false
320− property var styledItem: header
321− property color dividerColor: "transparent" // Doesn't matter as we don't have PageHeadSections
322− property color panelColor: background.topColor
323− panelForegroundColor: config.foregroundColor
324− backgroundColor: "transparent"
325− config: PageHeadConfiguration {
326− title: root.title
315+ title: root.title
316+
317+ StyleHints {
327318 foregroundColor: root.scopeStyle ? root.scopeStyle.headerForeground : theme.palette.normal.baseText
328− backAction: Action {
329− iconName: backIsClose ? "close" : "back"
330− visible: root.showBackButton
331− onTriggered: root.backClicked()
332− }
319+ backgroundColor: "transparent"
320+ dividerColor: "transparent"
321+ }
322+
323+ leadingActionBar.actions: Action {
324+ iconName: backIsClose ? "close" : "back"
325+ visible: root.showBackButton
326+ onTriggered: root.backClicked()
327+ }
333328
329+ trailingActionBar {
334330 actions: [
335331 Action {
336332 objectName: "store"
@@ -366,7 +362,6 @@ Item {
366362 ]
367363 }
368364
369− property var contents: null
370365 Component.onCompleted: root.refreshLogo()
371366
372367 Component {
qml/Dash/GenericScopeView.qml+5
@@ -653,6 +653,10 @@ FocusScope {
653653 onShowFiltersPopup: { // item
654654 extraPanel.visible = false;
655655 scopeView.filtersPopover = PopupUtils.open(Qt.resolvedUrl("FiltersPopover.qml"), item, { "contentWidth": scopeView.width - units.gu(2) } );
656+ scopeView.filtersPopover.Component.onDestruction.connect(function () {
657+ categoryView.pageHeader.closePopup(false, true);
658+ categoryView.pageHeader.unfocus(true); // remove the focus from the search field
659+ })
656660 }
657661 }
658662
@@ -674,6 +678,7 @@ FocusScope {
674678 onHistoryItemClicked: {
675679 SearchHistoryModel.addQuery(text);
676680 categoryView.pageHeader.searchQuery = text;
681+ categoryView.pageHeader.unfocus();
677682 }
678683
679684 onDashNavigationLeafClicked: {
qml/Stages/Splash.qml+6−18
@@ -29,7 +29,7 @@ Item {
2929 property color footerColor: d.undefinedColor
3030 property alias imageSource: overlaidImage.source
3131 property url icon
32− property alias title: headerConfig.title
32+ property alias title: header.title
3333 property alias showHeader: header.visible
3434
3535 Ambiance.Palette {
@@ -75,25 +75,13 @@ Item {
7575 style: Component { MainViewStyle {theme: styledItem.fakeTheme} }
7676 }
7777
78− Ambiance.PageHeadStyle {
79− // FIXME: Replace PageHeadStyle by PageHeader from Ubuntu.Components 1.3.
78+ PageHeader {
8079 id: header
81− anchors {
82− left: parent.left;
83− right: parent.right
80+ anchors { left: parent.left; right: parent.right }
81+ StyleHints {
82+ foregroundColor: styledItem.fakeTheme.palette.selected.backgroundText
83+ backgroundColor: "transparent"
8484 }
85− property var styledItem: header
86− // FIXME Keep in sync with SDK's MainView.qml values of these two colors
87− property color dividerColor: Qt.darker(styledItem.backgroundColor, 1.1)
88− property color panelColor: Qt.lighter(styledItem.backgroundColor, 1.1)
89− panelForegroundColor: config.foregroundColor
90− backgroundColor: "transparent"
91− config: PageHeadConfiguration {
92− id: headerConfig
93− foregroundColor: styledItem.fakeTheme.palette.normal.backgroundText
94− }
95−
96− property var contents: null
9785 }
9886
9987 Image {
tests/qmltests/Dash/tst_Dash.qml+8−8
@@ -125,7 +125,7 @@ Item {
125125 // Go back
126126 var scopesList = findChild(dash, "scopesList");
127127 var scopesListPageHeader = findChild(scopesList, "pageHeader");
128− var backButton = findChild(findChild(scopesListPageHeader, "innerPageHeader"), "customBackButton");
128+ var backButton = findChild(scopesListPageHeader, "innerPageHeader").leadingActionBar;
129129 mouseClick(backButton);
130130 tryCompare(bottomEdgeController, "progress", 0);
131131 }
@@ -200,7 +200,7 @@ Item {
200200
201201 // Go back
202202 var dashTempScopeItemHeader = findChild(dashTempScopeItem, "scopePageHeader");
203− var backButton = findChild(findChild(dashTempScopeItemHeader, "innerPageHeader"), "customBackButton");
203+ var backButton = findChild(dashTempScopeItemHeader, "innerPageHeader").leadingActionBar;
204204 mouseClick(backButton);
205205
206206 // Check temp scope is gone
@@ -226,7 +226,7 @@ Item {
226226 // Go back
227227 var scopesList = findChild(dash, "scopesList");
228228 var scopesListPageHeader = findChild(scopesList, "pageHeader");
229− var backButton = findChild(findChild(scopesListPageHeader, "innerPageHeader"), "customBackButton");
229+ var backButton = findChild(scopesListPageHeader, "innerPageHeader").leadingActionBar;
230230 mouseClick(backButton);
231231 tryCompare(bottomEdgeController, "progress", 0);
232232 }
@@ -338,7 +338,7 @@ Item {
338338 // Exit edit mode and go back
339339 var scopesList = findChild(dash, "scopesList");
340340 var scopesListPageHeader = findChild(scopesList, "pageHeader");
341− var backButton = findChild(findChild(scopesListPageHeader, "innerPageHeader"), "customBackButton");
341+ var backButton = findChild(scopesListPageHeader, "innerPageHeader").leadingActionBar;
342342 mouseClick(backButton);
343343 mouseClick(backButton);
344344 tryCompare(bottomEdgeController, "progress", 0);
@@ -383,7 +383,7 @@ Item {
383383 // Exit edit mode
384384 var scopesList = findChild(dash, "scopesList");
385385 var scopesListPageHeader = findChild(scopesList, "pageHeader");
386− var backButton = findChild(findChild(scopesListPageHeader, "innerPageHeader"), "customBackButton");
386+ var backButton = findChild(scopesListPageHeader, "innerPageHeader").leadingActionBar;
387387 mouseClick(backButton);
388388
389389 // Click on third scope
@@ -493,7 +493,7 @@ Item {
493493
494494 // Go back
495495 var dashTempScopeItemHeader = findChild(dashTempScopeItem, "scopePageHeader");
496− var backButton = findChild(findChild(dashTempScopeItemHeader, "innerPageHeader"), "customBackButton");
496+ var backButton = findChild(dashTempScopeItemHeader, "innerPageHeader").leadingActionBar;
497497 mouseClick(backButton);
498498
499499 // Check temp scope is gone
@@ -561,7 +561,7 @@ Item {
561561
562562 // Go back
563563 var dashTempScopeItemHeader = findChild(dashTempScopeItem, "scopePageHeader");
564− var backButton = findChild(findChild(dashTempScopeItemHeader, "innerPageHeader"), "customBackButton");
564+ var backButton = findChild(dashTempScopeItemHeader, "innerPageHeader").leadingActionBar;
565565 mouseClick(backButton);
566566
567567 // Check temp scope is gone
@@ -593,7 +593,7 @@ Item {
593593
594594 // Go back
595595 var dashTempScopeItemHeader = findChild(dashTempScopeItem, "scopePageHeader");
596− var backButton = findChild(findChild(dashTempScopeItemHeader, "innerPageHeader"), "customBackButton");
596+ var backButton = findChild(dashTempScopeItemHeader, "innerPageHeader").leadingActionBar;
597597 mouseClick(backButton);
598598
599599 // Check temp scope is gone
tests/qmltests/Dash/tst_DashContent.qml+62−3
@@ -215,7 +215,7 @@ Item {
215215 verify(pageHeader, "Could not find the scope page header.");
216216 var innerHeader = findChild(pageHeader, "innerPageHeader");
217217 verify(innerHeader, "Could not find the scope page header.");
218− compare(innerHeader.config.title, scopesModel.getScope(data.index).name);
218+ compare(innerHeader.title, scopesModel.getScope(data.index).name);
219219 }
220220
221221 function test_is_active_data() {
@@ -515,10 +515,18 @@ Item {
515515 }
516516
517517 function test_navigationShowFilterPopup() {
518− goToSecondLevel();
519−
520518 var dashContentList = findChild(dashContent, "dashContentList");
519+ var pageHeader = findChild(dashContentList.currentItem, "scopePageHeader")
521520 var settingsButton = findChild(dashContentList.currentItem, "settingsButton");
521+ var searchButton = findChild(dashContentList.currentItem, "search_button");
522+ var cancelButton = findChild(dashContentList.currentItem, "cancelButton");
523+ var searchTextField = findChild(pageHeader, "searchTextField");
524+ var peExtraPanel = findChild(dashContentList.currentItem, "peExtraPanel");
525+ var headerContainer = findChild(pageHeader, "headerContainer");
526+
527+ // test that closing the filters popover without a search unfocuses and removes the navigation
528+ mouseClick(searchButton);
529+ tryCompare(peExtraPanel, "visible", true);
522530
523531 var filtersPopover = findChild(shell, "filtersPopover")
524532 verify(!filtersPopover);
@@ -526,8 +534,33 @@ Item {
526534 mouseClick(settingsButton);
527535
528536 filtersPopover = findChild(shell, "filtersPopover")
537+ verify(filtersPopover);
529538
539+ mouseClick(shell, shell.width - 1, shell.height - 1);
540+
541+ tryCompare(pageHeader.extraPanel, "visible", false);
542+ tryCompare(headerContainer, "showSearch", true);
543+ tryCompare(searchTextField, "focus", false);
544+
545+ mouseClick(cancelButton);
546+ tryCompare(headerContainer, "showSearch", false);
547+ tryCompare(headerContainer, "contentY", headerContainer.height);
548+
549+ // test within a navigation
550+ goToSecondLevel();
551+
552+ filtersPopover = findChild(shell, "filtersPopover")
553+ verify(!filtersPopover);
554+
555+ mouseClick(settingsButton);
556+
557+ filtersPopover = findChild(shell, "filtersPopover")
530558 verify(filtersPopover);
559+
560+ mouseClick(shell, shell.width - 1, shell.height - 1);
561+
562+ tryCompare(pageHeader.extraPanel, "visible", false);
563+ tryCompare(headerContainer, "showSearch", true);
531564 }
532565
533566 function test_primaryFilter() {
@@ -625,5 +658,31 @@ Item {
625658 tryCompareFunction(function() { return dashContentList.currentItem.item.scope.id == nextScopeId; }, true);
626659 compare(dashContentList.currentIndex, 0);
627660 }
661+
662+ function test_extraPanel() {
663+ var dashContentList = findChild(dashContent, "dashContentList");
664+ var pageHeader = findChild(dashContentList.currentItem, "scopePageHeader")
665+ pageHeader.searchEntryEnabled = true;
666+ pageHeader.searchHistory.clear();
667+
668+ pageHeader.searchHistory.addQuery("Search1");
669+ pageHeader.searchHistory.addQuery("Search2");
670+
671+ pageHeader.triggerSearch();
672+ tryCompare(pageHeader.extraPanel, "visible", true);
673+
674+ var searchTextField = findChild(pageHeader, "searchTextField");
675+ compare(searchTextField.focus, true);
676+
677+ var recentSearches = findChild(pageHeader.extraPanel, "recentSearchesRepeater");
678+ verify(recentSearches, "Could not find recent searches");
679+
680+ waitForRendering(recentSearches);
681+
682+ mouseClick(recentSearches.itemAt(0));
683+ compare(pageHeader.searchQuery, "Search2");
684+ tryCompare(pageHeader.extraPanel, "visible", false);
685+ compare(searchTextField.focus, false);
686+ }
628687 }
629688}
tests/qmltests/Dash/tst_DashPageHeader.qml−24
@@ -147,30 +147,6 @@ Item {
147147 doResetSearch();
148148 }
149149
150− function test_extraPanel() {
151− searchEnabled = true;
152− pageHeader.searchHistory.clear();
153−
154− pageHeader.searchHistory.addQuery("Search1");
155− pageHeader.searchHistory.addQuery("Search2");
156−
157− pageHeader.triggerSearch();
158−
159− tryCompare(pageHeader.extraPanel, "visible", true);
160−
161− var searchTextField = findChild(pageHeader, "searchTextField");
162− compare(searchTextField.focus, true);
163−
164− var recentSearches = findChild(pageHeader.extraPanel, "recentSearchesRepeater");
165− verify(recentSearches, "Could not find recent searches");
166− waitForRendering(recentSearches);
167− mouseClick(recentSearches.itemAt(0));
168−
169− compare(pageHeader.searchQuery, "Search2");
170− tryCompare(pageHeader.extraPanel, "visible", false);
171− compare(searchTextField.focus, false);
172− }
173−
174150 function test_popup_closing_data() {
175151 return [
176152 { tag: "with search text", searchText: "foobar", hideSearch: false },
tests/qmltests/Dash/tst_GenericScopeView.qml+2−2
@@ -442,8 +442,8 @@ Item {
442442
443443 var innerHeader = findChild(header, "innerPageHeader");
444444 verify(innerHeader, "Could not find the inner header");
445− verify(Qt.colorEqual(innerHeader.config.foregroundColor, data.foreground),
446− "Foreground color not equal: %1 != %2".arg(innerHeader.config.foregroundColor).arg(data.foreground));
445+ verify(Qt.colorEqual(innerHeader.__styleInstance.foregroundColor, data.foreground),
446+ "Foreground color not equal: %1 != %2".arg(innerHeader.__styleInstance.foregroundColor).arg(data.foreground));
447447
448448 var background = findChild(header, "headerBackground");
449449 verify(background, "Could not find the background");
tests/qmltests/Dash/tst_PreviewView.qml+3−3
@@ -98,7 +98,7 @@ Rectangle {
9898 var header = findChild(view, "innerPageHeader");
9999 verify(header, "Could not find the preview header");
100100
101− compare(header.config.title, "Mock Scope");
101+ compare(header.title, "Mock Scope");
102102 }
103103
104104 function test_header_style() {
@@ -107,8 +107,8 @@ Rectangle {
107107
108108 var innerHeader = findChild(header, "innerPageHeader");
109109 verify(innerHeader, "Could not find the inner header");
110− verify(Qt.colorEqual(innerHeader.config.foregroundColor, UbuntuColors.darkGrey),
111− "Foreground color not equal: %1 != %2".arg(innerHeader.config.foregroundColor).arg(UbuntuColors.darkGrey));
110+ verify(Qt.colorEqual(innerHeader.__styleInstance.foregroundColor, UbuntuColors.darkGrey),
111+ "Foreground color not equal: %1 != %2".arg(innerHeader.__styleInstance.foregroundColor).arg(UbuntuColors.darkGrey));
112112
113113 var background = findChild(header, "headerBackground");
114114 verify(background, "Could not find the background");