← Back to branch summary

~nik90/cliffhanger/convergence-1

« back to all changes in this revision

Viewing changes to components/Carousel.qml

  • Committer: Nekhelesh Ramananthan
  • Date: 2013-11-10 12:45:09 UTC
  • mto: This revision was merged to the branch mainline in revision 4.
  • Revision ID: krnekhelesh@gmail.com-20131110124509-tm9cegstktd4l0dc
Added carousel and replaced boiler code with real code structure

Show diffs side-by-side

added added

removed removed

Lines of Context:
components/Carousel.qml
 
1
import QtQuick 2.0
 
2
import Ubuntu.Components 0.1
 
3
import Ubuntu.Components.ListItems 0.1
 
4
 
 
5
/*
 
6
  The carouel is an element which displays a header title with a flickable row of ubuntu shape thumbnails.
 
7
  */
 
8
Item {
 
9
    id: carousel
 
10
 
 
11
    // Header Title
 
12
    property alias header: header.text
 
13
 
 
14
    // Carousel Data Model
 
15
    property alias dataModel: carouselList.model
 
16
 
 
17
    // Carousel Thumbnail size
 
18
    property alias size: carouselList.height
 
19
 
 
20
    // Signal triggered when a thumb
 
21
    signal thumbClicked(var model)
 
22
 
 
23
    height: container.height
 
24
    width: parent.width
 
25
 
 
26
    Column {
 
27
        id: container
 
28
        anchors.fill: parent
 
29
        spacing: units.gu(1)
 
30
 
 
31
        height: header.height + carouselList.height
 
32
 
 
33
        Header {
 
34
            id: header
 
35
            text: "Default Header Title"
 
36
        }
 
37
 
 
38
        ListView {
 
39
            id: carouselList
 
40
 
 
41
            width: parent.width
 
42
            orientation: Qt.Horizontal
 
43
            spacing: units.gu(2)
 
44
 
 
45
            // Element consists of a Picture and a text label below it.
 
46
            delegate: Item {
 
47
                id: thumbContainer
 
48
 
 
49
                width: carouselList.height - units.gu(3)
 
50
                height: carouselThumb.height + carouselThumbDescription.height + thumbColumn.spacing
 
51
 
 
52
                Column {
 
53
                    id: thumbColumn
 
54
                    spacing: units.gu(1)
 
55
 
 
56
                    UbuntuShape {
 
57
                        id: carouselThumb
 
58
 
 
59
                        width: thumbContainer.width
 
60
                        height: width
 
61
 
 
62
                        image: Image {
 
63
                            source: url
 
64
                            width: carouselThumb.width
 
65
                            fillMode: Image.PreserveAspectFit
 
66
                            smooth: true
 
67
                        }
 
68
                    }
 
69
 
 
70
                    Label {
 
71
                        id: carouselThumbDescription
 
72
                        text: name
 
73
                        width: carouselThumb.width
 
74
                        maximumLineCount: 2
 
75
                        elide: Text.ElideRight
 
76
                        wrapMode: Text.WordWrap
 
77
                        horizontalAlignment: Text.AlignHCenter
 
78
                    }
 
79
                }
 
80
 
 
81
                MouseArea {
 
82
                    id: thumbClickArea
 
83
                    anchors.fill: parent
 
84
                    onClicked: carousel.thumbClicked(model)
 
85
                }
 
86
            }
 
87
        }
 
88
    }
 
89
}