← Back to branch summary

~pkunal-parmar/ubuntu-calendar-app/Minor-Performance

« back to all changes in this revision

Viewing changes to MonthComponent.qml

  • Committer: Kunal Parmar
  • Date: 2014-01-18 03:06:49 UTC
  • mfrom: (182 ubuntu-calendar-app)
  • mto: This revision was merged to the branch mainline in revision 186.
  • Revision ID: pkunal.parmar@gmail.com-20140118030649-ziqq655e89lqc3id
merge from trunk

Show diffs side-by-side

added added

removed removed

Lines of Context:
MonthComponent.qml
1
 
/*
2
 
 * Copyright (C) 2013-2014 Canonical Ltd
3
 
 *
4
 
 * This file is part of Ubuntu Calendar App
5
 
 *
6
 
 * Ubuntu Calendar App is free software: you can redistribute it and/or modify
7
 
 * it under the terms of the GNU General Public License version 3 as
8
 
 * published by the Free Software Foundation.
9
 
 *
10
 
 * Ubuntu Calendar App is distributed in the hope that it will be useful,
11
 
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
12
 
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
13
 
 * GNU General Public License for more details.
14
 
 *
15
 
 * You should have received a copy of the GNU General Public License
16
 
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
17
 
 */
18
 
import QtQuick 2.3
19
 
import Ubuntu.Components 1.1
 
1
import QtQuick 2.0
 
2
import Ubuntu.Components 0.1
20
3
import "dateExt.js" as DateExt
21
4
import "colorUtils.js" as Color
22
5
 
24
7
    id: root
25
8
    objectName: "MonthComponent"
26
9
 
27
 
    property bool isCurrentItem;
28
 
 
29
 
    property bool showEvents: false
30
 
 
31
 
    property var currentMonth;
32
 
    property var isYearView;
 
10
    property var monthDate;
33
11
 
34
12
    property string dayLabelFontSize: "medium"
35
13
    property string dateLabelFontSize: "large"
39
17
    property alias dayLabelDelegate : dayLabelRepeater.delegate
40
18
    property alias dateLabelDelegate : dateLabelRepeater.delegate
41
19
 
42
 
    signal monthSelected(var date);
43
20
    signal dateSelected(var date)
44
21
 
45
 
    //creatng timer only if we need to show events in month
46
 
    Loader {
47
 
        id: timerLoader
48
 
        sourceComponent: showEvents ? timerComp : undefined
49
 
    }
50
 
 
51
 
    // Timer to delay creation of Model, There seems some problem fetching events if we create Model immediatly
52
 
    Component {
53
 
        id: timerComp
54
 
        Timer{
55
 
           interval: 200; running: true; repeat: false
56
 
           onTriggered: {
57
 
                modelLoader.sourceComponent = modelComponent
58
 
           }
59
 
        }
60
 
    }
61
 
 
62
 
    Loader{
63
 
        id: modelLoader
64
 
    }
65
 
 
66
 
    Component{
67
 
        id: modelComponent
68
 
        EventListModel {
69
 
            id: mainModel
70
 
            startPeriod: intern.monthStart.midnight();
71
 
            endPeriod: intern.monthStart.addDays((/*monthGrid.rows * cols */ 42 )-1).endOfDay()
72
 
            filter: eventModel.filter
73
 
            onModelChanged: {
74
 
                intern.eventStatus = Qt.binding(function() { return mainModel.containsItems(startPeriod, endPeriod, 86400/*24*60*60*/)});
75
 
            }
76
 
        }
77
 
    }
78
 
 
79
 
    QtObject{
80
 
        id: intern
81
 
 
82
 
        property var eventStatus;
83
 
 
84
 
        property int curMonthDate: currentMonth.getDate()
85
 
        property int curMonth: currentMonth.getMonth()
86
 
        property int curMonthYear: currentMonth.getFullYear()
87
 
 
88
 
        property var today: DateExt.today()
89
 
        property int todayDate: today.getDate()
90
 
        property int todayMonth: today.getMonth()
91
 
        property int todayYear: today.getFullYear()
92
 
 
93
 
        //date from month will start, this date might be from previous month
94
 
        property var monthStart: currentMonth.weekStart( Qt.locale().firstDayOfWeek )
95
 
        property int monthStartDate: monthStart.getDate()
96
 
        property int monthStartMonth: monthStart.getMonth()
97
 
        property int monthStartYear: monthStart.getFullYear()
98
 
 
99
 
        property int daysInStartMonth: Date.daysInMonth(monthStartYear, monthStartMonth)
100
 
        property int daysInCurMonth:  Date.daysInMonth(curMonthYear,curMonth)
101
 
 
102
 
        //check if current month is start month
103
 
        property bool isCurMonthStartMonth: curMonthDate === monthStartDate
104
 
                                            && curMonth === monthStartMonth
105
 
                                            && curMonthYear === monthStartYear
106
 
 
107
 
        //check current month is same as today's month
108
 
        property bool isCurMonthTodayMonth: todayYear === curMonthYear && todayMonth == curMonth
109
 
        //offset from current month's first date to start date of current month
110
 
        property int offset: isCurMonthStartMonth ? -1 : (daysInStartMonth - monthStartDate)
111
 
 
112
 
        property int dateFontSize: FontUtils.sizeToPixels(root.dateLabelFontSize)
113
 
        property int dayFontSize: FontUtils.sizeToPixels(root.dayLabelFontSize)
114
 
    }
