Unity 8
 All Classes Functions Properties
FilterGrid.qml
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  */
16 
17 import QtQuick 2.0
18 import Ubuntu.Components 0.1
19 import Utils 0.1
20 import "../Components"
21 
22 /*
23  A ResponsiveGridView that can optionally have the number of rows being displayed
24  reduced to collapsedRowCount, in which case a button saying "View all (123)"
25  will be shown at the bottom. If clicked, FilterGrid will them expand vertically
26  to display all rows.
27  */
28 Item {
29  id: root
30 
31  /* Whether, when collapsed, a button should be displayed enabling the user to expand
32  the grid to its full size. */
33  readonly property bool expandable: model.count > rowsWhenCollapsed * iconTileGrid.columns
34 
35  property var model: null
36 
37  /* Maximum number of rows to be show when filter=true. */
38  property int collapsedRowCount: 2
39  property int uncollapsedRowCount: Math.ceil(model.count / columns)
40  /* Never show more rows than model would fill up. */
41  readonly property int rowsWhenCollapsed: Math.min(collapsedRowCount, uncollapsedRowCount)
42  readonly property int collapsedHeight: iconTileGrid.contentHeightForRows(rowsWhenCollapsed)
43  readonly property int uncollapsedHeight: iconTileGrid.contentHeightForRows(uncollapsedRowCount)
44 
45  property alias minimumHorizontalSpacing: iconTileGrid.minimumHorizontalSpacing
46  property alias maximumNumberOfColumns: iconTileGrid.maximumNumberOfColumns
47  property alias columns: iconTileGrid.columns
48  property alias delegateWidth: iconTileGrid.delegateWidth
49  property alias delegateHeight: iconTileGrid.delegateHeight
50  property alias verticalSpacing: iconTileGrid.verticalSpacing
51  readonly property alias margins: iconTileGrid.margins
52  property alias delegate: iconTileGrid.delegate
53  property alias cellWidth: iconTileGrid.cellWidth
54  property alias cellHeight: iconTileGrid.cellHeight
55  property alias displayMarginBeginning: iconTileGrid.displayMarginBeginning
56  property alias displayMarginEnd: iconTileGrid.displayMarginEnd
57  readonly property alias originY: iconTileGrid.originY
58  readonly property alias flicking: iconTileGrid.flicking
59  readonly property alias moving: iconTileGrid.moving
60  readonly property alias pressDelay: iconTileGrid.pressDelay
61  property alias highlightIndex: iconTileGrid.highlightIndex
62  readonly property alias currentItem: iconTileGrid.currentItem
63  readonly property alias filtered: d.filter
64 
65  QtObject {
66  id: d
67  // We do have filter and collapsed properties because we need to decouple
68  // the real filtering with the animation since the closing animation
69  // i.e. setFilter(false. true) we still need to not be filtering until
70  // the animation finishes otherwise we hide the items when the animation
71  // is still running
72  property bool filter: true
73  property bool collapsed: true
74  }
75 
76  height: d.collapsed ? root.collapsedHeight : root.uncollapsedHeight
77  clip: filterAnimation.running
78 
79  Behavior on height {
80  id: heightBehaviour
81  enabled: false
82  NumberAnimation {
83  id: filterAnimation
84  // Duration and easing here match the ListViewWithPageHeader::m_contentYAnimation
85  // otherwise since both animations can run at the same time you'll get
86  // some visual weirdness.
87  duration: 200
88  easing.type: Easing.InOutQuad
89  onRunningChanged: {
90  if (!running) {
91  d.filter = d.collapsed;
92  }
93  heightBehaviour.enabled = false;
94  }
95  }
96  }
97 
98  function setFilter(filter, animate) {
99  heightBehaviour.enabled = animate;
100  d.collapsed = filter;
101  if (!animate || !filter) {
102  d.filter = filter;
103  }
104  }
105 
106  ResponsiveGridView {
107  id: iconTileGrid
108 
109  anchors { left: parent.left; right: parent.right }
110  height: totalContentHeight
111  interactive: false
112 
113  minimumHorizontalSpacing: units.gu(0.5)
114  maximumNumberOfColumns: 6
115  delegateWidth: units.gu(11)
116  delegateHeight: units.gu(9.5)
117  verticalSpacing: units.gu(2)
118 
119  model: LimitProxyModel {
120  model: root.model
121  limit: d.filter ? rowsWhenCollapsed * iconTileGrid.columns : -1
122  }
123  }
124 }