git.iko.soy/unity8
on 08bf9db help sign in
unity8/qml/Components/PageHeader.qml
357 lines 12 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.2
18import Ubuntu.Components 1.1
19import Ubuntu.Components.Themes.Ambiance 1.1
20import Ubuntu.Components.Popups 1.0
21import Ubuntu.Components.ListItems 1.0
22import "SearchHistoryModel"
24Item {
25 id: root
26 objectName: "pageHeader"
27 implicitHeight: headerContainer.height + bottomContainer.height + (showSignatureLine ? units.gu(2) : 0)
29 property bool showBackButton: false
30 property string title
32 property bool searchEntryEnabled: false
33 property ListModel searchHistory: SearchHistoryModel
34 property alias searchQuery: searchTextField.text
35 property bool searchInProgress: false
36 property alias showSignatureLine: bottomBorder.visible
38 property alias bottomItem: bottomContainer.children
40 // TODO We should use foreground for the icons
41 // of the toolbar but unfortunately Action does not have
42 // the keyColor property as Icon does :-/
43 property var scopeStyle: null
45 signal backClicked()
47 onScopeStyleChanged: refreshLogo()
48 onSearchQueryChanged: {
49 // Make sure we are at the search page if the search query changes behind our feet
50 if (searchQuery) {
51 headerContainer.showSearch = true;
52 }
53 }
55 function triggerSearch() {
56 if (searchEntryEnabled) {
57 headerContainer.showSearch = true;
58 searchTextField.forceActiveFocus();
59 }
60 }
62 function closePopup() {
63 if (headerContainer.popover != null) {
64 PopupUtils.close(headerContainer.popover);
65 }
66 }
68 function resetSearch(keepFocus) {
69 if (searchHistory) {
70 searchHistory.addQuery(searchTextField.text);
71 }
72 if (!keepFocus) {
73 unfocus();
74 }
75 searchTextField.text = "";
76 closePopup();
77 }
79 function unfocus() {
80 searchTextField.focus = false;
81 if (!searchTextField.text) {
82 headerContainer.showSearch = false;
83 }
84 }
86 function openSearchHistory() {
87 if (openSearchAnimation.running) {
88 openSearchAnimation.openSearchHistory = true;
89 } else if (root.searchHistory.count > 0 && headerContainer.popover == null) {
90 headerContainer.popover = PopupUtils.open(popoverComponent, searchTextField,
91 {
92 "contentWidth": searchTextField.width,
93 "edgeMargins": units.gu(1)
94 }
95 );
96 }
97 }
99 function refreshLogo() {
100 if (scopeStyle ? scopeStyle.headerLogo != "" : false) {
101 header.contents = imageComponent.createObject();
102 } else if (header.contents) {
103 header.contents.destroy();
104 header.contents = null;
105 }
106 }
108 Connections {
109 target: root.scopeStyle
110 onHeaderLogoChanged: root.refreshLogo()
111 }
113 InverseMouseArea {
114 anchors { fill: parent; margins: units.gu(1); bottomMargin: units.gu(3) + bottomContainer.height }
115 visible: headerContainer.showSearch
116 onPressed: {
117 closePopup();
118 if (!searchTextField.text) {
119 headerContainer.showSearch = false;
120 }
121 searchTextField.focus = false;
122 mouse.accepted = false;
123 }
124 }
126 Flickable {
127 id: headerContainer
128 objectName: "headerContainer"
129 clip: openSearchAnimation.running
130 anchors { left: parent.left; top: parent.top; right: parent.right }
131 height: units.gu(6.5)
132 contentHeight: headersColumn.height
133 interactive: false
134 contentY: showSearch ? 0 : height
136 property bool showSearch: false
137 property var popover: null
139 Background {
140 objectName: "headerBackground"
141 style: scopeStyle.headerBackground
142 }
144 Behavior on contentY {
145 UbuntuNumberAnimation {
146 id: openSearchAnimation
147 property bool openSearchHistory: false
149 onRunningChanged: {
150 if (!running && openSearchAnimation.openSearchHistory) {
151 openSearchAnimation.openSearchHistory = false;
152 root.openSearchHistory();
153 }
154 }
155 }
156 }
158 Column {
159 id: headersColumn
160 anchors { left: parent.left; right: parent.right }
162 PageHeadStyle {
163 id: searchHeader
164 anchors { left: parent.left; right: parent.right }
165 height: headerContainer.height
166 contentHeight: height
167 opacity: headerContainer.clip || headerContainer.showSearch ? 1 : 0 // setting visible false cause column to relayout
168 separatorSource: ""
169 // Required to keep PageHeadStyle noise down as it expects the Page's properties around.
170 property var styledItem: searchHeader
171 property string title
172 property var config: PageHeadConfiguration {
173 backAction: Action {
174 iconName: "back"
175 onTriggered: {
176 root.resetSearch();
177 headerContainer.showSearch = false;
178 }
179 }
180 }
181 property var contents: TextField {
182 id: searchTextField
183 objectName: "searchTextField"
184 hasClearButton: false
185 anchors {
186 fill: parent
187 leftMargin: units.gu(1)
188 topMargin: units.gu(1)
189 bottomMargin: units.gu(1)
190 rightMargin: root.width > units.gu(60) ? root.width - units.gu(40) : units.gu(1)
191 }
193 secondaryItem: AbstractButton {
194 height: searchTextField.height
195 width: height
196 enabled: searchTextField.text.length > 0
198 Image {
199 objectName: "clearIcon"
200 anchors.fill: parent
201 anchors.margins: units.gu(.75)
202 source: "image://theme/clear"
203 opacity: searchTextField.text.length > 0 && !searchActivityIndicator.running
204 visible: opacity > 0
205 Behavior on opacity {
206 UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
207 }
208 }
210 ActivityIndicator {
211 id: searchActivityIndicator
212 objectName: "searchIndicator"
213 anchors.fill: parent
214 anchors.margins: units.gu(.75)
215 running: root.searchInProgress
216 opacity: running ? 1 : 0
217 Behavior on opacity {
218 UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
219 }
220 }
222 onClicked: {
223 root.resetSearch(true);
224 root.openSearchHistory();
225 }
226 }
228 onActiveFocusChanged: {
229 if (activeFocus) {
230 root.openSearchHistory();
231 }
232 }
234 onTextChanged: {
235 if (text != "") {
236 closePopup();
237 }
238 }
239 }
240 }
242 PageHeadStyle {
243 id: header
244 objectName: "innerPageHeader"
245 anchors { left: parent.left; right: parent.right }
246 height: headerContainer.height
247 contentHeight: height
248 opacity: headerContainer.clip || !headerContainer.showSearch ? 1 : 0 // setting visible false cause column to relayout
249 separatorSource: ""
250 textColor: root.scopeStyle ? root.scopeStyle.headerForeground : "grey"
251 property var styledItem: header
252 property string title: root.title
253 property var config: PageHeadConfiguration {
254 backAction: Action {
255 iconName: "back"
256 visible: root.showBackButton
257 onTriggered: {
258 root.backClicked();
259 }
260 }
262 actions: [
263 Action {
264 objectName: "search"
265 iconName: "search"
266 visible: root.searchEntryEnabled
267 onTriggered: {
268 headerContainer.showSearch = true;
269 searchTextField.forceActiveFocus();
270 }
271 }
272 ]
273 }
275 property var contents: null
276 Component.onCompleted: root.refreshLogo()
278 Component {
279 id: imageComponent
281 Item {
282 anchors { fill: parent; topMargin: units.gu(1); bottomMargin: units.gu(1) }
283 clip: true
284 Image {
285 objectName: "titleImage"
286 anchors.fill: parent
287 source: root.scopeStyle ? root.scopeStyle.headerLogo : ""
288 fillMode: Image.PreserveAspectFit
289 horizontalAlignment: Image.AlignLeft
290 sourceSize.height: height
291 }
292 }
293 }
294 }
295 }
296 }
298 Component {
299 id: popoverComponent
300 Popover {
301 id: popover
302 autoClose: false
304 Component.onDestruction: {
305 headerContainer.popover = null;
306 }
308 Column {
309 anchors {
310 top: parent.top
311 left: parent.left
312 right: parent.right
313 }
315 Repeater {
316 id: recentSearches
317 objectName: "recentSearches"
318 model: searchHistory
320 delegate: Standard {
321 showDivider: index < recentSearches.count - 1
322 text: query
323 onClicked: {
324 searchHistory.addQuery(text);
325 searchTextField.text = text;
326 closePopup();
327 unfocus();
328 }
329 }
330 }
331 }
332 }
333 }
335 BorderImage {
336 id: bottomBorder
337 anchors {
338 top: headerContainer.bottom
339 left: parent.left
340 right: parent.right
341 bottom: bottomContainer.top
342 }
344 source: "graphics/PageHeaderBaseDivider.sci"
345 }
347 Item {
348 id: bottomContainer
350 anchors {
351 left: parent.left
352 right: parent.right
353 bottom: parent.bottom
354 }
355 height: childrenRect.height
356 }