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

[Kunal Parmar]

DayView and WeekView header transition

DayView and WeekView header transition

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:116
http://91.189.93.70:8080/job/ubuntu-calendar-app-ci/70/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests/384
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-calendar-app-precise-amd64-ci/70
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-calendar-app-quantal-amd64-ci/70
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-calendar-app-raring-amd64-ci/70
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-calendar-app-saucy-amd64-ci/70

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-calendar-app-ci/70/rebuild

review: Approve (continuous-integration)

[lp:~pkunal-parmar/ubuntu-calendar-app/day_weekview_animation]

117. By Kunal Parmar on 2013-09-17

dayview header changed

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:117
http://91.189.93.70:8080/job/ubuntu-calendar-app-ci/71/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests/389
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-calendar-app-precise-amd64-ci/71
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-calendar-app-quantal-amd64-ci/71
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-calendar-app-raring-amd64-ci/71
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-calendar-app-saucy-amd64-ci/71

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-calendar-app-ci/71/rebuild

review: Approve (continuous-integration)

[lp:~pkunal-parmar/ubuntu-calendar-app/day_weekview_animation]

118. By Kunal Parmar on 2013-09-17

Day format for Dayview corrected

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:118
http://91.189.93.70:8080/job/ubuntu-calendar-app-ci/72/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests/391
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-calendar-app-precise-amd64-ci/72
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-calendar-app-quantal-amd64-ci/72
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-calendar-app-raring-amd64-ci/72
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-calendar-app-saucy-amd64-ci/72

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-calendar-app-ci/72/rebuild

review: Approve (continuous-integration)

[Olivier Tilloy (osomon)]

This seems to work well, nice job!

I’d like design to comment on this implementation (I personally feel that the header not moving in sync with the swipe gesture is awkward), but I guess the best way to do this is to have it merged and released for them to play with it.

review: Approve

[Olivier Tilloy (osomon)]

Another point that I’d like design to comment on: I feel like swiping on the header to scroll days/weeks should be allowed.

=== modified file 'DayView.qml'
--- DayView.qml	2013-09-04 12:59:33 +0000
+++ DayView.qml	2013-09-17 13:14:51 +0000
@@ -12,53 +12,80 @@
 
     property var currentDay: new Date()
 
