← Back to branch summary

~nik90/cliffhanger/develop

« back to all changes in this revision

Viewing changes to components/DetailCarousel.qml

  • Committer: Nekhelesh Ramananthan
  • Date: 2014-04-07 11:46:45 UTC
  • Revision ID: git-v1:15b7b9a5b286031bcf2b8a1ae65f4732f92aa847
Added all the project files

Show diffs side-by-side

added added

removed removed

Lines of Context:
components/DetailCarousel.qml
 
1
/*
 
2
 * Flashback - Entertainment app for Ubuntu
 
3
 * Copyright (C) 2013, 2014 Nekhelesh Ramananthan <nik90@ubuntu.com>
 
4
 *
 
5
 * This program 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
 * This program 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
 
 
19
import QtQuick 2.0
 
20
import Ubuntu.Components 0.1
 
21
import Ubuntu.Components.ListItems 0.1
 
22
 
 
23
/*
 
24
  The Detail Carousel is very similar to Carousel. It shows additional information such as Episode title,
 
25
  season and episode number and the release date. This carousel is primarily for displaying tv shows.
 
26
  */
 
27
Column {
 
28
    id: _detailCarousel
 
29
 
 
30
    // Header Title
 
31
    property alias header: _header.text
 
32
 
 
33
    // Carousel Data Model
 
34
    property alias dataModel: _carouselList.model
 
35
 
 
36
    // Carousel Thumbnail size (On the phone, show 2 + 2/3 cover art always by dynamically adjusting the size)
 
37
    property int size: parent.width < units.gu(50) ? (3 * (parent.width - 2*_carouselList.spacing))/8 : units.gu(17)
 
38
 
 
39
    // Property to show/hide date
 
40
    property bool showDate: true
 
41
 
 
42
    // Signal triggered when a thumb
 
43
    signal thumbClicked(var model)
 
44
 
 
45
    width: parent.width
 
46
    spacing: units.gu(1)
 
47
    visible: _carouselList.model.count > 0
 
48
    height: _header.height + _carouselList.height
 
49
 
 
50
    Header {
 
51
        id: _header
 
52
        text: i18n.tr("Default Header Title")
 
53
    }
 
54
 
 
55
    ListView {
 
56
        id: _carouselList
 
57
 
 
58
        width: parent.width
 
59
        height: 1.5*_detailCarousel.size + units.gu(5)
 
60
        orientation: Qt.Horizontal
 
61
        spacing: units.gu(2)
 
62
 
 
63
        // Element consists of a Picture and a text label below it.
 
64
        delegate: Item {
 
65
            id: _carouselItem
 
66
            width: _detailCarousel.size
 
67
            height: _thumbColumn.height
 
68
 
 
69
            Column {
 
70
                id: _thumbColumn
 
71
                spacing: units.gu(0.5)
 
72
 
 
73
                // Widget to curve edges and encase the thumbnail
 
74
                Thumbnail {
 
75
                    id: _carouselThumb
 
76
                    radius: "medium"
 
77
                    width: _detailCarousel.size
 
78
                    height: 1.5*_detailCarousel.size
 
79
                    thumbSource: thumb_url
 
80
 
 
81
                    Item {
 
82
                        id: bottomContainer
 
83
                        clip: true
 
84
                        height: parent.height/5
 
85
                        anchors {
 
86
                            left: parent.left
 
87
                            right: parent.right
 
88
                            bottom: parent.bottom
 
89
                        }
 
90
 
 
91
                        UbuntuShape {
 
92
                            id: detailsContainer
 
93
                            height: _carouselThumb.height
 
94
                            anchors {
 
95
                                bottom: parent.bottom
 
96
                                left: parent.left
 
97
                                right: parent.right
 
98
                            }
 
99
                            radius: "medium"
 
100
                            color: Qt.rgba(0,0,0,0.8)
 
101
                        }
 
102
 
 
103
                        Column {
 
104
                            id: detailsColumn
 
105
                            anchors {
 
106
                                left: parent.left
 
107
                                right: parent.right
 
108
                                verticalCenter: parent.verticalCenter
 
109
                                margins: units.gu(1)
 
110
                            }
 
111
 
 
112
                            // Label showing the tv episode name
 
113
                            Label {
 
114
                                id: _episodeTitle
 
115
                                text: episode_name
 
116
                                elide: Text.ElideRight
 
117
                                font.bold: true
 
118
                                anchors {
 
119
                                    left: parent.left
 
120
                                    right: parent.right
 
121
                                }
 
122
                            }
 
123
 
 
124
                            // Container to hold the tv show season number and release date
 
125
                            Item {
 
126
                                height: childrenRect.height
 
127
                                anchors {
 
128
                                    left: parent.left
 
129
                                    right: parent.right
 
130
                                }
 
131
 
 
132
                                Label {
 
133
                                    id: _seasonDetail
 
134
                                    text: "S" + season + "E" + episode
 
135
                                    width: parent.width * (2/5)
 
136
                                    elide: Text.ElideRight
 
137
                                    fontSize: "small"
 
138
                                    anchors.left: parent.left
 
139
                                }
 
140
 
 
141
                                Label {
 
142
                                    id: _seasonDate
 
143
 
 
144
                                    font.bold: true
 
145
                                    fontSize: "small"
 
146
                                    color: "LightGreen"
 
147
                                    visible: showDate
 
148
                                    text: get_date(episode_air_date)
 
149
                                    elide: Text.ElideRight
 
150
                                    width: parent.width * (3/5)
 
151
                                    anchors.right: parent.right
 
152
                                    horizontalAlignment: Text.AlignRight
 
153
 
 
154
                                    function get_date(iso) {
 
155
                                        var date, month
 
156
                                        date = iso.split('T')[0].split('-')
 
157
                                        month = Qt.locale().standaloneMonthName(date[1] - 1, Locale.ShortFormat)
 
158
                                        return date[2] + " " + month
 
159
                                    }
 
160
                                }
 
161
                            }
 
162
                        }
 
163
                    }
 
164
                }
 
165
 
 
166
                // Label showing the tv show name
 
167
                Label {
 
168
                    id: _carouselThumbDescription
 
169
                    text: name
 
170
                    maximumLineCount: 2
 
171
                    elide: Text.ElideRight
 
172
                    wrapMode: Text.WordWrap
 
173
                    width: _carouselThumb.width
 
174
                    horizontalAlignment: Text.AlignHCenter
 
175
                }
 
176
            }
 
177
 
 
178
            MouseArea {
 
179
                anchors.fill: parent
 
180
                onClicked: _detailCarousel.thumbClicked(model)
 
181
            }
 
182
        }
 
183
    }
 
184
}
 
185