fix disabled check

fix css for disabled panel add disabled panel to home page add tests
B-3PO · Nov 7, 2016 · d0c50e5 · d0c50e5
1 parent bcea0b2
commit d0c50e5
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 13 deletions.
diff --git a/app/pages/home/home.controller.js b/app/pages/home/home.controller.js
@@ -12,4 +12,6 @@ function HomeController($scope, $mdExpansionPanel) {
   $scope.collapseOne = function () {
     $mdExpansionPanel('expansionPanelOne').collapse();
   };
+
+  $scope.isDisabled = true;
 }
diff --git a/app/pages/home/home.html b/app/pages/home/home.html
@@ -150,3 +150,35 @@ <h4>Content</h4>
   </md-expansion-panel-expanded>
 
 </md-expansion-panel>
+
+
+
+<md-expansion-panel ng-disabled="isDisabled">
+
+  <md-expansion-panel-collapsed>
+    <div class="md-title">Disabled Panel</div>
+    <span flex></span>
+    <md-expansion-panel-icon></md-expansion-panel-icon>
+  </md-expansion-panel-collapsed>
+
+  <md-expansion-panel-expanded>
+
+    <md-expansion-panel-header>
+      <div class="md-title">Disabled Panel</div>
+      <div class="md-summary">Expanded Summary</div>
+      <md-expansion-panel-icon></md-expansion-panel-icon>
+    </md-expansion-panel-header>
+
+    <md-expansion-panel-content>
+      <h4>Content</h4>
+      <p>Put content in here</p>
+    </md-expansion-panel-content>
+
+    <md-expansion-panel-footer>
+      <div flex></div>
+      <md-button class="md-warn" ng-click="$panel.collapse()">Collapse</md-button>
+    </md-expansion-panel-footer>
+
+  </md-expansion-panel-expanded>
+
+</md-expansion-panel>
diff --git a/karma.conf.js b/karma.conf.js
@@ -29,7 +29,7 @@ module.exports = function(config) {
     // test results reporter to use
     // possible values: 'dots', 'progress'
     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    reporters: [ 'spec'],
+    reporters: [ 'progress'],
 
 
     // web server port

diff --git a/src/expansionPanels-theme.scss b/src/expansionPanels-theme.scss
@@ -25,7 +25,14 @@ md-expansion-panel {
 
   &[disabled] {
     md-expansion-panel-collapsed {
-      color: #DDD;
+      .md-title,
+      .md-summary {
+        color: #DDD;
+      }
+    }
+
+    .md-expansion-panel-icon svg {
+      fill: #DDD;
     }
   }
 

diff --git a/src/expansionPanels.spec.js b/src/expansionPanels.spec.js
@@ -429,6 +429,28 @@ describe('material.components.expansionPanels', function () {
     });
 
 
+    it('should set `tabindex` to `-1` if `ng-disabled` is true', function () {
+      var element = getDirective({ngDisabled: 'isDisabled'});
+      scope.isDisabled = true;
+      scope.$digest();
+      expect(element.attr('tabindex')).toEqual('-1');
+    });
+
+    it('should set `tabindex` to `0` if `ng-disabled` is false', function () {
+      var element = getDirective({ngDisabled: 'isDisabled'});
+      scope.isDisabled = false;
+      scope.$digest();
+      expect(element.attr('tabindex')).toEqual('0');
+    });
+
+    it('should set `tabindex` to `0` if `ng-disabled` is not set', function () {
+      var element = getDirective({ngDisabled: 'isDisabled'});
+      scope.isDisabled = undefined;
+      scope.$digest();
+      expect(element.attr('tabindex')).toEqual('0');
+    });
+
+
     it('should thow errors on invalid markup', inject(function($compile, $rootScope) {
       function buildBadPanelOne() {
         $compile('<md-expansion-panel></md-expansion-panel>')($rootScope);
@@ -851,7 +873,7 @@ describe('material.components.expansionPanels', function () {
     options = options || {};
 
     return $mdUtil.supplant('{2}' +
-    '<md-expansion-panel {0}{6}>'+
+    '<md-expansion-panel {0}{6}{7}>'+
       '><md-expansion-panel-collapsed>'+
         '<div class="md-title">Title</div>'+
         '<div class="md-summary">Summary</div>'+
@@ -878,7 +900,8 @@ describe('material.components.expansionPanels', function () {
       options.content ? '</md-content>' : '',
       options.headerNoStick ? ' md-no-sticky ' : '',
       options.footerNoStick ? ' md-no-sticky ' : '',
-      options.componentId ? ' md-component-id="'+options.componentId+'" ' : ''
+      options.componentId ? ' md-component-id="'+options.componentId+'" ' : '',
+      options.ngDisabled ? ' ng-disabled="'+options.ngDisabled+'" ' : ''
     ]);
   }
 

diff --git a/src/js/expansionPanel.directive.js b/src/js/expansionPanel.directive.js
@@ -102,15 +102,15 @@ function expansionPanelDirective() {
     vm.onRemove = onRemove;
     vm.init = init;
 
-    $attrs.$observe('disabled', function(disabled) {
-      isDisabled = (typeof disabled === 'string' && disabled !== 'false') ? true : false;
-
-      if (isDisabled === true) {
-        $element.attr('tabindex', '-1');
-      } else {
-        $element.attr('tabindex', '0');
-      }
-    });
+    if ($attrs.ngDisabled !== undefined) {
+      $scope.$watch($attrs.ngDisabled, function(value) {
+        isDisabled = value;
+        $element.attr('tabindex', isDisabled ? -1 : 0);
+      });
+    } else if ($attrs.disabled !== undefined) {
+      isDisabled = ($attrs.disabled !== undefined && $attrs.disabled !== 'false' && $attrs.disabled !== false);
+      $element.attr('tabindex', isDisabled ? -1 : 0);
+    }
 
     $element
       .on('focus', function (ev) {