git.iko.soy/unity8
on 5bcdb5d help sign in
unity8/qml/Components/PageHeader.qml
341 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 Background {
134 objectName: "headerBackground"
135 style: scopeStyle.headerBackground
136 }
138 Behavior on contentY {
139 UbuntuNumberAnimation {
140 id: openSearchAnimation
141 property bool openSearchHistory: false
143 onRunningChanged: {
144 if (!running && openSearchAnimation.openSearchHistory) {
145 openSearchAnimation.openSearchHistory = false;
146 root.openSearchHistory();
147 }
148 }
149 }
150 }
152 Column {
153 id: headersColumn
154 anchors { left: parent.left; right: parent.right }
156 PageHeadStyle {
157 id: searchHeader
158 anchors { left: parent.left; right: parent.right }
159 height: headerContainer.height
160 contentHeight: height
161 separatorSource: ""
162 // Required to keep PageHeadStyle noise down as it expects the Page's properties around.
163 property var styledItem: searchHeader
164 property string title
165 property var config: PageHeadConfiguration {
166 backAction: Action {
167 iconName: "back"
168 onTriggered: {
169 root.resetSearch();
170 headerContainer.showSearch = false;
171 }
172 }
173 }
174 property var contents: TextField {
175 id: searchTextField
176 objectName: "searchTextField"
177 hasClearButton: false
178 anchors {
179 fill: parent
180 leftMargin: units.gu(1)
181 topMargin: units.gu(1)
182 bottomMargin: units.gu(1)
183 rightMargin: root.width > units.gu(60) ? root.width - units.gu(40) : units.gu(1)
184 }
186 secondaryItem: AbstractButton {
187 height: searchTextField.height
188 width: height
189 enabled: searchTextField.text.length > 0
191 Image {
192 objectName: "clearIcon"
193 anchors.fill: parent
194 anchors.margins: units.gu(.75)
195 source: "image://theme/clear"
196 opacity: searchTextField.text.length > 0 && !searchActivityIndicator.running
197 visible: opacity > 0
198 Behavior on opacity {
199 UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
200 }
201 }
203 ActivityIndicator {
204 id: searchActivityIndicator
205 objectName: "searchIndicator"
206 anchors.fill: parent
207 anchors.margins: units.gu(.75)
208 running: root.searchInProgress
209 opacity: running ? 1 : 0
210 Behavior on opacity {
211 UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
212 }
213 }
215 onClicked: {
216 root.resetSearch(true);
217 root.openSearchHistory();
218 }
219 }
221 onActiveFocusChanged: {
222 if (activeFocus) {
223 root.openSearchHistory();
224 }
225 }
226 }
227 }
229 PageHeadStyle {
230 id: header
231 objectName: "innerPageHeader"
232 anchors { left: parent.left; right: parent.right }
233 height: headerContainer.height
234 contentHeight: height
235 separatorSource: ""
236 textColor: root.scopeStyle ? root.scopeStyle.headerForeground : "grey"
237 property var styledItem: header
238 property string title: root.title
239 property var config: PageHeadConfiguration {
240 backAction: Action {
241 iconName: "back"
242 visible: root.showBackButton
243 onTriggered: {
244 root.backClicked();
245 }
246 }
248 actions: [
249 Action {
250 objectName: "search"
251 iconName: "search"
252 visible: root.searchEntryEnabled
253 onTriggered: {
254 headerContainer.showSearch = true;
255 searchTextField.forceActiveFocus();
256 }
257 }
258 ]
259 }
261 property var contents: null
262 Component.onCompleted: root.refreshLogo()
264 Component {
265 id: imageComponent
267 Item {
268 anchors { fill: parent; topMargin: units.gu(1); bottomMargin: units.gu(1) }
269 clip: true
270 Image {
271 objectName: "titleImage"
272 anchors.fill: parent
273 source: root.scopeStyle ? root.scopeStyle.headerLogo : ""
274 fillMode: Image.PreserveAspectFit
275 horizontalAlignment: Image.AlignLeft
276 sourceSize.height: height
277 }
278 }
279 }
280 }
281 }
282 }
284 Component {
285 id: popoverComponent
286 Popover {
287 id: popover
288 autoClose: false
290 Component.onDestruction: {
291 headerContainer.popover = null;
292 }
294 Column {
295 anchors {
296 top: parent.top
297 left: parent.left
298 right: parent.right
299 }
301 Repeater {
302 id: recentSearches
303 model: searchHistory
305 delegate: Standard {
306 showDivider: index < recentSearches.count - 1
307 text: query
308 onClicked: {
309 searchHistory.addQuery(text);
310 searchTextField.text = text;
311 PopupUtils.close(popover);
312 }
313 }
314 }
315 }
316 }
317 }
319 BorderImage {
320 id: bottomBorder
321 anchors {
322 top: headerContainer.bottom
323 left: parent.left
324 right: parent.right
325 bottom: bottomContainer.top
326 }
328 source: "graphics/PageHeaderBaseDivider.sci"
329 }
331 Item {
332 id: bottomContainer
334 anchors {
335 left: parent.left
336 right: parent.right
337 bottom: parent.bottom
338 }
339 height: childrenRect.height
340 }