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