Merge lp:~pkunal-parmar/ubuntu-calendar-app/new_month_yearview into lp:ubuntu-calendar-app

Proposed by Kunal Parmar
Status: Merged
Approved by: Olivier Tilloy
Approved revision: 101
Merged at revision: 108
Proposed branch: lp:~pkunal-parmar/ubuntu-calendar-app/new_month_yearview
Merge into: lp:ubuntu-calendar-app
Diff against target: 730 lines (+254/-332)
6 files modified
MonthComponent.qml (+132/-80)
MonthView.qml (+65/-199)
YearView.qml (+41/-30)
calendar.qml (+10/-22)
dateExt.js (+5/-0)
tests/autopilot/calendar_app/tests/test_monthview.py (+1/-1)
To merge this branch: bzr merge lp:~pkunal-parmar/ubuntu-calendar-app/new_month_yearview
Reviewer Review Type Date Requested Status
Ubuntu Phone Apps Jenkins Bot continuous-integration Approve
Olivier Tilloy (community) Approve
Riccardo Padovani (community) Approve
Review via email: mp+183305@code.launchpad.net

Commit message

MonthView and YearView changed according to new design

Description of the change

MonthView and YearView changed according to new design

To post a comment you must log in.
Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :
review: Approve (continuous-integration)
Revision history for this message
Riccardo Padovani (rpadovani) wrote :

Thanks for your time and the big patch Kunal!

Looking to the design guideline I have noticed some things:
- Page 4 of UDS presentation: In the year view also the name of the month is in the rounded box
- Page 4 of UDS presentation: In the year view there is a label, on right of the name of the month, with the year
- There is no animation when you click on a month
- Page 5 of UDS presentation: In the month view also the name of the month is in the rounded box
- Page 5 of UDS presentation: In the year view there is a label, on right of the name of the month, with the year
- Page 5 of UDS presentation: There is no current date in design guideline, in month view

Also, when you switch tab from month to year, start month is Jan, I think that the start month has to be the current one.

However, they are details, great job Kunal!

review: Needs Fixing
Revision history for this message
Kunal Parmar (pkunal-parmar) wrote :

HI Riccardo, Thanks for review.

Yes, currently I designed according to old visual, I just got UDS PPT with new Visual, I will be updating it the views.

And yes, Animation is not going to be implemented now. Design team is going to refine them.

"Also, when you switch tab from month to year, start month is Jan, I think that the start month has to be the current one."

You mean if its current year then scroll to current month , else JAN ?
As such its not defined, but that makes sense.

Revision history for this message
Olivier Tilloy (osomon) wrote :

I second Riccardo, that looks really good!

One minor remark:

    506 + text: Qt.formatDateTime( new Date(),"d MMMM yyyy");

The format string should probably be internationalized, with a comment for translators.

Revision history for this message
Riccardo Padovani (rpadovani) wrote :

Hi Kunal,
just see your last commit, now looks perfect ;)

Awesome work!

> You mean if its current year then scroll to current month , else JAN ?

Yes, exactly!

review: Approve
Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :
review: Needs Fixing (continuous-integration)
Revision history for this message
Kunal Parmar (pkunal-parmar) wrote :

> Thanks for your time and the big patch Kunal!
>
> Looking to the design guideline I have noticed some things:
> - Page 4 of UDS presentation: In the year view also the name of the month is
> in the rounded box
> - Page 4 of UDS presentation: In the year view there is a label, on right of
> the name of the month, with the year
> - There is no animation when you click on a month
> - Page 5 of UDS presentation: In the month view also the name of the month is
> in the rounded box
> - Page 5 of UDS presentation: In the year view there is a label, on right of
> the name of the month, with the year
> - Page 5 of UDS presentation: There is no current date in design guideline, in
> month view
>
> Also, when you switch tab from month to year, start month is Jan, I think that
> the start month has to be the current one.
>
> However, they are details, great job Kunal!

