fix(datepicker): make calendar look more like mocks (#3138)

* style changes * more styles * addressed comments
angular · Apr 14, 2017 · e5a26be · e5a26be
1 parent 9196fc8
commit e5a26be
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 49 deletions.
diff --git a/src/lib/datepicker/_datepicker-theme.scss b/src/lib/datepicker/_datepicker-theme.scss
@@ -3,10 +3,32 @@
 
 
 @mixin mat-datepicker-theme($theme) {
+  $mat-datepicker-selected-today-box-shadow-width: 1px;
   $primary: map-get($theme, primary);
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
 
+  .mat-calendar {
+    background-color: mat-color($background, card);
+  }
+
+  .mat-calendar-header {
+    border-color: mat-color($foreground, divider);
+  }
+
+  .mat-calendar-arrow {
+    border-top-color: mat-color($foreground, icon);
+  }
+
+  .mat-calendar-next-button,
+  .mat-calendar-previous-button {
+    color: mat-color($foreground, icon);
+  }
+
+  .mat-calendar-weekday-table {
+    color: mat-color($foreground, hint-text);
+  }
+
   .mat-calendar-table-label {
     color: mat-color($foreground, secondary-text);
   }
@@ -16,17 +38,27 @@
     border-color: transparent;
   }
 
-  .mat-calendar-table-cell-content:hover {
-    background: mat-color($background, hover);
+  .mat-calendar-table-cell:hover {
+    .mat-calendar-table-cell-content:not(.mat-calendar-table-selected) {
+      background-color: mat-color($background, hover);
+    }
   }
 
-  .mat-calendar-table-selected,
-  .mat-calendar-table-selected:hover {
-    background: mat-color($primary);
+  .mat-calendar-table-selected {
+    background-color: mat-color($primary);
     color: mat-color($primary, default-contrast);
   }
 
   .mat-calendar-table-today {
-    border-color: mat-color($foreground, divider);
+    &:not(.mat-calendar-table-selected) {
+      // Note: though it's not text, the border is a hint about the fact that this is today's date,
+      // so we use the hint color.
+      border-color: mat-color($foreground, hint-text);
+    }
+
+    &.mat-calendar-table-selected {
+      box-shadow: inset 0 0 0 $mat-datepicker-selected-today-box-shadow-width
+                  mat-color($primary, default-contrast);
+    }
   }
 }
diff --git a/src/lib/datepicker/calendar-table.scss b/src/lib/datepicker/calendar-table.scss
@@ -1,4 +1,5 @@
-$mat-calendar-table-font-size: 12px !default;
+$mat-calendar-table-font-size: 13px !default;
+$mat-calendar-table-header-font-size: 14px !default;
 $mat-calendar-table-label-padding-start: 5% !default;
 $mat-calendar-table-label-translation: -6px !default;
 $mat-calendar-table-cell-min-size: 32px !default;
@@ -20,10 +21,14 @@ $mat-calendar-table-cell-content-size: 100% - $mat-calendar-table-cell-content-m
 }
 
 .mat-calendar-table-label {
-  padding: 0 0 0 $mat-calendar-table-cell-padding;
+  padding: $mat-calendar-table-cell-padding 0
+           $mat-calendar-table-cell-padding $mat-calendar-table-cell-padding;
+  height: 0;
+  line-height: 0;
   transform: translateX($mat-calendar-table-label-translation);
   text-align: left;
-  font-weight: normal;
+  font-size: $mat-calendar-table-header-font-size;
+  font-weight: bold;
 }
 
 .mat-calendar-table-cell {

diff --git a/src/lib/datepicker/calendar.html b/src/lib/datepicker/calendar.html
@@ -1,39 +1,44 @@
 <div class="mat-calendar-header">
-  <button class="mat-calendar-button mat-calendar-period-button" (click)="_currentPeriodClicked()">
-    {{_label}}
-    <div class="mat-calendar-arrow"></div>
-  </button>
-  <div class="mat-calendar-spacer"></div>
-  <button class="mat-calendar-button mat-calendar-previous-button" (click)="_previousClicked()">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"
-         fill="#000000">
-      <path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/>
-      <path d="M0-.5h24v24H0z" fill="none"/>
-    </svg>
-  </button>
-  <button class="mat-calendar-button mat-calendar-next-button" (click)="_nextClicked()">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"
-         fill="#000000">
-      <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/>
-      <path d="M0-.25h24v24H0z" fill="none"/>
-    </svg>
-  </button>
-</div>
+  <div class="mat-calendar-controls">
+    <button class="mat-calendar-button mat-calendar-period-button"
+            (click)="_currentPeriodClicked()">
+      {{_label}}
+      <div class="mat-calendar-arrow" [class.mat-calendar-invert]="!_monthView"></div>
+    </button>
+    <div class="mat-calendar-spacer"></div>
+    <button class="mat-calendar-button mat-calendar-previous-button" (click)="_previousClicked()">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"
+           fill="currentColor">
+        <path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/>
+        <path d="M0-.5h24v24H0z" fill="none"/>
+      </svg>
+    </button>
+    <button class="mat-calendar-button mat-calendar-next-button" (click)="_nextClicked()">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"
+           fill="currentColor">
+        <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/>
+        <path d="M0-.25h24v24H0z" fill="none"/>
+      </svg>
+    </button>
+  </div>
 
-<table class="mat-calendar-weekday-table">
-  <tr><td *ngFor="let day of _weekdays">{{day}}</td></tr>
-</table>
+  <table class="mat-calendar-weekday-table">
+    <tr><td *ngFor="let day of _weekdays">{{day}}</td></tr>
+  </table>
+</div>
 
-<md-month-view
-    *ngIf="_monthView"
-    [date]="_currentPeriod"
-    [selected]="selected"
-    (selectedChange)="_dateSelected($event)">
-</md-month-view>
+<div class="mat-calendar-body">
+  <md-month-view
+      *ngIf="_monthView"
+      [date]="_currentPeriod"
+      [selected]="selected"
+      (selectedChange)="_dateSelected($event)">
+  </md-month-view>
 
-<md-year-view
-    *ngIf="!_monthView"
-    [date]="_currentPeriod"
-    [selected]="selected"
-    (selectedChange)="_monthSelected($event)">
-</md-year-view>
+  <md-year-view
+      *ngIf="!_monthView"
+      [date]="_currentPeriod"
+      [selected]="selected"
+      (selectedChange)="_monthSelected($event)">
+  </md-year-view>
+</div>
diff --git a/src/lib/datepicker/calendar.scss b/src/lib/datepicker/calendar.scss
@@ -1,11 +1,34 @@
+$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 - 6px);
+// Same as above, but we back up a little more since the arrow buttons have more padding.
+$mat-calendar-controls-end-padding: calc(100% / 14 - 12px);
+$mat-calendar-period-font-size: 14px;
 $mat-calendar-arrow-size: 5px !default;
+$mat-calendar-weekday-table-font-size: 11px !default;
+
 
 .mat-calendar {
   display: block;
 }
 
 .mat-calendar-header {
+  border-bottom-width: $mat-calendar-header-divider-width;
+  border-bottom-style: solid;
+  padding: $mat-calendar-padding;
+}
+
+.mat-calendar-body {
+  padding: $mat-calendar-padding;
+}
+
+.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;
 }
 
 .mat-calendar-spacer {
@@ -20,6 +43,12 @@ $mat-calendar-arrow-size: 5px !default;
   outline: none;
 }
 
