git.iko.soy/unity8
on abbcda4 help sign in
unity8/qml/Components/PageHeader.qml
379 lines 13 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
39 property int paginationCount: 0
40 property int paginationIndex: -1
42 // TODO We should use foreground for the icons
43 // of the toolbar but unfortunately Action does not have
44 // the keyColor property as Icon does :-/
45 property var scopeStyle: null
47 signal backClicked()
49 onScopeStyleChanged: refreshLogo()
50 onSearchQueryChanged: {
51 // Make sure we are at the search page if the search query changes behind our feet
52 if (searchQuery) {
53 headerContainer.showSearch = true;
54 }
55 }
57 function triggerSearch() {
58 if (searchEntryEnabled) {
59 headerContainer.showSearch = true;
60 searchTextField.forceActiveFocus();
61 }
62 }
64 function closePopup() {
65 if (headerContainer.popover != null) {
66 PopupUtils.close(headerContainer.popover);
67 }
68 }
70 function resetSearch(keepFocus) {
71 if (searchHistory) {
72 searchHistory.addQuery(searchTextField.text);
73 }
74 if (!keepFocus) {
75 unfocus();
76 }
77 searchTextField.text = "";
78 closePopup();
79 }
81 function unfocus() {
82 searchTextField.focus = false;
83 if (!searchTextField.text) {
84 headerContainer.showSearch = false;
85 }
86 }
88 function openSearchHistory() {
89 if (openSearchAnimation.running) {
90 openSearchAnimation.openSearchHistory = true;
91 } else if (root.searchHistory.count > 0 && headerContainer.popover == null) {
92 headerContainer.popover = PopupUtils.open(popoverComponent, searchTextField,
93 {
94 "contentWidth": searchTextField.width,
95 "edgeMargins": units.gu(1)
96 }
97 );
98 }
99 }
101 function refreshLogo() {
102 if (scopeStyle ? scopeStyle.headerLogo != "" : false) {
103 header.contents = imageComponent.createObject();
104 } else if (header.contents) {
105 header.contents.destroy();
106 header.contents = null;
107 }
108 }
110 Connections {
111 target: root.scopeStyle
112 onHeaderLogoChanged: root.refreshLogo()
113 }
115 InverseMouseArea {
116 anchors { fill: parent; margins: units.gu(1); bottomMargin: units.gu(3) + bottomContainer.height }
117 visible: headerContainer.showSearch
118 onPressed: {
119 closePopup();
120 if (!searchTextField.text) {
121 headerContainer.showSearch = false;
122 }
123 searchTextField.focus = false;
124 mouse.accepted = false;
125 }
126 }
128 Flickable {
129 id: headerContainer
130 objectName: "headerContainer"
131 clip: contentY < height
132 anchors { left: parent.left; top: parent.top; right: parent.right }
133 height: units.gu(6.5)
134 contentHeight: headersColumn.height
135 interactive: false
136 contentY: showSearch ? 0 : height
138 property bool showSearch: false
139 property var popover: null
141 Background {
142 objectName: "headerBackground"
143 style: scopeStyle.headerBackground
144 }
146 Behavior on contentY {
147 UbuntuNumberAnimation {
148 id: openSearchAnimation
149 property bool openSearchHistory: false
151 onRunningChanged: {
152 if (!running && openSearchAnimation.openSearchHistory) {
153 openSearchAnimation.openSearchHistory = false;
154 root.openSearchHistory();
155 }
156 }
157 }
158 }
160 Column {
161 id: headersColumn
162 anchors { left: parent.left; right: parent.right }
164 PageHeadStyle {
165 id: searchHeader
166 anchors { left: parent.left; right: parent.right }
167 height: headerContainer.height
168 contentHeight: height
169 opacity: headerContainer.clip || headerContainer.showSearch ? 1 : 0 // setting visible false cause column to relayout
170 separatorSource: ""
171 // Required to keep PageHeadStyle noise down as it expects the Page's properties around.
172 property var styledItem: searchHeader
173 property string title
174 property var config: PageHeadConfiguration {
175 backAction: Action {
176 iconName: "back"
177 onTriggered: {
178 root.resetSearch();
179 headerContainer.showSearch = false;
180 }
181 }
182 }
183 property var contents: TextField {
184 id: searchTextField
185 objectName: "searchTextField"
186 inputMethodHints: Qt.ImhNoPredictiveText
187 hasClearButton: false
188 anchors {
189 fill: parent
190 leftMargin: units.gu(1)
191 topMargin: units.gu(1)
192 bottomMargin: units.gu(1)
193 rightMargin: root.width > units.gu(60) ? root.width - units.gu(40) : units.gu(1)
194 }
196 secondaryItem: AbstractButton {
197 height: searchTextField.height
198 width: height
199 enabled: searchTextField.text.length > 0
201 Image {
202 objectName: "clearIcon"
203 anchors.fill: parent
204 anchors.margins: units.gu(.75)
205 source: "image://theme/clear"
206 opacity: searchTextField.text.length > 0 && !searchActivityIndicator.running
207 visible: opacity > 0
208 Behavior on opacity {
209 UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
210 }
211 }
213 ActivityIndicator {
214 id: searchActivityIndicator
215 objectName: "searchIndicator"
216 anchors.fill: parent
217 anchors.margins: units.gu(.75)
218 running: root.searchInProgress
219 opacity: running ? 1 : 0
220 Behavior on opacity {
221 UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
222 }
223 }
225 onClicked: {
226 root.resetSearch(true);
227 root.openSearchHistory();
228 }
229 }
231 onActiveFocusChanged: {
232 if (activeFocus) {
233 root.openSearchHistory();
234 }
235 }
237 onTextChanged: {
238 if (text != "") {
239 closePopup();
240 }
241 }
242 }
243 }
245 PageHeadStyle {
246 id: header
247 objectName: "innerPageHeader"
248 anchors { left: parent.left; right: parent.right }
249 height: headerContainer.height
250 contentHeight: height
251 opacity: headerContainer.clip || !headerContainer.showSearch ? 1 : 0 // setting visible false cause column to relayout
252 separatorSource: ""
253 textColor: root.scopeStyle ? root.scopeStyle.headerForeground : "grey"
254 property var styledItem: header
255 property string title: root.title
256 property var config: PageHeadConfiguration {
257 backAction: Action {
258 iconName: "back"
259 visible: root.showBackButton
260 onTriggered: {
261 root.backClicked();
262 }
263 }
265 actions: [
266 Action {
267 objectName: "search"
268 iconName: "search"
269 visible: root.searchEntryEnabled
270 onTriggered: {
271 headerContainer.showSearch = true;
272 searchTextField.forceActiveFocus();
273 }
274 }
275 ]
276 }
278 property var contents: null
279 Component.onCompleted: root.refreshLogo()
281 Component {
282 id: imageComponent
284 Item {
285 anchors { fill: parent; topMargin: units.gu(1); bottomMargin: units.gu(1) }
286 clip: true
287 Image {
288 objectName: "titleImage"
289 anchors.fill: parent
290 source: root.scopeStyle ? root.scopeStyle.headerLogo : ""
291 fillMode: Image.PreserveAspectFit
292 horizontalAlignment: Image.AlignLeft
293 sourceSize.height: height
294 }
295 }
296 }
297 }
298 }
299 }
301 Row {
302 spacing: units.gu(.5)
303 Repeater {
304 objectName: "paginationRepeater"
305 model: root.paginationCount
306 Image {
307 objectName: "paginationDots_" + index
308 height: units.gu(1)
309 width: height
310 source: (index == root.paginationIndex) ? "graphics/pagination_dot_on.png" : "graphics/pagination_dot_off.png"
311 }
312 }
313 anchors {
314 top: headerContainer.bottom
315 horizontalCenter: headerContainer.horizontalCenter
316 topMargin: units.gu(.5)
317 }
318 }
320 Component {
321 id: popoverComponent
322 Popover {
323 id: popover
324 autoClose: false
326 Component.onDestruction: {
327 headerContainer.popover = null;
328 }
330 Column {
331 anchors {
332 top: parent.top
333 left: parent.left
334 right: parent.right
335 }
337 Repeater {
338 id: recentSearches
339 objectName: "recentSearches"
340 model: searchHistory
342 delegate: Standard {
343 showDivider: index < recentSearches.count - 1
344 text: query
345 onClicked: {
346 searchHistory.addQuery(text);
347 searchTextField.text = text;
348 closePopup();
349 unfocus();
350 }
351 }
352 }
353 }
354 }
355 }
357 BorderImage {
358 id: bottomBorder
359 anchors {
360 top: headerContainer.bottom
361 left: parent.left
362 right: parent.right
363 bottom: bottomContainer.top
364 }
366 source: "graphics/PageHeaderBaseDivider.sci"
367 }
369 Item {
370 id: bottomContainer
372 anchors {
373 left: parent.left
374 right: parent.right
375 bottom: parent.bottom
376 }
377 height: childrenRect.height
378 }