fix(datepicker): use 3 rows to display months of year (consistent with internal mocks) (#5427)

fixes #5202

Author: mmalerba

src/lib/datepicker/calendar-body.html

@@ -3,18 +3,28 @@
   aria-hidden because we don't want it to be read out as one of the weeks in the month.
 -->
 <tr *ngIf="_firstRowOffset < labelMinRequiredCells" aria-hidden="true">
-  <td class="mat-calendar-body-label" [attr.colspan]="numCols" >{{label}}</td>
+  <td class="mat-calendar-body-label"
+      [attr.colspan]="numCols"
+      [style.paddingTop.%]="50 * cellAspectRatio / numCols"
+      [style.paddingBottom.%]="50 * cellAspectRatio / numCols">
+    {{label}}
+  </td>
 </tr>
 
 <!-- Create the first row separately so we can include a special spacer cell. -->
 <tr *ngFor="let row of rows; let rowIndex = index" role="row">
   <!--
     We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.
+    The aspect ratio of the table cells is maintained by setting the top and bottom padding as a
+    percentage of the width (a variant of the trick described here:
+    https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).
   -->
   <td *ngIf="rowIndex === 0 && _firstRowOffset"
       aria-hidden="true"
       class="mat-calendar-body-label"
-      [attr.colspan]="_firstRowOffset">
+      [attr.colspan]="_firstRowOffset"
+      [style.paddingTop.%]="50 * cellAspectRatio / numCols"
+      [style.paddingBottom.%]="50 * cellAspectRatio / numCols">
     {{_firstRowOffset >= labelMinRequiredCells ? label : ''}}
   </td>
   <td *ngFor="let item of row; let colIndex = index"
@@ -25,7 +35,10 @@
       [class.mat-calendar-body-active]="_isActiveCell(rowIndex, colIndex)"
       [attr.aria-label]="item.ariaLabel"
       [attr.aria-disabled]="!item.enabled || null"
-      (click)="_cellClicked(item)">
+      (click)="_cellClicked(item)"
+      [style.width.%]="100 / numCols"
+      [style.paddingTop.%]="50 * cellAspectRatio / numCols"
+      [style.paddingBottom.%]="50 * cellAspectRatio / numCols">
     <div class="mat-calendar-body-cell-content"
          [class.mat-calendar-body-selected]="selectedValue === item.value"
          [class.mat-calendar-body-today]="todayValue === item.value">

src/lib/datepicker/calendar-body.scss

@@ -1,12 +1,14 @@
 $mat-calendar-body-label-padding-start: 5% !default;
-$mat-calendar-body-label-translation: -6px !default;
+// We don't want the label to jump around when we switch between month and year views, so we use
+// the same amount of padding regardless of the number of columns. We align the header label with
+// the one third mark of the first cell, this was chosen somewhat arbitrarily to make it look
+// roughly like the mock. Half way is too far since the cell text is center aligned.
+$mat-calendar-body-label-side-padding: 33% / 7 !default;
 $mat-calendar-body-cell-min-size: 32px !default;
-$mat-calendar-body-cell-size: 100% / 7 !default;
 $mat-calendar-body-cell-content-margin: 5% !default;
 $mat-calendar-body-cell-content-border-width: 1px !default;
 
 $mat-calendar-body-min-size: 7 * $mat-calendar-body-cell-min-size !default;
-$mat-calendar-body-cell-padding: $mat-calendar-body-cell-size / 2 !default;
 $mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-margin * 2 !default;
 
 
@@ -15,20 +17,17 @@ $mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-mar
 }
 
 .mat-calendar-body-label {
-  padding: $mat-calendar-body-cell-padding 0
-           $mat-calendar-body-cell-padding $mat-calendar-body-cell-padding;
   height: 0;
   line-height: 0;
-  transform: translateX($mat-calendar-body-label-translation);
   text-align: left;
+  padding-left: $mat-calendar-body-label-side-padding;
+  padding-right: $mat-calendar-body-label-side-padding;
 }
 
 .mat-calendar-body-cell {
   position: relative;
-  width: $mat-calendar-body-cell-size;
   height: 0;
   line-height: 0;
-  padding: $mat-calendar-body-cell-padding 0;
   text-align: center;
   outline: none;
   cursor: pointer;
@@ -53,13 +52,13 @@ $mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-mar
 
   border-width: $mat-calendar-body-cell-content-border-width;
   border-style: solid;
-  border-radius: 50%;
+
+  // Choosing a value clearly larger than the height ensures we get the correct capsule shape.
+  border-radius: 999px;
 }
 
 [dir='rtl'] {
   .mat-calendar-body-label {
-    padding: 0 $mat-calendar-body-cell-padding 0 0;
-    transform: translateX(-$mat-calendar-body-label-translation);
     text-align: right;
   }
 }

