@@ -14,386 +14,287 @@
1414 * along with this program. If not, see <http://www.gnu.org/licenses/>.
1515 */
1616
17−import QtQuick 2.0
18−import Ubuntu.Components 0.1
19−import Ubuntu.Components.Popups 0.1
20−import Ubuntu.Components.ListItems 0.1 as ListItem
21−import Unity 0.2
17+import QtQuick 2.2
18+import Ubuntu.Components 1.1
19+import Ubuntu.Components.Themes.Ambiance 1.1
20+import Ubuntu.Components.Popups 1.0
21+import Ubuntu.Components.ListItems 1.0
22+import "SearchHistoryModel"
2223
2324Item {
2425 id: root
26+ objectName: "pageHeader"
27+ implicitHeight: headerContainer.height + units.gu(2) + bottomContainer.height
28+
29+ property bool showBackButton: false
30+ property string title
31+ property string imageSource
32+
2533 property bool searchEntryEnabled: false
26− property alias searchQuery: searchField.text
27− property ListModel searchHistory
28− property var scope: null
29− property alias childItem: itemContainer.children
30− property alias bottomItem: bottomContainer.children
31− property alias showBackButton: backButton.visible
34+ property ListModel searchHistory: SearchHistoryModel
35+ property alias searchQuery: searchTextField.text
36+ property bool searchInProgress: false
3237
33− signal backClicked
38+ property alias bottomItem: bottomContainer.children
3439
35− height: header.height + units.gu(2) + bottomContainer.height
36− implicitHeight: header.height + units.gu(2) + bottomContainer.height
40+ signal backClicked()
3741
3842 function triggerSearch() {
39− if (searchEntryEnabled) searchField.forceActiveFocus()
43+ if (searchEntryEnabled) {
44+ headerContainer.showSearch = true;
45+ searchTextField.forceActiveFocus();
46+ }
4047 }
4148
42− function resetSearch() {
43− if (!searchHistory) return;
44−
45− searchHistory.addQuery(searchField.text);
46− unfocus();
47− searchField.text = "";
49+ function resetSearch(keepFocus) {
50+ if (searchHistory) {
51+ searchHistory.addQuery(searchTextField.text);
52+ }
53+ if (!keepFocus) {
54+ unfocus();
55+ }
56+ searchTextField.text = "";
57+ if (headerContainer.popover != null) {
58+ PopupUtils.close(headerContainer.popover);
59+ }
4860 }
4961
5062 function unfocus() {
51− searchField.focus = false;
63+ searchTextField.focus = false;
64+ if (!searchTextField.text) {
65+ headerContainer.showSearch = false;
66+ }
5267 }
5368
54− Connections {
55− target: greeter
56− onShownChanged: if (shown) resetSearch()
69+ function openSearchHistory() {
70+ if (openSearchAnimation.running) {
71+ openSearchAnimation.openSearchHistory = true;
72+ } else if (root.searchHistory.count > 0 && headerContainer.popover == null) {
73+ headerContainer.popover = PopupUtils.open(popoverComponent, searchTextField,
74+ {
75+ "contentWidth": searchTextField.width,
76+ "edgeMargins": units.gu(1)
77+ }
78+ );
79+ }
5780 }
5881
59− Flickable {
60− id: header
61− anchors {
62− left: parent.left
63− right: parent.right
64− top: parent.top
82+ onImageSourceChanged: {
83+ if (imageSource) {
84+ header.contents = imageComponent.createObject();
85+ } else {
86+ header.contents.destroy();
87+ header.contents = null;
6588 }
66− height: units.gu(6.5)
67−
68− interactive: false
69− contentHeight: headerContainer.height
70− clip: true
71−
72− contentY: searchField.activeFocus || searchField.text != "" ? searchContainer.y : headerContainer.y
73−
74− Behavior on contentY { NumberAnimation { duration: 200; easing.type: Easing.OutQuad } }
89+ }
7590
76− AbstractButton {
77− id: backButton
78− objectName: root.objectName + "_backButton"
79− visible: false
80− height: header.height
81− y: header.contentY
82− anchors {
83− left: parent.left
84− leftMargin: visible ? units.gu(2) : 0
91+ InverseMouseArea {
92+ anchors { fill: parent; margins: units.gu(1); bottomMargin: units.gu(3) + bottomContainer.height }
93+ visible: headerContainer.showSearch
94+ onPressed: {
95+ if (headerContainer.popover) {
96+ PopupUtils.close(headerContainer.popover);
8597 }
86− width: visible ? image.width + units.gu(2) : 0
87− onClicked: root.backClicked();
88− Image {
89− id: image
90− anchors.centerIn: parent
91− source: "graphics/headerback.png"
98+ if (!searchTextField.text) {
99+ headerContainer.showSearch = false;
92100 }
101+ searchTextField.focus = false;
102+ mouse.accepted = false;
93103 }
104+ }
94105
95− // FIXME this could potentially be simplified to avoid all the containers
96− Item {
97− id: headerContainer
98−
99− anchors {
100− left: backButton.right
101− right: parent.right
102− }
103− height: childrenRect.height
104−
105− Item {
106− id: itemContainer
107−
108− width: searchContainer.narrowMode ? header.width : header.width - searchContainer.width
109− height: header.height
110− }
111−
112− Item {
113− id: searchContainer
114− objectName: "searchContainer"
115−
116− visible: searchEntryEnabled
117− property bool popoverShouldOpen: false
118− property bool popoverShouldClose: false
119−
120− property bool narrowMode: parent.width < units.gu(80)
121−
122− property bool active: searchField.text != "" || searchField.activeFocus
123− property var popover: null
106+ Flickable {
107+ id: headerContainer
108+ objectName: "headerContainer"
109+ clip: true
110+ anchors { left: parent.left; top: parent.top; right: parent.right }
111+ height: units.gu(6.5)
112+ contentHeight: headersColumn.height
113+ interactive: false
114+ contentY: showSearch ? 0 : height
124115
125− anchors.right: headerContainer.right
126− height: header.height
116+ property bool showSearch: false
117+ property var popover: null
127118
128− state:
129− if (active && narrowMode) "narrowActive"
130− else if (!active && narrowMode) "narrowInactive"
131− else if (active && !narrowMode) "active"
132− else if (!active && !narrowMode) "inactive"
119+ Behavior on contentY {
120+ UbuntuNumberAnimation {
121+ id: openSearchAnimation
122+ property bool openSearchHistory: false
133123
134− onStateChanged: {
135− if (state == "active" || state == "narrowActive") {
136− popoverShouldOpen = true;
137− popoverShouldClose = false;
138− } else {
139− popoverShouldOpen = false;
140− popoverShouldClose = true;
124+ onRunningChanged: {
125+ if (!running && openSearchAnimation.openSearchHistory) {
126+ openSearchAnimation.openSearchHistory = false;
127+ root.openSearchHistory();
141128 }
142129 }
130+ }
131+ }
143132
144− function openPopover() {
145− if (searchHistory.count > 0) {
146− searchContainer.popover = PopupUtils.open(popoverComponent, pointerPositioner,
147− {
148− "contentWidth": searchField.width,
149− "edgeMargins": units.gu(1)
150− }
151− )
133+ Column {
134+ id: headersColumn
135+ anchors { left: parent.left; right: parent.right }
136+
137+ PageHeadStyle {
138+ id: searchHeader
139+ anchors { left: parent.left; right: parent.right }
140+ height: headerContainer.height
141+ contentHeight: height
142+ separatorSource: ""
143+ // Required to keep PageHeadStyle noise down as it expects the Page's properties around.
144+ property var styledItem: searchHeader
145+ property string title
146+ property var config: PageHeadConfiguration {
147+ backAction: Action {
148+ iconName: "back"
149+ onTriggered: {
150+ root.resetSearch();
151+ headerContainer.showSearch = false;
152+ }
152153 }
153− popoverShouldOpen = false;
154− popoverShouldClose = false;
155154 }
156−
157− function closePopover() {
158− if (searchContainer.popover) {
159− PopupUtils.close(searchContainer.popover);
160− searchContainer.popover = null;
155+ property var contents: TextField {
156+ id: searchTextField
157+ objectName: "searchTextField"
158+ hasClearButton: false
159+ anchors {
160+ fill: parent
161+ leftMargin: units.gu(1)
162+ topMargin: units.gu(1)
163+ bottomMargin: units.gu(1)
164+ rightMargin: root.width > units.gu(60) ? root.width - units.gu(40) : units.gu(1)
161165 }
162− popoverShouldOpen = false;
163− popoverShouldClose = false;
164− }
165−
166− onActiveFocusChanged: if (!activeFocus) { searchHistory.addQuery(searchField.text) }
167−
168− TextField {
169− id: searchField
170166
171− anchors.fill: parent
172− anchors.margins: units.gu(1)
173−
174− inputMethodHints: Qt.ImhNoPredictiveText
175− hasClearButton: false
167+ secondaryItem: AbstractButton {
168+ height: searchTextField.height
169+ width: height
170+ enabled: searchTextField.text.length > 0
176171
177− primaryItem: AbstractButton {
178− enabled: searchField.text != "" && !searchIndicator.running
179− onClicked: {
180− if (searchField.text != "") {
181− searchHistory.addQuery(searchField.text)
182− searchField.text = ""
172+ Image {
173+ objectName: "clearIcon"
174+ anchors.fill: parent
175+ anchors.margins: units.gu(.75)
176+ source: "image://theme/clear"
177+ opacity: searchTextField.text.length > 0 && !searchActivityIndicator.running
178+ visible: opacity > 0
179+ Behavior on opacity {
180+ UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
183181 }
184182 }
185− height: parent.height
186− width: height
187183
188184 ActivityIndicator {
189− id: searchIndicator
185+ id: searchActivityIndicator
190186 objectName: "searchIndicator"
191−
192− anchors {
193− verticalCenter: parent.verticalCenter
194− left: parent.left
195− leftMargin: units.gu(0.5)
187+ anchors.fill: parent
188+ anchors.margins: units.gu(.75)
189+ running: root.searchInProgress
190+ opacity: running ? 1 : 0
191+ Behavior on opacity {
192+ UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
196193 }
197−
198− running: opacity > 0
199− }
200−
201− Image {
202− id: primaryImage
203− objectName: "primaryImage"
204− anchors {
205− verticalCenter: parent.verticalCenter
206− left: parent.left
207− leftMargin: units.gu(0.5)
208− }
209− width: units.gu(3)
210− height: units.gu(3)
211− visible: opacity > 0
212194 }
213195
214− Item {
215− id: pointerPositioner
216− anchors.left: parent.right
217− anchors.leftMargin: units.gu(0.5)
218− anchors.top: parent.bottom
196+ onClicked: {
197+ root.resetSearch(true);
198+ root.openSearchHistory();
219199 }
220200 }
221201
222− onTextChanged: {
223− if (text != "") searchContainer.closePopover()
224− else if (text == "" && activeFocus) searchContainer.openPopover()
225− }
226−
227202 onActiveFocusChanged: {
228− if (!activeFocus) searchContainer.closePopover()
203+ if (activeFocus) {
204+ root.openSearchHistory();
205+ }
229206 }
207+ }
208+ }
230209
231− states: [
232− State {
233− name: "searching"
234− when: scope && scope.searchInProgress
235− PropertyChanges { target: searchIndicator; running: true; opacity: 1 }
236− PropertyChanges { target: primaryImage; opacity: 0 }
237− },
238− State {
239− name: "idle"
240− when: !scope || !scope.searchInProgress
241− PropertyChanges { target: searchIndicator; opacity: 0 }
242− PropertyChanges { target: primaryImage; opacity: 1 }
210+ PageHeadStyle {
211+ id: header
212+ objectName: "innerPageHeader"
213+ anchors { left: parent.left; right: parent.right }
214+ height: headerContainer.height
215+ contentHeight: height
216+ separatorSource: ""
217+ // FIXME: Use the theme's color once we're split from the shell
218+ textColor: "grey"
219+ property var styledItem: header
220+ property string title: root.title
221+ property var config: PageHeadConfiguration {
222+ backAction: Action {
223+ iconName: "back"
224+ visible: root.showBackButton
225+ onTriggered: {
226+ root.backClicked();
243227 }
244− ]
228+ }
245229
246− transitions: [
247− Transition {
248− to: "searching"
249− reversible: true
250− SequentialAnimation {
251− NumberAnimation { target: primaryImage; property: "opacity"; duration: UbuntuAnimation.FastDuration; easing.type: Easing.Linear }
252− NumberAnimation { target: searchIndicator; property: "opacity"; duration: UbuntuAnimation.FastDuration; easing.type: Easing.Linear }
230+ actions: [
231+ Action {
232+ iconName: "search"
233+ visible: root.searchEntryEnabled
234+ onTriggered: {
235+ headerContainer.showSearch = true;
236+ searchTextField.forceActiveFocus();
253237 }
254238 }
255239 ]
256240 }
257241
258− states: [
259− State {
260− name: "wide"
261− AnchorChanges { target: itemContainer; anchors.top: headerContainer.top }
262− AnchorChanges { target: searchContainer; anchors.left: undefined; anchors.top: itemContainer.top }
263− },
264− State {
265− name: "narrow"
266− PropertyChanges { target: searchField; highlighted: true }
267− AnchorChanges { target: itemContainer; anchors.top: searchContainer.bottom }
268− AnchorChanges { target: searchContainer; anchors.left: headerContainer.left; anchors.top: headerContainer.top }
269− },
270− State {
271− name: "active"
272− extend: "wide"
273− PropertyChanges { target: searchContainer; width: units.gu(40) }
274− PropertyChanges { target: primaryImage; source: searchField.text ? "../Dash/graphics/icon_clear.png" : "../Dash/graphics/icon_search_active.png" }
275− PropertyChanges { target: searchField; highlighted: true }
276− },
277− State {
278− name: "inactive"
279− extend: "wide"
280− PropertyChanges { target: searchContainer; width: units.gu(25) }
281− PropertyChanges { target: primaryImage; source: "../Dash/graphics/icon_search_inactive.png" }
282− PropertyChanges { target: searchField; highlighted: false }
283− },
284− State {
285− name: "narrowActive"
286− extend: "narrow"
287− PropertyChanges { target: header; contentY: 0 }
288− PropertyChanges { target: primaryImage; source: searchField.text ? "../Dash/graphics/icon_clear.png" : "../Dash/graphics/icon_search_active.png" }
289− },
290− State {
291− name: "narrowInactive"
292− extend: "narrow"
293− PropertyChanges { target: header; contentY: header.height }
294− PropertyChanges { target: primaryImage; source: searchField.text ? "../Dash/graphics/icon_clear.png" : "../Dash/graphics/icon_search_active.png" }
242+ property var contents: null
243+ Component.onCompleted: {
244+ if (root.imageSource) {
245+ header.contents = imageComponent.createObject();
295246 }
296− ]
297−
298− transitions: [
299− Transition {
300− to: "active"
301− SequentialAnimation {
302− ParallelAnimation {
303− NumberAnimation { targets: [searchContainer, searchField]; property: "width"; duration: 200; easing.type: Easing.InOutQuad }
304− PropertyAction { target: primaryImage; property: "source" }
305− AnchorAnimation { targets: [searchContainer, itemContainer]; duration: 200; easing.type: Easing.InOutQuad }
306− }
307− ScriptAction { script: if (searchContainer.popoverShouldOpen) { searchContainer.openPopover(); } }
308− }
309− },
310− Transition {
311− to: "inactive"
312− ScriptAction { script: if (searchContainer.popoverShouldClose) { searchContainer.closePopover(); } }
313− NumberAnimation { targets: [searchContainer, searchField] ; property: "width"; duration: 200; easing.type: Easing.InOutQuad }
314− AnchorAnimation { targets: [searchContainer, itemContainer]; duration: 200; easing.type: Easing.InOutQuad }
315− },
316− Transition {
317− to: "narrowActive"
318− SequentialAnimation {
319− ParallelAnimation {
320− NumberAnimation { targets: [searchContainer, searchField] ; property: "width"; duration: 200; easing.type: Easing.OutQuad }
321− AnchorAnimation { targets: [searchContainer, itemContainer]; duration: 200; easing.type: Easing.InOutQuad }
322− }
323− ScriptAction { script: if (searchContainer.popoverShouldOpen) { searchContainer.openPopover(); } }
324− }
325− },
326− Transition {
327− to: "narrowInactive"
328− ScriptAction { script: if (searchContainer.popoverShouldClose) { searchContainer.closePopover(); } }
329− NumberAnimation { targets: [searchContainer, searchField] ; property: "width"; duration: 200; easing.type: Easing.OutQuad }
330− AnchorAnimation { targets: [searchContainer, itemContainer]; duration: 200; easing.type: Easing.InOutQuad }
331− }
332− ]
333−
247+ }
334248 Component {
335− id: popoverComponent
336− Popover {
337− id: popover
338−
339− // FIXME: this should go into the first item below, but enable: false
340− // prevents mouse events propagation
341− AbstractButton {
342− anchors {
343− top: parent.top
344− right: parent.right
345− }
346− height: units.gu(6)
347− width: height
348−
349− onClicked: searchContainer.closePopover()
249+ id: imageComponent
350250
351− Image {
352− anchors.centerIn: parent
353− width: units.gu(2)
354− height: units.gu(2)
355− source: "../Dash/graphics/icon_listview_clear.png"
356− }
251+ Item {
252+ anchors { fill: parent; topMargin: units.gu(1); bottomMargin: units.gu(1) }
253+ clip: true
254+ Image {
255+ objectName: "titleImage"
256+ anchors.fill: parent
257+ source: root.imageSource
258+ fillMode: Image.PreserveAspectFit
259+ horizontalAlignment: Image.AlignLeft
260+ sourceSize.height: height
357261 }
262+ }
263+ }
264+ }
265+ }
266+ }
358267
359− Column {
360− anchors {
361− top: parent.top
362− left: parent.left
363− right: parent.right
364− }
365−
366− ListItem.Standard { enabled: false; text: i18n.tr("Recent searches") }
268+ Component {
269+ id: popoverComponent
270+ Popover {
271+ id: popover
272+ autoClose: false
367273
368− Repeater {
369− id: recentSearches
370− model: searchHistory
274+ Component.onDestruction: {
275+ headerContainer.popover = null;
276+ }
371277
372− delegate: ListItem.Standard {
373− showDivider: index < recentSearches.count - 1
374− text: query
375− onClicked: {
376− searchHistory.addQuery(text)
377− searchField.text = text
378− }
379− }
380− }
381− }
382− }
278+ Column {
279+ anchors {
280+ top: parent.top
281+ left: parent.left
282+ right: parent.right
383283 }
384284
385− InverseMouseArea {
386− enabled: searchField.activeFocus
285+ Repeater {
286+ id: recentSearches
287+ model: searchHistory
387288
388− anchors {
389− top: parent.top
390− left: parent.left
391− right: parent.right
289+ delegate: Standard {
290+ showDivider: index < recentSearches.count - 1
291+ text: query
292+ onClicked: {
293+ searchHistory.addQuery(text);
294+ searchTextField.text = text;
295+ PopupUtils.close(popover);
296+ }
392297 }
393−
394− height: searchContainer.popover ? parent.height + searchContainer.popover.contentHeight + units.gu(2) : parent.height
395−
396− onPressed: searchField.focus = false
397298 }
398299 }
399300 }
@@ -402,7 +303,7 @@ Item {
402303 BorderImage {
403304 id: bottomBorder
404305 anchors {
405− top: header.bottom
306+ top: headerContainer.bottom
406307 left: parent.left
407308 right: parent.right
408309 bottom: bottomContainer.top