Merge lp:~ubuntu-calendar-dev/ubuntu-calendar-app/4-Improve-Month-Year-View into lp:ubuntu-calendar-app

[Mihir Soni]

Improved Monthview & Yearview

Improved Monthview & Yearview

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

PASSED: Continuous integration, rev:461
http://91.189.93.70:8080/job/ubuntu-calendar-app-ci/831/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/398
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/398/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-calendar-app-utopic-amd64-ci/389

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

review: Approve (continuous-integration)

[Nekhelesh Ramananthan (nik90)]

lgtm!

review: Approve

=== modified file 'MonthComponent.qml'
--- MonthComponent.qml	2014-09-08 10:21:19 +0000
+++ MonthComponent.qml	2014-09-19 15:12:39 +0000
@@ -40,8 +40,6 @@
     signal monthSelected(var date);
     signal dateSelected(var date)
 
-    height: ubuntuShape.height
-
     Loader{
         id: modelLoader
         sourceComponent: showEvents ? modelComponent: undefined
@@ -85,8 +83,8 @@
 
         //check if current month is start month
         property bool isCurMonthStartMonth: curMonthDate === monthStartDate
-                        && curMonth === monthStartMonth
-                        && curMonthYear === monthStartYear
+                                            && curMonth === monthStartMonth
+                                            && curMonthYear === monthStartYear
 
         //check current month is same as today's month
         property bool isCurMonthTodayMonth: todayYear === curMonthYear && todayMonth == curMonth
@@ -94,72 +92,68 @@
         property int offset: isCurMonthStartMonth ? -1 : (daysInStartMonth - monthStartDate)
     }
 
