Merge pull request #18599 from gaye/calendar-visual-refresh

Bug 951069 - Month view visual refresh r=millermedeiros

apps/calendar/index.html

@@ -11,6 +11,7 @@
   <link rel="stylesheet" type="text/css" href="/style/calendar.css">
   <link rel="stylesheet" type="text/css" href="/style/ui.css">
   <link rel="stylesheet" type="text/css" href="/style/day_views.css">
+  <link rel="stylesheet" type="text/css" href="/style/month.css">
   <link rel="stylesheet" type="text/css" href="/style/building_blocks.css">
   <link rel="stylesheet" type="text/css" href="/style/first_time_use.css">
 
@@ -66,6 +67,7 @@
   <script defer src="/js/views/day_based.js"></script>
   <script defer src="/js/views/month.js"></script>
   <script defer src="/js/views/day_child.js"></script>
+  <script defer src="/js/templates/months_day.js"></script>
   <script defer src="/js/views/months_day.js"></script>
 
   <!--- store -->
@@ -148,6 +150,8 @@ <h1 id="current-month-year">
   access to the details here
   -->
   <section id="months-day-view" role="tabpanel" aria-labelledby="today">
+    <div id="event-list-date"></div>
+    <div id="empty-message" data-l10n-id="no-events" class="active">No Events</div>
     <section id="event-list" class="day-events">
     </section>
   </section>
@@ -164,7 +168,6 @@ <h1 id="current-month-year">
     <li class="week" role="presentation"><a role="tab" aria-selected="false" aria-controls="week-view" id="week" data-l10n-id="show-week-view" href="/week/">Week</a></li>
     <li class="day" role="presentation"><a role="tab" aria-selected="false" aria-controls="day-view" id="day" data-l10n-id="show-day-view" href="/day/">Day</a></li>
   </ul>
-
 </section>
 
 <section is="create-account" class="fullscreen-view skin-organic" id="create-account-view" role="region"></section>

apps/calendar/js/load_config.js

@@ -132,7 +132,10 @@ Calendar.LoadConfig = (function() {
       },
 
       'Views.MonthsDay': {
-        group: ['Views.DayChild'],
+        group: [
+          'Templates.MonthsDay',
+          'Views.DayChild'
+        ],
         js: [
           'views/months_day'
         ]
@@ -316,6 +319,13 @@ Calendar.LoadConfig = (function() {
         ]
       },
 
+      'Templates.MonthsDay': {
+        js: [
+          'template',
+          'templates/month'
+        ]
+      },
+
       'Templates.Day': {
         js: [
           'template',

apps/calendar/js/templates/month.js

@@ -39,7 +39,7 @@
                   '" data-date="' + this.s('dateString') +
                   '" class="' + this.s('state') + '">' +
           '<span class="day">' + this.h('date') + '</span>' +
-          '<div class="busy-indicator">' + this.s('busy') + '</div>' +
+          '<div class="busy-indicator"></div>' +
         '</li>';
     }
   });

apps/calendar/js/templates/months_day.js

@@ -0,0 +1,58 @@
+(function(window) {
+  'use strict';
+
+  var MonthsDay = Calendar.Template.create({
+    event: function() {
+      var calendarId = this.h('calendarId');
+
+      var sectionClassList = [
+        'event',
+        'calendar-id-' + calendarId,
+        'calendar-display',
+        this.h('classes')
+      ].join(' ');
+
+      var containerClassList = [
+        'container',
+        'calendar-id-' + calendarId,
+        'calendar-color'
+      ].join(' ');
+
+      this.eventTime = function() {
+        return this.h('isAllDay') ?
+          '<div class="all-day">All Day</div>' :
+          ('<div class="start-time">' + this.h('startTime') + '</div>' +
+           '<div class="end-time">' + this.h('endTime') + '</div>');
+      };
+
+      this.eventDetails = function() {
+        var result = '<h5>' + this.h('title') + '</h5>';
+        var location = this.h('location');
+        if (location && location.length > 0) {
+          result += '<span class="details">';
+          result += '<span class="location">';
+          result += location;
+          result += '</span>';
+          result += '</span>';
+        }
+
+        return result;
+      };
+
+      return '<section class="' + sectionClassList + '" ' +
+                      'data-id="' + this.h('busytimeId') + '">' +
+             '<div class="' + containerClassList + '">' +
+               '<div class="icon-dot"></div>' +
+               '<div class="event-time">' + this.eventTime() + '</div>' +
+               '<div class="event-details">' + this.eventDetails() + '</div>' +
+               '<div class="icon-alarm"></div>' +
+             '</div>' +
+             '</section>';
+    }
+  });
+
+  MonthsDay.eventSelector = '.event';
+  MonthsDay.hourEventsSelector = '.events';
+
+  Calendar.ns('Templates').MonthsDay = MonthsDay;
+}(this));

apps/calendar/js/views/day_based.js

@@ -180,7 +180,7 @@ Calendar.ns('Views').DayBased = (function() {
         // new event
         this._idsToHours[id] = [hour];
 
-        var html = this._renderEvent(busytime, record);
+        var html = this._renderEvent(busytime, record, hour);
         var eventArea = hourRecord.element;
 
         if (this.template.hourEventsSelector) {
@@ -357,7 +357,7 @@ Calendar.ns('Views').DayBased = (function() {
     },
 
     /** must be overriden */
-    _renderEvent: function(busytime, event) {},
+    _renderEvent: function(busytime, event, hour) {},
 
     _renderHour: function(hour) {
       return this.template.hour.render({

apps/calendar/js/views/day_child.js

@@ -29,7 +29,11 @@ Calendar.ns('Views').DayChild = (function() {
         calendarId: event.calendarId,
         title: event.remote.title,
         location: event.remote.location,
-        attendees: attendees
+        attendees: attendees,
+        startTime: Calendar.App.dateFormat.localeFormat(
+          event.remote.startDate, navigator.mozL10n.get('shortTimeFormat')),
+        endTime: Calendar.App.dateFormat.localeFormat(
+          event.remote.endDate, navigator.mozL10n.get('shortTimeFormat'))
       });
     },