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

Proposed by Kunal Parmar on 2014-11-20
Status: Merged
Approved by: Nicholas Skaggs on 2015-01-08
Approved revision: 557
Merged at revision: 565
Proposed branch: lp:~pkunal-parmar/ubuntu-calendar-app/NewDayView-Final
Merge into: lp:ubuntu-calendar-app
Diff against target: 1026 lines (+477/-335)
9 files modified
AllDayEventComponent.qml (+55/-35)
DayView.qml (+64/-103)
EventBubble.qml (+2/-0)
HeaderDateComponent.qml (+1/-0)
TimeLineBaseComponent.qml (+109/-77)
TimeLineHeader.qml (+148/-25)
TimeLineHeaderComponent.qml (+21/-5)
WeekView.qml (+70/-86)
tests/autopilot/calendar_app/tests/test_weekview.py (+7/-4)
To merge this branch: bzr merge lp:~pkunal-parmar/ubuntu-calendar-app/NewDayView-Final
Reviewer Review Type Date Requested Status
Nekhelesh Ramananthan Approve on 2015-01-08
Nicholas Skaggs Approve on 2015-01-08
Ubuntu Phone Apps Jenkins Bot continuous-integration Approve on 2015-01-08
Mihir Soni 2014-11-20 Needs Fixing on 2014-11-24
Review via email: mp+242346@code.launchpad.net

Commit Message

Required changed for new dayview and weekview

Description of the Change

Required changed for new dayview and weekview

To post a comment you must log in.
Mihir Soni (mihirsoni) wrote :

Hi Kunal ,

I am testing this MP and found that multiple events on same time are not visible.

Create two events on same time and see , only one event is visible in day view while in agenda view there are two events.

review: Needs Fixing
Kunal Parmar (pkunal-parmar) wrote :

Hi, thanks,

I will have a look, but we need to merge below MR first.

https://code.launchpad.net/~pkunal-parmar/ubuntu-calendar-app/NewTimeLineBg/+merge/242339

Can you have a look on that first.

Nekhelesh Ramananthan (nik90) wrote :

> Hi, thanks,
>
> I will have a look, but we need to merge below MR first.
>
> https://code.launchpad.net/~pkunal-parmar/ubuntu-calendar-
> app/NewTimeLineBg/+merge/242339
>
> Can you have a look on that first.

If that's the case can you add that MP as a prerequisite to this? You will have to resubmit this and in the form fill in the above branch as prerequisite branch. Don't worry, all the comments etc, will be preserved.

Launchpad will then hide the code diff of the other MP changes in this MP making it a tiny bit easier to review.

Nekhelesh Ramananthan (nik90) wrote :

On preliminary testing I noticed the following issues,

- I keep seeing the error message "file:///opt/click.ubuntu.com/com.ubuntu.calendar/0.4.latest/dateExt.js:105: TypeError: Cannot call method 'getDate' of undefined"

- [REGRESSION] Both week and day view don't show mulitple events occurring at the same time. Agenda view shows it properly.

- [REGRESSION] "Go To Today" functionality does not work when the user is in the same week but looking at different date. For instance today is the 24th Nov. Navigate to Nov 28th and then press today. Notice that it doesn't work.

review: Needs Fixing
Mihir Soni (mihirsoni) wrote :

Hi Kunal,

Could you add one more sign on timeline bar in as it has been shown in presentation.

We have to add > filled sign in timeline bar.

Reference :- https://docs.google.com/presentation/d/14NIPecPFKb_8Ad3O4suEGJqVOw9bC4n0s63uWalbZ98/edit#slide=id.g4160a5a3b_021

review: Needs Fixing
Kunal Parmar (pkunal-parmar) wrote :

> Hi Kunal,
>
> Could you add one more sign on timeline bar in as it has been shown in
> presentation.
>
> We have to add > filled sign in timeline bar.
>
> Reference :- https://docs.google.com/presentation/d/14NIPecPFKb_8Ad3O4suEGJqVO
> w9bC4n0s63uWalbZ98/edit#slide=id.g4160a5a3b_021

This, I will not address in this MR, its already quite big.
May be you can create BUG with Bitesize tag ?

Kunal Parmar (pkunal-parmar) wrote :

> On preliminary testing I noticed the following issues,
>
> - I keep seeing the error message
> "file:///opt/click.ubuntu.com/com.ubuntu.calendar/0.4.latest/dateExt.js:105:
> TypeError: Cannot call method 'getDate' of undefined"
>
> - [REGRESSION] Both week and day view don't show mulitple events occurring at
> the same time. Agenda view shows it properly.
>
> - [REGRESSION] "Go To Today" functionality does not work when the user is in
> the same week but looking at different date. For instance today is the 24th
> Nov. Navigate to Nov 28th and then press today. Notice that it doesn't work.

