git.iko.soy/unity8
on f014c59 help sign in
unity8/qml/Components/PageHeader.qml
386 lines 16 kB history raw
1/*
2 * Copyright (C) 2013 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 */
17import QtQuick 2.0
18import Ubuntu.Components 0.1
19import Ubuntu.Components.Popups 0.1
20import Ubuntu.Components.ListItems 0.1 as ListItem
21import Unity 0.2
23Item {
24 id: root
25 property bool searchEntryEnabled: false
26 property alias searchQuery: searchField.text
27 property ListModel searchHistory
28 property Scope scope
29 property alias childItem: itemContainer.children
31 height: units.gu(8.5)
32 implicitHeight: units.gu(8.5)
34 function triggerSearch() {
35 if (searchEntryEnabled) searchField.forceActiveFocus()
36 }
38 function resetSearch() {
39 if (!searchHistory) return;
41 searchHistory.addQuery(searchField.text);
42 unfocus();
43 searchField.text = "";
44 }
46 function unfocus() {
47 searchField.focus = false;
48 }
50 Connections {
51 target: greeter
52 onShownChanged: if (shown) resetSearch()
53 }
55 Flickable {
56 id: header
57 anchors {
58 left: parent.left
59 right: parent.right
60 top: parent.top
61 }
62 height: units.gu(6.5)
64 interactive: false
65 contentHeight: headerContainer.height
66 clip: true
68 contentY: searchField.activeFocus || searchField.text != "" ? searchContainer.y : headerContainer.y
70 Behavior on contentY { NumberAnimation { duration: 200; easing.type: Easing.OutQuad } }
72 // FIXME this could potentially be simplified to avoid all the containers
73 Item {
74 id: headerContainer
76 width: parent.width
77 height: childrenRect.height
79 Item {
80 id: itemContainer
82 width: searchContainer.narrowMode ? header.width : header.width - searchContainer.width
83 height: header.height
84 }
86 Item {
87 id: searchContainer
88 objectName: "searchContainer"
90 visible: searchEntryEnabled
91 property bool popoverShouldOpen: false
92 property bool popoverShouldClose: false
94 property bool narrowMode: parent.width < units.gu(80)
96 property bool active: searchField.text != "" || searchField.activeFocus
97 property var popover: null
99 anchors.right: headerContainer.right
100 height: header.height
102 state:
103 if (active && narrowMode) "narrowActive"
104 else if (!active && narrowMode) "narrowInactive"
105 else if (active && !narrowMode) "active"
106 else if (!active && !narrowMode) "inactive"
108 onStateChanged: {
109 if (state == "active" || state == "narrowActive") {
110 popoverShouldOpen = true;
111 popoverShouldClose = false;
112 } else {
113 popoverShouldOpen = false;
114 popoverShouldClose = true;
115 }
116 }
118 function openPopover() {
119 if (searchHistory.count > 0) {
120 searchContainer.popover = PopupUtils.open(popoverComponent, pointerPositioner,
121 {
122 "contentWidth": searchField.width,
123 "edgeMargins": units.gu(1)
124 }
125 )
126 }
127 popoverShouldOpen = false;
128 popoverShouldClose = false;
129 }
131 function closePopover() {
132 if (searchContainer.popover) {
133 PopupUtils.close(searchContainer.popover);
134 searchContainer.popover = null;
135 }
136 popoverShouldOpen = false;
137 popoverShouldClose = false;
138 }
140 onActiveFocusChanged: if (!activeFocus) { searchHistory.addQuery(searchField.text) }
142 TextField {
143 id: searchField
145 anchors.fill: parent
146 anchors.margins: units.gu(1)
148 hasClearButton: false
150 primaryItem: AbstractButton {
151 enabled: searchField.text != "" && !searchIndicator.running
152 onClicked: {
153 if (searchField.text != "") {
154 searchHistory.addQuery(searchField.text)
155 searchField.text = ""
156 }
157 }
158 height: parent.height
159 width: height
161 ActivityIndicator {
162 id: searchIndicator
163 objectName: "searchIndicator"
165 anchors {
166 verticalCenter: parent.verticalCenter
167 left: parent.left
168 leftMargin: units.gu(0.5)
169 }
171 running: opacity > 0
172 }
174 Image {
175 id: primaryImage
176 objectName: "primaryImage"
177 anchors {
178 verticalCenter: parent.verticalCenter
179 left: parent.left
180 leftMargin: units.gu(0.5)
181 }
182 width: units.gu(3)
183 height: units.gu(3)
184 visible: opacity > 0
185 }
187 Item {
188 id: pointerPositioner
189 anchors.left: parent.right
190 anchors.leftMargin: units.gu(0.5)
191 anchors.top: parent.bottom
192 }
193 }
195 onTextChanged: {
196 if (text != "") searchContainer.closePopover()
197 else if (text == "" && activeFocus) searchContainer.openPopover()
198 }
200 onActiveFocusChanged: {
201 if (!activeFocus) searchContainer.closePopover()
202 }
204 states: [
205 State {
206 name: "searching"
207 when: scope && scope.searchInProgress
208 PropertyChanges { target: searchIndicator; running: true; opacity: 1 }
209 PropertyChanges { target: primaryImage; opacity: 0 }
210 },
211 State {
212 name: "idle"
213 when: !scope || !scope.searchInProgress
214 PropertyChanges { target: searchIndicator; opacity: 0 }
215 PropertyChanges { target: primaryImage; opacity: 1 }
216 }
217 ]
219 transitions: [
220 Transition {
221 to: "searching"
222 reversible: true
223 SequentialAnimation {
224 NumberAnimation { target: primaryImage; property: "opacity"; duration: UbuntuAnimation.FastDuration; easing.type: Easing.Linear }
225 NumberAnimation { target: searchIndicator; property: "opacity"; duration: UbuntuAnimation.FastDuration; easing.type: Easing.Linear }
226 }
227 }
228 ]
229 }
231 states: [
232 State {
233 name: "wide"
234 AnchorChanges { target: itemContainer; anchors.top: headerContainer.top }
235 AnchorChanges { target: searchContainer; anchors.left: undefined; anchors.top: itemContainer.top }
236 },
237 State {
238 name: "narrow"
239 PropertyChanges { target: searchField; highlighted: true }
240 AnchorChanges { target: itemContainer; anchors.top: searchContainer.bottom }
241 AnchorChanges { target: searchContainer; anchors.left: headerContainer.left; anchors.top: headerContainer.top }
242 },
243 State {
244 name: "active"
245 extend: "wide"
246 PropertyChanges { target: searchContainer; width: units.gu(40) }
247 PropertyChanges { target: primaryImage; source: searchField.text ? "../Dash/graphics/icon_clear.png" : "../Dash/graphics/icon_search_active.png" }
248 PropertyChanges { target: searchField; highlighted: true }
249 },
250 State {
251 name: "inactive"
252 extend: "wide"
253 PropertyChanges { target: searchContainer; width: units.gu(25) }
254 PropertyChanges { target: primaryImage; source: "../Dash/graphics/icon_search_inactive.png" }
255 PropertyChanges { target: searchField; highlighted: false }
256 },
257 State {
258 name: "narrowActive"
259 extend: "narrow"
260 PropertyChanges { target: header; contentY: 0 }
261 PropertyChanges { target: primaryImage; source: searchField.text ? "../Dash/graphics/icon_clear.png" : "../Dash/graphics/icon_search_active.png" }
262 },
263 State {
264 name: "narrowInactive"
265 extend: "narrow"
266 PropertyChanges { target: header; contentY: header.height }
267 PropertyChanges { target: primaryImage; source: searchField.text ? "../Dash/graphics/icon_clear.png" : "../Dash/graphics/icon_search_active.png" }
268 }
269 ]
271 transitions: [
272 Transition {
273 to: "active"
274 SequentialAnimation {
275 ParallelAnimation {
276 NumberAnimation { targets: [searchContainer, searchField]; property: "width"; duration: 200; easing.type: Easing.InOutQuad }
277 PropertyAction { target: primaryImage; property: "source" }
278 AnchorAnimation { targets: [searchContainer, itemContainer]; duration: 200; easing.type: Easing.InOutQuad }
279 }
280 ScriptAction { script: if (searchContainer.popoverShouldOpen) { searchContainer.openPopover(); } }
281 }
282 },
283 Transition {
284 to: "inactive"
285 ScriptAction { script: if (searchContainer.popoverShouldClose) { searchContainer.closePopover(); } }
286 NumberAnimation { targets: [searchContainer, searchField] ; property: "width"; duration: 200; easing.type: Easing.InOutQuad }
287 AnchorAnimation { targets: [searchContainer, itemContainer]; duration: 200; easing.type: Easing.InOutQuad }
288 },
289 Transition {
290 to: "narrowActive"
291 SequentialAnimation {
292 ParallelAnimation {
293 NumberAnimation { targets: [searchContainer, searchField] ; property: "width"; duration: 200; easing.type: Easing.OutQuad }
294 AnchorAnimation { targets: [searchContainer, itemContainer]; duration: 200; easing.type: Easing.InOutQuad }
295 }
296 ScriptAction { script: if (searchContainer.popoverShouldOpen) { searchContainer.openPopover(); } }
297 }
298 },
299 Transition {
300 to: "narrowInactive"
301 ScriptAction { script: if (searchContainer.popoverShouldClose) { searchContainer.closePopover(); } }
302 NumberAnimation { targets: [searchContainer, searchField] ; property: "width"; duration: 200; easing.type: Easing.OutQuad }
303 AnchorAnimation { targets: [searchContainer, itemContainer]; duration: 200; easing.type: Easing.InOutQuad }
304 }
305 ]
307 Component {
308 id: popoverComponent
309 Popover {
310 id: popover
312 // FIXME: this should go into the first item below, but enable: false
313 // prevents mouse events propagation
314 AbstractButton {
315 anchors {
316 top: parent.top
317 right: parent.right
318 }
319 height: units.gu(6)
320 width: height
322 onClicked: searchContainer.closePopover()
324 Image {
325 anchors.centerIn: parent
326 width: units.gu(2)
327 height: units.gu(2)
328 source: "../Dash/graphics/icon_listview_clear.png"
329 }
330 }
332 Column {
333 anchors {
334 top: parent.top
335 left: parent.left
336 right: parent.right
337 }
339 ListItem.Standard { enabled: false; text: i18n.tr("Recent searches") }
341 Repeater {
342 id: recentSearches
343 model: searchHistory
345 delegate: ListItem.Standard {
346 showDivider: index < recentSearches.count - 1
347 text: query
348 onClicked: {
349 searchHistory.addQuery(text)
350 searchField.text = text
351 }
352 }
353 }
354 }
355 }
356 }
358 InverseMouseArea {
359 enabled: searchField.activeFocus
361 anchors {
362 top: parent.top
363 left: parent.left
364 right: parent.right
365 }
367 height: searchContainer.popover ? parent.height + searchContainer.popover.contentHeight + units.gu(2) : parent.height
369 onPressed: searchField.focus = false
370 }
371 }
372 }
373 }
375 BorderImage {
376 id: bottomBorder
377 anchors {
378 top: header.bottom
379 left: parent.left
380 right: parent.right
381 bottom: parent.bottom
382 }
384 source: "graphics/PageHeaderBaseDivider.sci"
385 }