~majster-pl/ubuntu-calendar-app/new-agenda-view

« back to all changes in this revision

Viewing changes to AgendaView.qml

  • Committer: Szymon Waliczek
  • Date: 2016-03-01 23:13:20 UTC
  • Revision ID: majsterrr@gmail.com-20160301231320-9tab6e8w9ra0p9mq
Code cleanup, event header Label replaced with ItemListLayout, remove import of dateExt.js

Show diffs side-by-side

added added

removed removed

Lines of Context:
19
19
import QtQuick 2.4
20
20
import QtOrganizer 5.0
21
21
import Ubuntu.Components 1.3
22
 
import "dateExt.js" as DateExt
23
22
import "./3rd-party/lunar.js" as Lunar
24
23
 
25
24
Page{
27
26
    objectName: "AgendaView"
28
27
 
29
28
    property var currentDay: new Date()
30
 
 
31
29
    signal dateSelected(var date);
32
30
 
33
31
    Keys.forwardTo: [eventList]
35
33
    function goToBeginning() {
36
34
        eventList.positionViewAtBeginning();
37
35
    }
38
 
 
39
36
    function hasEnabledCalendars() {
40
37
        var enabled_calendars = eventListModel.getCollections().filter( function( item ) {
41
38
            return item.extendedMetaData( "collection-selected" );
60
57
    // ListModel to hold all events for upcoming 7days.
61
58
    EventListModel {
62
59
        id: eventListModel
 
60
        objectName: "eventListModel"
 
61
 
63
62
        startPeriod: currentDay.midnight();
64
63
        endPeriod: currentDay.addDays(7).endOfDay()
65
64
        filter: eventModel.filter
66
 
 
67
65
        sortOrders: [
68
66
            SortOrder{
69
67
                blankPolicy: SortOrder.BlanksFirst
74
72
        ]
75
73
    }
76
74
 
77
 
    // spinner while agenda is loading.
 
75
    // spinner. running while agenda is loading.
78
76
    ActivityIndicator {
 
77
        z:2
79
78
        visible: running
80
79
        running: eventListModel.isLoading
81
80
        anchors.centerIn: parent
82
 
        z:2
83
81
    }
84
82
 
85
 
    // Label to be showen when there is no upcoming events or if no calendar is selected.
 
83
    // Label to be shown when there is no upcoming events or if no calendar is selected.
86
84
    Label {
87
85
        id: noEventsOrCalendarsLabel
 
86
        objectName: "noEventsOrCalendarsLabel"
 
87
 
 
88
        anchors.centerIn: parent
 
89
        visible: (eventListModel.itemCount === 0) && !eventListModel.isLoading
88
90
        text: !root.hasEnabledCalendars() ? i18n.tr("You have no calendars enabled") : i18n.tr( "No upcoming events" )
89
 
        visible: (eventListModel.itemCount === 0) && !eventListModel.isLoading
90
 
        anchors.centerIn: parent
91
91
    }
92
92
 
93
 
    // button to be showen when no calendar is selected (onClick will take user to list of all calendars)
 
93
    // button to be shown when no calendar is selected (onClick will take user to list of all calendars)
94
94
    Button {
 
95
        anchors {
 
96
            top: noEventsOrCalendarsLabel.bottom;
 
97
            horizontalCenter: noEventsOrCalendarsLabel.horizontalCenter;
 
98
            topMargin: units.gu(1.5)
 
99
        }
 
100
        color: UbuntuColors.orange
 
101
        visible: !root.hasEnabledCalendars()
95
102
        text: i18n.tr( "Enable calendars" )
96
 
        visible: !root.hasEnabledCalendars()
97
 
        anchors.top: noEventsOrCalendarsLabel.bottom
98
 
        anchors.horizontalCenter: noEventsOrCalendarsLabel.horizontalCenter
99
 
        anchors.topMargin: units.gu( 1.5 )
100
 
        color: UbuntuColors.orange
101
103
 
102
104
        onClicked: {
103
105
            pageStack.push(Qt.resolvedUrl("CalendarChoicePopup.qml"),{"model":eventModel});
109
111
    ListView{
110
112
        id: eventList
111
113
        objectName: "eventList"
112
 
        model: eventListModel
 
114
 
113
115
        anchors.fill: parent
114
116
        visible: eventListModel.itemCount > 0
115
 
 
 
117
        model: eventListModel
116
118
        delegate: listDelegate
117
119
    }
118
120
 
128
130
 
129
131
        // Main item to hold listitem delegate.
130
132
        Item {
131
 
            id: root
132
133
            property var event: eventListModel.items[index];
133
 
 
134
134
            property var prevEvent: eventListModel.items[index-1];
135
135
            property var date: event.startDateTime.toLocaleDateString()
136
136
            property var startTime: event.startDateTime.toLocaleTimeString(Qt.locale(), Locale.ShortFormat)
137
137
            property var endTime: event.endDateTime.toLocaleTimeString(Qt.locale(), Locale.ShortFormat)
138
138
            property var lunarDate: Lunar.calendar.solar2lunar(event.startDateTime.getFullYear(),event.startDateTime.getMonth() + 1,event.startDateTime.getDate())
139
139
 
140
 
 
141
140
            width: parent.width
142
 
            height: container.height
 
141
            height: eventContainer.height
143
142
 
144
 
            // main Column to hold   header (date) and details (time, Description and location)
 
143
            // main Column to hold   header-(date) and event details-(start/end time, Description and location)
145
144
            Column {
146
 
                id: container
 
145
                id: eventContainer
147
146
                objectName: "eventContainer" + index
148
147
 
149
148
                width: parent.width
150
149
                anchors.top: parent.top
151
150
 
152
 
                // Header ListItem eg. ( Friday, October 29th 2015 )
 
151
                // header ListItem eg. ( Friday, October 29th 2015 )
153
152
                ListItem {
154
 
                    id: headerContainer
155
 
                    height: visible ? header.height + units.gu(3) : 0
156
153
                    width: parent.width
 
154
                    height: visible ? units.gu(4) : 0
 
155
                    color: "#F7F7F7"
 
156
                    highlightColor: "#EDEDED"
157
157
                    visible: index === 0 ? true : prevEvent === undefined ? false : prevEvent.startDateTime.midnight() < event.startDateTime.midnight() ? true : false
158
 
                    color: "#f7f7f7"
159
 
                    highlightColor: "#ededed"
160
 
                    // Label to hold string with date eg. ( Friday, October 29th 2015 )
161
 
                    Label{
162
 
                        id: header
163
 
                        fontSize: "medium"
164
 
                        width: parent.width
165
 
                        elide: Text.ElideRight
166
 
                        color: event.startDateTime.toLocaleDateString() === new Date().toLocaleDateString() ? UbuntuColors.orange : UbuntuColors.darkGrey
167
 
                        anchors {
168
 
                            left: parent.left
169
 
                            leftMargin: units.gu(3)
170
 
                            verticalCenter: parent.verticalCenter
171
 
                        }
172
 
                        text: mainView.displayLunarCalendar ? "".concat(lunarDate.gzYear, lunarDate .IMonthCn, lunarDate.IDayCn, lunarDate.gzDay,
173
 
                                                                        lunarDate.isTerm ? lunarDate.Term : "") : date.charAt(0).toUpperCase() + date.slice(1)
174
158
 
 
159
                    ListItemLayout {
 
160
                        id: listitemlayout
 
161
                        padding.top: units.gu(1)
 
162
                        title.text: mainView.displayLunarCalendar ? "".concat(lunarDate.gzYear, lunarDate .IMonthCn, lunarDate.IDayCn, lunarDate.gzDay,
 
163
                                                                              lunarDate.isTerm ? lunarDate.Term : "") : date.charAt(0).toUpperCase() + date.slice(1)
 
164
                        title.color: event.startDateTime.toLocaleDateString() === new Date().toLocaleDateString() ? UbuntuColors.orange : UbuntuColors.darkGrey
175
165
                    }
176
 
                    // onClicked new page with dayle view will open.
 
166
 
 
167
                    // onClicked new page with daily view will open.
177
168
                    onClicked: {
178
169
                        Haptics.play()
179
170
                        dateSelected(event.startDateTime);
181
172
 
182
173
                }
183
174
 
184
 
                // Main ListItem to hold Details about event eg. ( 19:30 -   Beer with the team )
 
175
                // Main ListItem to hold details about event eg. ( 19:30 -   Beer with the team )
185
176
                //                                               ( 20:00     Hicter             )
186
177
                ListItem {
187
178
                    id: detailsListItem
 
179
 
188
180
                    width: parent.width
189
181
                    height: detailsListitemlayout.height
190
182
                    color: "white"
191
 
                    highlightColor: "#f7f7f7"
 
183
                    highlightColor: "#F7F7F7"
192
184
 
193
185
                    ListItemLayout {
194
186
                        id: detailsListitemlayout
 
187
 
195
188
                        title.font.bold: true
 
189
                        title.text: event.displayLabel ? event.displayLabel : i18n.tr("no event name set")
196
190
                        subtitle.font.pixelSize: title.font.pixelSize
197
191
                        subtitle.text: event.location ? event.location : i18n.tr("no location")
198
 
                        subtitle.color: event.location ? UbuntuColors.coolGrey : "#b3b3b3"
 
192
                        subtitle.color: event.location ? UbuntuColors.coolGrey : "#B3B3B3"
199
193
                        subtitle.font.italic: event.location ? false : true
200
 
                        title.text: event.displayLabel ? event.displayLabel : i18n.tr("no event name set")
201
194
 
202
195
 
203
196
                        // item to hold SlotsLayout.Leading items: timeStart timeEnad and little calendar indication icon.
204
197
                        Item {
205
198
                            width: timeLabelStart.width + units.gu(2)
206
199
                            height: parent.height
207
 
                            //as we want to position labels to align with title and subtitle
208
200
                            SlotsLayout.overrideVerticalPositioning: true
209
201
                            SlotsLayout.position: SlotsLayout.Leading
210
202
 
211
203
                            // Little icon in left top corner of every event to indicate color of the calendar.
212
204
                            UbuntuShape {
213
205
                                id: calendarIndicator
 
206
 
214
207
                                anchors.verticalCenter: parent.verticalCenter
215
208
                                width: units.gu(1)
216
209
                                height: width
218
211
                                backgroundColor: eventListModel.collection(event.collectionId).color
219
212
                            }
220
213
 
221
 
                            // start event Label
 
214
                            // start time event Label
222
215
                            Label {
223
216
                                id: timeLabelStart
224
 
                                anchors {
225
 
                                    left: calendarIndicator.right
226
 
                                    leftMargin: units.gu(1)
227
 
                                }
 
217
 
 
218
                                anchors {left: calendarIndicator.right; leftMargin: units.gu(1)}
228
219
                                fontSize: "small"
229
220
                                y: detailsListitemlayout.mainSlot.y + detailsListitemlayout.title.y
230
221
                                   + detailsListitemlayout.title.baselineOffset - baselineOffset
231
222
                                text: startTime.concat('-')
232
223
                            }
233
224
 
234
 
                            // finish event Label
 
225
                            // finish time event Label
235
226
                            Label {
236
227
                                id: timeLabelEnd
237
 
                                anchors {
238
 
                                    left: calendarIndicator.right
239
 
                                    leftMargin: units.gu(1)
240
 
                                }
 
228
 
 
229
                                anchors {left: calendarIndicator.right; leftMargin: units.gu(1)}
241
230
                                fontSize: "small"
242
231
                                y: detailsListitemlayout.mainSlot.y + detailsListitemlayout.subtitle.y
243
232
                                   + detailsListitemlayout.subtitle.baselineOffset - baselineOffset;
247
236
 
248
237
                    }
249
238
 
250
 
                    // onClicked open new edit event page.
 
239
                    // new page will open to edit selected event
251
240
                    onClicked: {
252
241
                        Haptics.play()
253
242
                        pageStack.push(Qt.resolvedUrl("EventDetails.qml"), {"event":event,"model":eventListModel});