Thanks, will address those

553. By Kunal Parmar on 2014-11-29

merge from trunk and conflick resolved

554. By Kunal Parmar on 2014-11-29

temp commit

555. By Kunal Parmar on 2014-11-29

mutiday event issue resolved

Kunal Parmar (pkunal-parmar) wrote :

> On preliminary testing I noticed the following issues,
>
> - I keep seeing the error message
> "file:///opt/click.ubuntu.com/com.ubuntu.calendar/0.4.latest/dateExt.js:105:
> TypeError: Cannot call method 'getDate' of undefined"

This is resolved now

>
> - [REGRESSION] Both week and day view don't show mulitple events occurring at
> the same time. Agenda view shows it properly.

This was not issue with this MR itself, looks like something changed in SDK or Qt, and it was messing up Z order of events. But now fixed this as well.

>
> - [REGRESSION] "Go To Today" functionality does not work when the user is in
> the same week but looking at different date. For instance today is the 24th
> Nov. Navigate to Nov 28th and then press today. Notice that it doesn't work.

This is not regression. Its new requirement and needs to be implemented.
Previously on week view when we press today, we were going to current week. This happens now also.
But now we are showing not whole week but only portion of week, we are not able to see current day.

So again, we need to implment this but I am not going to address this in this branch. Will adress this in another MR once this is merged.

Kunal Parmar (pkunal-parmar) wrote :

I need to address AP, but I guess we can still do the code review.

556. By Kunal Parmar on 2014-11-29

fixed test_current_week_is_selected

557. By Kunal Parmar on 2014-11-29

pep8 resolved

Nicholas Skaggs (nskaggs) wrote :

Kunal, can you expand on what this branch is intended to change? What's desired?

Kunal Parmar (pkunal-parmar) wrote :

> Kunal, can you expand on what this branch is intended to change? What's
> desired?

Hi Nick,

Please refer following new desing.
https://docs.google.com/presentation/d/14NIPecPFKb_8Ad3O4suEGJqVOw9bC4n0s63uWalbZ98/edit#slide=id.g4160a5a3b_021

I implemented new weekview and dayview design and behavior.

So now, week view shows 3 days's event and user can scroll horizontal to view remanining days.
User can also scroll vertically for scroll in different time.

Day view only design is changed.

Let me know if you need more details.

Nicholas Skaggs (nskaggs) :
review: Approve
Nekhelesh Ramananthan (nik90) wrote :

@kunal,

I tested this branch and it fixes 2 of the regressions that I mentioned in https://code.launchpad.net/~pkunal-parmar/ubuntu-calendar-app/NewDayView-Final/+merge/242346/comments/597728.

I also noticed that the 3 regression has been fixed in another branch of yours.