src/lib/datepicker/calendar-body.ts

@@ -68,6 +68,12 @@ export class MdCalendarBody {
   /** The cell number of the active cell in the table. */
   @Input() activeCell = 0;
 
+  /**
+   * The aspect ratio (width / height) to use for the cells in the table. This aspect ratio will be
+   * maintained even as the table resizes.
+   */
+  @Input() cellAspectRatio = 1;
+
   /** Emits when a new value is selected. */
   @Output() selectedValueChange = new EventEmitter<number>();
 

src/lib/datepicker/calendar.scss

@@ -1,11 +1,11 @@
 $mat-calendar-padding: 8px !default;
 $mat-calendar-header-divider-width: 1px !default;
 $mat-calendar-controls-vertical-padding: 5%;
-// We want to indent to the middle of the first tile. There are 7 tiles, so 100% / 7 / 2.
-// Then we back up a little bit since the text in the cells is center-aligned.
-$mat-calendar-controls-start-padding: calc(100% / 14 - 22px);
-// Same as above, but on other side for arrows.
-$mat-calendar-controls-end-padding: calc(100% / 14 - 22px);
+// We use the same padding as the month / year label, but subtract 16px since there is padding
+// between the edge of the button and the text. This ensures that the button text lines up with
+// the month / year label text.
+$mat-calendar-controls-side-margin: calc(33% / 7 - 16px);
+
 $mat-calendar-arrow-size: 5px !default;
 $mat-calendar-arrow-disabled-opacity: 0.5 !default;
 
@@ -32,8 +32,7 @@ $mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 
 .mat-calendar-controls {
   display: flex;
-  padding: $mat-calendar-controls-vertical-padding $mat-calendar-controls-end-padding
-           $mat-calendar-controls-vertical-padding $mat-calendar-controls-start-padding;
+  margin: $mat-calendar-controls-vertical-padding $mat-calendar-controls-side-margin;
 }
 
 .mat-calendar-spacer {

src/lib/datepicker/index.ts

@@ -9,7 +9,7 @@
 import {NgModule} from '@angular/core';
 import {MdMonthView} from './month-view';
 import {CommonModule} from '@angular/common';
-import {StyleModule, OverlayModule, A11yModule} from '../core';
+import {A11yModule, OverlayModule, StyleModule} from '../core';
 import {MdCalendarBody} from './calendar-body';
 import {MdYearView} from './year-view';
 import {MdDatepicker, MdDatepickerContent} from './datepicker';

src/lib/datepicker/year-view.html

@@ -1,6 +1,6 @@
 <table class="mat-calendar-table">
   <thead class="mat-calendar-table-header">
-    <tr><th class="mat-calendar-table-header-divider" colspan="7"></th></tr>
+    <tr><th class="mat-calendar-table-header-divider" colspan="4"></th></tr>
   </thead>
   <tbody md-calendar-body
          role="grid"
@@ -10,6 +10,8 @@
          [todayValue]="_todayMonth"
          [selectedValue]="_selectedMonth"
          [labelMinRequiredCells]="2"
+         [numCols]="4"
+         [cellAspectRatio]="4 / 7"
          [activeCell]="_dateAdapter.getMonth(activeDate)"
          (selectedValueChange)="_monthSelected($event)">
   </tbody>

src/lib/datepicker/year-view.ts

@@ -108,7 +108,7 @@ export class MdYearView<D> implements AfterContentInit {
 
     let monthNames = this._dateAdapter.getMonthNames('short');
     // First row of months only contains 5 elements so we can fit the year label on the same row.
-    this._months = [[0, 1, 2, 3, 4], [5, 6, 7, 8, 9, 10, 11]].map(row => row.map(
+    this._months = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11]].map(row => row.map(
         month => this._createCellForMonth(month, monthNames[month])));
   }