git.iko.soy/unity8
on a641572 help sign in
unity8/qml/Components/PageHeader.qml
330 lines 11 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 implicitHeight: headerContainer.height + units.gu(2) + bottomContainer.height
28 property bool showBackButton: false
29 property string title
31 property bool searchEntryEnabled: false
32 property ListModel searchHistory: SearchHistoryModel
33 property alias searchQuery: searchTextField.text
34 property bool searchInProgress: false
36 property alias bottomItem: bottomContainer.children
38 // TODO We should use foreground for the icons
39 // of the toolbar but unfortunately Action does not have
40 // the keyColor property as Icon does :-/
41 property var scopeStyle: null
43 signal backClicked()
45 onScopeStyleChanged: refreshLogo()
47 function triggerSearch() {
48 if (searchEntryEnabled) {
49 headerContainer.showSearch = true;
50 searchTextField.forceActiveFocus();
51 }
52 }
54 function resetSearch(keepFocus) {
55 if (searchHistory) {
56 searchHistory.addQuery(searchTextField.text);
57 }
58 if (!keepFocus) {
59 unfocus();
60 }
61 searchTextField.text = "";
62 if (headerContainer.popover != null) {
63 PopupUtils.close(headerContainer.popover);
64 }
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 refreshLogo() {
88 if (scopeStyle ? scopeStyle.headerLogo != "" : false) {
89 header.contents = imageComponent.createObject();
90 } else if (header.contents) {
91 header.contents.destroy();
92 header.contents = null;
93 }
94 }
96 Connections {
97 target: root.scopeStyle
98 onHeaderLogoChanged: root.refreshLogo()
99 }
101 InverseMouseArea {
102 anchors { fill: parent; margins: units.gu(1); bottomMargin: units.gu(3) + bottomContainer.height }
103 visible: headerContainer.showSearch
104 onPressed: {
105 if (headerContainer.popover) {
106 PopupUtils.close(headerContainer.popover);
107 }
108 if (!searchTextField.text) {
109 headerContainer.showSearch = false;
110 }
111 searchTextField.focus = false;
112 mouse.accepted = false;
113 }
114 }
116 Flickable {
117 id: headerContainer
118 objectName: "headerContainer"
119 clip: true
120 anchors { left: parent.left; top: parent.top; right: parent.right }
121 height: units.gu(6.5)
122 contentHeight: headersColumn.height
123 interactive: false
124 contentY: showSearch ? 0 : height
126 property bool showSearch: false
127 property var popover: null
129 Behavior on contentY {
130 UbuntuNumberAnimation {
131 id: openSearchAnimation
132 property bool openSearchHistory: false
134 onRunningChanged: {
135 if (!running && openSearchAnimation.openSearchHistory) {
136 openSearchAnimation.openSearchHistory = false;
137 root.openSearchHistory();
138 }
139 }
140 }
141 }
143 Column {
144 id: headersColumn
145 anchors { left: parent.left; right: parent.right }
147 PageHeadStyle {
148 id: searchHeader
149 anchors { left: parent.left; right: parent.right }
150 height: headerContainer.height
151 contentHeight: height
152 separatorSource: ""
153 // Required to keep PageHeadStyle noise down as it expects the Page's properties around.
154 property var styledItem: searchHeader
155 property string title
156 property var config: PageHeadConfiguration {
157 backAction: Action {
158 iconName: "back"
159 onTriggered: {
160 root.resetSearch();
161 headerContainer.showSearch = false;
162 }
163 }
164 }
165 property var contents: TextField {
166 id: searchTextField
167 hasClearButton: false
168 anchors {
169 fill: parent
170 leftMargin: units.gu(1)
171 topMargin: units.gu(1)
172 bottomMargin: units.gu(1)
173 rightMargin: root.width > units.gu(60) ? root.width - units.gu(40) : units.gu(1)
174 }
176 secondaryItem: AbstractButton {
177 height: searchTextField.height
178 width: height
179 enabled: searchTextField.text.length > 0
181 Image {
182 objectName: "clearIcon"
183 anchors.fill: parent
184 anchors.margins: units.gu(.75)
185 source: "image://theme/clear"
186 opacity: searchTextField.text.length > 0 && !searchActivityIndicator.running
187 visible: opacity > 0
188 Behavior on opacity {
189 UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
190 }
191 }
193 ActivityIndicator {
194 id: searchActivityIndicator
195 objectName: "searchIndicator"
196 anchors.fill: parent
197 anchors.margins: units.gu(.75)
198 running: root.searchInProgress
199 opacity: running ? 1 : 0
200 Behavior on opacity {
201 UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
202 }
203 }
205 onClicked: {
206 root.resetSearch(true);
207 root.openSearchHistory();
208 }
209 }
211 onActiveFocusChanged: {
212 if (activeFocus) {
213 root.openSearchHistory();
214 }
215 }
216 }
217 }
219 PageHeadStyle {
220 id: header
221 objectName: "pageHeader"
222 anchors { left: parent.left; right: parent.right }
223 height: headerContainer.height
224 contentHeight: height
225 separatorSource: ""
226 textColor: root.scopeStyle ? root.scopeStyle.foreground : "grey"
227 property var styledItem: header
228 property string title: root.title
229 property var config: PageHeadConfiguration {
230 backAction: Action {
231 iconName: "back"
232 visible: root.showBackButton
233 onTriggered: {
234 root.backClicked();
235 }
236 }
238 actions: [
239 Action {
240 iconName: "search"
241 visible: root.searchEntryEnabled
242 onTriggered: {
243 headerContainer.showSearch = true;
244 searchTextField.forceActiveFocus();
245 }
246 }
247 ]
248 }
250 property var contents: null
251 Component.onCompleted: root.refreshLogo()
253 Component {
254 id: imageComponent
256 Item {
257 anchors { fill: parent; topMargin: units.gu(1); bottomMargin: units.gu(1) }
258 clip: true
259 Image {
260 objectName: "titleImage"
261 anchors.fill: parent
262 source: root.scopeStyle ? root.scopeStyle.headerLogo : ""
263 fillMode: Image.PreserveAspectFit
264 horizontalAlignment: Image.AlignLeft
265 sourceSize.height: height
266 }
267 }
268 }
269 }
270 }
271 }
273 Component {
274 id: popoverComponent
275 Popover {
276 id: popover
277 autoClose: false
279 Component.onDestruction: {
280 headerContainer.popover = null;
281 }
283 Column {
284 anchors {
285 top: parent.top
286 left: parent.left
287 right: parent.right
288 }
290 Repeater {
291 id: recentSearches
292 model: searchHistory
294 delegate: Standard {
295 showDivider: index < recentSearches.count - 1
296 text: query
297 onClicked: {
298 searchHistory.addQuery(text);
299 searchTextField.text = text;
300 PopupUtils.close(popover);
301 }
302 }
303 }
304 }
305 }
306 }
308 BorderImage {
309 id: bottomBorder
310 anchors {
311 top: headerContainer.bottom
312 left: parent.left
313 right: parent.right
314 bottom: bottomContainer.top
315 }
317 source: "graphics/PageHeaderBaseDivider.sci"
318 }
320 Item {
321 id: bottomContainer
323 anchors {
324 left: parent.left
325 right: parent.right
326 bottom: parent.bottom
327 }
328 height: childrenRect.height
329 }