← Back to branch summary

~gerboland/unity/8-refactor-wm-and-test

« back to all changes in this revision

Viewing changes to Components/FilterGrid.qml

  • Committer: Michał Sawicz
  • Date: 2013-06-05 22:03:08 UTC
  • Revision ID: michal.sawicz@canonical.com-20130605220308-yny8fv3futtr04fg
Inital unity8 commit.

Previous history can be found at https://code.launchpad.net/~unity-team/unity/phablet

Show diffs side-by-side

added added

removed removed

Lines of Context:
Components/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
    property bool expandable: true
 
39
 
 
40
    property var model: null
 
41
 
 
42
    /* Maximum number of rows to be show when filter=true. */
 
43
    property int collapsedRowCount: 2
 
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
    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
 
57
 
 
58
    height: childrenRect.height
 
59
 
 
60
    ResponsiveGridView {
 
61
        id: iconTileGrid
 
62
 
 
63
        anchors { left: parent.left; right: parent.right }
 
64
        height: totalContentHeight
 
65
        interactive: false
 
66
 
 
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)
 
72
 
 
73
        model: LimitProxyModel {
 
74
            model: root.model
 
75
            limit: (filter) ? collapsedRowCount * iconTileGrid.columns : -1
 
76
        }
 
77
 
 
78
    }
 
79
 
 
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
 
88
 
 
89
        AbstractButton {
 
90
            id: button
 
91
            objectName: "filterToggleButton"
 
92
 
 
93
            anchors {
 
94
                top: parent.top
 
95
                horizontalCenter: parent.horizontalCenter
 
96
            }
 
97
            width: units.gu(22)
 
98
            height: units.gu(4)
 
99
 
 
100
            UbuntuShape {
 
101
                anchors.fill: parent
 
102
                color: "#33ffffff"
 
103
                radius: "small"
 
104
            }
 
105
 
 
106
            UbuntuShape {
 
107
                id: borderPressed
 
108
 
 
109
                anchors.fill: parent
 
110
                radius: "small"
 
111
                borderSource: ItemStyle.style.borderPressed
 
112
                opacity: button.pressed ? 1.0 : 0.0
 
113
                Behavior on opacity { NumberAnimation { duration: 200; easing.type: Easing.OutQuint } }
 
114
            }
 
115
 
 
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: "#f3f3e7"
 
127
                opacity: 0.6
 
128
                style: Text.Raised
 
129
                styleColor: "black"
 
130
                elide: Text.ElideMiddle
 
131
                horizontalAlignment: Text.AlignHCenter
 
132
            }
 
133
 
 
134
            onClicked: filter = !filter
 
135
        }
 
136
    }
 
137
}