git.iko.soy/unity8
on a67c059 help sign in
unity8/Components/FilterGrid.qml
137 lines 4.7 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 property bool expandable: true
40 property var model: null
42 /* Maximum number of rows to be show when filter=true. */
43 property int collapsedRowCount: 2
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 property alias delegate: iconTileGrid.delegate
52 property alias cellWidth: iconTileGrid.cellWidth
53 property alias cellHeight: iconTileGrid.cellHeight
54 readonly property alias flicking: iconTileGrid.flicking
55 readonly property alias moving: iconTileGrid.moving
56 readonly property alias pressDelay: iconTileGrid.pressDelay
58 height: childrenRect.height
60 ResponsiveGridView {
61 id: iconTileGrid
63 anchors { left: parent.left; right: parent.right }
64 height: totalContentHeight
65 interactive: false
67 minimumHorizontalSpacing: units.gu(0.5)
68 maximumNumberOfColumns: 6
69 delegateWidth: units.gu(11)
70 delegateHeight: units.gu(9.5)
71 verticalSpacing: units.gu(2)
73 model: LimitProxyModel {
74 model: root.model
75 limit: (filter) ? collapsedRowCount * iconTileGrid.columns : -1
76 }
78 }
80 Item {
81 anchors {
82 left: parent.left
83 right: parent.right
84 top: iconTileGrid.bottom
85 }
86 visible: (expandable && filter && model.count > collapsedRowCount * iconTileGrid.columns)
87 height: (visible) ? childrenRect.height + units.gu(2) : 0
89 AbstractButton {
90 id: button
91 objectName: "filterToggleButton"
93 anchors {
94 top: parent.top
95 horizontalCenter: parent.horizontalCenter
96 }
97 width: units.gu(22)
98 height: units.gu(4)
100 UbuntuShape {
101 anchors.fill: parent
102 color: "#33ffffff" // FIXME no palette
103 radius: "small"
104 }
106 UbuntuShape {
107 id: borderPressed
109 anchors.fill: parent
110 radius: "small"
111 borderSource: "radius_pressed.sci"
112 opacity: button.pressed ? 1.0 : 0.0
113 Behavior on opacity { NumberAnimation { duration: 200; easing.type: Easing.OutQuint } }
114 }
116 Label {
117 anchors {
118 verticalCenter: parent.verticalCenter
119 left: parent.left
120 right: parent.right
121 leftMargin: units.gu(1)
122 rightMargin: units.gu(1)
123 }
124 text: (filter) ? "+ View all (" + model.count + ")" : "- Show fewer"
125 fontSize: "small"
126 color: Theme.palette.selected.backgroundText
127 opacity: 0.6
128 style: Text.Raised
129 styleColor: "black"
130 elide: Text.ElideMiddle
131 horizontalAlignment: Text.AlignHCenter
132 }
134 onClicked: filter = !filter
135 }
136 }