With that I am approving this MP. Nice work!

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'AllDayEventComponent.qml'
2--- AllDayEventComponent.qml 2014-10-24 14:30:20 +0000
3+++ AllDayEventComponent.qml 2014-11-30 07:34:00 +0000
4@@ -22,23 +22,16 @@
5 import "dateExt.js" as DateExt
6 import "ViewType.js" as ViewType
7
8-Item {
9+Row {
10 id: root
11
12+ property var startDay: DateExt.today();
13+ property int type: ViewType.ViewTypeWeek
14 property var allDayEvents;
15- property var startDay: DateExt.today();
16 property var model;
17
18- property int type: ViewType.ViewTypeWeek
19-
20 width: parent.width
21-
22- anchors {
23- left :parent.left
24- right: parent.right
25- leftMargin: type == ViewType.ViewTypeDay ? units.gu(6) : 0
26- rightMargin: type == ViewType.ViewTypeDay ? units.gu(3): 0
27- }
28+ height: units.gu(5)
29
30 function getAllDayEvents(startDate, endDate) {
31 var map = {};
32@@ -69,34 +62,46 @@
33
34 Repeater{
35 model: type == ViewType.ViewTypeWeek ? 7 : 1
36- delegate: Button {
37+ delegate: Item {
38 id: allDayButton
39
40 property var events;
41- gradient: UbuntuColors.orangeGradient
42-
43- x: type === ViewType.ViewTypeWeek ? root.width/7*index : 0
44- height: units.gu(3)
45- clip: true
46- width: parent.width/ (type == ViewType.ViewTypeWeek ? 7 : 1)
47- visible: !allDayButton.events || allDayButton.events.length === 0 ? false : true
48-
49- onClicked: {
50- if(!allDayButton.events || allDayButton.events.length === 0) {
51- return;
52- }
53-
54- if(type == ViewType.ViewTypeWeek) {
55- PopupUtils.open(popoverComponent, root,{"events": allDayButton.events})
56- } else {
57- if( allDayButton.events.length > 1 ) {
58+
59+ height: units.gu(5)
60+ width: parent.width / (type == ViewType.ViewTypeWeek ? 7 : 1)
61+
62+ MouseArea {
63+ anchors.fill: parent
64+ onClicked: {
65+ if(!allDayButton.events || allDayButton.events.length === 0) {
66+ return;
67+ }
68+
69+ if(type == ViewType.ViewTypeWeek) {
70 PopupUtils.open(popoverComponent, root,{"events": allDayButton.events})
71 } else {
72- pageStack.push(Qt.resolvedUrl("EventDetails.qml"),{"event":allDayButton.events[0],"model": root.model});
73+ if( allDayButton.events.length > 1 ) {
74+ PopupUtils.open(popoverComponent, root,{"events": allDayButton.events})
75+ } else {
76+ pageStack.push(Qt.resolvedUrl("EventDetails.qml"),{"event":allDayButton.events[0],"model": root.model});
77+ }
78 }
79 }
80 }
81
82+ Loader {
83+ id: eventLabelLoader
84+ anchors.fill: parent
85+ sourceComponent : !allDayButton.events || allDayButton.events.length === 0 ? undefined : eventComponent
86+ }
87+
88+ Loader{
89+ objectName: "divider"
90+ height: parent.height
91+ width: units.gu(0.15)
92+ sourceComponent: root.type == ViewType.ViewTypeWeek ? dividerComponent : undefined
93+ }
94+
95 Connections{
96 target: root
97 onAllDayEventsChanged:{
98@@ -106,7 +111,6 @@
99 events = allDayEvents[key];
100
101 if(!events || events.length === 0) {
102- text = "";
103 return;
104 }
105
106@@ -115,13 +119,13 @@
107 // on a given day. "Ev." is short form for "Events".
108 // Please keep the translation of "Ev." to 3 characters only, as the week view
109 // where it's shown has limited space
110- text = i18n.tr("%1 ev.").arg(events.length)
111+ eventLabelLoader.item.text = i18n.tr("%1 ev.").arg(events.length)
112 } else {
113 if( events.length > 1) {
114- // TRANSLATORS: the argument refers to the number of all day events
115- text = i18n.tr("%1 all day event", "%1 all day events", events.length).arg(events.length)
116+ // TRANSLATORS: the argument refers to the number of all day events
117+ eventLabelLoader.item.text = i18n.tr("%1 all day event", "%1 all day events", events.length).arg(events.length)
118 } else {
119- text = events[0].displayLabel;
120+ eventLabelLoader.item.text = events[0].displayLabel;
121 }
122 }
123 }
124@@ -129,6 +133,22 @@
125 }
126 }
127
128+
129+ Component{
130+ id: eventComponent
131+ Label {
132+ verticalAlignment: Text.AlignVCenter
133+ horizontalAlignment: Text.AlignHCenter
134+ }
135+ }
136+
137+ Component {
138+ id: dividerComponent
139+ SimpleDivider{
140+ anchors.fill: parent
141+ }
142+ }
143+
144 Component {
145 id: popoverComponent
146
147
148=== modified file 'DayView.qml'
149--- DayView.qml 2014-11-06 13:57:42 +0000
150+++ DayView.qml 2014-11-30 07:34:00 +0000
151@@ -60,115 +60,76 @@
152 }
153 }
154
155- Column {
156+ PathViewBase{
157+ id: dayViewPath
158+ objectName: "dayViewPath"
159+
160+ property var startDay: currentDay
161+ //This is used to scroll all view together when currentItem scrolls
162+ property var childContentY;
163+
164 anchors.fill: parent
165- anchors.topMargin: units.gu(1)
166- spacing: units.gu(1)
167-
168- TimeLineHeader{
169- id: dayHeader
170- objectName: "dayHeader"
171- type: ViewType.ViewTypeDay
172- currentDay: dayViewPage.currentDay
173-
174- onDateSelected: {
175- dayViewPage.currentDay = date;
176- dayViewPage.dateSelected(date);
177- }
178-
179- onCurrentDayChanged: {
180- date = dayViewPage.currentDay.weekStart(Qt.locale().firstDayOfWeek);
181- }
182-
183- function nextDay() {
184- if(currentDay >= date.addDays(7)) {
185- date = dayViewPage.currentDay.weekStart(Qt.locale().firstDayOfWeek);
186- dayHeader.incrementCurrentIndex();
187- }
188- }
189-
190- function previousDay() {
191- if( currentDay < date) {
192- date = dayViewPage.currentDay.weekStart(Qt.locale().firstDayOfWeek);
193- dayHeader.decrementCurrentIndex();
194- }
195- }
196- }
197-
198- PathViewBase{
199- id: dayViewPath
200- objectName: "dayViewPath"
201-
202- property var startDay: currentDay
203- //This is used to scroll all view together when currentItem scrolls
204- property var childContentY;
205-
206+
207+ onNextItemHighlighted: {
208+ //next day
209+ currentDay = currentDay.addDays(1);
210+ }
211+
212+ onPreviousItemHighlighted: {
213+ //previous day
214+ currentDay = currentDay.addDays(-1);
215+ }
216+
217+ delegate: Loader {
218 width: parent.width
219- height: dayViewPage.height - dayViewPath.y
220-
221- onNextItemHighlighted: {
222- //next day
223- currentDay = currentDay.addDays(1);
224- dayHeader.nextDay();
225- }
226-
227- onPreviousItemHighlighted: {
228- //previous day
229- currentDay = currentDay.addDays(-1);
230- dayHeader.previousDay();
231- }
232-
233- delegate: Loader {
234- width: parent.width
235- height: parent.height
236- asynchronous: index !== dayViewPath.currentIndex
237- sourceComponent: delegateComponent
238-
239- Component {
240- id: delegateComponent
241-
242- TimeLineBaseComponent {
243- id: timeLineView
244- objectName: "DayComponent-"+index
245-
246- type: ViewType.ViewTypeDay
247- anchors.fill: parent
248-
249- isActive: parent.PathView.isCurrentItem
250- contentInteractive: parent.PathView.isCurrentItem
251- startDay: dayViewPath.startDay.addDays(dayViewPath.indexType(index))
252- keyboardEventProvider: dayViewPath
253-
254- Component.onCompleted: {
255+ height: parent.height
256+ asynchronous: !dayViewPath.isCurrentItem
257+ sourceComponent: delegateComponent
258+
259+ Component {
260+ id: delegateComponent
261+
262+ TimeLineBaseComponent {
263+ id: timeLineView
264+ objectName: "DayComponent-"+index
265+
266+ type: ViewType.ViewTypeDay
267+ anchors.fill: parent
268+
269+ isActive: parent.PathView.isCurrentItem
270+ contentInteractive: parent.PathView.isCurrentItem
271+ startDay: dayViewPath.startDay.addDays(dayViewPath.indexType(index))
272+ keyboardEventProvider: dayViewPath
273+
274+ Component.onCompleted: {
275+ if(dayViewPage.isCurrentPage){
276+ timeLineView.scrollToCurrentTime();
277+ }
278+ }
279+
280+ Connections{
281+ target: dayViewPage
282+ onIsCurrentPageChanged:{
283 if(dayViewPage.isCurrentPage){
284 timeLineView.scrollToCurrentTime();
285 }
286 }
287-
288- Connections{
289- target: dayViewPage
290- onIsCurrentPageChanged:{
291- if(dayViewPage.isCurrentPage){
292- timeLineView.scrollToCurrentTime();
293- }
294- }
295- }
296-
297- //get contentY value from PathView, if its not current Item
298- Binding{
299- target: timeLineView
300- property: "contentY"
301- value: dayViewPath.childContentY;
302- when: !parent.PathView.isCurrentItem
303- }
304-
305- //set PathView's contentY property, if its current item
306- Binding{
307- target: dayViewPath
308- property: "childContentY"
309- value: contentY
310- when: parent.PathView.isCurrentItem
311- }
312+ }
313+
314+ //get contentY value from PathView, if its not current Item
315+ Binding{
316+ target: timeLineView
317+ property: "contentY"
318+ value: dayViewPath.childContentY;
319+ when: !parent.PathView.isCurrentItem
320+ }
321+
322+ //set PathView's contentY property, if its current item
323+ Binding{
324+ target: dayViewPath
325+ property: "childContentY"
326+ value: contentY
327+ when: parent.PathView.isCurrentItem
328 }
329 }
330 }
331
332=== modified file 'EventBubble.qml'
333--- EventBubble.qml 2014-11-04 19:08:24 +0000
334+++ EventBubble.qml 2014-11-30 07:34:00 +0000
335@@ -39,6 +39,8 @@
336 ? eventDetails.item.timeLabelHeight + /*top-bottom margin*/ units.gu(2)
337 : units.gu(2)
338
339+ z: depthInRow
340+
341 signal clicked(var event);
342
343 Rectangle{
344
345=== modified file 'HeaderDateComponent.qml'
346--- HeaderDateComponent.qml 2014-09-19 11:03:09 +0000
347+++ HeaderDateComponent.qml 2014-11-30 07:34:00 +0000
348@@ -49,6 +49,7 @@
349 id: dayLabel
350 objectName: "dayLabel"
351 text: Qt.locale().standaloneDayName(date.getDay(), dayFormat)
352+ font.bold: true
353 }
354
355 Label{
356
357=== modified file 'TimeLineBaseComponent.qml'
358--- TimeLineBaseComponent.qml 2014-12-11 20:21:48 +0000
359+++ TimeLineBaseComponent.qml 2014-11-30 07:34:00 +0000
360@@ -21,6 +21,7 @@
361 import Ubuntu.Components 1.1
362 import Ubuntu.Components.Popups 1.0
363 import QtOrganizer 5.0
364+
365 import "dateExt.js" as DateExt
366 import "ViewType.js" as ViewType
367
368@@ -29,7 +30,7 @@
369
370 property var keyboardEventProvider;
371
372- property var startDay: DateExt.today();
373+ property date startDay: DateExt.today();
374 property bool isActive: false
375 property alias contentY: timeLineView.contentY
376 property alias contentInteractive: timeLineView.interactive
377@@ -39,6 +40,8 @@
378 //visible hour
379 property int scrollHour;
380
381+ signal dateSelected(var date);
382+
383 function scrollToCurrentTime() {
384 var currentTime = new Date();
385 scrollHour = currentTime.getHours();
386@@ -54,7 +57,7 @@
387 onScrollUp:{
388 scrollHour--;
389 if( scrollHour < 0) {
390- scrollHour =0;
391+ scrollHour = 0;
392 }
393 scrollToHour();
394 }
395@@ -91,86 +94,115 @@
396 z:2
397 }
398
399- AllDayEventComponent {
400- id: allDayContainer
401- type: root.type
402- startDay: root.startDay
403- model: mainModel
404- z:1
405- Component.onCompleted: {
406- mainModel.addModelChangeListener(createAllDayEvents);
407- }
408- Component.onDestruction: {
409- mainModel.removeModelChangeListener(createAllDayEvents);
410- }
411- }
412-
413- Flickable {
414- id: timeLineView
415-
416- contentHeight: units.gu(8) * 24
417- contentWidth: width
418+ Column {
419 anchors.fill: parent
420
421- clip: true
422+ TimeLineHeader{
423+ id: header
424+ objectName: "viewHeader"
425+ startDay: root.startDay
426+ contentX: timeLineView.contentX
427+ type: root.type
428+
429+ onDateSelected: {
430+ root.dateSelected(date);
431+ }
432+ }
433+
434+ SimpleDivider{}
435
436 Row {
437 width: parent.width
438- height: timeLineView.contentHeight
439- TimeLineTimeScale{ id: timeScale }
440- TimeLineBackground { width: parent.width - x}
441- }
442-
443- Row {
444- id: week
445-
446- anchors {
447- fill: parent
448- leftMargin: type == ViewType.ViewTypeWeek ? units.gu(0)
449- : units.gu(6)
450-
451- rightMargin: type == ViewType.ViewTypeWeek ? units.gu(0)
452- : units.gu(3)
453- }
454-
455- Repeater {
456- model: type == ViewType.ViewTypeWeek ? 7 : 1
457-
458- delegate: TimeLineBase {
459- property int idx: index
460- anchors.top: parent.top
461- width: {
462- if( type == ViewType.ViewTypeWeek ) {
463- parent.width / 7
464- } else {
465- (parent.width)
466- }
467- }
468-
469- height: parent.height
470- delegate: comp
471- day: startDay.addDays(index)
472- model: mainModel
473-
474- Loader{
475- objectName: "weekdevider"
476- height: parent.height
477- width: units.gu(0.15)
478- sourceComponent: type == ViewType.ViewTypeWeek ? weekDeviderComponent : undefined
479- }
480-
481- Component {
482- id: weekDeviderComponent
483- Rectangle{
484- anchors.fill: parent
485- color: "#e5e2e2"
486- }
487- }
488-
489- Connections{
490- target: mainModel
491- onStartPeriodChanged:{
492- destroyAllChildren();
493+ height: parent.height - header.height
494+
495+ TimeLineTimeScale{
496+ contentY: timeLineView.contentY
497+ }
498+
499+ SimpleDivider{
500+ width: units.gu(0.1)
501+ height: parent.height
502+ }
503+
504+ Flickable {
505+ id: timeLineView
506+
507+ height: parent.height
508+ width: parent.width - units.gu(6)
509+
510+ boundsBehavior: Flickable.StopAtBounds
511+
512+ property int delegateWidth: {
513+ if( type == ViewType.ViewTypeWeek ) {
514+ width/3 - units.gu(1) /*partial visible area*/
515+ } else {
516+ width
517+ }
518+ }
519+
520+ contentHeight: units.gu(8) * 24
521+ contentWidth: {
522+ if( type == ViewType.ViewTypeWeek ) {
523+ delegateWidth*7
524+ } else {
525+ width
526+ }
527+ }
528+
529+ clip: true
530+
531+ TimeLineBackground{}
532+
533+ Row {
534+ id: week
535+ anchors.fill: parent
536+ Repeater {
537+ model: type == ViewType.ViewTypeWeek ? 7 : 1
538+
539+ delegate: TimeLineBase {
540+ property int idx: index
541+ anchors.top: parent.top
542+ width: {
543+ if( type == ViewType.ViewTypeWeek ) {
544+ parent.width / 7
545+ } else {
546+ (parent.width)
547+ }
548+ }
549+ height: parent.height
550+ delegate: comp
551+ day: startDay.addDays(index)
552+ model: mainModel
553+
554+ Component.onCompleted: {
555+ model.addModelChangeListener(destroyAllChildren);
556+ model.addModelChangeListener(createEvents);
557+ }
558+ Component.onDestruction: {
559+ model.removeModelChangeListener(destroyAllChildren);
560+ model.removeModelChangeListener(createEvents);
561+ }
562+
563+ Loader{
564+ objectName: "weekdevider"
565+ height: parent.height
566+ width: units.gu(0.15)
567+ sourceComponent: type == ViewType.ViewTypeWeek ? weekDividerComponent : undefined
568+ }
569+
570+ Component {
571+ id: weekDividerComponent
572+ SimpleDivider{
573+ anchors.fill: parent
574+ }
575+ }
576+
577+ Connections{
578+ target: mainModel
579+ onStartPeriodChanged:{
580+ destroyAllChildren();
581+ }
582+ }
583 }
584 }
585 }
586
587=== modified file 'TimeLineHeader.qml'
588--- TimeLineHeader.qml 2014-10-03 04:15:55 +0000
589+++ TimeLineHeader.qml 2014-11-30 07:34:00 +0000
590@@ -16,38 +16,161 @@
591 * along with this program. If not, see <http://www.gnu.org/licenses/>.
592 */
593
594-import QtQuick 2.3
595+import QtQuick 2.0
596 import Ubuntu.Components 1.1
597+import QtQuick.Layouts 1.1
598+
599 import "ViewType.js" as ViewType
600
601-PathViewBase {
602- id: header
603+Column {
604+ id: headerRoot
605
606 property int type: ViewType.ViewTypeWeek
607-
608- interactive: false
609- model:3
610-
611- height: units.gu(4)
612+ property date startDay;
613+ property double contentX;
614+
615+ signal dateSelected(var date);
616+
617 width: parent.width
618-
619- property var date;
620- property var currentDay;
621-
622- signal dateSelected(var date);
623-
624- delegate: TimeLineHeaderComponent{
625- type: header.type
626-
627- isCurrentItem: index == header.currentIndex
628- currentDay: header.currentDay
629-
630+ height: units.gu(10)
631+
632+ Row{
633 width: parent.width
634-
635- startDay: date.addDays(7*header.indexType(index))
636-
637- onDateSelected: {
638- header.dateSelected(date);
639+ height: parent.height
640+
641+ Column{
642+ id: labelColumn
643+ width : units.gu(6)
644+
645+ Label{
646+ id: weekNumLabel
647+ text: "W"+ root.startDay.weekNumber()
648+ fontSize: "small"
649+ height: units.gu(5)
650+ width: parent.width
651+ verticalAlignment: Text.AlignVCenter
652+ horizontalAlignment: Text.AlignHCenter
653+ }
654+
655+ SimpleDivider{}
656+
657+ Label {
658+ height: units.gu(5)
659+ text: i18n.tr("All Day");
660+ fontSize: "small"
661+ width: parent.width
662+ wrapMode: Text.WrapAtWordBoundaryOrAnywhere
663+ verticalAlignment: Text.AlignVCenter
664+ horizontalAlignment: Text.AlignHCenter
665+ }
666+ }
667+
668+ SimpleDivider{
669+ width: units.gu(0.1);
670+ height: parent.height
671+ }
672+
673+ Loader{
674+ id: headerLoader
675+ width: parent.width - labelColumn.width
676+ height: parent.height
677+
678+ sourceComponent: {
679+ if( root.type == ViewType.ViewTypeWeek ) {
680+ weekHeaderComponent
681+ } else {
682+ dayHeaderComponent
683+ }
684+ }
685+ }
686+ }
687+
688+ Component{
689+ id: dayHeaderComponent
690+
691+ Column{
692+ anchors.fill: parent
693+
694+ TimeLineHeaderComponent{
695+ width: parent.width
696+ height: units.gu(5)
697+ startDay: headerRoot.startDay
698+ type: ViewType.ViewTypeDay
699+
700+ onDateSelected: {
701+ headerRoot.dateSelected(date);
702+ }
703+ }
704+
705+ SimpleDivider{}
706+
707+ AllDayEventComponent {
708+ type: ViewType.ViewTypeDay
709+ startDay: headerRoot.startDay
710+ model: mainModel
711+ width: parent.width
712+ height: units.gu(5)
713+
714+ Component.onCompleted: {
715+ mainModel.addModelChangeListener(createAllDayEvents);
716+ }
717+ Component.onDestruction: {
718+ mainModel.removeModelChangeListener(createAllDayEvents);
719+ }
720+ }
721+ }
722+ }
723+
724+ Component{
725+ id: weekHeaderComponent
726+
727+ Flickable{
728+ anchors.fill: parent
729+ clip: true
730+ contentX: headerRoot.contentX
731+ interactive: false
732+
733+ property int delegateWidth: {
734+ width/3 - units.gu(1) /*partial visible area*/
735+ }
736+ contentHeight: height
737+ contentWidth: {
738+ (delegateWidth*7)
739+ }
740+
741+ Column{
742+ width: parent.width
743+ height: parent.height
744+
745+ TimeLineHeaderComponent{
746+ objectName: "timelineHeader"
747+ startDay: headerRoot.startDay
748+ type: ViewType.ViewTypeWeek
749+ width: parent.width
750+ height: units.gu(5)
751+
752+ onDateSelected: {
753+ root.dateSelected(date);
754+ }
755+ }
756+
757+ SimpleDivider{}
758+
759+ AllDayEventComponent {
760+ type: ViewType.ViewTypeWeek
761+ startDay: headerRoot.startDay
762+ width: parent.width
763+ height: units.gu(5)
764+ model: mainModel
765+
766+ Component.onCompleted: {
767+ mainModel.addModelChangeListener(createAllDayEvents);
768+ }
769+ Component.onDestruction: {
770+ mainModel.removeModelChangeListener(createAllDayEvents);
771+ }
772+ }
773+ }
774 }
775 }
776 }
777
778=== modified file 'TimeLineHeaderComponent.qml'
779--- TimeLineHeaderComponent.qml 2014-10-03 04:15:55 +0000
780+++ TimeLineHeaderComponent.qml 2014-11-30 07:34:00 +0000
781@@ -33,29 +33,45 @@
782 signal dateSelected(var date);
783
784 width: parent.width
785+ height: units.gu(4)
786
787 Repeater{
788- model: 7
789+ model: type == ViewType.ViewTypeWeek ? 7 : 1
790
791 delegate: HeaderDateComponent{
792- date: startDay.addDays(index);
793+ date: type == ViewType.ViewTypeWeek ? startDay.addDays(index) : startDay
794 dayFormat: Locale.ShortFormat
795
796 dayColor: {
797 if( type == ViewType.ViewTypeWeek && date.isSameDay(DateExt.today())){
798 UbuntuColors.orange
799- } else if( type == ViewType.ViewTypeDay && date.isSameDay(currentDay) ) {
800+ } /*else if( type == ViewType.ViewTypeDay && date.isSameDay(currentDay) ) {
801 UbuntuColors.orange
802- } else {
803+ } */ else {
804 UbuntuColors.darkGrey
805 }
806 }
807
808- width: header.width/7
809+ width: type == ViewType.ViewTypeWeek ? ( header.width/7) : header.width
810+ height: header.height
811
812 onDateSelected: {
813 header.dateSelected(date);
814 }
815+
816+ Loader{
817+ objectName: "divider"
818+ height: parent.height
819+ width: units.gu(0.1)
820+ sourceComponent: type == ViewType.ViewTypeWeek ? dividerComponent : undefined
821+ }
822+
823+ Component {
824+ id: dividerComponent
825+ SimpleDivider{
826+ anchors.fill: parent
827+ }
828+ }
829 }
830 }
831 }
832
833=== modified file 'WeekView.qml'
834--- WeekView.qml 2014-11-06 13:57:42 +0000
835+++ WeekView.qml 2014-11-30 07:34:00 +0000
836@@ -62,98 +62,82 @@
837 }
838 }
839
840- Column {
841+ PathViewBase{
842+ id: weekViewPath
843+ objectName: "weekViewPath"
844+
845 anchors.fill: parent
846- anchors.topMargin: units.gu(1)
847- spacing: units.gu(1)
848-
849- TimeLineHeader{
850- id: weekHeader
851- objectName: "weekHeader"
852- type: ViewType.ViewTypeWeek
853- date: firstDay
854-
855- onDateSelected: {
856- weekViewPage.dateSelected(date);
857- }
858- }
859-
860- PathViewBase{
861- id: weekViewPath
862- objectName: "weekViewPath"
863-
864+
865+ //This is used to scroll all view together when currentItem scrolls
866+ property var childContentY;
867+
868+ onNextItemHighlighted: {
869+ nextWeek();
870+ }
871+
872+ onPreviousItemHighlighted: {
873+ previousWeek();
874+ }
875+
876+ function nextWeek() {
877+ dayStart = firstDay.addDays(7);
878+ }
879+
880+ function previousWeek(){
881+ dayStart = firstDay.addDays(-7);
882+ }
883+
884+ delegate: Loader {
885 width: parent.width
886- height: weekViewPage.height - weekViewPath.y
887-
888- //This is used to scroll all view together when currentItem scrolls
889- property var childContentY;
890-
891- onNextItemHighlighted: {
892- nextWeek();
893- weekHeader.incrementCurrentIndex()
894- }
895-
896- onPreviousItemHighlighted: {
897- previousWeek();
898- weekHeader.decrementCurrentIndex()
899- }
900-
901- function nextWeek() {
902- dayStart = firstDay.addDays(7);
903- }
904-
905- function previousWeek(){
906- dayStart = firstDay.addDays(-7);
907- }
908-
909- delegate: Loader {
910- width: parent.width
911- height: parent.height
912- asynchronous: index !== weekViewPath.currentIndex
913- sourceComponent: delegateComponent
914-
915- Component{
916- id: delegateComponent
917-
918- TimeLineBaseComponent {
919- id: timeLineView
920-
921- type: ViewType.ViewTypeWeek
922- anchors.fill: parent
923- isActive: parent.PathView.isCurrentItem
924- startDay: firstDay.addDays( weekViewPath.indexType(index) * 7)
925- keyboardEventProvider: weekViewPath
926-
927- Component.onCompleted: {
928+ height: parent.height
929+ asynchronous: !weekViewPath.isCurrentItem
930+ sourceComponent: delegateComponent
931+
932+ Component{
933+ id: delegateComponent
934+
935+ TimeLineBaseComponent {
936+ id: timeLineView
937+
938+ type: ViewType.ViewTypeWeek
939+ anchors.fill: parent
940+ isActive: parent.PathView.isCurrentItem
941+ startDay: firstDay.addDays( weekViewPath.indexType(index) * 7)
942+ keyboardEventProvider: weekViewPath
943+
944+ Component.onCompleted: {
945+ if(weekViewPage.isCurrentPage){
946+ timeLineView.scrollToCurrentTime();
947+ }
948+ }
949+
950+ onDateSelected: {
951+ weekViewPage.dateSelected(date);
952+ }
953+
954+ Connections{
955+ target: weekViewPage
956+ onIsCurrentPageChanged:{
957 if(weekViewPage.isCurrentPage){
958 timeLineView.scrollToCurrentTime();
959 }
960 }
961-
962- Connections{
963- target: weekViewPage
964- onIsCurrentPageChanged:{
965- if(weekViewPage.isCurrentPage){
966- timeLineView.scrollToCurrentTime();
967- }
968- }
969- }
970-
971- //get contentY value from PathView, if its not current Item
972- Binding{
973- target: timeLineView
974- property: "contentY"
975- value: weekViewPath.childContentY;
976- when: !parent.PathView.isCurrentItem
977- }
978-
979- //set PathView's contentY property, if its current item
980- Binding{
981- target: weekViewPath
982- property: "childContentY"
983- value: contentY
984- when: parent.PathView.isCurrentItem
985- }
986+ }
987+
988+ //get contentY value from PathView, if its not current Item
989+ Binding{
990+ target: timeLineView
991+ property: "contentY"
992+ value: weekViewPath.childContentY;
993+ when: !parent.PathView.isCurrentItem
994+ }
995+
996+ //set PathView's contentY property, if its current item
997+ Binding{
998+ target: weekViewPath
999+ property: "childContentY"
1000+ value: contentY
1001+ when: parent.PathView.isCurrentItem
1002 }
1003 }
1004 }
1005
1006=== modified file 'tests/autopilot/calendar_app/tests/test_weekview.py'
1007--- tests/autopilot/calendar_app/tests/test_weekview.py 2014-10-08 11:59:38 +0000
1008+++ tests/autopilot/calendar_app/tests/test_weekview.py 2014-11-30 07:34:00 +0000
1009@@ -81,10 +81,13 @@
1010 return sorteddays
1011
1012 def _get_date_label_headers(self):
1013- header = self.app.main_view.select_single(objectName="weekHeader")
1014- timeline = header.select_single("TimeLineHeaderComponent",
1015- isCurrentItem=True)
1016- dateLabels = timeline.select_many("Label", objectName="dateLabel")
1017+ pathView = self.week_view.select_single("PathViewBase")
1018+ timeLineBase = pathView.select_single("TimeLineBaseComponent",
1019+ isActive=True)
1020+ viewHeader = timeLineBase.select_single(objectName="viewHeader")
1021+ timeLineHeader = viewHeader.select_single(objectName="timelineHeader")
1022+ dateLabels = timeLineHeader.select_many("Label",
1023+ objectName="dateLabel")
1024 return dateLabels
1025
1026 def _get_first_day_of_week(self):

Subscribers

People subscribed via source and target branches

to status/vote changes: