feat(datepicker): Add theme color and border width on focused datepicker

kennethcachia · Sep 23, 2015 · ac582c8 · ac582c8
1 parent 7e3b591
commit ac582c8
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/src/components/datepicker/datePicker-theme.scss b/src/components/datepicker/datePicker-theme.scss
@@ -9,6 +9,10 @@ md-datepicker.md-THEME_NAME-theme {
   .md-datepicker-input-container {
     border-bottom-color: '{{background-300}}';
 
+    &.md-datepicker-focused {
+      border-bottom-color: '{{primary-500}}'
+    }
+
     &.md-datepicker-invalid {
       border-bottom-color: '{{warn-500}}';
     }

diff --git a/src/components/datepicker/datePicker.js b/src/components/datepicker/datePicker.js
@@ -48,9 +48,10 @@
               'ng-click="ctrl.openCalendarPane($event)">' +
             '<md-icon class="md-datepicker-calendar-icon" md-svg-icon="md-calendar"></md-icon>' +
           '</md-button>' +
-          '<div class="md-datepicker-input-container">' +
-            '<input class="md-datepicker-input" aria-haspopup="true">' +
-
+          '<div class="md-datepicker-input-container" ' +
+              'ng-class="{\'md-datepicker-focused\': ctrl.isFocused}">' +
+            '<input class="md-datepicker-input" aria-haspopup="true" ' +
+                'ng-focus="ctrl.setFocused(true)" ng-blur="ctrl.setFocused(false)">' +
             '<md-button md-no-ink class="md-datepicker-triangle-button md-icon-button" ' +
                 'ng-click="ctrl.openCalendarPane($event)" ' +
                 'aria-label="{{::ctrl.dateLocale.msgOpenCalendar}}">' +
@@ -143,6 +144,9 @@
     /** @type {Date} */
     this.date = null;
 
+    /** @type {boolean} */
+    this.isFocused = false;
+
     /** @type {boolean} */
     this.isDisabled;
     this.setDisabled($element[0].disabled || angular.isString($attrs['disabled']));
@@ -371,6 +375,14 @@
     }, false);
   };
 
+  /**
+   * Sets whether the input is currently focused.
+   * @param {boolean} isFocused
+   */
+  DatePickerCtrl.prototype.setFocused = function(isFocused) {
+    this.isFocused = isFocused;
+  };
+
   /**
    * Handles a click on the document body when the floating calendar pane is open.
    * Closes the floating calendar pane if the click is not inside of it.

diff --git a/src/components/datepicker/datePicker.scss b/src/components/datepicker/datePicker.scss
@@ -31,6 +31,10 @@ $md-datepicker-open-animation-duration: 0.2s;
   display: inline-block;
   width: auto;
   margin-left: $md-datepicker-button-gap;
+
+  &.md-datepicker-focused {
+    border-bottom-width: 2px;
+  }
 }