on 43bbdfb help sign in
unity8/qml/Components/FilterGrid.qml
124 lines 4.9 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.0
18import Ubuntu.Components 0.1
19import Utils 0.1
20import "../Components"
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 */
28Item {
29 id: root
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
35 property var model: null
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)
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
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 }
76 height: d.collapsed ? root.collapsedHeight : root.uncollapsedHeight
77 clip: filterAnimation.running
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 }
98 function setFilter(filter, animate) {
99 heightBehaviour.enabled = animate;
100 d.collapsed = filter;
101 if (!animate || !filter) {
102 d.filter = filter;
103 }
104 }
106 ResponsiveGridView {
107 id: iconTileGrid
109 anchors { left: parent.left; right: parent.right }
110 height: totalContentHeight
111 interactive: false
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)
119 model: LimitProxyModel {
120 model: root.model
121 limit: d.filter ? rowsWhenCollapsed * iconTileGrid.columns : -1
122 }
123 }