From 1f2c39c14f97ff9b8cc9450b10f51f0c1c1f5e7a Mon Sep 17 00:00:00 2001
From: mmalerba <mmalerba@google.com>
Date: Fri, 14 Apr 2017 10:30:43 -0700
Subject: [PATCH] fix(datepicker): make touch UI work well on mobile (#3853)

* add keyboard support, break some tests

* add tests

* some finishing touches

* addressed some comments

* separate md-datepicker-content into own component

* fix(datepicker): make touch UI work well on mobile

* use vmin instead of media queries + vw, vh

* fix non-touch styles

* addressed comments

* fix lint error about vmin

* addressed comments
---
 src/lib/datepicker/calendar.scss           |  1 +
 src/lib/datepicker/datepicker-content.html |  2 -
 src/lib/datepicker/datepicker-content.scss | 43 +++++++++++++++++-----
 src/lib/datepicker/datepicker.ts           |  4 ++
 stylelint-config.json                      |  2 +-
 5 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/lib/datepicker/calendar.scss b/src/lib/datepicker/calendar.scss
index 2d81baf71ade..307cb6d1cb4c 100644
--- a/src/lib/datepicker/calendar.scss
+++ b/src/lib/datepicker/calendar.scss
@@ -24,6 +24,7 @@ $mat-calendar-weekday-table-font-size: 11px !default;
 
 .mat-calendar-body {
   padding: $mat-calendar-padding;
+  outline: none;
 }
 
 .mat-calendar-controls {
diff --git a/src/lib/datepicker/datepicker-content.html b/src/lib/datepicker/datepicker-content.html
index 0472de27b662..f546bfcd5dda 100644
--- a/src/lib/datepicker/datepicker-content.html
+++ b/src/lib/datepicker/datepicker-content.html
@@ -1,7 +1,5 @@
 <md-calendar cdkTrapFocus
     [id]="datepicker.id"
-    [class.mat-datepicker-content-touch]="datepicker.touchUi"
-    [class.mat-datepicker-content-non-touch]="!datepicker.touchUi"
     [startAt]="datepicker.startAt"
     [minDate]="datepicker._minDate"
     [maxDate]="datepicker._maxDate"
diff --git a/src/lib/datepicker/datepicker-content.scss b/src/lib/datepicker/datepicker-content.scss
index f3856a482c4e..8d1feca4d925 100644
--- a/src/lib/datepicker/datepicker-content.scss
+++ b/src/lib/datepicker/datepicker-content.scss
@@ -1,21 +1,46 @@
 @import '../core/style/elevation';
 
 
-$md-datepicker-touch-calendar-cell-size: 60px;
-$md-datepicker-non-touch-calendar-cell-size: 40px;
 $md-datepicker-calendar-padding: 8px;
-
-$md-datepicker-touch-calendar-width:
-    $md-datepicker-touch-calendar-cell-size * 7 + $md-datepicker-calendar-padding * 2;
+$md-datepicker-non-touch-calendar-cell-size: 40px;
 $md-datepicker-non-touch-calendar-width:
     $md-datepicker-non-touch-calendar-cell-size * 7 + $md-datepicker-calendar-padding * 2;
 
+// Ideally the calendar would have a constant aspect ratio, no matter its size, and we would base
+// these measurements off the aspect ratio. Unfortunately, the aspect ratio does change a little as
+// the calendar grows, since some of the elements have pixel-based sizes. These numbers have been
+// chosen to minimize extra whitespace at larger sizes, while still ensuring we won't need
+// scrollbars at smaller sizes.
+$md-datepicker-touch-width: 67vmin;
+$md-datepicker-touch-height: 80vmin;
+$md-datepicker-touch-min-width: 253px;
+$md-datepicker-touch-min-height: 300px;
+$md-datepicker-touch-max-width: 778px;
+$md-datepicker-touch-max-height: 800px;
 
-.mat-datepicker-content-touch {
-  width: $md-datepicker-touch-calendar-width;
-}
 
-.mat-datepicker-content-non-touch {
+.mat-calendar {
   width: $md-datepicker-non-touch-calendar-width;
   @include mat-elevation(8);
 }
+
+.mat-datepicker-content-touch {
+  display: block;
+  // make sure the dialog scrolls rather than being cropped on ludicrously small screens
+  max-height: 80vh;
+  overflow: auto;
+
+  // TODO(mmalerba): hack to offset the padding of the dialog. Can be removed when we switch away
+  // from using dialog.
+  margin: -24px;
+
+  .mat-calendar {
+    width: $md-datepicker-touch-width;
+    height: $md-datepicker-touch-height;
+    min-width: $md-datepicker-touch-min-width;
+    min-height: $md-datepicker-touch-min-height;
+    max-width: $md-datepicker-touch-max-width;
+    max-height: $md-datepicker-touch-max-height;
+    @include mat-elevation(0);
+  }
+}
diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts
index 052d83a8b12d..f00dd6c01e92 100644
--- a/src/lib/datepicker/datepicker.ts
+++ b/src/lib/datepicker/datepicker.ts
@@ -49,6 +49,10 @@ let datepickerUid = 0;
   selector: 'md-datepicker-content',
   templateUrl: 'datepicker-content.html',
   styleUrls: ['datepicker-content.css'],
+  host: {
+    'class': 'mat-datepicker-content',
+    '[class.mat-datepicker-content-touch]': 'datepicker.touchUi',
+  },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/stylelint-config.json b/stylelint-config.json
index cde993a310c1..55e160bd08a1 100644
--- a/stylelint-config.json
+++ b/stylelint-config.json
@@ -29,7 +29,7 @@
 
     "unit-case": "lower",
     "unit-no-unknown": true,
-    "unit-whitelist": ["px", "%", "deg", "ms", "em", "vh", "vw"],
+    "unit-whitelist": ["px", "%", "deg", "ms", "em", "vh", "vw", "vmin"],
 
     "value-list-comma-space-after": "always-single-line",
     "value-list-comma-space-before": "never",