@@ -14,387 +14,243 @@
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
2222
2323Item {
2424 id: root
25+ implicitHeight: headerContainer.height + units.gu(2) + bottomContainer.height
26+ height: implicitHeight
27+
28+ property bool showBackButton: false
29+ property string title
30+ property var scope: null
31+
2532 property bool searchEntryEnabled: false
26− property alias searchQuery: searchField.text
2733 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 alias searchQuery: searchTextField.text
3235
33− signal backClicked
36+ property alias bottomItem: bottomContainer.children
3437
35− height: header.height + units.gu(2) + bottomContainer.height
36− implicitHeight: header.height + units.gu(2) + bottomContainer.height
38+ signal backClicked()
3739
3840 function triggerSearch() {
39− if (searchEntryEnabled) searchField.forceActiveFocus()
41+ if (searchEntryEnabled) searchTextField.forceActiveFocus()
4042 }
4143
42− function resetSearch() {
43− if (!searchHistory) return;
44+ function resetSearch(unfocusField) {
45+ if (unfocusField == undefined) {
46+ unfocusField = true;
47+ }
4448
45− searchHistory.addQuery(searchField.text);
46− unfocus();
47− searchField.text = "";
49+ if (searchHistory) {
50+ searchHistory.addQuery(searchTextField.text);
51+ }
52+ if (unfocusField) {
53+ unfocus();
54+ }
55+ searchTextField.text = "";
4856 }
4957
5058 function unfocus() {
51− searchField.focus = false;
59+ print("unfocusing field")
60+ searchTextField.focus = false;
5261 }
5362
54− Connections {
55− target: greeter
56− onShownChanged: if (shown) resetSearch()
63+ function openSearchHistory() {
64+ print("should open search history")
65+ if (openSearchAnimation.running) {
66+ print("huh! animation is running")
67+ openSearchAnimation.openSearchHistory = true
68+ } else if (root.searchHistory.count > 0) {
69+ PopupUtils.open(popoverComponent, searchTextField,
70+ {
71+ "contentWidth": searchTextField.width,
72+ "edgeMargins": units.gu(1)
73+ }
74+ )
75+ }
5776 }
5877
5978 Flickable {
60− id: header
61− anchors {
62− left: parent.left
63− right: parent.right
64− top: parent.top
65− }
79+ id: headerContainer
80+ clip: true
81+ anchors { left: parent.left; top: parent.top; right: parent.right }
6682 height: units.gu(6.5)
67−
83+ contentHeight: headersColumn.height
6884 interactive: false
69− contentHeight: headerContainer.height
70− clip: true
85+ contentY: showSearch ? 0 : height
7186
72− contentY: searchField.activeFocus || searchField.text != "" ? searchContainer.y : headerContainer.y
73−
74− Behavior on contentY { NumberAnimation { duration: 200; easing.type: Easing.OutQuad } }
75−
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
85− }
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"
92− }
93− }
87+ property bool showSearch: false
9488
95− // FIXME this could potentially be simplified to avoid all the containers
96− Item {
97− id: headerContainer
89+ Behavior on contentY {
90+ UbuntuNumberAnimation {
91+ id: openSearchAnimation
92+ property bool openSearchHistory: false
9893
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
124−
125− anchors.right: headerContainer.right
126− height: header.height
127−
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"
133−
134− onStateChanged: {
135− if (state == "active" || state == "narrowActive") {
136− popoverShouldOpen = true;
137− popoverShouldClose = false;
138− } else {
139− popoverShouldOpen = false;
140− popoverShouldClose = true;
94+ onRunningChanged: {
95+ if (!running && openSearchAnimation.openSearchHistory) {
96+ openSearchAnimation.openSearchHistory = false;
97+ root.openSearchHistory()
14198 }
14299 }
100+ }
101+ }
143102
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− )
152− }
153− popoverShouldOpen = false;
154− popoverShouldClose = false;
155− }
156−
157− function closePopover() {
158− if (searchContainer.popover) {
159− PopupUtils.close(searchContainer.popover);
160− searchContainer.popover = null;
103+ Column {
104+ id: headersColumn
105+ anchors.fill: parent
106+ height: searchHeader.height + header.height
107+
108+ PageHeadStyle {
109+ id: searchHeader
110+ anchors { left: parent.left; right: parent.right }
111+ height: headerContainer.height
112+ contentHeight: height
113+ separatorSource: ""
114+ property var styledItem: searchHeader
115+ property string title: "searchHeader"
116+ property var config: PageHeadConfiguration {
117+ backAction: Action {
118+ iconName: "back"
119+ onTriggered: {
120+ root.resetSearch(true)
121+ headerContainer.showSearch = false
122+ }
161123 }
162− popoverShouldOpen = false;
163− popoverShouldClose = false;
164124 }
165−
166− onActiveFocusChanged: if (!activeFocus) { searchHistory.addQuery(searchField.text) }
167−
168− TextField {
169− id: searchField
170−
171− anchors.fill: parent
172− anchors.margins: units.gu(1)
173−
174− inputMethodHints: Qt.ImhNoPredictiveText
125+ property var contents: TextField {
126+ id: searchTextField
175127 hasClearButton: false
128+ anchors {
129+ fill: parent;
130+ leftMargin: units.gu(1)
131+ topMargin: units.gu(1)
132+ bottomMargin: units.gu(1)
133+ rightMargin: root.width > units.gu(60) ? root.width - units.gu(40) : units.gu(1)
134+ }
176135
177− primaryItem: AbstractButton {
178− enabled: searchField.text != "" && !searchIndicator.running
179− onClicked: {
180− if (searchField.text != "") {
181− searchHistory.addQuery(searchField.text)
182− searchField.text = ""
183− }
184− }
185− height: parent.height
136+ secondaryItem: AbstractButton {
137+ height: searchTextField.height
186138 width: height
187139
188− ActivityIndicator {
189− id: searchIndicator
190− objectName: "searchIndicator"
191−
192− anchors {
193− verticalCenter: parent.verticalCenter
194− left: parent.left
195− leftMargin: units.gu(0.5)
196− }
197−
198− running: opacity > 0
140+ Image {
141+ anchors.fill: parent
142+ anchors.margins: units.gu(.75)
143+ source: "image://theme/clear"
144+ opacity: searchTextField.text.length > 0 && !searchActivityIndicator.running
199145 }
200146
201− Image {
202− id: primaryImage
203− objectName: "primaryImage"
204− anchors {
205− verticalCenter: parent.verticalCenter
206− left: parent.left
207− leftMargin: units.gu(0.5)
147+ ActivityIndicator {
148+ id: searchActivityIndicator
149+ anchors.fill: parent
150+ anchors.margins: units.gu(.75)
151+ running: root.scope && root.scope.searchInProgress
152+ opacity: running ? 1 : 0
153+ Behavior on opacity {
154+ UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
208155 }
209− width: units.gu(3)
210− height: units.gu(3)
211− visible: opacity > 0
212156 }
213157
214− Item {
215− id: pointerPositioner
216− anchors.left: parent.right
217− anchors.leftMargin: units.gu(0.5)
218− anchors.top: parent.bottom
158+ onClicked: {
159+ root.resetSearch(false)
160+ root.openSearchHistory()
219161 }
220162 }
221163
222− onTextChanged: {
223− if (text != "") searchContainer.closePopover()
224− else if (text == "" && activeFocus) searchContainer.openPopover()
225− }
226−
227164 onActiveFocusChanged: {
228− if (!activeFocus) searchContainer.closePopover()
165+ if (activeFocus) {
166+ root.openSearchHistory()
167+ }
229168 }
169+ }
170+ }
230171
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 }
172+ PageHeadStyle {
173+ id: header
174+ anchors { left: parent.left; right: parent.right }
175+ height: headerContainer.height
176+ contentHeight: height
177+ separatorSource: ""
178+ textColor: "grey"
179+ property var styledItem: header
180+ property string title: root.title
181+ property var config: PageHeadConfiguration {
182+ backAction: Action {
183+ iconName: "back"
184+ visible: root.showBackButton
185+ onTriggered: {
186+ print("Back clicked")
187+ root.backClicked()
243188 }
244− ]
189+ }
245190
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 }
191+ actions: [
192+ Action {
193+ iconName: "search"
194+ visible: root.searchEntryEnabled
195+ onTriggered: {
196+ headerContainer.showSearch = true
197+ searchTextField.forceActiveFocus()
253198 }
254199 }
255200 ]
256201 }
202+ }
203+ }
204+ }
257205
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" }
295− }
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−
334− 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
206+ Component {
207+ id: popoverComponent
208+ Popover {
209+ id: popover
210+
211+ // FIXME: this should go into the first item below, but enable: false
212+ // prevents mouse events propagation
213+ AbstractButton {
214+ anchors {
215+ top: parent.top
216+ right: parent.right
217+ }
218+ height: units.gu(6)
219+ width: height
348220
349− onClicked: searchContainer.closePopover()
221+ onClicked: PopupUtils.close(popover)
350222
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− }
357− }
223+ Image {
224+ anchors.centerIn: parent
225+ width: units.gu(2)
226+ height: units.gu(2)
227+ source: "../Dash/graphics/icon_listview_clear.png"
228+ }
229+ }
358230
359− Column {
360− anchors {
361− top: parent.top
362− left: parent.left
363− right: parent.right
364− }
231+ Column {
232+ anchors {
233+ top: parent.top
234+ left: parent.left
235+ right: parent.right
236+ }
365237
366− ListItem.Standard { enabled: false; text: i18n.tr("Recent searches") }
238+ Standard { enabled: false; text: i18n.tr("Recent searches") }
367239
368− Repeater {
369− id: recentSearches
370− model: searchHistory
240+ Repeater {
241+ id: recentSearches
242+ model: searchHistory
371243
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− }
244+ delegate: Standard {
245+ showDivider: index < recentSearches.count - 1
246+ text: query
247+ onClicked: {
248+ searchHistory.addQuery(text)
249+ searchTextField.text = text
250+ PopupUtils.close(popover)
381251 }
382252 }
383253 }
384−
385− InverseMouseArea {
386− enabled: searchField.activeFocus
387−
388− anchors {
389− top: parent.top
390− left: parent.left
391− right: parent.right
392− }
393−
394− height: searchContainer.popover ? parent.height + searchContainer.popover.contentHeight + units.gu(2) : parent.height
395−
396− onPressed: searchField.focus = false
397− }
398254 }
399255 }
400256 }
@@ -402,7 +258,7 @@ Item {
402258 BorderImage {
403259 id: bottomBorder
404260 anchors {
405− top: header.bottom
261+ top: headerContainer.bottom
406262 left: parent.left
407263 right: parent.right
408264 bottom: bottomContainer.top