Merge lp:~frankencode/ubuntu-calendar-app/MonthView into lp:ubuntu-calendar-app

[Frank Mertens]

First basic prototype of the calendar key journeys.

First basic prototype of the calendar key journeys.

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

PASSED: Continuous integration, rev:23
http://91.189.93.125:8080/job/ubuntu-calendar-app-ci/5/
Executed test runs:
    SUCCESS: http://91.189.93.125:8080/job/ubuntu-calendar-app-ci/./build=pbuilder,distribution=quantal,flavor=amd64/5/console

Click here to trigger a rebuild:
http://91.189.93.125:8080/job/ubuntu-calendar-app-ci/5//rebuild/?

review: Approve (continuous-integration)

[Mario Boikov (mariob)]

In 'daysInMonth' function: Shouldn't the leap year thing only be applied to 'February'?

Now every month gets an extra day for a leap year. Would be great thou :)

[lp:~frankencode/ubuntu-calendar-app/MonthView]

24. By Frank Mertens on 2013-03-11

Fix for leap year: add leap day only to Feb.

[Frank Mertens (frankencode)]

Ups, smth. got lost there when I was reformatting the code from C++.
(You have eagles eyes!)

[Mario Boikov (mariob)]

> Ups, smth. got lost there when I was reformatting the code from C++.
> (You have eagles eyes!)

LOL! Actually, I was doing a similar function myself the other day, that why I spotted it :)

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

PASSED: Continuous integration, rev:24
http://91.189.93.125:8080/job/ubuntu-calendar-app-ci/6/
Executed test runs:
    SUCCESS: http://91.189.93.125:8080/job/ubuntu-calendar-app-ci/./build=pbuilder,distribution=quantal,flavor=amd64/6/console

Click here to trigger a rebuild:
http://91.189.93.125:8080/job/ubuntu-calendar-app-ci/6//rebuild/?

review: Approve (continuous-integration)

[Mario Boikov (mariob)]

Looks good to me

review: Approve

=== added file 'Calendar.desktop'
--- Calendar.desktop	1970-01-01 00:00:00 +0000
+++ Calendar.desktop	2013-03-11 18:20:26 +0000
@@ -0,0 +1,9 @@
+[Desktop Entry]
+Encoding=UTF-8
+Type=Application
+Terminal=false
+Exec=/usr/bin/qmlscene
+Name=Calendar
+GenericName=Calendar
+Comment=Ubuntu Calendar
+Icon=ubuntu-qmlrunner

=== renamed file 'dateTimeUtils.js' => 'DateLib.js'
--- dateTimeUtils.js	2013-02-14 18:03:27 +0000
+++ DateLib.js	2013-03-11 18:20:26 +0000
@@ -1,17 +1,51 @@
 .pragma library
 
-var msPerDay = 86400e3
-var msPerWeek = msPerDay * 7
+Date.msPerDay = 86400e3
+Date.msPerWeek = Date.msPerDay * 7
+
+Date.leapYear = function(year) {
+    return year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)
+}
+
+Date.daysInMonth = function(year, month) {
+    return [
+        31/*Jan*/, 28/*Feb*/, 31/*Mar*/, 30/*Apr*/, 31/*May*/, 30/*Jun*/,
+        31/*Jul*/, 31/*Aug*/, 30/*Sep*/, 31/*Oct*/, 30/*Nov*/, 31/*Dec*/
+    ][month] + (month == 1) * Date.leapYear(year)
+}
+
+Date.weeksInMonth = function(year, month, weekday) {
+    var y = year, m = month
+    var date0 = new Date(y, m, 1)
+    var date1 = new Date(y + (m == 11), m < 11 ? m + 1 : 0, 1)
+    var day = date0.getDay()
+    var m = (date1.getTime() - date0.getTime()) / Date.msPerDay
+    var n = 0
+    while (m > 0) {
+        if (day == weekday) n = n + 1
+        day = day < 6 ? day + 1 : 0
+        m = m - 1
+    }
+    return n
+}
 
 Date.prototype.midnight = function() {
     var date = new Date(this)
-    date.setTime(date.getTime() - date.getTime() % msPerDay)
+    var t = date.getTime()
+    if (t % Date.msPerDay != 0)
+        date.setTime(t - t % Date.msPerDay)
     return date
 }
 
 Date.prototype.addDays = function(days) {
     var date = new Date(this)
-    date.setTime(date.getTime() + msPerDay * days)
+    date.setTime(date.getTime() + Date.msPerDay * days)
+    return date
+}
+
+Date.prototype.addMonths = function(months) {
+    var date = new Date(this)
+    date.setUTCMonth(date.getUTCMonth() + months)
     return date
 }
 
