git.iko.soy/unity8
on 69a0d21 help sign in
unity8/qml/Components/FilterGrid.qml
110 lines 4.5 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 /* 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
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
40 property var model: null
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)
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 flicking: iconTileGrid.flicking
63 readonly property alias moving: iconTileGrid.moving
64 readonly property alias pressDelay: iconTileGrid.pressDelay
65 property alias highlightIndex: iconTileGrid.highlightIndex
66 readonly property alias currentItem: iconTileGrid.currentItem
68 height: !filterAnimation.running ? childrenRect.height : height
69 clip: filterAnimation.running
71 NumberAnimation {
72 property bool filterEndValue
73 id: filterAnimation
74 target: root
75 property: "height"
76 to: filterEndValue ? root.collapsedHeight : root.uncollapsedHeight
77 // Duration and easing here match the ListViewWithPageHeader::m_contentYAnimation
78 // otherwise since both animations can run at the same time you'll get
79 // some visual weirdness.
80 duration: 200
81 easing.type: Easing.InOutQuad
82 onStopped: {
83 root.filter = filterEndValue;
84 }
85 }
87 function startFilterAnimation(filter) {
88 filterAnimation.filterEndValue = filter
89 filterAnimation.start();
90 }
92 ResponsiveGridView {
93 id: iconTileGrid
95 anchors { left: parent.left; right: parent.right }
96 height: totalContentHeight
97 interactive: false
99 minimumHorizontalSpacing: units.gu(0.5)
100 maximumNumberOfColumns: 6
101 delegateWidth: units.gu(11)
102 delegateHeight: units.gu(9.5)
103 verticalSpacing: units.gu(2)
105 model: LimitProxyModel {
106 model: root.model
107 limit: (filter && !filterAnimation.running) ? rowsWhenCollapsed * iconTileGrid.columns : -1
108 }
109 }