feat(datepicker): add indicator that month headers are clickable

Adds an indicator to the month headers, showing the users that the header is clickable. Fixes angular#9128.
crisbeto · Jul 26, 2016 · 6ee3a07 · 6ee3a07
1 parent 73a4082
commit 6ee3a07
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/src/components/datepicker/calendar.scss b/src/components/datepicker/calendar.scss
@@ -131,6 +131,14 @@ md-calendar {
   md-calendar-month &:not(.md-calendar-month-label-disabled) {
     cursor: pointer;
   }
+
+  md-icon {
+    transform: rotate(180deg);
+  }
+
+  span {
+    vertical-align: middle;
+  }
 }
 
 // Table containing the day-of-the-week header.

diff --git a/src/components/datepicker/js/calendarMonthBody.js b/src/components/datepicker/js/calendarMonthBody.js
@@ -8,8 +8,12 @@
    * Private directive consumed by md-calendar-month. Having this directive lets the calender use
    * md-virtual-repeat and also cleanly separates the month DOM construction functions from
    * the rest of the calendar controller logic.
+   * @ngInject
    */
-  function mdCalendarMonthBodyDirective() {
+  function mdCalendarMonthBodyDirective($compile, $$mdSvgRegistry) {
+    var ARROW_ICON = $compile('<md-icon md-svg-src="' +
+      $$mdSvgRegistry.mdTabsArrow + '"></md-icon>')({})[0];
+
     return {
       require: ['^^mdCalendar', '^^mdCalendarMonth', 'mdCalendarMonthBody'],
       scope: { offset: '=mdMonthOffset' },
@@ -23,14 +27,15 @@
 
         monthBodyCtrl.calendarCtrl = calendarCtrl;
         monthBodyCtrl.monthCtrl = monthCtrl;
+        monthBodyCtrl.arrowIcon = ARROW_ICON.cloneNode(true);
         monthBodyCtrl.generateContent();
 
         // The virtual-repeat re-uses the same DOM elements, so there are only a limited number
-        // of repeated items that are linked, and then those elements have their bindings updataed.
+        // of repeated items that are linked, and then those elements have their bindings updated.
         // Since the months are not generated by bindings, we simply regenerate the entire thing
         // when the binding (offset) changes.
         scope.$watch(function() { return monthBodyCtrl.offset; }, function(offset, oldOffset) {
-          if (offset != oldOffset) {
+          if (offset !== oldOffset) {
             monthBodyCtrl.generateContent();
           }
         });
@@ -203,7 +208,10 @@
     // two cells of the first row.
     var blankCellOffset = 0;
     var monthLabelCell = document.createElement('td');
-    monthLabelCell.textContent = this.dateLocale.monthHeaderFormatter(date);
+    var monthLabelCellContent = document.createElement('span');
+
+    monthLabelCellContent.textContent = this.dateLocale.monthHeaderFormatter(date);
+    monthLabelCell.appendChild(monthLabelCellContent);
     monthLabelCell.classList.add('md-calendar-month-label');
     // If the entire month is after the max date, render the label as a disabled state.
     if (this.calendarCtrl.maxDate && firstDayOfMonth > this.calendarCtrl.maxDate) {
@@ -212,6 +220,7 @@
       monthLabelCell.addEventListener('click', this.monthCtrl.headerClickHandler);
       monthLabelCell.setAttribute('data-timestamp', firstDayOfMonth.getTime());
       monthLabelCell.setAttribute('aria-label', this.dateLocale.monthFormatter(date));
+      monthLabelCell.appendChild(this.arrowIcon.cloneNode(true));
     }
 
     if (firstDayOfTheWeek <= 2) {
@@ -225,8 +234,8 @@
         return monthBody;
       }
     } else {
-      blankCellOffset = 2;
-      monthLabelCell.setAttribute('colspan', '2');
+      blankCellOffset = 3;
+      monthLabelCell.setAttribute('colspan', '3');
       row.appendChild(monthLabelCell);
     }