@@ -19,18 +19,18 @@ import Ubuntu.Components 1.1
1919import Ubuntu.Components.Themes.Ambiance 1.1
2020import Ubuntu.Components.Popups 1.0
2121import Ubuntu.Components.ListItems 1.0
22+import "SearchHistoryModel"
2223
2324Item {
2425 id: root
2526 implicitHeight: headerContainer.height + units.gu(2) + bottomContainer.height
26− height: implicitHeight
2727
2828 property bool showBackButton: false
2929 property string title
3030 property string imageSource
3131
3232 property bool searchEntryEnabled: false
33− property ListModel searchHistory
33+ property ListModel searchHistory: SearchHistoryModel
3434 property alias searchQuery: searchTextField.text
3535 property bool searchInProgress: false
3636
@@ -43,18 +43,14 @@ Item {
4343 signal backClicked()
4444
4545 function triggerSearch() {
46− if (searchEntryEnabled) searchTextField.forceActiveFocus()
46+ if (searchEntryEnabled) searchTextField.forceActiveFocus();
4747 }
4848
49− function resetSearch(unfocusField) {
50− if (unfocusField == undefined) {
51− unfocusField = true;
52− }
53−
49+ function resetSearch(keepFocus) {
5450 if (searchHistory) {
5551 searchHistory.addQuery(searchTextField.text);
5652 }
57− if (unfocusField) {
53+ if (!keepFocus) {
5854 unfocus();
5955 }
6056 searchTextField.text = "";
@@ -65,27 +61,38 @@ Item {
6561
6662 function unfocus() {
6763 searchTextField.focus = false;
64+ if (!searchTextField.text) {
65+ headerContainer.showSearch = false;
66+ }
6867 }
6968
7069 function openSearchHistory() {
7170 if (openSearchAnimation.running) {
72− openSearchAnimation.openSearchHistory = true
71+ openSearchAnimation.openSearchHistory = true;
7372 } else if (root.searchHistory.count > 0 && headerContainer.popover == null) {
7473 headerContainer.popover = PopupUtils.open(popoverComponent, searchTextField,
75− {
76− "contentWidth": searchTextField.width,
77− "edgeMargins": units.gu(1)
78− }
79− )
74+ {
75+ "contentWidth": searchTextField.width,
76+ "edgeMargins": units.gu(1)
77+ }
78+ );
8079 }
8180 }
8281
8382 onImageSourceChanged: {
84− if (imageSource.length > 0) {
83+ if (imageSource) {
8584 header.contents = imageComponent.createObject();
8685 } else {
8786 header.contents.destroy();
88− header.contents = null
87+ header.contents = null;
88+ }
89+ }
90+
91+ InverseMouseArea {
92+ anchors.fill: parent
93+ visible: headerContainer.popover !== null
94+ onPressed: {
95+ PopupUtils.close(headerContainer.popover);
8996 }
9097 }
9198
@@ -110,7 +117,7 @@ Item {
110117 onRunningChanged: {
111118 if (!running && openSearchAnimation.openSearchHistory) {
112119 openSearchAnimation.openSearchHistory = false;
113− root.openSearchHistory()
120+ root.openSearchHistory();
114121 }
115122 }
116123 }
@@ -118,8 +125,7 @@ Item {
118125
119126 Column {
120127 id: headersColumn
121− anchors.fill: parent
122− height: searchHeader.height + header.height
128+ anchors { left: parent.left; right: parent.right }
123129
124130 PageHeadStyle {
125131 id: searchHeader
@@ -127,14 +133,15 @@ Item {
127133 height: headerContainer.height
128134 contentHeight: height
129135 separatorSource: ""
136+ // Required to keep PageHeadStyle noise down as it expects the Page's properties around.
130137 property var styledItem: searchHeader
131− property string title: "searchHeader"
138+ property string title
132139 property var config: PageHeadConfiguration {
133140 backAction: Action {
134141 iconName: "back"
135142 onTriggered: {
136− root.resetSearch(true)
137− headerContainer.showSearch = false
143+ root.resetSearch();
144+ headerContainer.showSearch = false;
138145 }
139146 }
140147 }
@@ -142,7 +149,7 @@ Item {
142149 id: searchTextField
143150 hasClearButton: false
144151 anchors {
145− fill: parent;
152+ fill: parent
146153 leftMargin: units.gu(1)
147154 topMargin: units.gu(1)
148155 bottomMargin: units.gu(1)
@@ -160,6 +167,9 @@ Item {
160167 source: "image://theme/clear"
161168 opacity: searchTextField.text.length > 0 && !searchActivityIndicator.running
162169 visible: opacity > 0
170+ Behavior on opacity {
171+ UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
172+ }
163173 }
164174
165175 ActivityIndicator {
@@ -175,14 +185,14 @@ Item {
175185 }
176186
177187 onClicked: {
178− root.resetSearch(false)
179− root.openSearchHistory()
188+ root.resetSearch(true);
189+ root.openSearchHistory();
180190 }
181191 }
182192
183193 onActiveFocusChanged: {
184194 if (activeFocus) {
185− root.openSearchHistory()
195+ root.openSearchHistory();
186196 }
187197 }
188198 }
@@ -202,7 +212,7 @@ Item {
202212 iconName: "back"
203213 visible: root.showBackButton
204214 onTriggered: {
205− root.backClicked()
215+ root.backClicked();
206216 }
207217 }
208218
@@ -211,8 +221,8 @@ Item {
211221 iconName: "search"
212222 visible: root.searchEntryEnabled
213223 onTriggered: {
214− headerContainer.showSearch = true
215− searchTextField.forceActiveFocus()
224+ headerContainer.showSearch = true;
225+ searchTextField.forceActiveFocus();
216226 }
217227 }
218228 ]
@@ -220,7 +230,7 @@ Item {
220230
221231 property var contents: null
222232 Component.onCompleted: {
223− if (root.imageSource.length > 0) {
233+ if (root.imageSource) {
224234 header.contents = imageComponent.createObject();
225235 }
226236 }
@@ -236,6 +246,7 @@ Item {
236246 source: root.imageSource
237247 fillMode: Image.PreserveAspectFit
238248 horizontalAlignment: Image.AlignLeft
249+ sourceSize.height: height
239250 }
240251 }
241252 }
@@ -247,29 +258,10 @@ Item {
247258 id: popoverComponent
248259 Popover {
249260 id: popover
261+ autoClose: false
250262
251263 Component.onDestruction: {
252− headerContainer.popover = null
253− }
254−
255− // FIXME: this should go into the first item below, but enable: false
256− // prevents mouse events propagation
257− AbstractButton {
258− anchors {
259− top: parent.top
260− right: parent.right
261− }
262− height: units.gu(6)
263− width: height
264−
265− onClicked: PopupUtils.close(popover)
266−
267− Image {
268− anchors.centerIn: parent
269− width: units.gu(2)
270− height: units.gu(2)
271− source: "../Dash/graphics/icon_listview_clear.png"
272− }
264+ headerContainer.popover = null;
273265 }
274266
275267 Column {
@@ -289,9 +281,9 @@ Item {
289281 showDivider: index < recentSearches.count - 1
290282 text: query
291283 onClicked: {
292− searchHistory.addQuery(text)
293− searchTextField.text = text
294− PopupUtils.close(popover)
284+ searchHistory.addQuery(text);
285+ searchTextField.text = text;
286+ PopupUtils.close(popover);
295287 }
296288 }
297289 }