@@ -26,14 +60,22 @@
     return date.addDays(-n)
 }
 
+Date.prototype.monthStart = function() {
+    return this.midnight().addDays(1 - this.getDate())
+}
+
 Date.prototype.weekNumber = function() {
     var date = this.weekStart(1).addDays(3) // Thursday midnight
     var newYear = new Date(date.getFullYear(), 0 /*Jan*/, 1 /*the 1st*/)
     var n = 0
     var tx = date.getTime(), tn = newYear.getTime()
     while (tn < tx) {
-        tx = tx - msPerWeek
+        tx = tx - Date.msPerWeek
         n = n + 1
     }
     return n
 }
+
+Date.prototype.weeksInMonth = function(weekday) {
+    return Date.weeksInMonth(this.getFullYear(), this.getMonth(), weekday)
+}

=== added file 'EventView.qml'
--- EventView.qml	1970-01-01 00:00:00 +0000
+++ EventView.qml	2013-03-11 18:20:26 +0000
@@ -0,0 +1,72 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+import "DateLib.js" as DateLib
+
+PathView {
+    id: eventView
+
+    property var currentDayStart: (new Date()).midnight()
+
+    signal incrementCurrentDay
+    signal decrementCurrentDay
+
+    readonly property real visibleHeight: parent.height - y
+
+    QtObject {
+        id: intern
+        property int currentIndexSaved: 0
+        property int currentIndex: 0
+        property var currentDayStart: (new Date()).midnight()
+    }
+
+    onCurrentIndexChanged: {
+        var delta = currentIndex - intern.currentIndexSaved
+        if (intern.currentIndexSaved == count - 1 && currentIndex == 0) delta = 1
+        if (intern.currentIndexSaved == 0 && currentIndex == count - 1) delta = -1
+        intern.currentIndexSaved = currentIndex
+        if (delta > 0) incrementCurrentDay()
+        else decrementCurrentDay()
+    }
+
+    onCurrentDayStartChanged: {
+        if (!moving) intern.currentDayStart = currentDayStart
+    }
+
+    onMovementEnded: {
+        intern.currentDayStart = currentDayStart
+        intern.currentIndex = currentIndex
+    }
+
+    preferredHighlightBegin: 0.5
+    preferredHighlightEnd: 0.5
+    highlightRangeMode: PathView.StrictlyEnforceRange
+
+    path: Path {
+        startX: -eventView.width; startY: eventView.height / 2
+        PathLine { relativeX: eventView.width; relativeY: 0  }
+        PathLine { relativeX: eventView.width; relativeY: 0 }
+        PathLine { relativeX: eventView.width; relativeY: 0 }
+    }
+
+    snapMode: PathView.SnapOneItem
+
+    model: 3
+
+    delegate: Rectangle {
+        property var dayStart: {
+            if (index == intern.currentIndex) return intern.currentDayStart
+            var previousIndex = intern.currentIndex > 0 ? intern.currentIndex - 1 : 2
+            if (index == previousIndex) return intern.currentDayStart.addDays(-1)
+            return intern.currentDayStart.addDays(1)
+        }
+        width: eventView.width
+        height: eventView.height
+        color: index == 0 ? "#FFFFFF" : index == 1 ? "#EEEEEE" : "#DDDDDD"
+        Label {
+            anchors.horizontalCenter: parent.horizontalCenter
+            y: units.gu(4)
+            text: i18n.tr("No events for") + "\n" + Qt.formatDate(dayStart)
+            fontSize: "large"
+        }
+    }
+}