-    UbuntuShape {
-        id: ubuntuShape
-
-        anchors.fill: parent
-        radius: "medium"
-
-        Column{
-            id: column
-
-            anchors.top: parent.top
-            anchors.topMargin: units.gu(1.5)
-            anchors.bottomMargin: units.gu(1)
-            anchors.fill: parent
-            spacing: units.gu(1.5)
-
-            ViewHeader{
-                id: monthHeader
-                month: intern.curMonth
-                year: intern.curMonthYear
-
-                monthLabelFontSize: root.monthLabelFontSize
-                yearLabelFontSize: root.yearLabelFontSize
-            }
-
-            Item {
-                width: parent.width
-                height: dayLabelRow.height + units.gu(1)
-
-                DayHeaderBackground{}
-
-                Row{
-                    id: dayLabelRow
-                    width: parent.width
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    anchors.verticalCenter: parent.verticalCenter
-
-                    Repeater{
-                        id: dayLabelRepeater
-                        model:7
-                        delegate: dafaultDayLabelComponent
-                    }
-                }
-            }
-
-            Grid{
-                id: monthGrid
-                objectName: "monthGrid"
-
-                property int weekCount : 6
-
-                width: parent.width
-                height: parent.height - monthGrid.y
-
-                property int dayWidth: width / 7;
-                property int dayHeight: height / weekCount
-
-                rows: weekCount
-                columns: 7
+    Column{
+        id: column
+
+        anchors {
+            fill: parent
+            topMargin: units.gu(1.5)
+            bottomMargin: units.gu(1)
+        }
+
+        spacing: units.gu(1.5)
+
+        ViewHeader{
+            id: monthHeader
+            month: intern.curMonth
+            year: intern.curMonthYear
+
+            monthLabelFontSize: root.monthLabelFontSize
+            yearLabelFontSize: root.yearLabelFontSize
+            visible: isYearView === true
+        }
+
+        Item {
+            width: parent.width
+            height: dayLabelRow.height + units.gu(1)
+
+            DayHeaderBackground{}
+
+            Row{
+                id: dayLabelRow
+                width: parent.width
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
 
                 Repeater{
-                    id: dateLabelRepeater
-                    model: monthGrid.rows * monthGrid.columns
-                    delegate: defaultDateLabelComponent
+                    id: dayLabelRepeater
+                    model:7
+                    delegate: dafaultDayLabelComponent
                 }
             }
         }
+
+        Grid{
+            id: monthGrid
+            objectName: "monthGrid"
+
+            property int weekCount : 6
+
+            width: parent.width
+            height: parent.height - monthGrid.y
+
+            property int dayWidth: width / 7;
+            property int dayHeight: height / weekCount
+
+            rows: weekCount
+            columns: 7
+
+            Repeater{
+                id: dateLabelRepeater
+                model: monthGrid.rows * monthGrid.columns
+                delegate: defaultDateLabelComponent
+            }
+        }
     }
 
     Component{
@@ -228,9 +222,9 @@
 
             Loader{
                 property bool shouldLoad: showEvents
-                         && intern.eventStatus !== undefined
-                         && intern.eventStatus[index] !== undefined
-                         &&intern.eventStatus[index]
+                                          && intern.eventStatus !== undefined
+                                          && intern.eventStatus[index] !== undefined
+                                          &&intern.eventStatus[index]
                 sourceComponent: shouldLoad ? eventIndicatorComp : undefined
                 anchors.top: dateLabel.bottom
                 anchors.horizontalCenter: dateLabel.horizontalCenter
@@ -280,7 +274,7 @@
             id: weekDay
             width: parent.width / 7
             property var day :Qt.locale().standaloneDayName(( Qt.locale().firstDayOfWeek + index), Locale.ShortFormat)
-            text: day.toUpperCase();
+            text: day;
             horizontalAlignment: Text.AlignHCenter
             fontSize: root.dayLabelFontSize
             color: "white"

=== modified file 'MonthView.qml'
--- MonthView.qml	2014-09-19 10:36:39 +0000
+++ MonthView.qml	2014-09-19 15:12:39 +0000
@@ -15,7 +15,6 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
 import QtQuick 2.3
 import Ubuntu.Components 1.1
 import "dateExt.js" as DateExt
@@ -41,12 +40,19 @@
         }
     }
 
-    head.actions: [
-        calendarTodayAction,
-        commonHeaderActions.newEventAction,
-        commonHeaderActions.showCalendarAction,
-        commonHeaderActions.reloadAction
-    ]
+    head {
+        actions: [
+            calendarTodayAction,
+            commonHeaderActions.newEventAction,
+            commonHeaderActions.showCalendarAction,
+            commonHeaderActions.reloadAction
+        ]
+
+        contents: Label {
+            fontSize: "x-large"
+            text: i18n.tr(currentMonth.toLocaleString(Qt.locale(),i18n.tr("MMMM yyyy")))
+        }
+    }
 
     PathViewBase{
         id: monthViewPath
@@ -84,8 +90,8 @@
 
             showEvents: true
 
-            width: parent.width - units.gu(5)
-            height: parent.height - units.gu(5)
+            width: parent.width - units.gu(4)
+            height: parent.height
 
             currentMonth: monthViewPath.addMonth(monthViewPath.startMonth,
                                                  monthViewPath.indexType(index));

=== modified file 'YearView.qml'
--- YearView.qml	2014-09-19 10:36:39 +0000
+++ YearView.qml	2014-09-19 15:12:39 +0000
@@ -18,8 +18,8 @@
 
 import QtQuick 2.3
 import Ubuntu.Components 1.1
+
 import "dateExt.js" as DateExt
-
 Page {
     id: yearViewPage
     objectName: "yearViewPage"
@@ -39,12 +39,14 @@
         }
     }
 
-    head.actions: [
-        calendarTodayAction,
-        commonHeaderActions.newEventAction,
-        commonHeaderActions.showCalendarAction,
-        commonHeaderActions.reloadAction
-    ]
+    head {
+        actions: [
+            calendarTodayAction,
+            commonHeaderActions.newEventAction,
+            commonHeaderActions.showCalendarAction,
+            commonHeaderActions.reloadAction
+        ]
+    }
 
     PathViewBase {
         id: yearPathView
@@ -116,23 +118,28 @@
                 width: yearView.cellWidth
                 height: yearView.cellHeight
 
-                MonthComponent {
-                    id: monthComponent
-                    objectName: "monthComponent" + index
-                    showEvents: false
-                    currentMonth: new Date(yearView.year, index, 1, 0, 0, 0, 0)
-
-                    isYearView: true
+                UbuntuShape {
                     anchors.fill: parent
                     anchors.margins: units.gu(0.5)
-
-                    dayLabelFontSize:"x-small"
-                    dateLabelFontSize: "medium"
-                    monthLabelFontSize: "medium"
-                    yearLabelFontSize: "small"
-
-                    onMonthSelected: {
-                        yearViewPage.monthSelected(date);
+                    radius: "medium"
+
+                    MonthComponent {
+                        id: monthComponent
+                        objectName: "monthComponent" + index
+                        showEvents: false
+                        currentMonth: new Date(yearView.year, index, 1, 0, 0, 0, 0)
+
+                        isYearView: true
+                        anchors.fill: parent
+
+                        dayLabelFontSize:"x-small"
+                        dateLabelFontSize: "medium"
+                        monthLabelFontSize: "medium"
+                        yearLabelFontSize: "small"
+
+                        onMonthSelected: {
+                            yearViewPage.monthSelected(date);
+                        }
                     }
                 }
             }