115
 
 
116
 
    Column{
117
 
        id: column
118
 
 
119
 
        anchors {
120
 
            fill: parent
121
 
            topMargin: units.gu(1.5)
122
 
            bottomMargin: units.gu(1)
123
 
        }
124
 
 
125
 
        spacing: units.gu(1.5)
126
 
 
127
 
        ViewHeader{
128
 
            id: monthHeader
129
 
            month: intern.curMonth
130
 
            year: intern.curMonthYear
131
 
 
132
 
            monthLabelFontSize: root.monthLabelFontSize
133
 
            yearLabelFontSize: root.yearLabelFontSize
134
 
            visible: isYearView === true
135
 
        }
136
 
 
137
 
        Item {
138
 
            width: parent.width
139
 
            height: dayLabelRow.height + units.gu(1)
140
 
 
141
 
            DayHeaderBackground{}
142
 
 
143
 
            Row{
144
 
                id: dayLabelRow
145
 
                width: parent.width
146
 
                anchors.horizontalCenter: parent.horizontalCenter
147
 
                anchors.verticalCenter: parent.verticalCenter
148
 
                property int dayWidth: width / 7;
 
22
    height: ubuntuShape.height
 
23
 
 
24
    UbuntuShape {
 
25
        id: ubuntuShape
 
26
 
 
27
        anchors.fill: parent
 
28
        radius: "medium"
 
29
 
 
30
        Column{
 
31
            id: column
 
32
 
 
33
            anchors.top: parent.top
 
34
            anchors.topMargin: units.gu(1.5)
 
35
            anchors.bottomMargin: units.gu(1)
 
36
            anchors.fill: parent
 
37
            spacing: units.gu(1.5)
 
38
 
 
39
            ViewHeader{
 
40
                id: monthHeader
 
41
                date: root.monthDate
 
42
                monthLabelFontSize: root.monthLabelFontSize
 
43
                yearLabelFontSize: root.yearLabelFontSize
 
44
            }
 
45
 
 
46
            Item {
 
47
                width: parent.width
 
48
                height: dayLabelRow.height + units.gu(1)
 
49
 
 
50
                DayHeaderBackground{}
 
51
 
 
52
                Row{
 
53
                    id: dayLabelRow
 
54
                    width: parent.width
 
55
                    anchors.horizontalCenter: parent.horizontalCenter
 
56
                    anchors.verticalCenter: parent.verticalCenter
 
57
 
 
58
                    Repeater{
 
59
                        id: dayLabelRepeater
 
60
                        model:7
 
61
                        delegate: dafaultDayLabelComponent
 
62
                    }
 
63
                }
 
64
            }
 
65
 
 
66
            Grid{
 
67
                id: monthGrid
 
68
                objectName: "monthGrid"
 
69
 
 
70
                property int weekCount : 6
 
71
                property var monthStart: root.monthDate.weekStart( Qt.locale().firstDayOfWeek )
 
72
 
 
73
                width: parent.width
 
74
                height: parent.height - monthHeader.height - dayLabelRow.height - units.gu(3)
 
75
 
 
76
                rows: weekCount
 
77
                columns: 7
149
78
 
150
79
                Repeater{
151
 
                    id: dayLabelRepeater
152
 
                    model:7
153
 
                    delegate: dafaultDayLabelComponent
 
80
                    id: dateLabelRepeater
 
81
                    model: monthGrid.rows * monthGrid.columns
 
82
                    delegate: defaultDateLabelComponent
154
83
                }
155
84
            }
156
85
        }
157
 
 
158
 
        Grid{
159
 
            id: monthGrid
160
 
            objectName: "monthGrid"
161
 
 
162
 
            width: parent.width
163
 
            height: parent.height - monthGrid.y
164
 
 
165
 
            property int dayWidth: width / 7 /*cols*/;
166
 
            property int dayHeight: height / 6/*rows*/;
167
 
 
168
 
            rows: 6
169
 
            columns: 7
170
 
 
171
 
            Repeater{
172
 
                id: dateLabelRepeater
173
 
                model: 42 //monthGrid.rows * monthGrid.columns
174
 
                delegate: defaultDateLabelComponent
175
 
            }
176
 
        }
177
86
    }
178
87
 
179
88
    Component{
180
89
        id: defaultDateLabelComponent
181
 
        MonthComponentDateDelegate{
182
 
            date: {
183
 
                //try to find date from index and month's first week's first date
184
 
                var temp = intern.daysInStartMonth - intern.offset + index
185
 
                //date exceeds days in startMonth,
186
 
                //this means previous month is over and we are now in current month
187
 
                //to get actual date we need to remove number of days in startMonth
188
 
                if( temp > intern.daysInStartMonth ) {
189
 
                    temp = temp - intern.daysInStartMonth
190
 
                    //date exceeds days in current month
191
 
                    // this means date is from next month
192
 
                    //to get actual date we need to remove number of days in current month
193
 
                    if( temp > intern.daysInCurMonth ) {
194
 
                        temp = temp - intern.daysInCurMonth
 
90
 
 
91
        Item{
 
92
            id: dateRootItem
 
93
 
 
94
            property var date: parent.monthStart.addDays(index);
 
95
            property bool isCurrentMonth: DateExt.isSameMonth(root.monthDate,date)
 
96
 
 
97
            width: parent.width / 7;
 
98
            height: parent.height / parent.weekCount
 
99
 
 
100
            Loader {
 
101
                width: parent.width
 
102
                height: width
 
103
                anchors.centerIn: parent
 
104
                sourceComponent: date.isSameDay(DateExt.today()) && isCurrentMonth ? highLightComp : undefined
 
105
            }
 
106
 
 
107
            Label{
 
108
                id: dateLabel
 
109
                anchors.centerIn: parent
 
110
                text: date.getDate()
 
111
                horizontalAlignment: Text.AlignHCenter
 
112
                fontSize: root.dateLabelFontSize
 
113
                color: {
 
114
                    if( date.isSameDay(DateExt.today()) && isCurrentMonth ) {
 
115
                        "#2C001E"
 
116
                    } else if( parent.isCurrentMonth ) {
 
117
                        "white"
 
118
                    } else {
 
119
                        "#AEA79F"
195
120
                    }
196
121
                }
197
 
                return temp;
198
 
            }
199
 
 
200
 
            isCurrentMonth: {
201
 
                //remove offset from index
202
 
                //if index falls in 1 to no of days in current month
203
 
                //then date is inside current month
204
 
                var temp = index - intern.offset
205
 
                return (temp >= 1 && temp <= intern.daysInCurMonth)
206
 
            }
207
 
 
208
 
            isToday: intern.todayDate == date && intern.isCurMonthTodayMonth
209
 
 
210
 
            width: parent.dayWidth
211
 
            height: parent.dayHeight
212
 
            fontSize: intern.dateFontSize
213
 
        }
214
 
    }
215
 
 
216
 
    Component{
217
 
        id: eventIndicatorComp
218
 
        Rectangle {
219
 
            width: units.gu(1)
220
 
            height: width
221
 
            radius: height/2
222
 
            color:"#5E2750"
 
122
            }
 
123
 
 
124
            MouseArea{
 
125
                anchors.fill: parent
 
126
                onClicked: {
 
127
                    root.dateSelected(date);
 
128
                }
 
129
            }
223
130
        }
224
131
    }
225
132
 
228
135
 
229
136
        Label{
230
137
            id: weekDay
231
 
            width: parent.dayWidth
 
138
            width: parent.width / 7
232
139
            property var day :Qt.locale().standaloneDayName(( Qt.locale().firstDayOfWeek + index), Locale.ShortFormat)
233
 
            text: isYearView ? day.charAt(0) : day;
 
140
            text: day.toUpperCase();
234
141
            horizontalAlignment: Text.AlignHCenter
235
 
            font.pixelSize: intern.dayFontSize
236
 
            color: "white"
 
142
            fontSize: root.dayLabelFontSize
 
143
            color: "#AEA79F"
237
144
        }
238
145
    }
239
146
 
240
147
    Component{
241
148
        id: highLightComp
242
149
        UbuntuShape{
243
 
            color: "#DD4814"
 
150
            color: "white"
244
151
        }
245
152
    }
246
153
}