=== modified file 'MonthView.qml'
--- MonthView.qml	2013-02-15 08:10:23 +0000
+++ MonthView.qml	2013-03-11 18:20:26 +0000
@@ -1,73 +1,196 @@
 import QtQuick 2.0
 import Ubuntu.Components 0.1
-import "dateTimeUtils.js" as DateTime
+import "DateLib.js" as DateLib
+import "colorUtils.js" as Color
 
 ListView {
-    id: monthView // id for internal reference
-
-    // public properties
-    property bool portraitMode: width < height
-    property real weeksInView: 8
-    property int weekStartDay: 1 // Monday, FIXME: depends on locale / user settings
-
-    // private properties
+    id: monthView
+
+    readonly property var monthStart: currentItem != null ? currentItem.monthStart : (new Date()).monthStart()
+    readonly property var monthEnd: currentItem != null ? currentItem.monthEnd : (new Date()).monthStart().addMonths(1)
+    readonly property var currentDayStart: intern.currentDayStart
+
+    property bool compressed: false
+    property real compressedHeight: intern.squareUnit + intern.verticalMargin * 2
+
+    signal incrementCurrentDay
+    signal decrementCurrentDay
+
+    signal gotoNextMonth(int month)
+    signal focusOnDay(var dayStart)
+
+    onCurrentItemChanged: {
+        if (currentItem == null) {
+            intern.currentDayStart = intern.currentDayStart
+            return
+        }
+        if (currentItem.monthStart <= intern.currentDayStart && intern.currentDayStart < currentItem.monthEnd)
+            return
+        if (currentItem.monthStart <= intern.today && intern.today < currentItem.monthEnd)
+            intern.currentDayStart = intern.today
+        else
+            intern.currentDayStart = currentItem.monthStart
+    }
+
+    onIncrementCurrentDay: {
+        var t = intern.currentDayStart.addDays(1)
+        if (t < monthEnd) {
+            intern.currentDayStart = t
+        }
+        else if (currentIndex < count - 1) {
+            intern.currentDayStart = t
+            currentIndex = currentIndex + 1
+        }
+    }
+
+    onDecrementCurrentDay: {
+        var t = intern.currentDayStart.addDays(-1)
+        if (t >= monthStart) {
+            intern.currentDayStart = t
+        }
+        else if (currentIndex > 0) {
+            intern.currentDayStart = t
+            currentIndex = currentIndex - 1
+        }
+    }
+
+    onGotoNextMonth: {
+        if (monthStart.getMonth() != month) {
+            var i = intern.monthIndex0, m = intern.today.getMonth()
+            while (m != month) {
+                m = (m + 1) % 12
+                i = i + 1
+            }
+            currentIndex = i
+        }
+    }
+
+    onFocusOnDay: {
+        if (dayStart < monthStart) {
+            if (currentIndex > 0) {
+                intern.currentDayStart = dayStart
+                currentIndex = currentIndex - 1
+            }
+        }
+        else if (dayStart >= monthEnd) {
+            if (currentIndex < count - 1) {
+                intern.currentDayStart = dayStart
+                currentIndex = currentIndex + 1
+            }
+        }
+        else intern.currentDayStart = dayStart
+    }
+
+    focus: true
+    Keys.onLeftPressed: decrementCurrentDay()
+    Keys.onRightPressed: incrementCurrentDay()
+
     QtObject {
-        id: internal
-
-        property real weekHeight: monthView.height / monthView.weeksInView | 0
-        property int indexOrigin: monthView.count / 2
-        property var timeOrigin: (new Date()).weekStart(monthView.weekStartDay)
-        property var today: (new Date()).midnight()
+        id: intern
+
+        property int squareUnit: monthView.width / 8
+        property int verticalMargin: units.gu(1)
+        property int weekstartDay: Qt.locale().firstDayOfWeek
+        property int monthCount: 49 // months for +-2 years
+
+        property var today: (new Date()).midnight() // TODO: update at midnight
+        property var currentDayStart: today
+        property int monthIndex0: Math.floor(monthCount / 2)
+        property var monthStart0: today.monthStart()
     }
 
+    width: parent.width
+    height: intern.squareUnit * 6 + intern.verticalMargin * 2
+
+    interactive: !compressed
     clip: true
-
-    model: 1041 // weeks for about +-10y
+    orientation: ListView.Horizontal
+    snapMode: ListView.SnapOneItem
+    cacheBuffer: width + 1
+
+    highlightRangeMode: ListView.StrictlyEnforceRange
+    preferredHighlightBegin: 0
+    preferredHighlightEnd: width
+
+    model: intern.monthCount
+    currentIndex: intern.monthIndex0
 
     delegate: Item {
-        id: weekItem
-
-        property var weekOrigin: internal.timeOrigin.addDays((index - internal.indexOrigin) * 7)
-
-        width: parent.width
-        height: internal.weekHeight
-
-        Row {
-            anchors.fill: parent
-            spacing: 1
+        id: monthItem
+
+        property var monthStart: intern.monthStart0.addMonths(index - intern.monthIndex0)
+        property var monthEnd: monthStart.addMonths(1)
+        property var gridStart: monthStart.weekStart(intern.weekstartDay)
+        property int currentWeekRow: Math.floor((currentDayStart.getTime() - gridStart.getTime()) / Date.msPerWeek)
+
+        width: monthView.width
+        height: monthView.height
+
+        Grid {
+            id: monthGrid
+
+            rows: 6
+            columns: 7
+
+            x: intern.squareUnit / 2
+            y: intern.verticalMargin
+            width: intern.squareUnit * columns
+            height: intern.squareUnit * rows
 
             Repeater {
-                model: 7
-                delegate: Rectangle {
+                model: monthGrid.rows * monthGrid.columns
+                delegate: Item {
                     id: dayItem
-
-                    property var dayOrigin: weekOrigin.addDays(index)
-                    property bool isToday: internal.today.getTime() == dayOrigin.getTime()
-
-                    width: weekItem.width / 7
-                    height: weekItem.height - 1
-                    color: isToday ? "#c94212" : dayOrigin.getMonth() % 2 ? "#c4c4c4" : "#e0e0e0"
-
-                    Label {
+                    property var dayStart: gridStart.addDays(index)
+                    property bool isCurrentMonth: monthStart <= dayStart && dayStart < monthEnd
+                    property bool isToday: dayStart.getTime() == intern.today.getTime()
+                    property bool isCurrent: dayStart.getTime() == intern.currentDayStart.getTime()
+                    property int weekday: (index % 7 + intern.weekstartDay) % 7
+                    property bool isSunday: weekday == 0
+                    property int row: Math.floor(index / 7)
+                    property bool isCurrentWeek: row == currentWeekRow
+                    property real topMargin: (row == 0 || (monthView.compressed && isCurrentWeek)) ? -intern.verticalMargin : 0
+                    property real bottomMargin: (row == 5 || (monthView.compressed && isCurrentWeek)) ? -intern.verticalMargin : 0
+                    visible: monthView.compressed ? isCurrentWeek : true
+                    width: intern.squareUnit
+                    height: intern.squareUnit
+                    Rectangle {
+                        visible: isSunday
+                        anchors.fill: parent
+                        anchors.topMargin: dayItem.topMargin
+                        anchors.bottomMargin: dayItem.bottomMargin
+                        color: Color.warmGrey
+                        opacity: 0.1
+                    }
+                    Text {
                         anchors.centerIn: parent
-                        text: dayOrigin.getDate()
-                        color: isToday ? "white" : dayOrigin.getDay() == 0 ? "#c94212" : "#404040"
-                    }
+                        text: dayStart.getDate()
+                        font: themeDummy.font
+                        color: isToday ? Color.ubuntuOrange : themeDummy.color
+                        scale: isCurrent ? 1.8 : 1.
+                        opacity: isCurrentMonth ? 1. : 0.3
+                        Behavior on scale {
+                            NumberAnimation { duration: 50 }
+                        }
+                    }
+                    MouseArea {
+                        anchors.fill: parent
+                        anchors.topMargin: dayItem.topMargin
+                        anchors.bottomMargin: dayItem.bottomMargin
+                        onReleased: monthView.focusOnDay(dayStart)
+                    }
+                    // Component.onCompleted: console.log(dayStart, intern.currentDayStart)
                 }
             }
         }
-    }
-
-    Timer { // make sure today is updated at midnight
-        interval: 1000
-        repeat: true
-        running: true
-
-        onTriggered: {
-            var newDate = (new Date()).midnight()
-            if (internal.today < newDate) internal.today = newDate
-        }
-    }
-
-    Component.onCompleted: positionViewAtIndex(internal.indexOrigin, ListView.Center)
+
+        // Component.onCompleted: console.log("Created delegate for month", index, monthStart, gridStart, currentWeekRow, currentWeekRowReal)
+    }
+
+    Label {
+        visible: false
+        id: themeDummy
+        fontSize: "large"
+        // Component.onCompleted: console.log(color, Qt.lighter(color, 1.74))
+    }
 }

=== modified file 'calendar.qml'
--- calendar.qml	2013-02-14 18:03:27 +0000
+++ calendar.qml	2013-03-11 18:20:26 +0000
@@ -1,72 +1,103 @@
 import QtQuick 2.0
 import Ubuntu.Components 0.1
 
-/*!
-    \brief MainView with Tabs element.
-           First Tab has a single Label and
-           second Tab has a single ToolbarAction.
-*/
-
 MainView {
-    // objectName for functional testing purposes (autopilot-qt5)
-    objectName: "calendar"
-
     id: mainView
     width: units.gu(45)
     height: units.gu(80)
-        // FIXME: 80/45 = aspect ration of galaxy nexus
+        // FIXME: 80/45 = aspect ration of Galaxy Nexus
 
-    Tabs {
+    Tabs { // preliminary HACK, needs rewrite when NewTabBar is finalized!
         id: tabs
         anchors.fill: parent
 
-        // First tab begins here
-        Tab {
-            objectName: "Tab1"
-
-            title: i18n.tr("Calendar")
-
-            // Tab content begins here
-            page: Page {
-                MonthView {
-                    width: mainView.width
-                    height: mainView.height
-                    // anchors.fill: parent // FIXME: delivers broken geometry on startup
-                }
-            }
-        }
-
-        // Second tab begins here
-        Tab {
-            objectName: "Tab2"
-
-            title: i18n.tr("Optional Screen")
-            page: Page {
-                anchors.margins: units.gu(2)
-
-                tools: ToolbarActions {
-                    Action {
-                        objectName: "action"
-
-                        iconSource: Qt.resolvedUrl("avatar.png")
-                        text: i18n.tr("Tap me!")
-
-                        onTriggered: {
-                            label.text = i18n.tr("Toolbar tapped")
-                        }
-                    }
-                }
-
-                Column {
-                    anchors.centerIn: parent
-                    Label {
-                        id: label
-                        objectName: "label"
-
-                        text: i18n.tr("Swipe from bottom to up to reveal the toolbar.")
-                    }
-                }
-            }
+        Tab { id: pageArea; title: i18n.tr("January"); page: Item { anchors.fill: parent } }
+        Tab { title: i18n.tr("February") }
+        Tab { title: i18n.tr("March") }
+        Tab { title: i18n.tr("April") }
+        Tab { title: i18n.tr("May") }
+        Tab { title: i18n.tr("June") }
+        Tab { title: i18n.tr("July") }
+        Tab { title: i18n.tr("August") }
+        Tab { title: i18n.tr("September") }
+        Tab { title: i18n.tr("October") }
+        Tab { title: i18n.tr("November") }
+        Tab { title: i18n.tr("December") }
+
+        onSelectedTabIndexChanged: monthView.gotoNextMonth(selectedTabIndex)
+    }
+
+    MonthView {
+        id: monthView
+        onMonthStartChanged: tabs.selectedTabIndex = monthStart.getMonth()
+        y: pageArea.y
+    }
+
+    EventView {
+        id: eventView
+        property real minY: pageArea.y + monthView.compressedHeight
+        property real maxY: pageArea.y + monthView.height
+        y: maxY
+        width: mainView.width
+        height: parent.height - monthView.compressedHeight
+        currentDayStart: monthView.currentDayStart
+        Component.onCompleted: {
+            incrementCurrentDay.connect(monthView.incrementCurrentDay)
+            decrementCurrentDay.connect(monthView.decrementCurrentDay)
+        }
+        MouseArea {
+            id: drawer
+            property bool compression: true
+            anchors.fill: parent
+            drag {
+                axis: Drag.YAxis
+                target: eventView
+                minimumY: monthView.y + monthView.compressedHeight
+                maximumY: monthView.y + monthView.height
+                onActiveChanged: {
+                    if (compression) {
+                        if (drag.active) {
+                            monthView.compressed = true
+                        }
+                        else {
+                            yBehavior.enabled = true
+                            eventView.y =  Qt.binding(function() { return eventView.minY })
+                            compression = false
+                        }
+                    }
+                    else {
+                        if (drag.active) {}
+                        else{
+                            eventView.y =  Qt.binding(function() { return eventView.maxY })
+                            monthView.compressed = false
+                            compression = true
+                        }
+                    }
+                }
+            }
+        }
+        Behavior on y {
+            id: yBehavior
+            enabled: false
+            NumberAnimation { duration: 100 }
+        }
+    }
+
+    tools: ToolbarActions {
+        Action {
+            iconSource: Qt.resolvedUrl("avatar.png")
+            text: i18n.tr("To-do")
+            onTriggered:; // FIXME
+        }
+        Action {
+            iconSource: Qt.resolvedUrl("avatar.png")
+            text: i18n.tr("New Event")
+            onTriggered:; // FIXME
+        }
+        Action {
+            iconSource: Qt.resolvedUrl("avatar.png")
+            text: i18n.tr("Timeline")
+            onTriggered:; // FIXME
         }
     }
 }

=== added file 'colorUtils.js'
--- colorUtils.js	1970-01-01 00:00:00 +0000
+++ colorUtils.js	2013-03-11 18:20:26 +0000
@@ -0,0 +1,10 @@
+.pragma library
+
+// colors for custom widgets
+// see: http://design.ubuntu.com/brand/colour-palette
+
+var ubuntuOrange = "#DD4814"
+var canonicalAubergine = "#772953"
+var lightAubergine = "#77216F"
+var warmGrey = "#AEA79F"
+var coolGrey = "#333333"

=== added file 'testrun.sh'
--- testrun.sh	1970-01-01 00:00:00 +0000
+++ testrun.sh	2013-03-11 18:20:26 +0000
@@ -0,0 +1,4 @@
+#! /bin/bash  -ex
+
+rsync -aHv ./ phablet@nexus:/tmp/Calendar/
+ssh -t phablet@nexus 'cd /tmp/Calendar && GRID_UNIT_PX=18 qmlscene --desktop_file_hint=$PWD/Calendar.desktop $PWD/calendar.qml'