git.iko.soy/unity8
on f7fdc08 help sign in
unity8/qml/Components/PageHeader.qml
367 lines 13 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 alias showSignatureLine: bottomBorder.visible
37 property alias bottomItem: bottomContainer.children
38 property int paginationCount: 0
39 property int paginationIndex: -1
41 // TODO We should use foreground for the icons
42 // of the toolbar but unfortunately Action does not have
43 // the keyColor property as Icon does :-/
44 property var scopeStyle: null
46 signal backClicked()
48 onScopeStyleChanged: refreshLogo()
49 onSearchQueryChanged: {
50 // Make sure we are at the search page if the search query changes behind our feet
51 if (searchQuery) {
52 headerContainer.showSearch = true;
53 }
54 }
56 function triggerSearch() {
57 if (searchEntryEnabled) {
58 headerContainer.showSearch = true;
59 searchTextField.forceActiveFocus();
60 }
61 }
63 function closePopup() {
64 if (headerContainer.popover != null) {
65 PopupUtils.close(headerContainer.popover);
66 }
67 }
69 function resetSearch(keepFocus) {
70 if (searchHistory) {
71 searchHistory.addQuery(searchTextField.text);
72 }
73 if (!keepFocus) {
74 unfocus();
75 }
76 searchTextField.text = "";
77 closePopup();
78 }
80 function unfocus() {
81 searchTextField.focus = false;
82 if (!searchTextField.text) {
83 headerContainer.showSearch = false;
84 }
85 }
87 function openSearchHistory() {
88 if (openSearchAnimation.running) {
89 openSearchAnimation.openSearchHistory = true;
90 } else if (root.searchHistory.count > 0 && headerContainer.popover == null) {
91 headerContainer.popover = PopupUtils.open(popoverComponent, searchTextField,
92 {
93 "contentWidth": searchTextField.width,
94 "edgeMargins": units.gu(1)
95 }
96 );
97 }
98 }
100 function refreshLogo() {
101 if (scopeStyle ? scopeStyle.headerLogo != "" : false) {
102 header.contents = imageComponent.createObject();
103 } else if (header.contents) {
104 header.contents.destroy();
105 header.contents = null;
106 }
107 }
109 Connections {
110 target: root.scopeStyle
111 onHeaderLogoChanged: root.refreshLogo()
112 }
114 InverseMouseArea {
115 anchors { fill: parent; margins: units.gu(1); bottomMargin: units.gu(3) + bottomContainer.height }
116 visible: headerContainer.showSearch
117 onPressed: {
118 closePopup();
119 if (!searchTextField.text) {
120 headerContainer.showSearch = false;
121 }
122 searchTextField.focus = false;
123 mouse.accepted = false;
124 }
125 }
127 Flickable {
128 id: headerContainer
129 objectName: "headerContainer"
130 clip: contentY < height
131 anchors { left: parent.left; top: parent.top; right: parent.right }
132 height: units.gu(6.5)
133 contentHeight: headersColumn.height
134 interactive: false
135 contentY: showSearch ? 0 : height
137 property bool showSearch: false
138 property var popover: null
140 Background {
141 objectName: "headerBackground"
142 style: scopeStyle.headerBackground
143 }
145 Behavior on contentY {
146 UbuntuNumberAnimation {
147 id: openSearchAnimation
148 property bool openSearchHistory: false
150 onRunningChanged: {
151 if (!running && openSearchAnimation.openSearchHistory) {
152 openSearchAnimation.openSearchHistory = false;
153 root.openSearchHistory();
154 }
155 }
156 }
157 }
159 Column {
160 id: headersColumn
161 anchors { left: parent.left; right: parent.right }
163 PageHeadStyle {
164 id: searchHeader
165 anchors { left: parent.left; right: parent.right }
166 height: headerContainer.height
167 contentHeight: height
168 opacity: headerContainer.clip || headerContainer.showSearch ? 1 : 0 // setting visible false cause column to relayout
169 separatorSource: ""
170 // Required to keep PageHeadStyle noise down as it expects the Page's properties around.
171 property var styledItem: searchHeader
172 property string title
173 property var config: PageHeadConfiguration {
174 foregroundColor: root.scopeStyle ? root.scopeStyle.headerForeground : "grey"
175 backAction: Action {
176 iconName: "back"
177 onTriggered: {
178 root.resetSearch();
179 headerContainer.showSearch = false;
180 }
181 }
182 }
183 property var contents: TextField {
184 id: searchTextField
185 objectName: "searchTextField"
186 inputMethodHints: Qt.ImhNoPredictiveText
187 hasClearButton: false
188 anchors {
189 fill: parent
190 leftMargin: units.gu(1)
191 topMargin: units.gu(1)
192 bottomMargin: units.gu(1)
193 rightMargin: root.width > units.gu(60) ? root.width - units.gu(40) : units.gu(1)
194 }
196 secondaryItem: AbstractButton {
197 height: searchTextField.height
198 width: height
199 enabled: searchTextField.text.length > 0
201 Image {
202 objectName: "clearIcon"
203 anchors.fill: parent
204 anchors.margins: units.gu(.75)
205 source: "image://theme/clear"
206 opacity: searchTextField.text.length > 0
207 visible: opacity > 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 }
225 onTextChanged: {
226 if (text != "") {
227 closePopup();
228 }
229 }
230 }
231 }
233 PageHeadStyle {
234 id: header
235 objectName: "innerPageHeader"
236 anchors { left: parent.left; right: parent.right }
237 height: headerContainer.height
238 contentHeight: height
239 opacity: headerContainer.clip || !headerContainer.showSearch ? 1 : 0 // setting visible false cause column to relayout
240 separatorSource: ""
241 property var styledItem: header
242 property string title: root.title
243 property var config: PageHeadConfiguration {
244 foregroundColor: root.scopeStyle ? root.scopeStyle.headerForeground : "grey"
245 backAction: Action {
246 iconName: "back"
247 visible: root.showBackButton
248 onTriggered: {
249 root.backClicked();
250 }
251 }
253 actions: [
254 Action {
255 objectName: "search"
256 iconName: "search"
257 visible: root.searchEntryEnabled
258 onTriggered: {
259 headerContainer.showSearch = true;
260 searchTextField.forceActiveFocus();
261 }
262 }
263 ]
264 }
266 property var contents: null
267 Component.onCompleted: root.refreshLogo()
269 Component {
270 id: imageComponent
272 Item {
273 anchors { fill: parent; topMargin: units.gu(1); bottomMargin: units.gu(1) }
274 clip: true
275 Image {
276 objectName: "titleImage"
277 anchors.fill: parent
278 source: root.scopeStyle ? root.scopeStyle.headerLogo : ""
279 fillMode: Image.PreserveAspectFit
280 horizontalAlignment: Image.AlignLeft
281 sourceSize.height: height
282 }
283 }
284 }
285 }
286 }
287 }
289 Row {
290 spacing: units.gu(.5)
291 Repeater {
292 objectName: "paginationRepeater"
293 model: root.paginationCount
294 Image {
295 objectName: "paginationDots_" + index
296 height: units.gu(1)
297 width: height
298 source: (index == root.paginationIndex) ? "graphics/pagination_dot_on.png" : "graphics/pagination_dot_off.png"
299 }
300 }
301 anchors {
302 top: headerContainer.bottom
303 horizontalCenter: headerContainer.horizontalCenter
304 topMargin: units.gu(.5)
305 }
306 }
308 Component {
309 id: popoverComponent
310 Popover {
311 id: popover
312 autoClose: false
314 Component.onDestruction: {
315 headerContainer.popover = null;
316 }
318 Column {
319 anchors {
320 top: parent.top
321 left: parent.left
322 right: parent.right
323 }
325 Repeater {
326 id: recentSearches
327 objectName: "recentSearches"
328 model: searchHistory
330 delegate: Standard {
331 showDivider: index < recentSearches.count - 1
332 text: query
333 onClicked: {
334 searchHistory.addQuery(text);
335 searchTextField.text = text;
336 closePopup();
337 unfocus();
338 }
339 }
340 }
341 }
342 }
343 }
345 BorderImage {
346 id: bottomBorder
347 anchors {
348 top: headerContainer.bottom
349 left: parent.left
350 right: parent.right
351 bottom: bottomContainer.top
352 }
354 source: "graphics/PageHeaderBaseDivider.sci"
355 }
357 Item {
358 id: bottomContainer
360 anchors {
361 left: parent.left
362 right: parent.right
363 bottom: parent.bottom
364 }
365 height: childrenRect.height
366 }