Hi, I addressed your comments except scrolling one and animation. I will create another merge request for scrolling to current month. I need some time for that. and animation we are not focusing right now.

Revision history for this message
Kunal Parmar (pkunal-parmar) wrote :

> I second Riccardo, that looks really good!
>
> One minor remark:
>
> 506 + text: Qt.formatDateTime( new Date(),"d MMMM yyyy");
>
> The format string should probably be internationalized, with a comment for
> translators.

Hi, I just changed looks according to new visuals from UDS. As per that there is not Today label anymore. So i just removed it.

Hoe that's fine.

Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :
review: Needs Fixing (continuous-integration)
Revision history for this message
Olivier Tilloy (osomon) wrote :

Looks pretty good!

One minor glitch that I’ve noticed: in the year view, today is marked selected both in the current month and in the previous month (happens because the previous month also displays a few days from the current month, greyed out).
I think today should be marked selected only in the current month.

review: Needs Fixing
Revision history for this message
Olivier Tilloy (osomon) wrote :

Another not so minor issue: in the month view, days are shifted by one, i.e. with my current locale settings (fr_FR) the month view displays the first of September as a Monday, whereas it was a Sunday. This is a regression compared to the current implementation, which correctly displays the first of September as a Sunday.

The year view is also affected, so this is a bug, but not a regression as the bug was already present in the year view in the current implementation.

review: Needs Fixing
Revision history for this message
Kunal Parmar (pkunal-parmar) wrote :

> Another not so minor issue: in the month view, days are shifted by one, i.e.
> with my current locale settings (fr_FR) the month view displays the first of
> September as a Monday, whereas it was a Sunday. This is a regression compared
> to the current implementation, which correctly displays the first of September
> as a Sunday.
>
> The year view is also affected, so this is a bug, but not a regression as the
> bug was already present in the year view in the current implementation.

Tried to fix, it looks fine to me, Can you confirm ?

Revision history for this message
Kunal Parmar (pkunal-parmar) wrote :

> Looks pretty good!
>
> One minor glitch that I’ve noticed: in the year view, today is marked selected
> both in the current month and in the previous month (happens because the
> previous month also displays a few days from the current month, greyed out).
> I think today should be marked selected only in the current month.

Fixed, please check

Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :
review: Needs Fixing (continuous-integration)
Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :
review: Needs Fixing (continuous-integration)
Revision history for this message
Olivier Tilloy (osomon) wrote :

> > Another not so minor issue: in the month view, days are shifted by one, i.e.
> > with my current locale settings (fr_FR) the month view displays the first
> of
> > September as a Monday, whereas it was a Sunday. This is a regression
> compared
> > to the current implementation, which correctly displays the first of
> September
> > as a Sunday.
> >
> > The year view is also affected, so this is a bug, but not a regression as
> the
> > bug was already present in the year view in the current implementation.
>
> Tried to fix, it looks fine to me, Can you confirm ?

I can confirm this is fixed. Thanks!

Revision history for this message
Olivier Tilloy (osomon) wrote :

> > Looks pretty good!
> >
> > One minor glitch that I’ve noticed: in the year view, today is marked
> selected
> > both in the current month and in the previous month (happens because the
> > previous month also displays a few days from the current month, greyed out).
> > I think today should be marked selected only in the current month.
>
> Fixed, please check

Works. Thanks!

Revision history for this message
Olivier Tilloy (osomon) wrote :

Looks pretty good and works well. Nice job!

review: Approve
Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :
review: Approve (continuous-integration)
Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :
review: Needs Fixing (continuous-integration)
Revision history for this message
Olivier Tilloy (osomon) wrote :

There is a conflict when merging into the latest trunk, can you resolve it and push a new revision?

101. By Kunal Parmar

