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