From da1d1ca6092234ceeeda499c8c44f36f2362a74a Mon Sep 17 00:00:00 2001 From: mmalerba Date: Tue, 11 Jul 2017 10:19:41 -0700 Subject: [PATCH] fix(datepicker): use 3 rows to display months of year (consistent with internal mocks) (#5427) fixes #5202 --- src/lib/datepicker/calendar-body.html | 19 ++++++++++++++++--- src/lib/datepicker/calendar-body.scss | 21 ++++++++++----------- src/lib/datepicker/calendar-body.ts | 6 ++++++ src/lib/datepicker/calendar.scss | 13 ++++++------- src/lib/datepicker/index.ts | 2 +- src/lib/datepicker/year-view.html | 4 +++- src/lib/datepicker/year-view.ts | 2 +- 7 files changed, 43 insertions(+), 24 deletions(-) diff --git a/src/lib/datepicker/calendar-body.html b/src/lib/datepicker/calendar-body.html index a668b1060fef..01f2684b77ec 100644 --- a/src/lib/datepicker/calendar-body.html +++ b/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. --> - {{label}} + + {{label}} + + [attr.colspan]="_firstRowOffset" + [style.paddingTop.%]="50 * cellAspectRatio / numCols" + [style.paddingBottom.%]="50 * cellAspectRatio / numCols"> {{_firstRowOffset >= labelMinRequiredCells ? label : ''}} + (click)="_cellClicked(item)" + [style.width.%]="100 / numCols" + [style.paddingTop.%]="50 * cellAspectRatio / numCols" + [style.paddingBottom.%]="50 * cellAspectRatio / numCols">
diff --git a/src/lib/datepicker/calendar-body.scss b/src/lib/datepicker/calendar-body.scss index 5ea5b9d68952..93751c52d3ad 100644 --- a/src/lib/datepicker/calendar-body.scss +++ b/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; } } diff --git a/src/lib/datepicker/calendar-body.ts b/src/lib/datepicker/calendar-body.ts index b73d92379a1f..588add90743b 100644 --- a/src/lib/datepicker/calendar-body.ts +++ b/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(); diff --git a/src/lib/datepicker/calendar.scss b/src/lib/datepicker/calendar.scss index 0d120188f1f4..4595f751e561 100644 --- a/src/lib/datepicker/calendar.scss +++ b/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 { diff --git a/src/lib/datepicker/index.ts b/src/lib/datepicker/index.ts index 3c3045621bb2..5c453e874734 100644 --- a/src/lib/datepicker/index.ts +++ b/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'; diff --git a/src/lib/datepicker/year-view.html b/src/lib/datepicker/year-view.html index 537db7e82634..4fd34e0c3b89 100644 --- a/src/lib/datepicker/year-view.html +++ b/src/lib/datepicker/year-view.html @@ -1,6 +1,6 @@ - + diff --git a/src/lib/datepicker/year-view.ts b/src/lib/datepicker/year-view.ts index 797a77b73f8a..a2fe29529909 100644 --- a/src/lib/datepicker/year-view.ts +++ b/src/lib/datepicker/year-view.ts @@ -108,7 +108,7 @@ export class MdYearView 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]))); }