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