git.iko.soy/unity8
on f77f486 help sign in
unity8/qml/Components/PageHeader.qml
338 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 alias searchHint: searchTextField.placeholderText
36 property bool searchInProgress: false
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()
49 function triggerSearch() {
50 if (searchEntryEnabled) {
51 headerContainer.showSearch = true;
52 searchTextField.forceActiveFocus();
53 }
54 }
56 function resetSearch(keepFocus) {
57 if (searchHistory) {
58 searchHistory.addQuery(searchTextField.text);
59 }
60 if (!keepFocus) {
61 unfocus();
62 }
63 searchTextField.text = "";
64 if (headerContainer.popover != null) {
65 PopupUtils.close(headerContainer.popover);
66 }
67 }
69 function unfocus() {
70 searchTextField.focus = false;
71 if (!searchTextField.text) {
72 headerContainer.showSearch = false;
73 }
74 }
76 function openSearchHistory() {
77 if (openSearchAnimation.running) {
78 openSearchAnimation.openSearchHistory = true;
79 } else if (root.searchHistory.count > 0 && headerContainer.popover == null) {
80 headerContainer.popover = PopupUtils.open(popoverComponent, searchTextField,
81 {
82 "contentWidth": searchTextField.width,
83 "edgeMargins": units.gu(1)
84 }
85 );
86 }
87 }
89 function refreshLogo() {
90 if (scopeStyle ? scopeStyle.headerLogo != "" : false) {
91 header.contents = imageComponent.createObject();
92 } else if (header.contents) {
93 header.contents.destroy();
94 header.contents = null;
95 }
96 }
98 Connections {
99 target: root.scopeStyle
100 onHeaderLogoChanged: root.refreshLogo()
101 }
103 InverseMouseArea {
104 anchors { fill: parent; margins: units.gu(1); bottomMargin: units.gu(3) + bottomContainer.height }
105 visible: headerContainer.showSearch
106 onPressed: {
107 if (headerContainer.popover) {
108 PopupUtils.close(headerContainer.popover);
109 }
110 if (!searchTextField.text) {
111 headerContainer.showSearch = false;
112 }
113 searchTextField.focus = false;
114 mouse.accepted = false;
115 }
116 }
118 Flickable {
119 id: headerContainer
120 objectName: "headerContainer"
121 clip: true
122 anchors { left: parent.left; top: parent.top; right: parent.right }
123 height: units.gu(6.5)
124 contentHeight: headersColumn.height
125 interactive: false
126 contentY: showSearch ? 0 : height
128 property bool showSearch: false
129 property var popover: null
131 Background {
132 objectName: "headerBackground"
133 style: scopeStyle.headerBackground
134 }
136 Behavior on contentY {
137 UbuntuNumberAnimation {
138 id: openSearchAnimation
139 property bool openSearchHistory: false
141 onRunningChanged: {
142 if (!running && openSearchAnimation.openSearchHistory) {
143 openSearchAnimation.openSearchHistory = false;
144 root.openSearchHistory();
145 }
146 }
147 }
148 }
150 Column {
151 id: headersColumn
152 anchors { left: parent.left; right: parent.right }
154 PageHeadStyle {
155 id: searchHeader
156 anchors { left: parent.left; right: parent.right }
157 height: headerContainer.height
158 contentHeight: height
159 separatorSource: ""
160 // Required to keep PageHeadStyle noise down as it expects the Page's properties around.
161 property var styledItem: searchHeader
162 property string title
163 property var config: PageHeadConfiguration {
164 backAction: Action {
165 iconName: "back"
166 onTriggered: {
167 root.resetSearch();
168 headerContainer.showSearch = false;
169 }
170 }
171 }
172 property var contents: TextField {
173 id: searchTextField
174 objectName: "searchTextField"
175 hasClearButton: false
176 anchors {
177 fill: parent
178 leftMargin: units.gu(1)
179 topMargin: units.gu(1)
180 bottomMargin: units.gu(1)
181 rightMargin: root.width > units.gu(60) ? root.width - units.gu(40) : units.gu(1)
182 }
184 secondaryItem: AbstractButton {
185 height: searchTextField.height
186 width: height
187 enabled: searchTextField.text.length > 0
189 Image {
190 objectName: "clearIcon"
191 anchors.fill: parent
192 anchors.margins: units.gu(.75)
193 source: "image://theme/clear"
194 opacity: searchTextField.text.length > 0 && !searchActivityIndicator.running
195 visible: opacity > 0
196 Behavior on opacity {
197 UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
198 }
199 }
201 ActivityIndicator {
202 id: searchActivityIndicator
203 objectName: "searchIndicator"
204 anchors.fill: parent
205 anchors.margins: units.gu(.75)
206 running: root.searchInProgress
207 opacity: running ? 1 : 0
208 Behavior on opacity {
209 UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
210 }
211 }
213 onClicked: {
214 root.resetSearch(true);
215 root.openSearchHistory();
216 }
217 }
219 onActiveFocusChanged: {
220 if (activeFocus) {
221 root.openSearchHistory();
222 }
223 }
224 }
225 }
227 PageHeadStyle {
228 id: header
229 objectName: "innerPageHeader"
230 anchors { left: parent.left; right: parent.right }
231 height: headerContainer.height
232 contentHeight: height
233 separatorSource: ""
234 textColor: root.scopeStyle ? root.scopeStyle.headerForeground : "grey"
235 property var styledItem: header
236 property string title: root.title
237 property var config: PageHeadConfiguration {
238 backAction: Action {
239 iconName: "back"
240 visible: root.showBackButton
241 onTriggered: {
242 root.backClicked();
243 }
244 }
246 actions: [
247 Action {
248 iconName: "search"
249 visible: root.searchEntryEnabled
250 onTriggered: {
251 headerContainer.showSearch = true;
252 searchTextField.forceActiveFocus();
253 }
254 }
255 ]
256 }
258 property var contents: null
259 Component.onCompleted: root.refreshLogo()
261 Component {
262 id: imageComponent
264 Item {
265 anchors { fill: parent; topMargin: units.gu(1); bottomMargin: units.gu(1) }
266 clip: true
267 Image {
268 objectName: "titleImage"
269 anchors.fill: parent
270 source: root.scopeStyle ? root.scopeStyle.headerLogo : ""
271 fillMode: Image.PreserveAspectFit
272 horizontalAlignment: Image.AlignLeft
273 sourceSize.height: height
274 }
275 }
276 }
277 }
278 }
279 }
281 Component {
282 id: popoverComponent
283 Popover {
284 id: popover
285 autoClose: false
287 Component.onDestruction: {
288 headerContainer.popover = null;
289 }
291 Column {
292 anchors {
293 top: parent.top
294 left: parent.left
295 right: parent.right
296 }
298 Repeater {
299 id: recentSearches
300 model: searchHistory
302 delegate: Standard {
303 showDivider: index < recentSearches.count - 1
304 text: query
305 onClicked: {
306 searchHistory.addQuery(text);
307 searchTextField.text = text;
308 PopupUtils.close(popover);
309 }
310 }
311 }
312 }
313 }
314 }
316 BorderImage {
317 id: bottomBorder
318 anchors {
319 top: headerContainer.bottom
320 left: parent.left
321 right: parent.right
322 bottom: bottomContainer.top
323 }
325 source: "graphics/PageHeaderBaseDivider.sci"
326 }
328 Item {
329 id: bottomContainer
331 anchors {
332 left: parent.left
333 right: parent.right
334 bottom: parent.bottom
335 }
336 height: childrenRect.height
337 }