git.iko.soy/unity8
on 985e77d help sign in
unity8/qml/Components/PageHeader.qml
356 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 + units.gu(2) + bottomContainer.height
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
37 property alias bottomItem: bottomContainer.children
39 // TODO We should use foreground for the icons
40 // of the toolbar but unfortunately Action does not have
41 // the keyColor property as Icon does :-/
42 property var scopeStyle: null
44 signal backClicked()
46 onScopeStyleChanged: refreshLogo()
47 onSearchQueryChanged: {
48 // Make sure we are at the search page if the search query changes behind our feet
49 if (searchQuery) {
50 headerContainer.showSearch = true;
51 }
52 }
54 function triggerSearch() {
55 if (searchEntryEnabled) {
56 headerContainer.showSearch = true;
57 searchTextField.forceActiveFocus();
58 }
59 }
61 function closePopup() {
62 if (headerContainer.popover != null) {
63 PopupUtils.close(headerContainer.popover);
64 }
65 }
67 function resetSearch(keepFocus) {
68 if (searchHistory) {
69 searchHistory.addQuery(searchTextField.text);
70 }
71 if (!keepFocus) {
72 unfocus();
73 }
74 searchTextField.text = "";
75 closePopup();
76 }
78 function unfocus() {
79 searchTextField.focus = false;
80 if (!searchTextField.text) {
81 headerContainer.showSearch = false;
82 }
83 }
85 function openSearchHistory() {
86 if (openSearchAnimation.running) {
87 openSearchAnimation.openSearchHistory = true;
88 } else if (root.searchHistory.count > 0 && headerContainer.popover == null) {
89 headerContainer.popover = PopupUtils.open(popoverComponent, searchTextField,
90 {
91 "contentWidth": searchTextField.width,
92 "edgeMargins": units.gu(1)
93 }
94 );
95 }
96 }
98 function refreshLogo() {
99 if (scopeStyle ? scopeStyle.headerLogo != "" : false) {
100 header.contents = imageComponent.createObject();
101 } else if (header.contents) {
102 header.contents.destroy();
103 header.contents = null;
104 }
105 }
107 Connections {
108 target: root.scopeStyle
109 onHeaderLogoChanged: root.refreshLogo()
110 }
112 InverseMouseArea {
113 anchors { fill: parent; margins: units.gu(1); bottomMargin: units.gu(3) + bottomContainer.height }
114 visible: headerContainer.showSearch
115 onPressed: {
116 closePopup();
117 if (!searchTextField.text) {
118 headerContainer.showSearch = false;
119 }
120 searchTextField.focus = false;
121 mouse.accepted = false;
122 }
123 }
125 Flickable {
126 id: headerContainer
127 objectName: "headerContainer"
128 clip: openSearchAnimation.running
129 anchors { left: parent.left; top: parent.top; right: parent.right }
130 height: units.gu(6.5)
131 contentHeight: headersColumn.height
132 interactive: false
133 contentY: showSearch ? 0 : height
135 property bool showSearch: false
136 property var popover: null
138 Background {
139 objectName: "headerBackground"
140 style: scopeStyle.headerBackground
141 }
143 Behavior on contentY {
144 UbuntuNumberAnimation {
145 id: openSearchAnimation
146 property bool openSearchHistory: false
148 onRunningChanged: {
149 if (!running && openSearchAnimation.openSearchHistory) {
150 openSearchAnimation.openSearchHistory = false;
151 root.openSearchHistory();
152 }
153 }
154 }
155 }
157 Column {
158 id: headersColumn
159 anchors { left: parent.left; right: parent.right }
161 PageHeadStyle {
162 id: searchHeader
163 anchors { left: parent.left; right: parent.right }
164 height: headerContainer.height
165 contentHeight: height
166 opacity: headerContainer.clip || headerContainer.showSearch ? 1 : 0 // setting visible false cause column to relayout
167 separatorSource: ""
168 // Required to keep PageHeadStyle noise down as it expects the Page's properties around.
169 property var styledItem: searchHeader
170 property string title
171 property var config: PageHeadConfiguration {
172 backAction: Action {
173 iconName: "back"
174 onTriggered: {
175 root.resetSearch();
176 headerContainer.showSearch = false;
177 }
178 }
179 }
180 property var contents: TextField {
181 id: searchTextField
182 objectName: "searchTextField"
183 inputMethodHints: Qt.ImhNoPredictiveText
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 iconName: "search"
265 visible: root.searchEntryEnabled
266 onTriggered: {
267 headerContainer.showSearch = true;
268 searchTextField.forceActiveFocus();
269 }
270 }
271 ]
272 }
274 property var contents: null
275 Component.onCompleted: root.refreshLogo()
277 Component {
278 id: imageComponent
280 Item {
281 anchors { fill: parent; topMargin: units.gu(1); bottomMargin: units.gu(1) }
282 clip: true
283 Image {
284 objectName: "titleImage"
285 anchors.fill: parent
286 source: root.scopeStyle ? root.scopeStyle.headerLogo : ""
287 fillMode: Image.PreserveAspectFit
288 horizontalAlignment: Image.AlignLeft
289 sourceSize.height: height
290 }
291 }
292 }
293 }
294 }
295 }
297 Component {
298 id: popoverComponent
299 Popover {
300 id: popover
301 autoClose: false
303 Component.onDestruction: {
304 headerContainer.popover = null;
305 }
307 Column {
308 anchors {
309 top: parent.top
310 left: parent.left
311 right: parent.right
312 }
314 Repeater {
315 id: recentSearches
316 objectName: "recentSearches"
317 model: searchHistory
319 delegate: Standard {
320 showDivider: index < recentSearches.count - 1
321 text: query
322 onClicked: {
323 searchHistory.addQuery(text);
324 searchTextField.text = text;
325 closePopup();
326 unfocus();
327 }
328 }
329 }
330 }
331 }
332 }
334 BorderImage {
335 id: bottomBorder
336 anchors {
337 top: headerContainer.bottom
338 left: parent.left
339 right: parent.right
340 bottom: bottomContainer.top
341 }
343 source: "graphics/PageHeaderBaseDivider.sci"
344 }
346 Item {
347 id: bottomContainer
349 anchors {
350 left: parent.left
351 right: parent.right
352 bottom: parent.bottom
353 }
354 height: childrenRect.height
355 }