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  /* If true, the number of elements displayed will be limited by collapsedRowCount.
32  If false, all elements will be displayed, effectively looking the same as a regular
33  ResponsiveGridView. */
34  property bool filter: true
35 
36  /* Whether, when collapsed, a button should be displayed enabling the user to expand
37  the grid to its full size. */
38  readonly property bool expandable: model.count > rowsWhenCollapsed * iconTileGrid.columns
39 
40  property var model: null
41 
42  /* Maximum number of rows to be show when filter=true. */
43  property int collapsedRowCount: 2
44  property int uncollapsedRowCount: Math.ceil(model.count / columns)
45  /* Never show more rows than model would fill up. */
46  readonly property int rowsWhenCollapsed: Math.min(collapsedRowCount, uncollapsedRowCount)
47  readonly property int collapsedHeight: iconTileGrid.contentHeightForRows(rowsWhenCollapsed)
48  readonly property int uncollapsedHeight: iconTileGrid.contentHeightForRows(uncollapsedRowCount)
49 
50  property alias minimumHorizontalSpacing: iconTileGrid.minimumHorizontalSpacing
51  property alias maximumNumberOfColumns: iconTileGrid.maximumNumberOfColumns
52  property alias columns: iconTileGrid.columns
53  property alias delegateWidth: iconTileGrid.delegateWidth
54  property alias delegateHeight: iconTileGrid.delegateHeight
55  property alias verticalSpacing: iconTileGrid.verticalSpacing
56  readonly property alias margins: iconTileGrid.margins
57  property alias delegate: iconTileGrid.delegate
58  property alias cellWidth: iconTileGrid.cellWidth
59  property alias cellHeight: iconTileGrid.cellHeight
60  property alias delegateCreationBegin: iconTileGrid.delegateCreationBegin
61  property alias delegateCreationEnd: iconTileGrid.delegateCreationEnd
62  readonly property alias originY: iconTileGrid.originY
63  readonly property alias flicking: iconTileGrid.flicking
64  readonly property alias moving: iconTileGrid.moving
65  readonly property alias pressDelay: iconTileGrid.pressDelay
66  property alias highlightIndex: iconTileGrid.highlightIndex
67  readonly property alias currentItem: iconTileGrid.currentItem
68 
69  height: !filterAnimation.running ? childrenRect.height : height
70  clip: filterAnimation.running
71 
72  NumberAnimation {
73  property bool filterEndValue
74  id: filterAnimation
75  target: root
76  property: "height"
77  to: filterEndValue ? root.collapsedHeight : root.uncollapsedHeight
78  // Duration and easing here match the ListViewWithPageHeader::m_contentYAnimation
79  // otherwise since both animations can run at the same time you'll get
80  // some visual weirdness.
81  duration: 200
82  easing.type: Easing.InOutQuad
83  onStopped: {
84  root.filter = filterEndValue;
85  }
86  }
87 
88  function startFilterAnimation(filter) {
89  filterAnimation.filterEndValue = filter
90  filterAnimation.start();
91  }
92 
93  ResponsiveGridView {
94  id: iconTileGrid
95 
96  anchors { left: parent.left; right: parent.right }
97  height: totalContentHeight
98  interactive: false
99 
100  minimumHorizontalSpacing: units.gu(0.5)
101  maximumNumberOfColumns: 6
102  delegateWidth: units.gu(11)
103  delegateHeight: units.gu(9.5)
104  verticalSpacing: units.gu(2)
105 
106  model: LimitProxyModel {
107  model: root.model
108  limit: (filter && !filterAnimation.running) ? rowsWhenCollapsed * iconTileGrid.columns : -1
109  }
110  }
111 }