← Back to branch summary

~mrqtros/ubuntu-rssreader-app/ubuntu-rssreader-app-to-tabs

« back to all changes in this revision

Viewing changes to shorts/qml/components/ListModeItem.qml

  • Committer: Roman Shchekin
  • Date: 2015-07-04 08:38:18 UTC
  • Revision ID: mrqtros@gmail.com-20150704083818-ecojm3nmy5bpkxrb
Merge with the Reboot project.

Show diffs side-by-side

added added

removed removed

Lines of Context:
shorts/qml/components/ListModeItem.qml
 
1
import QtQuick 2.4
 
2
import Ubuntu.Components 1.2
 
3
import Ubuntu.Components.ListItems 1.0 as ListItems
 
4
import Ubuntu.Components.Popups 1.0
 
5
 
 
6
import "../utils/dateutils.js" as DateUtils
 
7
 
 
8
Item {
 
9
    id: pageItself
 
10
 
 
11
    property int topicId: 0
 
12
    property var listViewModel: null
 
13
    property bool isShorts: topicId == 0
 
14
 
 
15
    function reload() {
 
16
        listViewModel = getModel()
 
17
    }
 
18
 
 
19
    function clear() {
 
20
        listViewModel = null
 
21
    }
 
22
 
 
23
    function showArticle(modelIndex) {
 
24
        listArticleView.setFeed(listViewModel, modelIndex)
 
25
    }
 
26
 
 
27
    Component {
 
28
        id: listModeDelegate
 
29
 
 
30
        Item {
 
31
            id: readIndicator
 
32
 
 
33
            anchors {
 
34
                left: parent.left
 
35
                right: parent.right
 
36
            }
 
37
            height: units.gu(12)
 
38
 
 
39
            Rectangle {
 
40
                id: listItem
 
41
                objectName: "feedlistitems"
 
42
 
 
43
                property bool useNoImageIcon: (pic.width == 0 || !model.image)
 
44
 
 
45
                color: model.status == "1" ? "#e5e4e5" : "#b0dded"
 
46
                anchors {
 
47
                    fill: parent
 
48
                    leftMargin: units.gu(2)
 
49
                    rightMargin: units.gu(2)
 
50
                    topMargin: units.gu(1)
 
51
                    bottomMargin: units.gu(1)
 
52
                }
 
53
 
 
54
                Rectangle {
 
55
                    z: -1
 
56
                    width: parent.width
 
57
                    height: parent.height
 
58
                    x: units.gu(0.6)
 
59
                    y: units.gu(0.6)
 
60
                    color: model.status == "1" ? "#aacccccc" : "#3333b5e5"
 
61
                }
 
62
 
 
63
                Item {
 
64
                    id: uPic
 
65
 
 
66
                    height: parent.height
 
67
                    width: pic.width
 
68
                    opacity: height
 
69
                    Image {
 
70
                        id: pic
 
71
                        height: {
 
72
                            if (implicitHeight < 50 || implicitWidth < 50)
 
73
                                return 0
 
74
                            else return uPic.height
 
75
 
 
76
                        }
 
77
                        width: height
 
78
                        source: selectIcon()
 
79
                        sourceSize.width: uPic.height * 2
 
80
 
 
81
                        function selectIcon() {
 
82
                            var img = model.image
 
83
                            return !model.image ? "" : model.image
 
84
                        }
 
85
                    }
 
86
 
 
87
                    Behavior on height { UbuntuNumberAnimation{} }
 
88
                    Behavior on opacity { NumberAnimation{} }
 
89
                }
 
90
 
 
91
                ActivityIndicator {
 
92
                    id: loadingIndicator
 
93
                    anchors {
 
94
                        verticalCenter: parent.verticalCenter
 
95
                        left: parent.left
 
96
                        leftMargin: units.gu(4)
 
97
                    }
 
98
                    running: pic.status == Image.Loading
 
99
                    visible: running
 
100
                }
 
101
 
 
102
                /* Ubuntu logo for articles without an image.
 
103
                     */
 
104
                Image {
 
105
                    anchors.centerIn: loadingIndicator
 
106
                    visible: listItem.useNoImageIcon && !loadingIndicator.running
 
107
                    source: Qt.resolvedUrl("/img/qml/icons/dash-home.svg")
 
108
                    width: units.gu(6)
 
109
                    height: units.gu(6)
 
110
                }
 
111
 
 
112
                Column {
 
113
                    id: content
 
114
 
 
115
                    anchors {
 
116
                        fill: parent; topMargin: units.gu(0.5); bottomMargin: units.gu(0.5);
 
117
                        leftMargin: listItem.height + units.gu(1.5); rightMargin: units.gu(1.5)
 
118
                    }
 
119
                    spacing: units.gu(0.8)
 
120
 
 
121
                    Row {
 
122
                        anchors {
 
123
                            left: parent.left
 
124
                            right: parent.right
 
125
                        }
 
126
                        height: labelTime.paintedHeight
 
127
                        spacing: units.gu(0.5)
 
128
 
 
129
                        Image {
 
130
                            id: imgFavourite
 
131
                            anchors.verticalCenter: labelTime.verticalCenter
 
132
                            fillMode: Image.PreserveAspectCrop
 
133
                            source: Qt.resolvedUrl("/img/qml/icons/favorite-selected.svg")
 
134
                            sourceSize.height: model.favourite == "1" ? units.gu(1.5) : 0
 
135
                            visible: model.favourite == "1"
 
136
                        }
 
137
 
 
138
                        Label {
 
139
                            id: labelTime
 
140
                            text: DateUtils.formatRelativeTime(i18n, model.pubdate)
 
141
                            fontSize: "x-small"
 
142
                            width: parent.width - units.gu(2)
 
143
                            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
 
144
                            opacity: 0.6
 
145
                        }
 
146
                    } // Row
 
147
 
 
148
                    Label {
 
149
                        id: labelTitle
 
150
                        objectName: "label_title"
 
151
 
 
152
                        text: model.title
 
153
                        anchors {
 
154
                            left: parent.left
 
155
                            right: parent.right
 
156
                        }
 
157
                        height: parent.height - parent.spacing * 2 - labelTime.paintedHeight - labelFeedname.paintedHeight
 
158
                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
 
159
                        fontSize: "small"
 
160
                        textFormat: Text.PlainText
 
161
                        font.weight: Font.DemiBold
 
162
                        elide: Text.ElideRight
 
163
                        maximumLineCount: 2
 
164
                        opacity: model.status == "1" ? 0.4 : 0.8
 
165
                    }
 
166
 
 
167
                    Label {
 
168
                        id: labelFeedname
 
169
                        objectName: "labelFeedname"
 
170
 
 
171
                        text: model.feed_name
 
172
                        fontSize: "x-small"
 
173
                        anchors {
 
174
                            left: parent.left
 
175
                            right: parent.right
 
176
                        }
 
177
                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
 
178
                        opacity: 0.6
 
179
                    }
 
180
                } // Column
 
181
 
 
182
                MouseArea {
 
183
                    anchors.fill: parent
 
184
                    onClicked: {
 
185
                        if (mainView.isTabletMode)
 
186
                            pageItself.showArticle(model.index)
 
187
                        else mainView.showArticle(listViewModel, model.index)
 
188
                    }
 
189
                }
 
190
            }
 
191
        } //Rectangle
 
192
    } // Component
 
193
 
 
194
    ListView {
 
195
        id: articleList
 
196
 
 
197
        clip: true
 
198
        width: mainView.isTabletMode ? units.gu(50) : parent.width
 
199
        height: parent.height
 
200
        visible: true
 
201
        model: listViewModel
 
202
 
 
203
        delegate: listModeDelegate
 
204
 
 
205
        section {
 
206
            criteria: ViewSection.FullString
 
207
            property: isShorts ? "tagId" : "feedId"
 
208
            // labelPositioning: ViewSection.CurrentLabelAtStart | ViewSection.InlineLabels
 
209
 
 
210
            delegate: ListItems.Standard {
 
211
 
 
212
                ListItems.ThinDivider {}
 
213
 
 
214
                height: units.gu(5)
 
215
                text: textBySection()
 
216
 
 
217
                function textBySection() {
 
218
                    var s = section
 
219
 
 
220
                    if (listViewModel == null) {
 
221
                        return ""
 
222
                    }
 
223
 
 
224
                    if (isShorts) {
 
225
                        for (var i = 0; i < listViewModel.count; i++) {
 
226
                            if (listViewModel.get(i).tagId == s) {
 
227
                                return listViewModel.get(i).tagName
 
228
                            }
 
229
                        }
 
230
                    } else {
 
231
                        for (var i = 0; i < listViewModel.count; i++) {
 
232
                            if (listViewModel.get(i).feedId == s) {
 
233
                                return listViewModel.get(i).feed_name
 
234
                            }
 
235
                        }
 
236
                    }
 
237
 
 
238
                    return ""
 
239
                }
 
240
            }
 
241
        } // section
 
242
    } // ListView
 
243
} // Page