git.iko.soy/unity8
on d5f1dff help sign in
unity8/qml/Components/PageHeader.qml
310 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
30 property string imageSource
32 property bool searchEntryEnabled: false
33 property ListModel searchHistory: SearchHistoryModel
34 property alias searchQuery: searchTextField.text
35 property bool searchInProgress: false
37 property alias bottomItem: bottomContainer.children
39 signal backClicked()
41 function triggerSearch() {
42 if (searchEntryEnabled) searchTextField.forceActiveFocus();
43 }
45 function resetSearch(keepFocus) {
46 if (searchHistory) {
47 searchHistory.addQuery(searchTextField.text);
48 }
49 if (!keepFocus) {
50 unfocus();
51 }
52 searchTextField.text = "";
53 if (headerContainer.popover != null) {
54 PopupUtils.close(headerContainer.popover);
55 }
56 }
58 function unfocus() {
59 searchTextField.focus = false;
60 }
62 function openSearchHistory() {
63 if (openSearchAnimation.running) {
64 openSearchAnimation.openSearchHistory = true;
65 } else if (root.searchHistory.count > 0 && headerContainer.popover == null) {
66 headerContainer.popover = PopupUtils.open(popoverComponent, searchTextField,
67 {
68 "contentWidth": searchTextField.width,
69 "edgeMargins": units.gu(1)
70 }
71 );
72 }
73 }
75 onImageSourceChanged: {
76 if (imageSource) {
77 header.contents = imageComponent.createObject();
78 } else {
79 header.contents.destroy();
80 header.contents = null;
81 }
82 }
84 InverseMouseArea {
85 anchors.fill: parent
86 visible: headerContainer.popover !== null
87 onPressed: {
88 PopupUtils.close(headerContainer.popover);
89 }
90 }
92 Flickable {
93 id: headerContainer
94 objectName: "headerContainer"
95 clip: true
96 anchors { left: parent.left; top: parent.top; right: parent.right }
97 height: units.gu(6.5)
98 contentHeight: headersColumn.height
99 interactive: false
100 contentY: showSearch ? 0 : height
102 property bool showSearch: false
103 property var popover: null
105 Behavior on contentY {
106 UbuntuNumberAnimation {
107 id: openSearchAnimation
108 property bool openSearchHistory: false
110 onRunningChanged: {
111 if (!running && openSearchAnimation.openSearchHistory) {
112 openSearchAnimation.openSearchHistory = false;
113 root.openSearchHistory();
114 }
115 }
116 }
117 }
119 Column {
120 id: headersColumn
121 anchors { left: parent.left; right: parent.right }
123 PageHeadStyle {
124 id: searchHeader
125 anchors { left: parent.left; right: parent.right }
126 height: headerContainer.height
127 contentHeight: height
128 separatorSource: ""
129 // Required to keep PageHeadStyle noise down as it expects the Page's properties around.
130 property var styledItem: searchHeader
131 property string title
132 property var config: PageHeadConfiguration {
133 backAction: Action {
134 iconName: "back"
135 onTriggered: {
136 root.resetSearch();
137 headerContainer.showSearch = false;
138 }
139 }
140 }
141 property var contents: TextField {
142 id: searchTextField
143 hasClearButton: false
144 anchors {
145 fill: parent
146 leftMargin: units.gu(1)
147 topMargin: units.gu(1)
148 bottomMargin: units.gu(1)
149 rightMargin: root.width > units.gu(60) ? root.width - units.gu(40) : units.gu(1)
150 }
152 secondaryItem: AbstractButton {
153 height: searchTextField.height
154 width: height
156 Image {
157 objectName: "clearIcon"
158 anchors.fill: parent
159 anchors.margins: units.gu(.75)
160 source: "image://theme/clear"
161 opacity: searchTextField.text.length > 0 && !searchActivityIndicator.running
162 visible: opacity > 0
163 Behavior on opacity {
164 UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
165 }
166 }
168 ActivityIndicator {
169 id: searchActivityIndicator
170 objectName: "searchIndicator"
171 anchors.fill: parent
172 anchors.margins: units.gu(.75)
173 running: root.searchInProgress
174 opacity: running ? 1 : 0
175 Behavior on opacity {
176 UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
177 }
178 }
180 onClicked: {
181 root.resetSearch(true);
182 root.openSearchHistory();
183 }
184 }
186 onActiveFocusChanged: {
187 if (activeFocus) {
188 root.openSearchHistory();
189 }
190 }
191 }
192 }
194 PageHeadStyle {
195 id: header
196 anchors { left: parent.left; right: parent.right }
197 height: headerContainer.height
198 contentHeight: height
199 separatorSource: ""
200 // FIXME: Use the theme's color once we're split from the shell
201 textColor: "grey"
202 property var styledItem: header
203 property string title: root.title
204 property var config: PageHeadConfiguration {
205 backAction: Action {
206 iconName: "back"
207 visible: root.showBackButton
208 onTriggered: {
209 root.backClicked();
210 }
211 }
213 actions: [
214 Action {
215 iconName: "search"
216 visible: root.searchEntryEnabled
217 onTriggered: {
218 headerContainer.showSearch = true;
219 searchTextField.forceActiveFocus();
220 }
221 }
222 ]
223 }
225 property var contents: null
226 Component.onCompleted: {
227 if (root.imageSource) {
228 header.contents = imageComponent.createObject();
229 }
230 }
231 Component {
232 id: imageComponent
234 Item {
235 anchors { fill: parent; topMargin: units.gu(1); bottomMargin: units.gu(1) }
236 clip: true
237 Image {
238 objectName: "titleImage"
239 anchors.fill: parent
240 source: root.imageSource
241 fillMode: Image.PreserveAspectFit
242 horizontalAlignment: Image.AlignLeft
243 sourceSize.height: height
244 }
245 }
246 }
247 }
248 }
249 }
251 Component {
252 id: popoverComponent
253 Popover {
254 id: popover
255 autoClose: false
257 Component.onDestruction: {
258 headerContainer.popover = null;
259 }
261 Column {
262 anchors {
263 top: parent.top
264 left: parent.left
265 right: parent.right
266 }
268 Standard { enabled: false; text: i18n.tr("Recent searches") }
270 Repeater {
271 id: recentSearches
272 model: searchHistory
274 delegate: Standard {
275 showDivider: index < recentSearches.count - 1
276 text: query
277 onClicked: {
278 searchHistory.addQuery(text);
279 searchTextField.text = text;
280 PopupUtils.close(popover);
281 }
282 }
283 }
284 }
285 }
286 }
288 BorderImage {
289 id: bottomBorder
290 anchors {
291 top: headerContainer.bottom
292 left: parent.left
293 right: parent.right
294 bottom: bottomContainer.top
295 }
297 source: "graphics/PageHeaderBaseDivider.sci"
298 }
300 Item {
301 id: bottomContainer
303 anchors {
304 left: parent.left
305 right: parent.right
306 bottom: parent.bottom
307 }
308 height: childrenRect.height
309 }