add the calendar to the datepicker popup (#3178)

angular · May 9, 2017 · bc4b168 · bc4b168
1 parent 58456ea
commit bc4b168
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 12 deletions.
diff --git a/src/lib/datepicker/calendar.scss b/src/lib/datepicker/calendar.scss
@@ -64,7 +64,7 @@ $mat-calendar-weekday-table-font-size: 11px !default;
   margin: 0 $mat-calendar-arrow-size;
   vertical-align: middle;
 
-  .mat-calendar-invert {
+  &.mat-calendar-invert {
     transform: rotate(180deg);
   }
 }

diff --git a/src/lib/datepicker/datepicker.html b/src/lib/datepicker/datepicker.html
@@ -1,3 +1,6 @@
 <template>
-  I'm a datepicker (touch ui = {{touchUi}}).
+  <md-calendar
+      [class.mat-datepicker-touch]="touchUi"
+      [class.mat-datepicker-non-touch]="!touchUi">
+  </md-calendar>
 </template>
diff --git a/src/lib/datepicker/datepicker.scss b/src/lib/datepicker/datepicker.scss
@@ -0,0 +1,21 @@
+@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-width:
+    $md-datepicker-non-touch-calendar-cell-size * 7 + $md-datepicker-calendar-padding * 2;
+
+
+.mat-datepicker-touch {
+  width: $md-datepicker-touch-calendar-width;
+}
+
+.mat-datepicker-non-touch {
+  width: $md-datepicker-non-touch-calendar-width;
+  @include mat-elevation(8);
+}
diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts
@@ -1,13 +1,13 @@
 import {
+  ChangeDetectionStrategy,
   Component,
+  ElementRef,
+  OnDestroy,
+  Optional,
   TemplateRef,
   ViewChild,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
   ViewContainerRef,
-  Optional,
-  ElementRef,
-  OnDestroy
+  ViewEncapsulation
 } from '@angular/core';
 import {Overlay} from '../core/overlay/overlay';
 import {OverlayRef} from '../core/overlay/overlay-ref';
@@ -24,15 +24,12 @@ import {
 } from '../core/overlay/position/connected-position';
 
 
-// TODO(mmalerba): Figure out what the real width should be.
-const CALENDAR_POPUP_WIDTH = 300;
-
-
 /** Component responsible for managing the datepicker popup/dialog. */
 @Component({
   moduleId: module.id,
   selector: 'md-datepicker, mat-datepicker',
   templateUrl: 'datepicker.html',
+  styleUrls: ['datepicker.css'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -142,7 +139,6 @@ export class MdDatepicker implements OnDestroy {
   private _createPopup(): void {
     const overlayState = new OverlayState();
     overlayState.positionStrategy = this._createPopupPositionStrategy();
-    overlayState.width = CALENDAR_POPUP_WIDTH;
     overlayState.hasBackdrop = true;
     overlayState.backdropClass = 'md-overlay-transparent-backdrop';
     overlayState.direction = this._dir ? this._dir.value : 'ltr';