Trunk code merged

Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :
review: Approve (continuous-integration)

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'MonthComponent.qml'
2--- MonthComponent.qml 2013-09-03 00:51:30 +0000
3+++ MonthComponent.qml 2013-09-03 23:46:33 +0000
4@@ -5,103 +5,155 @@
5
6 Item{
7 id: root
8- property var date;
9-
10- signal monthSelected(var date);
11+ objectName: "MonthComponent"
12+
13+ property var monthDate;
14+
15+ property string dayLabelFontSize: "medium"
16+ property string dateLabelFontSize: "large"
17+ property string monthLabelFontSize: "large"
18+ property string yearLabelFontSize: "medium"
19
20 property alias dayLabelDelegate : dayLabelRepeater.delegate
21 property alias dateLabelDelegate : dateLabelRepeater.delegate
22
23- objectName: "MonthComponent"
24-
25- width: monthGrid.width
26- height: monthGrid.height + units.gu(0.5)+ monthName.height
27-
28- MouseArea{
29+ signal dateSelected(var date)
30+
31+ height: ubuntuShape.height
32+
33+ UbuntuShape {
34+ id: ubuntuShape
35+
36 anchors.fill: parent
37- onClicked: {
38- root.monthSelected( root.date );
39- }
40- }
41-
42- Label{
43- id: monthName
44- width: parent.width
45- horizontalAlignment: Text.AlignHCenter
46- font.bold: true
47- text: {
48- Qt.locale().standaloneMonthName(root.date.getMonth())
49- }
50- }
51-
52- Row{
53- id: dayLabelRow
54- anchors.top: monthName.bottom
55- anchors.topMargin: units.gu(0.5)
56- spacing: units.gu(0.5)
57- width: parent.width
58- Repeater{
59- id: dayLabelRepeater
60- model:7
61- delegate: dafaultDayLabelComponent
62- }
63- }
64-
65- Grid{
66- id: monthGrid
67- property var monthStart: DateExt.getFirstDateofWeek(root.date.getFullYear(),root.date.getMonth())
68-
69- rows: DateExt.weekCount(root.date.getFullYear(), root.date.getMonth())
70- columns: 7
71- spacing: units.gu(0.5)
72-
73- anchors.top: dayLabelRow.bottom
74- anchors.topMargin: units.gu(0.5)
75-
76- Repeater{
77- id: dateLabelRepeater
78- model: monthGrid.rows * monthGrid.columns
79- delegate: defaultDateLabelComponent
80+ radius: "medium"
81+
82+ Column{
83+ id: column
84+
85+ anchors.top: parent.top
86+ anchors.topMargin: units.gu(1.5)
87+ anchors.fill: parent
88+ spacing: units.gu(1.5)
89+
90+ Item{
91+ id: monthHeader
92+ width: parent.width
93+ height: monthLabel.height
94+
95+ Label{
96+ id: monthLabel
97+ fontSize: monthLabelFontSize
98+ text: Qt.locale().standaloneMonthName(root.monthDate.getMonth())
99+ anchors.leftMargin: units.gu(1)
100+ anchors.left: parent.left
101+ //color:"white"
102+ anchors.verticalCenter: parent.verticalCenter
103+ }
104+
105+ Label{
106+ id: yearLabel
107+ fontSize: yearLabelFontSize
108+ text: root.monthDate.getFullYear()
109+ anchors.right: parent.right
110+ anchors.rightMargin: units.gu(1)
111+ color:"#AEA79F"
112+ anchors.verticalCenter: parent.verticalCenter
113+ }
114+ }
115+
116+ Row{
117+ id: dayLabelRow
118+ width: parent.width
119+ anchors.horizontalCenter: parent.horizontalCenter
120+
121+ Repeater{
122+ id: dayLabelRepeater
123+ model:7
124+ delegate: dafaultDayLabelComponent
125+ }
126+ }
127+
128+ Grid{
129+ id: monthGrid
130+
131+ property int weekCount : 6
132+ property var monthStart: root.monthDate.weekStart( Qt.locale().firstDayOfWeek )
133+
134+ width: parent.width
135+ height: parent.height - monthHeader.height - dayLabelRow.height - units.gu(3)
136+
137+ rows: weekCount
138+ columns: 7
139+
140+ Repeater{
141+ id: dateLabelRepeater
142+ model: monthGrid.rows * monthGrid.columns
143+ delegate: defaultDateLabelComponent
144+ }
145+ }
146 }
147 }
148
149 Component{
150 id: defaultDateLabelComponent
151
152- Text {
153- id: dateLabel
154-
155- property var day: parent.monthStart.addDays(index)
156- property var isToday: day.isSameDay(intern.now)
157- property bool isPaddingDate: day.getMonth() != root.date.getMonth()
158-
159- text: day.getDate()
160- horizontalAlignment: Text.AlignHCenter
161- width: dummy.width
162- height: dummy.height
163- font.pointSize: dummy.font.pointSize
164- color: isToday ? Color.ubuntuOrange : (isPaddingDate ? Color.warmGrey : dummy.color)
165- scale: isToday ? 1.5 : 1.
166+ Item{
167+ id: dateRootItem
168+
169+ property var date: parent.monthStart.addDays(index);
170+ property bool isCurrentMonth: DateExt.isSameMonth(root.monthDate,date)
171+
172+ width: parent.width / 7;
173+ height: parent.height / parent.weekCount
174+
175+ UbuntuShape{
176+ id: highLightRect
177+
178+ width: parent.width
179+ height: width
180+ anchors.centerIn: parent
181+
182+ color: "white"
183+ visible: date.isSameDay(DateExt.today()) && isCurrentMonth
184+ }
185+
186+ Label{
187+ id: dateLabel
188+ anchors.centerIn: parent
189+ text: date.getDate()
190+ horizontalAlignment: Text.AlignHCenter
191+ fontSize: root.dateLabelFontSize
192+ color: {
193+ if( date.isSameDay(DateExt.today()) && isCurrentMonth ) {
194+ "#2C001E"
195+ } else if( parent.isCurrentMonth ) {
196+ "#333333"
197+ } else {
198+ "#AEA79F"
199+ }
200+ }
201+ }
202+
203+ MouseArea{
204+ anchors.fill: parent
205+ onClicked: {
206+ root.dateSelected(date);
207+ }
208+ }
209 }
210 }
211
212 Component{
213 id: dafaultDayLabelComponent
214- Text{
215- //FIXME: how to get localized day initial ?
216- text: Qt.locale().standaloneDayName( (intern.weekstartDay + index), Locale.ShortFormat).charAt(0)
217+
218+ Label{
219+ id: weekDay
220+ width: parent.width / 7
221+ property var day :Qt.locale().standaloneDayName(( Qt.locale().firstDayOfWeek + index), Locale.ShortFormat)
222+ text: day.toUpperCase();
223 horizontalAlignment: Text.AlignHCenter
224- width: dummy.width
225- height: dummy.height
226- font.pointSize: dummy.font.pointSize
227- font.bold: true
228+ fontSize: root.dayLabelFontSize
229+ color: "#AEA79F"
230 }
231 }
232-
233- Text{
234- id: dummy
235- text: "00"
236- visible: false
237- font.pointSize: 7.5
238- }
239 }
240
241=== modified file 'MonthView.qml'
242--- MonthView.qml 2013-08-04 02:26:31 +0000
243+++ MonthView.qml 2013-09-03 23:46:33 +0000
244@@ -3,204 +3,70 @@
245 import "dateExt.js" as DateExt
246 import "colorUtils.js" as Color
247
248-ListView {
249- id: monthView
250-
251- // FIXME: change monthview to use this date as start date
252- property alias startDay: intern.currentDayStart
253-
254- readonly property var monthStart: currentItem != null ? currentItem.monthStart : (new Date()).monthStart()
255- readonly property var monthEnd: currentItem != null ? currentItem.monthEnd : (new Date()).monthStart().addMonths(1)
256- readonly property var currentDayStart: intern.currentDayStart
257-
258- property bool compressed: false
259- readonly property real compressedHeight: intern.squareUnit + intern.verticalMargin * 2
260- readonly property real expandedHeight: intern.squareUnit * 6 + intern.verticalMargin * 2
261-
262- signal incrementCurrentDay
263- signal decrementCurrentDay
264-
265- signal gotoNextMonth(int month)
266- signal focusOnDay(var dayStart)
267-
268- onCurrentItemChanged: {
269- if (currentItem == null) {
270- intern.currentDayStart = intern.currentDayStart
271- return
272- }
273- if (currentItem.monthStart <= intern.currentDayStart && intern.currentDayStart < currentItem.monthEnd)
274- return
275- if (currentItem.monthStart <= intern.today && intern.today < currentItem.monthEnd)
276- intern.currentDayStart = intern.today
277- else
278- intern.currentDayStart = currentItem.monthStart
279- }
280-
281- onIncrementCurrentDay: {
282- var t = intern.currentDayStart.addDays(1)
283- if (t < monthEnd) {
284- intern.currentDayStart = t
285- }
286- else if (currentIndex < count - 1) {
287- intern.currentDayStart = t
288- currentIndex = currentIndex + 1
289- }
290- }
291-
292- onDecrementCurrentDay: {
293- var t = intern.currentDayStart.addDays(-1)
294- if (t >= monthStart) {
295- intern.currentDayStart = t
296- }
297- else if (currentIndex > 0) {
298- intern.currentDayStart = t
299- currentIndex = currentIndex - 1
300- }
301- }
302-
303- onGotoNextMonth: {
304- if (monthStart.getMonth() != month) {
305- var i = intern.monthIndex0, m = intern.today.getMonth()
306- while (m != month) {
307- m = (m + 1) % 12
308- i = i + 1
309- }
310- currentIndex = i
311- }
312- }
313-
314- onFocusOnDay: {
315- if (dayStart < monthStart) {
316- if (currentIndex > 0) {
317- intern.currentDayStart = dayStart
318- currentIndex = currentIndex - 1
319- }
320- }
321- else if (dayStart >= monthEnd) {
322- if (currentIndex < count - 1) {
323- intern.currentDayStart = dayStart
324- currentIndex = currentIndex + 1
325- }
326- }
327- else intern.currentDayStart = dayStart
328- }
329-
330- function goToToday() {
331- var today = (new Date()).midnight();
332- intern.currentDayStart = today
333- currentIndex= intern.monthIndex0
334- }
335-
336- focus: true
337- Keys.onLeftPressed: decrementCurrentDay()
338- Keys.onRightPressed: incrementCurrentDay()
339-
340- QtObject {
341- id: intern
342-
343- property int squareUnit: monthView.width / 8
344- property int verticalMargin: units.gu(1)
345- property int weekstartDay: Qt.locale().firstDayOfWeek
346- property int monthCount: 49 // months for +-2 years
347-
348- property var today: (new Date()).midnight() // TODO: update at midnight
349- property var currentDayStart: today
350- property int monthIndex0: Math.floor(monthCount / 2)
351- property var monthStart0: today.monthStart()
352- }
353-
354- width: parent.width
355- height: compressed ? compressedHeight : expandedHeight
356-
357- interactive: !compressed
358- clip: true
359- orientation: ListView.Horizontal
360- snapMode: ListView.SnapOneItem
361- cacheBuffer: width + 1
362-
363- highlightRangeMode: ListView.StrictlyEnforceRange
364- preferredHighlightBegin: 0
365- preferredHighlightEnd: width
366-
367- model: intern.monthCount
368- currentIndex: intern.monthIndex0
369-
370- delegate: Item {
371- id: monthItem
372-
373- property var monthStart: intern.monthStart0.addMonths(index - intern.monthIndex0)
374- property var monthEnd: monthStart.addMonths(1)
375- property var gridStart: monthStart.weekStart(intern.weekstartDay)
376- property int currentWeekRow: Math.floor((currentDayStart.getTime() - gridStart.getTime()) / Date.msPerWeek)
377-
378- width: monthView.width
379- height: monthView.height
380-
381- Grid {
382- id: monthGrid
383-
384- rows: 6
385- columns: 7
386-
387- x: intern.squareUnit / 2
388- y: intern.verticalMargin
389- width: intern.squareUnit * columns
390- height: intern.squareUnit * rows
391-
392- Repeater {
393- model: monthGrid.rows * monthGrid.columns
394- delegate: Item {
395- id: dayItem
396- property var dayStart: gridStart.addDays(index)
397- property bool isCurrentMonth: monthStart <= dayStart && dayStart < monthEnd
398- property bool isToday: dayStart.getTime() === intern.today.getTime()
399- property bool isCurrent: dayStart.getTime() === intern.currentDayStart.getTime()
400- property int weekday: (index % 7 + intern.weekstartDay) % 7
401- property bool isSunday: weekday == 0
402- property int row: Math.floor(index / 7)
403- property bool isCurrentWeek: row == currentWeekRow
404- property real topMargin: (row == 0 || (monthView.compressed && isCurrentWeek)) ? -intern.verticalMargin : 0
405- property real bottomMargin: (row == 5 || (monthView.compressed && isCurrentWeek)) ? -intern.verticalMargin : 0
406- visible: monthView.compressed ? isCurrentWeek : true
407- width: intern.squareUnit
408- height: intern.squareUnit
409- Rectangle {
410- visible: isSunday
411- anchors.fill: parent
412- anchors.topMargin: dayItem.topMargin
413- anchors.bottomMargin: dayItem.bottomMargin
414- color: Color.warmGrey
415- opacity: 0.1
416- }
417- Text {
418- anchors.centerIn: parent
419- text: dayStart.getDate()
420- font: themeDummy.font
421- color: isToday ? Color.ubuntuOrange : themeDummy.color
422- scale: isCurrent ? 1.8 : 1.
423- opacity: isCurrentMonth ? 1. : 0.3
424- Behavior on scale {
425- NumberAnimation { duration: 50 }
426- }
427- }
428- MouseArea {
429- anchors.fill: parent
430- anchors.topMargin: dayItem.topMargin
431- anchors.bottomMargin: dayItem.bottomMargin
432- onReleased: monthView.focusOnDay(dayStart)
433- }
434- // Component.onCompleted: console.log(dayStart, intern.currentDayStart)
435- }
436- }
437- }
438-
439- // Component.onCompleted: console.log("Created delegate for month", index, monthStart, gridStart, currentWeekRow, currentWeekRowReal)
440- }
441-
442- Label {
443- visible: false
444- id: themeDummy
445- fontSize: "large"
446- // Component.onCompleted: console.log(color, Qt.lighter(color, 1.74))
447+Page {
448+ id: monthViewPage
449+
450+ property var currentMonth: DateExt.today();
451+
452+ signal dateSelected(var date);
453+
454+ PathViewBase{
455+ id: monthViewPath
456+
457+ property var startMonth: addMonth(currentMonth,-1);
458+
459+ anchors.top:parent.top
460+
461+ width:parent.width
462+ height: parent.height
463+
464+ onNextItemHighlighted: {
465+ nextMonth();
466+ }
467+
468+ onPreviousItemHighlighted: {
469+ previousMonth();
470+ }
471+
472+ function nextMonth() {
473+ currentMonth = addMonth(currentMonth,1);
474+ }
475+
476+ function previousMonth(){
477+ currentMonth = addMonth(currentMonth,-1);
478+ }
479+
480+ function addMonth(date,month){
481+ var temp = new Date(date.getFullYear(),date.getMonth(),1,0,0,0);
482+ temp.setMonth(date.getMonth() + month);
483+ return temp;
484+ }
485+
486+ delegate: MonthComponent{
487+ width: parent.width - units.gu(5)
488+ height: parent.height - units.gu(5)
489+
490+ monthDate: getMonthDate();
491+
492+ function getMonthDate() {
493+ //previous page
494+ if (index === monthViewPath.currentIndex) {
495+ return monthViewPath.startMonth;
496+ }
497+
498+ //next page
499+ var previousIndex = monthViewPath.currentIndex > 0 ? monthViewPath.currentIndex - 1 : 2
500+ if ( index === previousIndex ) {
501+ return monthViewPath.addMonth(monthViewPath.startMonth,2);
502+ }
503+
504+ //current page
505+ return monthViewPath.addMonth(monthViewPath.startMonth,1);
506+ }
507+
508+ onDateSelected: {
509+ monthViewPage.dateSelected(date);
510+ }
511+ }
512 }
513 }
514
515=== modified file 'YearView.qml'
516--- YearView.qml 2013-07-09 14:35:09 +0000
517+++ YearView.qml 2013-09-03 23:46:33 +0000
518@@ -1,20 +1,23 @@
519 import QtQuick 2.0
520 import Ubuntu.Components 0.1
521
522+import "dateExt.js" as DateExt
523+
524 PathViewBase {
525 id: root
526
527+ property var currentYear: DateExt.today();
528+
529+ signal monthSelected(var date);
530+
531 anchors.fill: parent
532- property var year: getDateFromYear(intern.now.getFullYear()-1);
533-
534- signal monthSelected(var date);
535
536 onNextItemHighlighted: {
537- year = getDateFromYear(year.getFullYear() + 1);
538+ currentYear = getDateFromYear(currentYear.getFullYear() + 1);
539 }
540
541 onPreviousItemHighlighted: {
542- year = getDateFromYear(year.getFullYear() - 1);
543+ currentYear = getDateFromYear(currentYear.getFullYear() - 1);
544 }
545
546 function getDateFromYear(year) {
547@@ -23,54 +26,62 @@
548
549 QtObject{
550 id: intern
551- property var now: new Date()
552- property int weekstartDay: Qt.locale().firstDayOfWeek
553+ property var startYear: getDateFromYear(currentYear.getFullYear()-1);
554 }
555
556- delegate: Item{
557+ delegate: Flickable{
558 id: yearView
559-
560- property var year: {
561+ clip: true
562+
563+ property var year: getYear();
564+
565+ function getYear(){
566 if (index === root.currentIndex) {
567- return root.year;
568+ return intern.startYear;
569 }
570 var previousIndex = root.currentIndex > 0 ? root.currentIndex - 1 : 2
571
572 if ( index === previousIndex ) {
573- return getDateFromYear(root.year.getFullYear()-1);
574+ return getDateFromYear(intern.startYear.getFullYear() - 1);
575 }
576
577- return getDateFromYear(root.year.getFullYear()+ 1);
578+ return getDateFromYear(intern.startYear.getFullYear() + 1);
579 }
580
581 width: parent.width
582 height: parent.height
583
584- Label{
585- id: yearLabel
586- text: year.getFullYear()
587- fontSize: "large"
588- anchors.horizontalCenter: parent.horizontalCenter
589- font.bold: true
590- }
591+ contentHeight: yearGrid.height + units.gu(2)
592+ contentWidth: width
593
594 Grid{
595 id: yearGrid
596- rows: 4
597- columns: 3
598-
599- width: parent.width
600- height: parent.height
601- anchors.top: yearLabel.bottom
602- spacing: units.gu(2.5)
603+ rows: 6
604+ columns: 2
605+
606+ anchors.top: parent.top
607+ anchors.topMargin: units.gu(1.5)
608+
609+ width: parent.width - ((columns-1) * yearGrid.spacing)
610+ spacing: units.gu(2)
611+ anchors.horizontalCenter: parent.horizontalCenter
612
613 Repeater{
614 model: yearGrid.rows * yearGrid.columns
615 delegate: MonthComponent{
616- date: new Date(year.getFullYear(),index,1,0,0,0,0)
617+ monthDate: new Date(yearView.year.getFullYear(),index,1,0,0,0,0)
618+ width: (parent.width - units.gu(2))/2
619+ height: width * 1.5
620+ dayLabelFontSize:"x-small"
621+ dateLabelFontSize: "medium"
622+ monthLabelFontSize: "medium"
623+ yearLabelFontSize: "small"
624
625- onMonthSelected: {
626- root.monthSelected(date);
627+ MouseArea{
628+ anchors.fill: parent
629+ onClicked: {
630+ root.monthSelected(monthDate);
631+ }
632 }
633 }
634 }
635
636=== modified file 'calendar.qml'
637--- calendar.qml 2013-08-20 14:32:27 +0000
638+++ calendar.qml 2013-09-03 23:46:33 +0000
639@@ -24,8 +24,8 @@
640 property var currentDay: DateExt.today();
641
642 onCurrentDayChanged: {
643- if( monthView.startDay !== undefined && !monthView.startDay.isSameDay(currentDay))
644- monthView.startDay = currentDay.midnight();
645+ if( monthView.currentMonth !== undefined && !monthView.currentMonth.isSameDay(currentDay))
646+ monthView.currentMonth = currentDay.midnight();
647
648 if( !dayView.currentDay.isSameDay(currentDay))
649 dayView.currentDay = currentDay
650@@ -60,7 +60,6 @@
651 text: i18n.tr("Today");
652 onTriggered: {
653 tabPage.currentDay = (new Date()).midnight();
654- monthView.goToToday();
655 }
656 }
657 }
658@@ -76,13 +75,12 @@
659 YearView{
660 onMonthSelected: {
661 tabs.selectedTabIndex = 1
662- var now = new Date();
663+ var now = DateExt.today();
664 if( date.getMonth() === now.getMonth()
665 && date.getFullYear() === now.getFullYear()) {
666- monthView.goToToday();
667+ monthView.currentMonth = now
668 } else {
669- monthView.startDay = date.midnight();
670- monthView.gotoNextMonth(date.getMonth());
671+ monthView.currentMonth = date.midnight();
672 }
673 }
674 }
675@@ -91,24 +89,14 @@
676 Tab {
677 id: monthTab
678 title: i18n.tr("Month")
679- page: Page{
680+ page: MonthView{
681 anchors.fill: parent
682 tools: commonToolBar
683- Column {
684- anchors.fill: parent
685- Label{
686- id: monthLabel
687- fontSize: "large"
688- text: Qt.formatDateTime(monthView.startDay,"MMMM yyyy");
689- }
690+ id: monthView
691
692- MonthView {
693- id: monthView
694- onFocusOnDay: {
695- tabs.selectedTabIndex = 3
696- tabPage.currentDay = dayStart;
697- }
698- }
699+ onDateSelected: {
700+ tabs.selectedTabIndex = 3
701+ tabPage.currentDay = date;
702 }
703 }
704 }
705
706=== modified file 'dateExt.js'
707--- dateExt.js 2013-09-03 01:52:17 +0000
708+++ dateExt.js 2013-09-03 23:46:33 +0000
709@@ -104,3 +104,8 @@
710 date.setHours(0,0,0,0);
711 return date
712 }
713+
714+function isSameMonth(date1, date2) {
715+ return ( date1.getMonth() === date2.getMonth()
716+ && date1.getFullYear() === date2.getFullYear())
717+}
718
719=== modified file 'tests/autopilot/calendar_app/tests/test_monthview.py'
720--- tests/autopilot/calendar_app/tests/test_monthview.py 2013-08-28 16:19:06 +0000
721+++ tests/autopilot/calendar_app/tests/test_monthview.py 2013-09-03 23:46:33 +0000
722@@ -24,7 +24,7 @@
723
724 def get_currentDayStart(self):
725 month_view = self.main_view.get_month_view()
726- return datetime.fromtimestamp(month_view.currentDayStart)
727+ return datetime.fromtimestamp(month_view.currentMonth)
728
729 def change_month(self, delta):
730 month_view = self.main_view.get_month_view()

Subscribers

People subscribed via source and target branches

to status/vote changes: