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