+.mat-calendar-period-button {
+  font: inherit;
+  font-size: $mat-calendar-period-font-size;
+  font-weight: bold;
+}
+
 .mat-calendar-button > svg {
   vertical-align: middle;
 }
@@ -30,7 +59,18 @@ $mat-calendar-arrow-size: 5px !default;
   height: 0;
   border-left: $mat-calendar-arrow-size solid transparent;
   border-right: $mat-calendar-arrow-size solid transparent;
-  border-top: $mat-calendar-arrow-size solid;
+  border-top-width: $mat-calendar-arrow-size;
+  border-top-style: solid;
   margin: 0 $mat-calendar-arrow-size;
   vertical-align: middle;
+
+  .mat-calendar-invert {
+    transform: rotate(180deg);
+  }
+}
+
+.mat-calendar-weekday-table {
+  width: 100%;
+  text-align: center;
+  font-size: $mat-calendar-weekday-table-font-size;
 }
diff --git a/src/lib/datepicker/calendar.ts b/src/lib/datepicker/calendar.ts
@@ -62,7 +62,8 @@ export class MdCalendar implements AfterContentInit {
 
   /** The label for the current calendar view. */
   get _label(): string {
-    return this._monthView ? this._locale.getCalendarMonthHeaderLabel(this._currentPeriod) :
+    return this._monthView ?
+        this._locale.getCalendarMonthHeaderLabel(this._currentPeriod).toLocaleUpperCase() :
         this._locale.getCalendarYearHeaderLabel(this._currentPeriod);
   }
 

diff --git a/src/lib/datepicker/month-view.ts b/src/lib/datepicker/month-view.ts
@@ -86,7 +86,7 @@ export class MdMonthView implements AfterContentInit {
   private _init() {
     this._selectedDate = this._getDateInCurrentMonth(this.selected);
     this._todayDate = this._getDateInCurrentMonth(SimpleDate.today());
-    this._monthLabel = this._locale.getCalendarMonthHeaderLabel(this.date);
+    this._monthLabel = this._locale.shortMonths[this.date.month].toLocaleUpperCase();
 
     let firstOfMonth = new SimpleDate(this.date.year, this.date.month, 1);
     this._firstWeekOffset =
@@ -114,6 +114,6 @@ export class MdMonthView implements AfterContentInit {
    * Returns null if the given Date is in another month.
    */
   private _getDateInCurrentMonth(date: SimpleDate) {
-    return date && date.month == this.date.month ? date.date : null;
+    return date && date.month == this.date.month && date.year == this.date.year ? date.date : null;
   }
 }
diff --git a/src/lib/datepicker/year-view.ts b/src/lib/datepicker/year-view.ts
@@ -95,6 +95,6 @@ export class MdYearView implements AfterContentInit {
 
   /** Creates an MdCalendarCell for the given month. */
   private _createCellForMonth(month: number) {
-    return new MdCalendarCell(month, this._locale.shortMonths[month]);
+    return new MdCalendarCell(month, this._locale.shortMonths[month].toLocaleUpperCase());
   }
 }