git.iko.soy/unity8
on 97ca86b help sign in
unity8/qml/Dash/GenericScopeView.qml
669 lines 28 kB history raw
1/*
2 * Copyright (C) 2013-2014 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.0
18import Ubuntu.Components 1.1
19import Utils 0.1
20import Unity 0.2
21import Dash 0.1
22import "../Components"
23import "../Components/ListItems" as ListItems
25FocusScope {
26 id: scopeView
28 readonly property bool navigationShown: pageHeaderLoader.item ? pageHeaderLoader.item.bottomItem[0].openList : false
29 property bool forceNonInteractive: false
30 property var scope: null
31 property SortFilterProxyModel categories: categoryFilter
32 property bool isCurrent: false
33 property alias moving: categoryView.moving
34 property bool hasBackAction: false
35 property bool enableHeightBehaviorOnNextCreation: false
36 property var categoryView: categoryView
37 property bool showPageHeader: true
38 readonly property alias subPageShown: subPageLoader.subPageShown
39 property int paginationCount: 0
40 property int paginationIndex: 0
41 property alias pageHeaderTotallyVisible: categoryView.pageHeaderTotallyVisible
42 property var holdingList: null
44 property var scopeStyle: ScopeStyle {
45 style: scope ? scope.customizations : {}
46 }
48 readonly property bool processing: scope ? scope.searchInProgress || subPageLoader.processing : false
50 signal backClicked()
52 onScopeChanged: {
53 floatingSeeLess.companionBase = null;
54 }
56 function positionAtBeginning() {
57 categoryView.positionAtBeginning()
58 }
60 function showHeader() {
61 categoryView.showHeader()
62 }
64 function closePreview() {
65 subPageLoader.closeSubPage()
66 }
68 function itemClicked(index, result, item, itemModel, resultsModel, limitedCategoryItemCount) {
69 if (itemModel.uri.indexOf("scope://") === 0 || scope.id === "clickscope") {
70 // TODO Technically it is possible that calling activate() will make the scope emit
71 // previewRequested so that we show a preview but there's no scope that does that yet
72 // so it's not implemented
73 scope.activate(result)
74 } else {
75 if (scope.preview(result)) {
76 openPreview(index, resultsModel, limitedCategoryItemCount);
77 }
78 }
79 }
81 function itemPressedAndHeld(index, result, itemModel, resultsModel, limitedCategoryItemCount) {
82 if (itemModel.uri.indexOf("scope://") !== 0) {
83 if (scope.preview(result)) {
84 openPreview(index, resultsModel, limitedCategoryItemCount);
85 }
86 }
87 }
89 function openPreview(index, resultsModel, limitedCategoryItemCount) {
90 if (limitedCategoryItemCount > 0) {
91 previewLimitModel.model = resultsModel;
92 previewLimitModel.limit = limitedCategoryItemCount;
93 subPageLoader.model = previewLimitModel;
94 } else {
95 subPageLoader.model = resultsModel;
96 }
97 subPageLoader.initialIndex = -1;
98 subPageLoader.initialIndex = index;
99 subPageLoader.openSubPage("preview");
100 }
102 Binding {
103 target: scope
104 property: "isActive"
105 value: isCurrent && !subPageLoader.open
106 }
108 SortFilterProxyModel {
109 id: categoryFilter
110 model: scope ? scope.categories : null
111 dynamicSortFilter: true
112 filterRole: Categories.RoleCount
113 filterRegExp: /^0$/
114 invertMatch: true
115 }
117 onIsCurrentChanged: {
118 if (pageHeaderLoader.item && showPageHeader) {
119 pageHeaderLoader.item.resetSearch();
120 }
121 subPageLoader.closeSubPage();
122 }
124 Binding {
125 target: scopeView.scope
126 property: "searchQuery"
127 value: pageHeaderLoader.item ? pageHeaderLoader.item.searchQuery : ""
128 when: isCurrent && showPageHeader
129 }
131 Binding {
132 target: pageHeaderLoader.item
133 property: "searchQuery"
134 value: scopeView.scope ? scopeView.scope.searchQuery : ""
135 when: isCurrent && showPageHeader
136 }
138 Connections {
139 target: scopeView.scope
140 onShowDash: subPageLoader.closeSubPage()
141 onHideDash: subPageLoader.closeSubPage()
142 }
144 Rectangle {
145 anchors.fill: parent
146 color: scopeView.scopeStyle ? scopeView.scopeStyle.background : "transparent"
147 visible: color != "transparent"
148 }
150 ScopeListView {
151 id: categoryView
152 objectName: "categoryListView"
153 interactive: !forceNonInteractive
155 x: subPageLoader.open ? -width : 0
156 visible: x != -width
157 Behavior on x { UbuntuNumberAnimation { } }
158 width: parent.width
159 height: floatingSeeLess.visible ? parent.height - floatingSeeLess.height + floatingSeeLess.yOffset
160 : parent.height
161 clip: height != parent.height
163 model: scopeView.categories
164 forceNoClip: subPageLoader.open
165 pixelAligned: true
167 property string expandedCategoryId: ""
168 property int runMaximizeAfterSizeChanges: 0
170 readonly property bool pageHeaderTotallyVisible: scopeView.showPageHeader &&
171 ((headerItemShownHeight == 0 && categoryView.contentY <= categoryView.originY) || (headerItemShownHeight == pageHeaderLoader.item.height))
173 onExpandedCategoryIdChanged: {
174 var firstCreated = firstCreatedIndex();
175 var shrinkingAny = false;
176 var shrinkHeightDifference = 0;
177 for (var i = 0; i < createdItemCount(); ++i) {
178 var baseItem = item(firstCreated + i);
179 if (baseItem.expandable) {
180 var shouldExpand = baseItem.category === expandedCategoryId;
181 if (shouldExpand != baseItem.expanded) {
182 var animate = false;
183 if (!subPageLoader.open) {
184 var animateShrinking = !shouldExpand && baseItem.y + baseItem.item.collapsedHeight + baseItem.seeAllButton.height < categoryView.height;
185 var animateGrowing = shouldExpand && baseItem.y + baseItem.height < categoryView.height;
186 animate = shrinkingAny || animateShrinking || animateGrowing;
187 }
189 if (!shouldExpand) {
190 shrinkingAny = true;
191 shrinkHeightDifference = baseItem.item.expandedHeight - baseItem.item.collapsedHeight;
192 }
194 if (shouldExpand && !subPageLoader.open) {
195 if (!shrinkingAny) {
196 categoryView.maximizeVisibleArea(firstCreated + i, baseItem.item.expandedHeight + baseItem.seeAllButton.height);
197 } else {
198 // If the space that shrinking is smaller than the one we need to grow we'll call maximizeVisibleArea
199 // after the shrink/grow animation ends
200 var growHeightDifference = baseItem.item.expandedHeight - baseItem.item.collapsedHeight;
201 if (growHeightDifference > shrinkHeightDifference) {
202 runMaximizeAfterSizeChanges = 2;
203 } else {
204 runMaximizeAfterSizeChanges = 0;
205 }
206 }
207 }
209 baseItem.expand(shouldExpand, animate);
210 }
211 }
212 }
213 }
215 delegate: DashCategoryBase {
216 id: baseItem
217 objectName: "dashCategory" + category
219 property Item seeAllButton: seeAll
221 readonly property bool expandable: {
222 if (categoryView.model.count === 1) return false;
223 if (cardTool.template && cardTool.template["collapsed-rows"] === 0) return false;
224 if (item && item.expandedHeight > item.collapsedHeight) return true;
225 return false;
226 }
227 property bool expanded: false
228 readonly property string category: categoryId
229 readonly property string headerLink: model.headerLink
230 readonly property var item: rendererLoader.item
232 function expand(expand, animate) {
233 heightBehaviour.enabled = animate;
234 expanded = expand;
235 }
237 CardTool {
238 id: cardTool
239 objectName: "cardTool"
240 count: results ? results.count : 0
241 template: model.renderer
242 components: model.components
243 viewWidth: parent.width
244 }
246 onExpandableChanged: {
247 // This can happen with the VJ that doesn't know how height it will be on creation
248 // so doesn't set expandable until a bit too late for onLoaded
249 if (expandable) {
250 var shouldExpand = baseItem.category === categoryView.expandedCategoryId;
251 baseItem.expand(shouldExpand, false /*animate*/);
252 }
253 }
255 onHeightChanged: rendererLoader.updateRanges();
256 onYChanged: rendererLoader.updateRanges();
258 Loader {
259 id: rendererLoader
260 anchors {
261 top: parent.top
262 left: parent.left
263 right: parent.right
264 topMargin: name != "" ? 0 : units.gu(2)
265 }
267 Behavior on height {
268 id: heightBehaviour
269 enabled: false
270 animation: UbuntuNumberAnimation {
271 duration: UbuntuAnimation.FastDuration
272 onRunningChanged: {
273 if (!running) {
274 heightBehaviour.enabled = false
275 if (categoryView.runMaximizeAfterSizeChanges > 0) {
276 categoryView.runMaximizeAfterSizeChanges--;
277 if (categoryView.runMaximizeAfterSizeChanges == 0) {
278 var firstCreated = categoryView.firstCreatedIndex();
279 for (var i = 0; i < categoryView.createdItemCount(); ++i) {
280 var baseItem = categoryView.item(firstCreated + i);
281 if (baseItem.category === categoryView.expandedCategoryId) {
282 categoryView.maximizeVisibleArea(firstCreated + i, baseItem.item.expandedHeight + baseItem.seeAllButton.height);
283 break;
284 }
285 }
286 }
287 }
288 }
289 }
290 }
291 }
293 readonly property bool expanded: baseItem.expanded || !baseItem.expandable
294 height: expanded ? item.expandedHeight : item.collapsedHeight
296 source: {
297 switch (cardTool.categoryLayout) {
298 case "carousel": return "CardCarousel.qml";
299 case "vertical-journal": return "CardVerticalJournal.qml";
300 case "horizontal-list": return "CardHorizontalList.qml";
301 case "grid":
302 default: return "CardGrid.qml";
303 }
304 }
306 onLoaded: {
307 if (item.enableHeightBehavior !== undefined && item.enableHeightBehaviorOnNextCreation !== undefined) {
308 item.enableHeightBehavior = scopeView.enableHeightBehaviorOnNextCreation;
309 scopeView.enableHeightBehaviorOnNextCreation = false;
310 }
311 item.model = Qt.binding(function() { return results })
312 item.objectName = Qt.binding(function() { return categoryId })
313 item.scopeStyle = scopeView.scopeStyle;
314 if (baseItem.expandable) {
315 var shouldExpand = baseItem.category === categoryView.expandedCategoryId;
316 baseItem.expand(shouldExpand, false /*animate*/);
317 }
318 updateRanges();
319 if (scope && scope.id === "clickscope" && (categoryId === "predefined" || categoryId === "local")) {
320 // Yeah, hackish :/
321 cardTool.artShapeSize = Qt.size(units.gu(8), units.gu(7.5));
322 }
323 item.cardTool = cardTool;
324 }
326 Component.onDestruction: {
327 if (item.enableHeightBehavior !== undefined && item.enableHeightBehaviorOnNextCreation !== undefined) {
328 scopeView.enableHeightBehaviorOnNextCreation = item.enableHeightBehaviorOnNextCreation;
329 }
330 }
332 Connections {
333 target: rendererLoader.item
334 onClicked: {
335 scopeView.itemClicked(index, result, item, itemModel, target.model, categoryItemCount());
336 }
338 onPressAndHold: {
339 scopeView.itemPressedAndHeld(index, result, itemModel, target.model, categoryItemCount());
340 }
342 function categoryItemCount() {
343 var categoryItemCount = -1;
344 if (!rendererLoader.expanded && !seeAllLabel.visible && target.collapsedItemCount > 0) {
345 categoryItemCount = target.collapsedItemCount;
346 }
347 return categoryItemCount;
348 }
349 }
350 Connections {
351 target: categoryView
352 onOriginYChanged: rendererLoader.updateRanges();
353 onContentYChanged: rendererLoader.updateRanges();
354 onHeightChanged: rendererLoader.updateRanges();
355 onContentHeightChanged: rendererLoader.updateRanges();
356 }
357 Connections {
358 target: scopeView
359 onIsCurrentChanged: rendererLoader.updateRanges();
360 }
361 Connections {
362 target: holdingList
363 onMovingChanged: if (!moving) rendererLoader.updateRanges();
364 }
366 function updateRanges() {
367 if (holdingList && holdingList.moving) {
368 return;
369 }
371 if (categoryView.moving) {
372 // Do not update the range if we are overshooting up or down, since we'll come back
373 // to the stable position and delete/create items without any reason
374 if (categoryView.contentY < categoryView.originY) {
375 return;
376 } else if (categoryView.contentHeight - categoryView.originY > categoryView.height &&
377 categoryView.contentY + categoryView.height > categoryView.contentHeight) {
378 return;
379 }
380 }
382 if (item && item.hasOwnProperty("displayMarginBeginning")) {
383 // A item view is considered visible from
384 // -displayMarginBeginning
385 // to
386 // height + item.displayMarginEnd
387 // We adjust displayMarginBeginning and displayMarginEnd so
388 // * In non visible scopes only the viewport is considered visible
389 // that way when you switch to it the visible items are there
390 // * For visible scopes we increase the visible range by categoryView.height * 1.5
391 // in both directions to make scrolling nicer by mantaining a higher number of
392 // cached items
393 // TODO Improvements
394 // - For non visible scopes we should always have a visible range of 0 and
395 // make sure the items in the viewport are created with the cache buffer feature
396 // - For visible scopes we should always the have a visible range be exactly the
397 // viewport and make sure the rest of items are created with the cache buffer feature
398 // To be able to implement that feature VerticalJournal/AbstractDashView needs to
399 // make the cache buffer value setable externally
400 var extraMargins = scopeView.isCurrent ? categoryView.height * 1.5 : 0;
402 item.displayMarginBeginning = Math.round(-Math.max(-baseItem.y - extraMargins, 0));
403 item.displayMarginEnd = -Math.round(Math.max(baseItem.height - extraMargins - seeAll.height -
404 categoryView.height + baseItem.y, 0));
405 }
406 }
407 }
409 AbstractButton {
410 id: seeAll
411 objectName: "seeAll"
412 anchors {
413 top: rendererLoader.bottom
414 left: parent.left
415 right: parent.right
416 }
417 height: baseItem.expandable && !baseItem.headerLink ? seeAllLabel.font.pixelSize + units.gu(4) : 0
418 visible: height != 0
420 onClicked: {
421 if (categoryView.expandedCategoryId !== baseItem.category) {
422 categoryView.expandedCategoryId = baseItem.category;
423 floatingSeeLess.companionBase = baseItem;
424 } else {
425 categoryView.expandedCategoryId = "";
426 }
427 }
429 Label {
430 id: seeAllLabel
431 text: baseItem.expanded ? i18n.tr("See less") : i18n.tr("See all")
432 anchors {
433 centerIn: parent
434 verticalCenterOffset: units.gu(-0.5)
435 }
436 fontSize: "small"
437 font.weight: Font.Bold
438 color: scopeStyle ? scopeStyle.foreground : Theme.palette.normal.baseText
439 }
440 }
442 Image {
443 visible: index != 0
444 anchors {
445 top: parent.top
446 left: parent.left
447 right: parent.right
448 }
449 fillMode: Image.Stretch
450 source: "graphics/dash_divider_top_lightgrad.png"
451 z: -1
452 }
454 Image {
455 // FIXME Should not rely on model.count but view.count, but ListViewWithPageHeader doesn't expose it yet.
456 visible: index != categoryView.model.count - 1
457 anchors {
458 bottom: seeAll.bottom
459 left: parent.left
460 right: parent.right
461 }
462 fillMode: Image.Stretch
463 source: "graphics/dash_divider_top_darkgrad.png"
464 z: -1
465 }
466 }
468 sectionProperty: "name"
469 sectionDelegate: ListItems.Header {
470 objectName: "dashSectionHeader" + (delegate ? delegate.category : "")
471 readonly property var delegate: categoryView.item(delegateIndex)
472 width: categoryView.width
473 height: section != "" ? units.gu(5) : 0
474 text: section
475 color: scopeStyle ? scopeStyle.foreground : Theme.palette.normal.baseText
476 iconName: delegate && delegate.headerLink ? "go-next" : ""
477 onClicked: {
478 if (delegate.headerLink) scopeView.scope.performQuery(delegate.headerLink);
479 }
480 }
482 pageHeader: scopeView.showPageHeader ? pageHeaderLoader : null
483 Loader {
484 id: pageHeaderLoader
485 width: parent.width
486 sourceComponent: scopeView.showPageHeader ? pageHeaderComponent : undefined
487 Component {
488 id: pageHeaderComponent
489 PageHeader {
490 objectName: "scopePageHeader"
491 width: parent.width
492 title: scopeView.scope ? scopeView.scope.name : ""
493 searchHint: scopeView.scope && scopeView.scope.searchHint || i18n.tr("Search")
494 showBackButton: scopeView.hasBackAction
495 searchEntryEnabled: true
496 settingsEnabled: scopeView.scope && scopeView.scope.settings && scopeView.scope.settings.count > 0 || false
497 favoriteEnabled: scopeView.scope && scopeView.scope.id !== "clickscope"
498 favorite: scopeView.scope && scopeView.scope.favorite
499 scopeStyle: scopeView.scopeStyle
500 paginationCount: scopeView.paginationCount
501 paginationIndex: scopeView.paginationIndex
503 bottomItem: DashNavigation {
504 scope: scopeView.scope
505 anchors { left: parent.left; right: parent.right }
506 windowHeight: scopeView.height
507 windowWidth: scopeView.width
508 scopeStyle: scopeView.scopeStyle
509 }
511 onBackClicked: scopeView.backClicked()
512 onSettingsClicked: subPageLoader.openSubPage("settings")
513 onFavoriteClicked: scopeView.scope.favorite = !scopeView.scope.favorite
514 }
515 }
516 }
517 }
519 Item {
520 id: pullToRefreshClippingItem
521 anchors.left: parent.left
522 anchors.right: parent.right
523 anchors.bottom: parent.bottom
524 height: parent.height - pullToRefresh.contentY + (pageHeaderLoader.item ? pageHeaderLoader.item.bottomItem[0].height - pageHeaderLoader.item.height : 0)
525 clip: true
527 PullToRefresh {
528 id: pullToRefresh
529 objectName: "pullToRefresh"
530 target: categoryView
532 readonly property real contentY: categoryView.contentY - categoryView.originY
533 y: -contentY - units.gu(5)
535 onRefresh: {
536 refreshing = true
537 scopeView.scope.refresh()
538 }
539 anchors.left: parent.left
540 anchors.right: parent.right
542 Connections {
543 target: scopeView
544 onProcessingChanged: if (!scopeView.processing) pullToRefresh.refreshing = false
545 }
547 style: PullToRefreshScopeStyle {
548 anchors.fill: parent
549 activationThreshold: units.gu(14)
550 }
551 }
552 }
554 AbstractButton {
555 id: floatingSeeLess
556 objectName: "floatingSeeLess"
558 property Item companionTo: companionBase ? companionBase.seeAllButton : null
559 property Item companionBase: null
560 property bool showBecausePosition: false
561 property real yOffset: 0
563 anchors {
564 left: categoryView.left
565 right: categoryView.right
566 }
567 y: parent.height - height + yOffset
568 height: seeLessLabel.font.pixelSize + units.gu(4)
569 visible: companionTo && showBecausePosition
571 onClicked: categoryView.expandedCategoryId = "";
573 function updateVisibility() {
574 var companionPos = companionTo.mapToItem(floatingSeeLess, 0, 0);
575 showBecausePosition = companionPos.y > 0;
577 var posToBase = floatingSeeLess.mapToItem(companionBase, 0, -yOffset).y;
578 yOffset = Math.max(0, companionBase.item.collapsedHeight - posToBase);
579 yOffset = Math.min(yOffset, height);
581 if (!showBecausePosition && categoryView.expandedCategoryId === "") {
582 companionBase = null;
583 }
584 }
586 Label {
587 id: seeLessLabel
588 text: i18n.tr("See less")
589 anchors {
590 centerIn: parent
591 verticalCenterOffset: units.gu(-0.5)
592 }
593 fontSize: "small"
594 font.weight: Font.Bold
595 color: scopeStyle ? scopeStyle.foreground : Theme.palette.normal.baseText
596 }
598 Connections {
599 target: floatingSeeLess.companionTo ? categoryView : null
600 onContentYChanged: floatingSeeLess.updateVisibility();
601 }
603 Connections {
604 target: floatingSeeLess.companionTo
605 onYChanged: floatingSeeLess.updateVisibility();
606 }
607 }
609 LimitProxyModel {
610 id: previewLimitModel
611 }
613 Loader {
614 id: subPageLoader
615 objectName: "subPageLoader"
616 visible: x != width
617 width: parent.width
618 height: parent.height
619 anchors.left: categoryView.right
621 property bool open: false
622 property var scope: scopeView.scope
623 property var scopeStyle: scopeView.scopeStyle
624 property int initialIndex: -1
625 property var model: null
627 readonly property bool processing: item && item.processing || false
628 readonly property int count: item && item.count || 0
629 readonly property int currentIndex: item && item.currentIndex || 0
630 readonly property var currentItem: item && item.currentItem || null
632 property string subPage: ""
633 readonly property bool subPageShown: visible && status === Loader.Ready
635 function openSubPage(page) {
636 subPage = page;
637 }
639 function closeSubPage() {
640 open = false;
641 }
643 source: switch(subPage) {
644 case "preview": return "PreviewListView.qml";
645 case "settings": return "ScopeSettingsPage.qml";
646 default: return "";
647 }
649 onLoaded: {
650 item.scope = Qt.binding(function() { return subPageLoader.scope; } )
651 item.scopeStyle = Qt.binding(function() { return subPageLoader.scopeStyle; } )
652 if (subPage == "preview") {
653 item.open = Qt.binding(function() { return subPageLoader.open; } )
654 item.initialIndex = Qt.binding(function() { return subPageLoader.initialIndex; } )
655 item.model = Qt.binding(function() { return subPageLoader.model; } )
656 }
657 open = true;
658 }
660 onOpenChanged: pageHeaderLoader.item.unfocus()
662 onVisibleChanged: if (!visible) subPage = ""
664 Connections {
665 target: subPageLoader.item
666 onBackClicked: subPageLoader.closeSubPage()
667 }
668 }