← Back to branch summary

~cibersheep/unav/systemcolors

« back to all changes in this revision

Viewing changes to qml/components/ExpandableListItem.qml

  • Committer: costales
  • Date: 2016-03-26 18:53:17 UTC
  • Revision ID: costales.marcos@gmail.com-20160326185317-4iau3yhe8986h5pg
Init team

Show diffs side-by-side

added added

removed removed

Lines of Context:
qml/components/ExpandableListItem.qml
 
1
/*
 
2
 * uNav http://launchpad.net/unav
 
3
 * Copyright (C) 2016 Nekhelesh Ramananthan https://launchpad.net/~nik90
 
4
 *
 
5
 * uNav is free software: you can redistribute it and/or modify
 
6
 * it under the terms of the GNU General Public License version 3 as
 
7
 * published by the Free Software Foundation.
 
8
 *
 
9
 * uNav is distributed in the hope that it will be useful,
 
10
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 
11
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 
12
 * GNU General Public License for more details.
 
13
 *
 
14
 * You should have received a copy of the GNU General Public License
 
15
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
16
 */
 
17
 
 
18
import QtQuick 2.4
 
19
import Ubuntu.Components 1.3
 
20
 
 
21
/*
 
22
 Component which extends the SDK Expandable list item and provides a easy
 
23
 to use component where the title, subtitle and a listview can be displayed. It
 
24
 matches the design specification provided for clock.
 
25
*/
 
26
 
 
27
ListItem {
 
28
    id: expandableListItem
 
29
 
 
30
    // Public APIs
 
31
    property ListModel model
 
32
    property Component delegate
 
33
    property alias titleText: expandableHeader.title
 
34
    property alias subText: expandableHeader.subtitle
 
35
    property alias listViewHeight: expandableListLoader.height
 
36
 
 
37
    height: headerListItem.height
 
38
    expansion.height: headerListItem.height + expandableListLoader.height
 
39
    onClicked: toggleExpansion()
 
40
 
 
41
    function toggleExpansion() {
 
42
        expansion.expanded = !expansion.expanded
 
43
    }
 
44
 
 
45
    ListItem {
 
46
        id: headerListItem
 
47
        height: expandableHeader.height + divider.height
 
48
 
 
49
        ListItemLayout {
 
50
            id: expandableHeader
 
51
 
 
52
            subtitle.textSize: Label.Medium
 
53
 
 
54
            Icon {
 
55
                id: arrow
 
56
 
 
57
                width: units.gu(2)
 
58
                height: width
 
59
                SlotsLayout.position: SlotsLayout.Trailing
 
60
                name: "go-down"
 
61
                rotation: expandableListItem.expansion.expanded ? 180 : 0
 
62
 
 
63
                Behavior on rotation {
 
64
                    UbuntuNumberAnimation {}
 
65
                }
 
66
            }
 
67
        }
 
68
    }
 
69
 
 
70
    Loader {
 
71
        id: expandableListLoader
 
72
        width: parent.width
 
73
        asynchronous: true
 
74
        anchors.top: headerListItem.bottom
 
75
        sourceComponent: expandableListItem.expansion.expanded ? expandableListComponent : undefined
 
76
    }
 
77
 
 
78
    Component {
 
79
        id: expandableListComponent
 
80
        ListView {
 
81
            id: expandableList
 
82
            interactive: false
 
83
            model: expandableListItem.model
 
84
            delegate: expandableListItem.delegate
 
85
        }
 
86
    }
 
87
}