18 import Ubuntu.Components 1.1
19 import Ubuntu.Components.Themes.Ambiance 1.1
20 import Ubuntu.Components.Popups 1.0
21 import Ubuntu.Components.ListItems 1.0
22 import
"SearchHistoryModel"
26 objectName:
"pageHeader"
27 implicitHeight: headerContainer.height + units.gu(2) + bottomContainer.height
29 property bool showBackButton:
false
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
42 property var scopeStyle: null
46 onScopeStyleChanged: refreshLogo()
48 function triggerSearch() {
49 if (searchEntryEnabled) {
50 headerContainer.showSearch =
true;
51 searchTextField.forceActiveFocus();
55 function resetSearch(keepFocus) {
57 searchHistory.addQuery(searchTextField.text);
62 searchTextField.text =
"";
63 if (headerContainer.popover != null) {
64 PopupUtils.close(headerContainer.popover);
69 searchTextField.focus =
false;
70 if (!searchTextField.text) {
71 headerContainer.showSearch =
false;
75 function openSearchHistory() {
76 if (openSearchAnimation.running) {
77 openSearchAnimation.openSearchHistory =
true;
78 }
else if (root.searchHistory.count > 0 && headerContainer.popover == null) {
79 headerContainer.popover = PopupUtils.open(popoverComponent, searchTextField,
81 "contentWidth": searchTextField.width,
82 "edgeMargins": units.gu(1)
88 function refreshLogo() {
89 if (scopeStyle ? scopeStyle.headerLogo !=
"" :
false) {
90 header.contents = imageComponent.createObject();
91 }
else if (header.contents) {
92 header.contents.destroy();
93 header.contents = null;
98 target: root.scopeStyle
99 onHeaderLogoChanged: root.refreshLogo()
103 anchors { fill: parent; margins: units.gu(1); bottomMargin: units.gu(3) + bottomContainer.height }
104 visible: headerContainer.showSearch
106 if (headerContainer.popover) {
107 PopupUtils.close(headerContainer.popover);
109 if (!searchTextField.text) {
110 headerContainer.showSearch =
false;
112 searchTextField.focus =
false;
113 mouse.accepted =
false;
119 objectName:
"headerContainer"
121 anchors { left: parent.left; top: parent.top; right: parent.right }
122 height: units.gu(6.5)
123 contentHeight: headersColumn.height
125 contentY: showSearch ? 0 : height
127 property bool showSearch:
false
128 property var popover: null
130 Behavior on contentY {
131 UbuntuNumberAnimation {
132 id: openSearchAnimation
133 property bool openSearchHistory:
false
136 if (!running && openSearchAnimation.openSearchHistory) {
137 openSearchAnimation.openSearchHistory =
false;
138 root.openSearchHistory();
146 anchors { left: parent.left; right: parent.right }
150 anchors { left: parent.left; right: parent.right }
151 height: headerContainer.height
152 contentHeight: height
155 property var styledItem: searchHeader
156 property string title
157 property var config: PageHeadConfiguration {
162 headerContainer.showSearch =
false;
166 property var contents: TextField {
168 objectName:
"searchTextField"
169 hasClearButton:
false
172 leftMargin: units.gu(1)
173 topMargin: units.gu(1)
174 bottomMargin: units.gu(1)
175 rightMargin: root.width > units.gu(60) ? root.width - units.gu(40) : units.gu(1)
178 secondaryItem: AbstractButton {
179 height: searchTextField.height
181 enabled: searchTextField.text.length > 0
184 objectName:
"clearIcon"
186 anchors.margins: units.gu(.75)
187 source:
"image://theme/clear"
188 opacity: searchTextField.text.length > 0 && !searchActivityIndicator.running
190 Behavior on opacity {
191 UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
196 id: searchActivityIndicator
197 objectName:
"searchIndicator"
199 anchors.margins: units.gu(.75)
200 running: root.searchInProgress
201 opacity: running ? 1 : 0
202 Behavior on opacity {
203 UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
208 root.resetSearch(
true);
209 root.openSearchHistory();
213 onActiveFocusChanged: {
215 root.openSearchHistory();
223 objectName:
"innerPageHeader"
224 anchors { left: parent.left; right: parent.right }
225 height: headerContainer.height
226 contentHeight: height
228 textColor: root.scopeStyle ? root.scopeStyle.foreground :
"grey"
229 property var styledItem: header
230 property string title: root.title
231 property var config: PageHeadConfiguration {
234 visible: root.showBackButton
243 visible: root.searchEntryEnabled
245 headerContainer.showSearch =
true;
246 searchTextField.forceActiveFocus();
252 property var contents: null
253 Component.onCompleted: root.refreshLogo()
259 anchors { fill: parent; topMargin: units.gu(1); bottomMargin: units.gu(1) }
262 objectName:
"titleImage"
264 source: root.scopeStyle ? root.scopeStyle.headerLogo :
""
265 fillMode: Image.PreserveAspectFit
266 horizontalAlignment: Image.AlignLeft
267 sourceSize.height: height
281 Component.onDestruction: {
282 headerContainer.popover = null;
297 showDivider: index < recentSearches.count - 1
300 searchHistory.addQuery(text);
301 searchTextField.text = text;
302 PopupUtils.close(popover);
313 top: headerContainer.bottom
316 bottom: bottomContainer.top
319 source:
"graphics/PageHeaderBaseDivider.sci"
328 bottom: parent.bottom
330 height: childrenRect.height