@@ -178,60 +178,78 @@ Item {
178178 panelForegroundColor: config.foregroundColor
179179 property var config: PageHeadConfiguration {
180180 foregroundColor: root.scopeStyle ? root.scopeStyle.headerForeground : Theme.palette.normal.baseText
181− backAction: Action {
182− iconName: "back"
183− onTriggered: {
184− root.resetSearch();
185− headerContainer.showSearch = false;
186− }
187− }
188181 }
189− property var contents: TextField {
190− id: searchTextField
191− objectName: "searchTextField"
192− inputMethodHints: Qt.ImhNoPredictiveText
193− hasClearButton: false
194− anchors {
195− fill: parent
196− leftMargin: units.gu(1)
197− topMargin: units.gu(1)
198− bottomMargin: units.gu(1)
199− rightMargin: root.width > units.gu(60) ? root.width - units.gu(40) : units.gu(1)
200− }
182+ property var contents: Item {
183+ anchors.fill: parent
184+
185+ TextField {
186+ id: searchTextField
187+ objectName: "searchTextField"
188+ inputMethodHints: Qt.ImhNoPredictiveText
189+ hasClearButton: false
190+ anchors {
191+ top: parent.top
192+ topMargin: units.gu(1)
193+ left: parent.left
194+ bottom: parent.bottom
195+ bottomMargin: units.gu(1)
196+ right: cancelLabel.left
197+ rightMargin: units.gu(1)
198+ }
201199
202− secondaryItem: AbstractButton {
203− height: searchTextField.height
204− width: height
205− enabled: searchTextField.text.length > 0
200+ secondaryItem: AbstractButton {
201+ height: searchTextField.height
202+ width: height
203+ enabled: searchTextField.text.length > 0
204+
205+ Image {
206+ objectName: "clearIcon"
207+ anchors.fill: parent
208+ anchors.margins: units.gu(.75)
209+ source: "image://theme/clear"
210+ opacity: searchTextField.text.length > 0
211+ visible: opacity > 0
212+ Behavior on opacity {
213+ UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
214+ }
215+ }
206216
207− Image {
208− objectName: "clearIcon"
209− anchors.fill: parent
210− anchors.margins: units.gu(.75)
211− source: "image://theme/clear"
212− opacity: searchTextField.text.length > 0
213− visible: opacity > 0
214− Behavior on opacity {
215− UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
217+ onClicked: {
218+ root.resetSearch(true);
219+ root.openPopup();
216220 }
217221 }
218222
219− onClicked: {
220− root.resetSearch(true);
221− root.openPopup();
223+ onActiveFocusChanged: {
224+ if (activeFocus) {
225+ root.searchTextFieldFocused();
226+ root.openPopup();
227+ }
222228 }
223− }
224229
225− onActiveFocusChanged: {
226− if (activeFocus) {
227− root.searchTextFieldFocused();
228− root.openPopup();
230+ onTextChanged: {
231+ if (text != "") {
232+ closePopup(/* keepFocus */true);
233+ }
229234 }
230235 }
231236
232− onTextChanged: {
233− if (text != "") {
234− closePopup(/* keepFocus */true);
237+ Label {
238+ id: cancelLabel
239+ text: i18n.tr("Cancel")
240+ verticalAlignment: Text.AlignVCenter
241+ anchors {
242+ top: parent.top
243+ right: parent.right
244+ bottom: parent.bottom
245+ margins: units.gu(1)
246+ }
247+ AbstractButton {
248+ anchors.fill: parent
249+ onClicked: {
250+ root.resetSearch();
251+ headerContainer.showSearch = false;
252+ }
235253 }
236254 }
237255 }