-    PathViewBase{
-        id: dayViewPath
-        objectName: "DayViewPathBase"
-
-        property var startDay: currentDay.addDays(-1)
-
+    Column {
+        id: column
         anchors.top: parent.top
         anchors.topMargin: units.gu(1.5)
-
-        width: parent.width
-        height: parent.height - units.gu(3)
-
-        onNextItemHighlighted: {
-            //next day
-            currentDay = currentDay.addDays(1);
-        }
-
-        onPreviousItemHighlighted: {
-            //previous day
-            currentDay = currentDay.addDays(-1);
-        }
-
-        delegate: TimeLineBaseComponent {
-            id: timeLineView
-            objectName: "DayComponent-"+index
-
+        width: parent.width; height: parent.height
+
+        ViewHeader{
+            id: viewHeader
+            date: currentDay
+        }
+
+        TimeLineHeader{
+            id: dayHeader
             type: typeDay
+            date: currentDay
+            preferredHighlightBegin: 0.5
+            preferredHighlightEnd: 0.5
+            path: Path {
+                startX: -(dayHeader.width/7); startY: dayHeader.height/2
+                PathLine { x: (dayHeader.width/7) * 8  ; relativeY: 0;  }
+            }
+        }
+
+        PathViewBase{
+            id: dayViewPath
+            objectName: "DayViewPathBase"
+
+            property var startDay: currentDay
+
+            preferredHighlightBegin: 0.5
+            preferredHighlightEnd: 0.5
 
             width: parent.width
-            height: parent.height
-
-            startDay: getStartDay().addDays(-1);
-
-            function getStartDay() {
-                //previous page
-                if (index === dayViewPath.currentIndex) {
-                    return dayViewPath.startDay;
-                }
-
-                //next page
-                var previousIndex = dayViewPath.currentIndex > 0 ? dayViewPath.currentIndex - 1 : 2
-                if ( index === previousIndex ) {
-                    return dayViewPath.startDay.addDays(2);
-                }
-
-                //current page
-                return dayViewPath.startDay.addDays(1);
+            height: column.height - viewHeader.height - dayHeader.height
+
+            path: Path {
+                startX: -(dayViewPath.width/1.75); startY: dayViewPath.height/2
+                PathLine { x: (dayViewPath.width/7) * 11  ; relativeY: 0;  }
+            }
+
+            onNextItemHighlighted: {
+                //next day
+                currentDay = currentDay.addDays(1);
+                dayHeader.incrementCurrentIndex()
+            }
+
+            onPreviousItemHighlighted: {
+                //previous day
+                currentDay = currentDay.addDays(-1);
+                dayHeader.decrementCurrentIndex()
+            }
+
+            delegate: TimeLineBaseComponent {
+                id: timeLineView
+                objectName: "DayComponent-"+index
+
+                type: typeDay
+
+                width: parent.width/7 * 5
+                height: parent.height
+                z: index == dayViewPath.currentIndex ? 2 : 1
+
+                startDay: getStartDay()
+
+                function getStartDay() {
+                    switch( dayViewPath.indexType(index)) {
+                    case 0:
+                        return dayViewPath.startDay;
+                    case -1:
+                        return dayViewPath.startDay.addDays(-1);
+                    case 1:
+                        return dayViewPath.startDay.addDays(1);
+                    }
+                }
             }
         }
     }

=== added file 'HeaderDateComponent.qml'
--- HeaderDateComponent.qml	1970-01-01 00:00:00 +0000
+++ HeaderDateComponent.qml	2013-09-17 13:14:51 +0000
@@ -0,0 +1,36 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+
+Column{
+    id: root
+
+    property var date;
+
+    property alias dateColor: dateLabel.color
+    property alias dayColor: dayLabel.color
+
+    property int dayFormat: Locale.ShortFormat;
+
+    anchors.verticalCenter: parent.verticalCenter
+
+    width: parent.width
+    spacing: units.gu(0.5)
+
+    Label{
+        id: dayLabel
+        property var day: Qt.locale().standaloneDayName(date.getDay(), dayFormat)
+        text: day.toUpperCase();
+        fontSize: "medium"
+        horizontalAlignment: Text.AlignHCenter
+        color: "#AEA79F"
+        width: parent.width
+    }
+
+    Label{
+        id: dateLabel
+        text: date.getDate();
+        fontSize: "large"
+        horizontalAlignment: Text.AlignHCenter
+        width: parent.width
+    }
+}

=== modified file 'MonthView.qml'
--- MonthView.qml	2013-09-02 14:34:29 +0000
+++ MonthView.qml	2013-09-17 13:14:51 +0000
@@ -49,19 +49,14 @@
             monthDate: getMonthDate();
 
             function getMonthDate() {
-                //previous page
-                if (index === monthViewPath.currentIndex) {
+                switch( monthViewPath.indexType(index)) {
+                case 0:
                     return monthViewPath.startMonth;
-                }
-
-                //next page
-                var previousIndex = monthViewPath.currentIndex > 0 ? monthViewPath.currentIndex - 1 : 2
-                if ( index === previousIndex ) {
+                case -1:
                     return monthViewPath.addMonth(monthViewPath.startMonth,2);
+                case 1:
+                    return monthViewPath.addMonth(monthViewPath.startMonth,1);
                 }
-
-                //current page
-                return monthViewPath.addMonth(monthViewPath.startMonth,1);
             }
 
             onDateSelected: {

=== modified file 'PathViewBase.qml'
--- PathViewBase.qml	2013-08-10 06:03:17 +0000
+++ PathViewBase.qml	2013-09-17 13:14:51 +0000
@@ -16,6 +16,20 @@
         PathLine { relativeX: root.width; relativeY: 0 }
     }
 
+    // 0= current index, -1= previous index, 1 next index
+    function indexType(index) {
+        if (index === root.currentIndex) {
+            return 0;
+        }
+
+        var previousIndex = root.currentIndex > 0 ? root.currentIndex - 1 : 2
+        if ( index === previousIndex ) {
+            return -1;
+        }
+
+        return 1;
+    }
+
     onCurrentIndexChanged: {
         var diff = currentIndex - intern.previousIndex
 

=== modified file 'TimeLineBaseComponent.qml'
--- TimeLineBaseComponent.qml	2013-09-04 13:37:10 +0000
+++ TimeLineBaseComponent.qml	2013-09-17 13:14:51 +0000
@@ -22,19 +22,12 @@
         timeLineView.scroll()
     }
 
-    TimeLineHeader{
-        id: header
-        type: root.type
-        anchors.top: parent.top
-        startDay: root.startDay
-    }
-
     Flickable{
         id: timeLineView
 
-        anchors.top: header.bottom
+        anchors.top: parent.top
         width: parent.width
-        height: parent.height - header.height
+        height: parent.height
 
         contentHeight: units.gu(10) * 24
         contentWidth: width
@@ -61,16 +54,16 @@
             anchors.top: parent.top
 
             Repeater{
-                model: type == typeWeek ? 7 : 3
+                model: type == typeWeek ? 7 : 1
 
                 delegate: TimeLineBase {
                     property int idx: index
                     anchors.top: parent.top
                     width: {
-                        if( type == typeWeek || (type == typeDay && index != 1 ) ) {
-                             header.width/7
+                        if( type == typeWeek ) {
+                             parent.width/7
                         } else {
-                            (header.width/7) * 5
+                            (parent.width)
                         }
                     }
                     height: parent.height
@@ -85,8 +78,7 @@
         id: comp
         EventBubble{
             type: {
-                if( root.type == typeWeek
-                        || (root.type == typeDay && parent.idx !== 1) ) {
+                if( root.type == typeWeek ) {
                     narrowType
                 } else {
                     wideType

=== modified file 'TimeLineHeader.qml'
--- TimeLineHeader.qml	2013-09-05 13:14:25 +0000
+++ TimeLineHeader.qml	2013-09-17 13:14:51 +0000
@@ -3,113 +3,67 @@
 
 import "dateExt.js" as DateExt
 
-Column {
-    id: root
-
-    property int type: typeWeek
-
-    property var startDay: DateExt.today();
+PathViewBase {
+    id: header
 
     readonly property int typeWeek: 0
     readonly property int typeDay: 1
-
-    clip: true
-
+    property int type: typeWeek
+
+    interactive: false
+    model:3
+
+    height: units.gu(10)
     width: parent.width
 
-    Item{
-         id: monthHeader
-         width: parent.width
-         height: monthLabel.height
-
-         Label{
-             id: monthLabel
-             fontSize: "large"
-             text: {
-                 var monthDate = startDay;
-                 if( type === typeDay ) {
-                     monthDate = monthDate.addDays(1)
-                 }
-                 Qt.locale().standaloneMonthName(monthDate.getMonth())
-             }
-             anchors.leftMargin: units.gu(1)
-             anchors.left: parent.left
-             //color:"white"
-             anchors.verticalCenter: parent.verticalCenter
-         }
-
-         Label{
-             id: yearLabel
-             fontSize: "medium"
-             text: root.startDay.getFullYear()
-             anchors.right: parent.right
-             anchors.rightMargin: units.gu(1)
-             color:"#AEA79F"
-             anchors.verticalCenter: parent.verticalCenter
-         }
-     }
-
-    Row{
-        id: header
-
-        width: parent.width
-        height: units.gu(10)
-
-        Repeater{
-            model: type == typeWeek ? 7 : 3
-
-            delegate: Item {
-                property var date : startDay.addDays(index);
-                property int weekDayWidth: header.width / 7
-
-                width: {
-                    if( type == typeWeek || (type == typeDay && index != 1 ) ) {
-                         weekDayWidth
-                    } else {
-                        weekDayWidth * 5
-                    }
-                }
-
-                height: parent.height
-
-                Column{
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    width: parent.width
-                    spacing: units.gu(0.5)
-
-                    Label{
-                        property var day: {
-                            if( type == typeWeek || (type == typeDay && index != 1 ) ) {
-                                 Qt.locale().standaloneDayName(date.getDay(), Locale.ShortFormat)
-                            } else {
-                                Qt.locale().standaloneDayName(date.getDay(), Locale.LongFormat)
-                            }
-                        }
-
-                        text: day.toUpperCase();
-                        fontSize: "medium"
-                        horizontalAlignment: Text.AlignHCenter
-                        color: "#AEA79F"
-                        width: parent.width
-                    }
-
-                    Label{
-                        text: date.getDate();
-                        fontSize: "large"
-                        horizontalAlignment: Text.AlignHCenter
-                        color: {
-                            if( type == typeDay && index == 1 ) {
-                                "white"
-                            } else if( type == typeWeek && date.isSameDay(DateExt.today())){
-                                 "white"
-                            } else {
-                                "#AEA79F"
-                            }
-                        }
-                        width: parent.width
-                    }
-                }
+    property var date;
+
+    delegate: TimeLineHeaderComponent{
+        type: header.type
+
+        height: parent.height
+        isCurrentItem: index == header.currentIndex
+
+        width: {
+            if( type == typeWeek ) {
+                 parent.width
+            } else if( type == typeDay && isCurrentItem ){
+                (header.width/7) * 5
+            } else {
+                (header.width/7)
+            }
+        }
+
+        startDay: getStartDate();
+
+        function getStartDate() {
+            switch(type) {
+            case typeWeek:
+                return getDateForWeek();
+            case typeDay:
+                return getDateForDay();
+            }
+        }
+
+        function getDateForDay() {
+            switch( header.indexType(index)) {
+            case 0:
+                return date;
+            case -1:
+                return date.addDays(-1);
+            case 1:
+                return date.addDays(1);
+            }
+        }
+
+        function getDateForWeek() {
+            switch( header.indexType(index)) {
+            case 0:
+                return date;
+            case -1:
+                return date.addDays(14);
+            case 1:
+                return date.addDays(7);
             }
         }
     }

=== added file 'TimeLineHeaderComponent.qml'
--- TimeLineHeaderComponent.qml	1970-01-01 00:00:00 +0000
+++ TimeLineHeaderComponent.qml	2013-09-17 13:14:51 +0000
@@ -0,0 +1,57 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+
+import "dateExt.js" as DateExt
+
+Column {
+    id: root
+
+    readonly property int typeWeek: 0
+    readonly property int typeDay: 1
+    property int type: typeWeek
+
+    property var startDay: DateExt.today();
+    property bool isCurrentItem: false
+
+    width: parent.width
+
+    Row{
+        id: header
+
+        width: parent.width
+        height: parent.height
+
+        Repeater{
+            model: type == typeWeek ? 7 : 1
+
+            delegate: HeaderDateComponent{
+                date: startDay.addDays(index);
+                dayFormat: {
+                    if( type == typeWeek || (type == typeDay && !root.isCurrentItem) ) {
+                        Locale.ShortFormat
+                    } else {
+                        Locale.LongFormat
+                    }
+                }
+
+                dateColor: {
+                    if( type == typeWeek && date.isSameDay(DateExt.today())){
+                        "white"
+                    } else if( type == typeDay && root.isCurrentItem ) {
+                        "white"
+                    } else {
+                        "#AEA79F"
+                    }
+                }
+
+                width: {
+                    if( type == typeWeek ) {
+                         header.width/7
+                    } else {
+                        header.width
+                    }
+                }
+            }
+        }
+    }
+}

=== added file 'ViewHeader.qml'
--- ViewHeader.qml	1970-01-01 00:00:00 +0000
+++ ViewHeader.qml	2013-09-17 13:14:51 +0000
@@ -0,0 +1,30 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+
+Item{
+    id: header
+    width: parent.width
+    height: monthLabel.height
+
+    property var date;
+
+    Label{
+        id: monthLabel
+        fontSize: "large"
+        text: Qt.locale().standaloneMonthName(date.getMonth())
+        anchors.leftMargin: units.gu(1)
+        anchors.left: parent.left
+        //color:"white"
+        anchors.verticalCenter: parent.verticalCenter
+    }
+
+    Label{
+        id: yearLabel
+        fontSize: "medium"
+        text: date.getFullYear()
+        anchors.right: parent.right
+        anchors.rightMargin: units.gu(1)
+        color:"#AEA79F"
+        anchors.verticalCenter: parent.verticalCenter
+    }
+}

=== modified file 'WeekView.qml'
--- WeekView.qml	2013-09-04 12:59:33 +0000
+++ WeekView.qml	2013-09-17 13:14:51 +0000
@@ -2,13 +2,26 @@
 import Ubuntu.Components 0.1
 
 import "dateExt.js" as DateExt
-import "dataService.js" as DataService
 
-Item{
+Column {
     id: root
+
+    property var dayStart: new Date();
+    anchors.top: parent.top
+    anchors.topMargin: units.gu(1.5)
+
     anchors.fill: parent
 
-    property var dayStart: new Date();
+    ViewHeader{
+        id: viewHeader
+        date: dayStart
+    }
+
+    TimeLineHeader{
+        id: weekHeader
+        type: typeWeek
+        date: weekViewPath.weekStart
+    }
 
     PathViewBase{
         id: weekViewPath
@@ -16,17 +29,17 @@
         property var visibleWeek: dayStart.weekStart(Qt.locale().firstDayOfWeek);
         property var weekStart: weekViewPath.visibleWeek.addDays(-7)
 
-        anchors.top: parent.top
-        anchors.topMargin: units.gu(1.5)
         width: parent.width
-        height: parent.height - units.gu(3)
+        height: root.height - viewHeader.height - weekHeader.height
 
         onNextItemHighlighted: {
             nextWeek();
+            weekHeader.incrementCurrentIndex()
         }
 
         onPreviousItemHighlighted: {
             previousWeek();
+            weekHeader.decrementCurrentIndex()
         }
 
         function nextWeek() {
@@ -49,20 +62,19 @@
             startDay: getWeekStart();
 
             function getWeekStart() {
-                if (index === weekViewPath.currentIndex) {
+                switch( weekViewPath.indexType(index)) {
+                case 0:
                     return weekViewPath.weekStart;
-                }
-                var previousIndex = weekViewPath.currentIndex > 0 ? weekViewPath.currentIndex - 1 : 2
-
-                if ( index === previousIndex ) {
+                case -1:
                     var weekStartDay= weekViewPath.weekStart.weekStart(Qt.locale().firstDayOfWeek);
                     return weekStartDay.addDays(14);
+                case 1:
+                    var weekStartDay = weekViewPath.weekStart.weekStart(Qt.locale().firstDayOfWeek);
+                    return weekStartDay.addDays(7);
                 }
-
-                var weekStartDay = weekViewPath.weekStart.weekStart(Qt.locale().firstDayOfWeek);
-                return weekStartDay.addDays(7);
             }
         }
     }
 }
 
+

=== modified file 'YearView.qml'
--- YearView.qml	2013-09-02 14:34:29 +0000
+++ YearView.qml	2013-09-17 13:14:51 +0000
@@ -35,17 +35,15 @@
 
         property var year: getYear();
 
-        function getYear(){
-            if (index === root.currentIndex) {
+        function getYear() {
+            switch( root.indexType(index)) {
+            case 0:
                 return intern.startYear;
-            }
-            var previousIndex = root.currentIndex > 0 ? root.currentIndex - 1 : 2
-
-            if ( index === previousIndex ) {
+            case -1:
                 return getDateFromYear(intern.startYear.getFullYear() - 1);
+            case 1:
+                return getDateFromYear(intern.startYear.getFullYear() + 1);
             }
-
-            return getDateFromYear(intern.startYear.getFullYear() + 1);
         }
 
         width: parent.width