fix(switch): keyboard focus ink state

No focus on click Closes #1336
angular · Apr 10, 2015 · 0e80219 · 0e80219
1 parent ade76f9
commit 0e80219
Show file tree

Hide file tree

Showing 12 changed files with 182 additions and 36 deletions.
diff --git a/src/components/checkbox/checkbox-theme.scss b/src/components/checkbox/checkbox-theme.scss
@@ -6,6 +6,9 @@ md-checkbox.md-THEME_NAME-theme {
  &.md-checked .md-ripple {
  color: '{{background-600}}';
  }
+ &.md-checked.focus .md-container:before {
+ background-color: '{{accent-color-0.26}}';
+ }
 
  .md-icon {
  border-color: '{{foreground-2}}';
@@ -34,6 +37,10 @@ md-checkbox.md-THEME_NAME-theme {
  background-color: '{{primary-color-0.87}}';
  }
 
+ &.md-checked.focus .md-container:before {
+ background-color: '{{primary-color-0.26}}';
+ }
+
  &.md-checked .md-icon:after {
  border-color: '{{background-200}}';
  }
@@ -43,14 +50,15 @@ md-checkbox.md-THEME_NAME-theme {
  .md-ripple {
  color: '{{warn-600}}';
  }
-
  .md-icon {
  border-color: '{{foreground-2}}';
  }
  &.md-checked .md-icon {
  background-color: '{{warn-color-0.87}}';
  }
-
+ &.md-checked.focus:not([disabled]) .md-container:before {
+ background-color: '{{warn-color-0.26}}';
+ }
  &.md-checked .md-icon:after {
  border-color: '{{background-200}}';
  }

diff --git a/src/components/checkbox/checkbox.js b/src/components/checkbox/checkbox.js
@@ -50,7 +50,7 @@ angular.module('material.components.checkbox', [
  * </hljs>
  *
  */
-function MdCheckboxDirective(inputDirective, $mdInkRipple, $mdAria, $mdConstant, $mdTheming, $mdUtil) {
+function MdCheckboxDirective(inputDirective, $mdInkRipple, $mdAria, $mdConstant, $mdTheming, $mdUtil, $timeout) {
  inputDirective = inputDirective[0];
  var CHECKED_CSS = 'md-checked';
 
@@ -98,8 +98,21 @@ function MdCheckboxDirective(inputDirective, $mdInkRipple, $mdAria, $mdConstant,
  0: {}
  }, attr, [ngModelCtrl]);
 
- element.on('click', listener)
- .on('keypress', keypressHandler);
+ // restrict focus styles to the keyboard
+ scope.mouseActive = false;
+ element
+ .on('keypress', keypressHandler)
+ .on('mousedown', function() {
+ scope.mouseActive = true;
+ $timeout(function(){
+ scope.mouseActive = false;
+ }, 100);
+ })
+ .on('focus', function() {
+ if(scope.mouseActive === false) element.addClass('focus');
+ })
+ .on('blur', function() { element.removeClass('focus'); });
+
  ngModelCtrl.$render = render;
 
  function keypressHandler(ev) {

diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
@@ -16,13 +16,43 @@ md-checkbox {
  box-sizing: border-box;
  }
 
+ &.focus:not([disabled]) {
+ .md-container:before {
+ left: -8px;
+ top: -8px;
+ right: -8px;
+ bottom: -8px;
+ }
+
+ &:not(.md-checked) {
+ .md-container:before {
+ background-color: rgba(0, 0, 0, 0.12);
+ }
+ }
+ }
+
  .md-container {
  position: relative;
  top: 4px;
  display: inline-block;
  width: $checkbox-width;
  height: $checkbox-height;
 
+ &:before {
+ background-color: transparent;
+ border-radius: 50%;
+ content: '';
+ position: absolute;
+ display: block;
+ height: auto;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ transition: all 0.5s;
+ width: auto;
+ }
+
  &:after {
  content: '';
  position: absolute;
@@ -65,11 +95,6 @@ md-checkbox {
  cursor: no-drop;
  }
 
- // focus
- &:focus .md-label:not(:empty) {
- border-color: black;
- }
-
 
  &.md-checked .md-icon:after {
  transform: rotate(45deg);

diff --git a/src/components/radioButton/radio-button-theme.scss b/src/components/radioButton/radio-button-theme.scss
@@ -81,5 +81,13 @@ md-radio-button.md-THEME_NAME-theme {
 
 
 md-radio-group.md-THEME_NAME-theme:focus:not(:empty) {
- border-color: '{{foreground-1}}';
+ .md-checked .md-container:before {
+ background-color: '{{accent-color-0.26}}';
+ }
+ .md-checked:not([disabled]).md-primary .md-container:before {
+ background-color: '{{primary-color-0.26}}';
+ }
+ .md-checked.md-primary .md-container:before {
+ background-color: '{{warn-color-0.26}}';
+ }
 }
diff --git a/src/components/radioButton/radio-button.scss b/src/components/radioButton/radio-button.scss
@@ -35,6 +35,21 @@ md-radio-button,
  left: -$radio-width;
  top: -$radio-width;
  }
+
+ &:before {
+ background-color: transparent;
+ border-radius: 50%;
+ content: '';
+ position: absolute;
+ display: block;
+ height: auto;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ transition: all 0.5s;
+ width: auto;
+ }
  }
 
 
@@ -80,13 +95,15 @@ md-radio-button,
  }
 
 }
-md-radio-group {
- border: 1px dotted transparent;
- display: block;
- outline: none;
+md-radio-group:focus .md-checked {
+ .md-container:before {
+ left: -8px;
+ top: -8px;
+ right: -8px;
+ bottom: -8px;
+ }
 }
 
-
 .radioButtondemoBasicUsage md-radio-group {
  border: none;
 }

diff --git a/src/components/radioButton/radioButton.js b/src/components/radioButton/radioButton.js
@@ -67,6 +67,7 @@ function mdRadioGroupDirective($mdUtil, $mdConstant, $mdTheming) {
  $mdTheming(element);
  var rgCtrl = ctrls[0];
  var ngModelCtrl = ctrls[1] || $mdUtil.fakeNgModel();
+ scope.mouseActive = false;
 
  function keydownListener(ev) {
  switch(ev.keyCode) {
@@ -97,7 +98,13 @@ function mdRadioGroupDirective($mdUtil, $mdConstant, $mdTheming) {
  'role': 'radiogroup',
  'tabIndex': element.attr('tabindex') || '0'
  })
- .on('keydown', keydownListener);
+ .on('keydown', keydownListener)
+ .on('mouseover', function() { scope.mouseActive = true; })
+ .on('mouseout', function() { scope.mouseActive = false; })
+ .on('focus', function() {
+ if(scope.mouseActive === false) element.addClass('focus');
+ })
+ .on('blur', function() { element.removeClass('focus'); });
 
  }
 

diff --git a/src/components/switch/demoBasicUsage/index.html b/src/components/switch/demoBasicUsage/index.html
@@ -15,12 +15,11 @@
  Switch (Disabled, Active)
  </md-switch>
 
- <md-switch class="md-primary" md-no-ink aria-label="Switch No Ink">
+ <md-switch class="md-primary" md-no-ink aria-label="Switch No Ink" ng-model="data.cb5">
  Switch (md-primary): No Ink
  </md-switch>
-
-
- <md-switch ng-model="data.cb5" aria-label="Switch 5" ng-change="onChange(data.cb5)">
- Switch 5 message: {{ message }}
+
+ <md-switch ng-model="data.cb6" aria-label="Switch 6" ng-change="onChange(data.cb6)">
+ Switch 6 message: {{ message }}
  </md-switch>
 </div>
diff --git a/src/components/switch/demoBasicUsage/script.js b/src/components/switch/demoBasicUsage/script.js
@@ -2,10 +2,11 @@ angular.module('switchDemo1', ['ngMaterial'])
 .controller('SwitchDemoCtrl', function($scope) {
  $scope.data = {
  cb1: true,
- cb4: true
+ cb4: true,
+ cb5: false
  };
- 
- $scope.onChange = function(cbState){
- $scope.message = "The switch is now: " + cbState;
+
+ $scope.onChange = function(cbState) {
+  $scope.message = "The switch is now: " + cbState;
  };
 });
diff --git a/src/components/switch/switch-theme.scss b/src/components/switch/switch-theme.scss
@@ -13,6 +13,9 @@ md-switch.md-THEME_NAME-theme {
  .md-bar {
  background-color: '{{accent-color-0.5}}';
  }
+ &.focus .md-thumb:before {
+ background-color: '{{accent-color-0.26}}';
+ }
 
  &.md-primary {
  .md-thumb {
@@ -21,6 +24,9 @@ md-switch.md-THEME_NAME-theme {
  .md-bar {
  background-color: '{{primary-color-0.5}}';
  }
+ &.focus .md-thumb:before {
+ background-color: '{{primary-color-0.26}}';
+ }
  }
 
  &.md-warn {
@@ -30,6 +36,9 @@ md-switch.md-THEME_NAME-theme {
  .md-bar {
  background-color: '{{warn-color-0.5}}';
  }
+ &.focus .md-thumb:before {
+ background-color: '{{warn-color-0.26}}';
+ }
  }
  }
 
@@ -41,12 +50,4 @@ md-switch.md-THEME_NAME-theme {
  background-color: '{{foreground-4}}';
  }
  }
-
- &:focus {
- .md-label:not(:empty) {
- border-color: '{{foreground-1}}';
- border-style: dotted;
- }
- }
-
 }
diff --git a/src/components/switch/switch.js b/src/components/switch/switch.js
@@ -80,6 +80,8 @@ function MdSwitch(mdCheckboxDirective, $mdTheming, $mdUtil, $document, $mdConsta
  var thumbContainer = angular.element(element[0].querySelector('.md-thumb-container'));
  var switchContainer = angular.element(element[0].querySelector('.md-container'));
 
+ scope.mouseActive = false;
+
  // no transition on initial load
  $$rAF(function() {
  element.removeClass('md-dragging');
@@ -93,6 +95,15 @@ function MdSwitch(mdCheckboxDirective, $mdTheming, $mdUtil, $document, $mdConsta
  });
  }
 
+ // keypress after clicking does not show focus circle
+ element
+ .on('mouseover', function() { scope.mouseActive = true; })
+ .on('mouseout', function() { scope.mouseActive = false; })
+ .on('focus', function() {
+ if(scope.mouseActive === false) element.addClass('focus');
+ })
+ .on('blur', function() { element.removeClass('focus'); });
+
  // These events are triggered by setup drag
  $mdGesture.register(switchContainer, 'drag');
  switchContainer

diff --git a/src/components/switch/switch.scss b/src/components/switch/switch.scss
@@ -31,6 +31,21 @@ md-switch {
  }
  }
 
+ &.focus:not([disabled]) {
+ .md-thumb:before {
+ left: -8px;
+ top: -8px;
+ right: -8px;
+ bottom: -8px;
+ }
+
+ &:not(.md-checked) {
+ .md-thumb:before {
+ background-color: rgba(0, 0, 0, 0.12);
+ }
+ }
+ }
+
  .md-label {
  border-color: transparent;
  border-width: 0px;
@@ -68,6 +83,21 @@ md-switch {
  border-radius: 50%;
  box-shadow: $whiteframe-shadow-z1;
 
+ &:before {
+ background-color: transparent;
+ border-radius: 50%;
+ content: '';
+ position: absolute;
+ display: block;
+ height: auto;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ transition: all 0.5s;
+ width: auto;
+ }
+
  .md-ripple-container {
  position: absolute;
  display: block;