fix(progressLinear, progressCircular): sync logic, fix linear animati…

…ons, perf upgrades synchronize progressLinear with similar logic used in progressCircular. * improve animation performances * watch md-mode for changes * refactor animation SCSS * enable hiding and no-animations with undefined/empty md-mode attributes * for both indicators, use `display:inline-block;` * update demos with enable switch * fix query mode * update Select to use enhanced progressCircular component * fix autocomplete styling of progress-linear.md-mode-indeterminate BREAKING-CHANGES Before: ```css md-progress-linear { display: block; } md-progress-circular { // display not set // position not set } ``` ```css md-progress-linear { display: inline-block; position: relative; } md-progress-circular { display: inline-block; position: relative; } ``` Fixes #4421. Fixes #4409. Fixes #2540. Fixes #2364. Fixes #1926. Fixes #3802.
angular · Sep 3, 2015 · 7991599 · 7991599
1 parent ffbcff3
commit 7991599
Show file tree

Hide file tree

Showing 11 changed files with 366 additions and 184 deletions.
diff --git a/src/components/autocomplete/autocomplete.scss b/src/components/autocomplete/autocomplete.scss
@@ -71,15 +71,14 @@ md-autocomplete {
     &.md-menu-showing {
       z-index: $z-index-backdrop + 1;
     }
-    md-progress-linear[md-mode=indeterminate] {
+    md-progress-linear .md-mode-indeterminate {
       position: absolute;
-      bottom: 0; left: 0; width: 100%;
+      top: 20px; left: 0; width: 100%;
       height: 3px;
       transition: none;
 
       .md-container {
         transition: none;
-        top: auto;
         height: 3px;
       }
       &.ng-enter {

diff --git a/src/components/progressCircular/demoBasicUsage/index.html b/src/components/progressCircular/demoBasicUsage/index.html
@@ -28,7 +28,7 @@ <h4>Theming  </h4>
 
     <div layout="row" id="loaders">
 
-      <p style="margin-right: 20px">Show Progress Circular Indicators: </p>
+      <p>Show Progress Circular Indicators: </p>
 
       <h5>Off</h5>
       <md-switch

diff --git a/src/components/progressCircular/demoBasicUsage/style.css b/src/components/progressCircular/demoBasicUsage/style.css
@@ -20,3 +20,7 @@ md-progress-circular {
 #loaders > h5 {
     padding-top: 8px;
 }
+
+#loaders > p {
+    margin-right: 20px;
+}
diff --git a/src/components/progressCircular/progress-circular.js b/src/components/progressCircular/progress-circular.js
@@ -101,7 +101,7 @@ function MdProgressCircularDirective($mdConstant, $mdTheming, $mdUtil) {
       var percentValue = clamp(value);
       element.attr('aria-valuenow', percentValue);
 
-      if (attr.mdMode == "determinate") {
+      if (mode() == MODE_DETERMINATE) {
         animateIndicator(percentValue);
       }
     });
@@ -122,6 +122,11 @@ function MdProgressCircularDirective($mdConstant, $mdTheming, $mdUtil) {
           break;
         default:
           spinnerWrapper.addClass('ng-hide');
+          if ( lastMode ) {
+            spinnerWrapper.removeClass( lastMode );
+            lastMode = undefined;
+          }
+          break;
       }
     });
 
@@ -136,6 +141,8 @@ function MdProgressCircularDirective($mdConstant, $mdTheming, $mdUtil) {
      * - use attribute selectors which had poor performances in IE
      */
     function animateIndicator(value) {
+      if ( !mode() ) return;
+
       leftC  = leftC  || angular.element(element[0].querySelector('.md-left > .md-half-circle'));
       rightC = rightC || angular.element(element[0].querySelector('.md-right > .md-half-circle'));
       gap    = gap    || angular.element(element[0].querySelector('.md-gap'));
@@ -174,6 +181,25 @@ function MdProgressCircularDirective($mdConstant, $mdTheming, $mdUtil) {
       // should return ratio; DEFAULT_PROGRESS_SIZE === 100px is default size
       return  (value > 1) ? value / DEFAULT_PROGRESS_SIZE : value;
     }
+
+    /**
+     * Is the md-mode a valid option?
+     */
+    function mode() {
+      var value = attr.mdMode;
+      if ( value ) {
+        switch(value) {
+          case MODE_DETERMINATE :
+          case MODE_INDETERMINATE :
+            break;
+          default:
+            value = undefined;
+            break;
+        }
+      }
+      return value;
+    }
+
   }
 
   /**

diff --git a/src/components/progressCircular/progress-circular.scss b/src/components/progressCircular/progress-circular.scss
@@ -7,63 +7,72 @@ $progress-border-width : 10px;
 $progress-circular-size : 10 * $progress-border-width !default;
 
 md-progress-circular {
+  display: inline-block;
+  position: relative;
+
   width: $progress-circular-size;
   height: $progress-circular-size;
-  display: block;
-  position: relative;
+
   padding-top: 0 !important;
   margin-bottom: 0 !important;
-  overflow: hidden;
+
   transform: scale(0.5);
 
-  .md-inner {
-    width: $progress-circular-size;
-    height: $progress-circular-size;
+  .md-spinner-wrapper {
     position: relative;
-    .md-gap {
-      position: absolute;
-      left: $progress-circular-size * 0.5 - 1;
-      right: $progress-circular-size * 0.5 - 1;
-      top: 0;
-      bottom: 0;
-      border-top-width: $progress-border-width;
-      border-top-style: solid;
-      box-sizing: border-box;
-    }
-    .md-left, .md-right {
-      position: absolute;
-      top: 0;
-      height: $progress-circular-size;
-      width: $progress-circular-size * 0.50;
-      overflow: hidden;
-      .md-half-circle {
-        position: absolute;
-        top: 0;
-        width: $progress-circular-size;
-        height: $progress-circular-size;
-        box-sizing: border-box;
-        border-width: $progress-border-width;
-        border-style: solid;
-        border-bottom-color: transparent;
-        border-radius: 50%;
-      }
-    }
-    .md-left {
-      left: 0;
-      .md-half-circle {
-        left: 0;
-        border-right-color: transparent;
-      }
-    }
-    .md-right {
-      right: 0;
-      .md-half-circle {
-        right: 0;
-        border-left-color: transparent;
-      }
-    }
+    overflow: hidden;
+    display:block;
+
+    .md-inner {
+       width: $progress-circular-size;
+       height: $progress-circular-size;
+       position: relative;
+       .md-gap {
+         position: absolute;
+         left: $progress-circular-size * 0.5 - 1;
+         right: $progress-circular-size * 0.5 - 1;
+         top: 0;
+         bottom: 0;
+         border-top-width: $progress-border-width;
+         border-top-style: solid;
+         box-sizing: border-box;
+       }
+       .md-left, .md-right {
+         position: absolute;
+         top: 0;
+         height: $progress-circular-size;
+         width: $progress-circular-size * 0.50;
+         overflow: hidden;
+         .md-half-circle {
+           position: absolute;
+           top: 0;
+           width: $progress-circular-size;
+           height: $progress-circular-size;
+           box-sizing: border-box;
+           border-width: $progress-border-width;
+           border-style: solid;
+           border-bottom-color: transparent;
+           border-radius: 50%;
+         }
+       }
+       .md-left {
+         left: 0;
+         .md-half-circle {
+           left: 0;
+           border-right-color: transparent;
+         }
+       }
+       .md-right {
+         right: 0;
+         .md-half-circle {
+           right: 0;
+           border-left-color: transparent;
+         }
+       }
+     }
   }
 
+
   .md-spinner-wrapper.md-mode-indeterminate  {
     animation: outer-rotate $progress-circular-outer-duration linear infinite;
     .md-inner {
@@ -88,7 +97,7 @@ md-progress-circular {
     }
   }
 
-  .ng-hide md-progress-circular, md-progress-circular.ng-hide {
+  md-progress-circular.ng-hide {
     .md-spinner-wrapper  {
       animation: none;
       .md-inner {

diff --git a/src/components/progressLinear/demoBasicUsage/index.html b/src/components/progressLinear/demoBasicUsage/index.html
@@ -1,15 +1,53 @@
-<div ng-controller="AppCtrl" layout="column" layout-margin style="padding:25px;">
+<div ng-controller="AppCtrl as vm" layout="column" layout-margin style="padding:25px;">
 
   <h2 class="md-title">Determinate</h2>
-  <p>For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take.</p>
-  <md-progress-linear md-mode="determinate" value="{{determinateValue}}"></md-progress-linear>
-  <p>Buffer indicates loading from the server</p>
-  <md-progress-linear class="md-warn" md-mode="buffer" value="{{determinateValue}}" md-buffer-value="{{determinateValue2}}"></md-progress-linear>
+
+  <p>
+    For operations where the percentage of the operation completed can be determined, use a <b>determinate</b> indicator.
+    They give users a quick sense of how long an operation will take.
+  </p>
+  <md-progress-linear md-mode="determinate" value="{{vm.determinateValue}}"></md-progress-linear>
 
   <h4 class="md-title">Indeterminate</h4>
-  <p>For operations where the user is asked to wait a moment while something finishes up, and it's not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.</p>
+  <p>
+    For operations where the user is asked to wait a moment while something finishes up, and it's not
+    necessary to expose what's happening behind the scenes and how long it will take, use an
+    <b>indeterminate</b> indicator:
+  </p>
   <md-progress-linear md-mode="indeterminate"></md-progress-linear>
-  <p>Query indicates pre-loading situation until the loading can actually be made</p>
-  <md-progress-linear md-mode="query"></md-progress-linear>
+
+  <h4 class="md-title">Buffer</h4>
+  <p>
+    For operations where the user wants to indicate some activity or loading from the server, use the <b>buffer</b> indicator:
+  </p>
+  <md-progress-linear class="md-warn" md-mode="{{vm.modes[0]}}" value="{{vm.determinateValue}}"
+                      md-buffer-value="{{vm.determinateValue2}}"></md-progress-linear>
+
+  <h4 class="md-title">Query</h4>
+  <p>
+    For situations where the user wants to indicate pre-loading (until the loading can actually be made), use the <b>query</b> indicator:
+  </p>
+  <md-progress-linear md-mode="{{vm.modes[1]}}"></md-progress-linear>
+
+
+  <hr>
+
+  <div layout="row" id="loaders">
+
+    <p>'Query' & 'Buffer' linear progress indicators: </p>
+
+    <h5>Off</h5>
+    <md-switch
+          ng-model="vm.activated"
+          ng-change="vm.toggleActivation()"
+          aria-label="Enable Indicators">
+      <h5>On</h5>
+    </md-switch>
+  </div>
+
+  <p class="small">
+    Note: the above switch simply sets the <code>md-mode = ""</code> to easily
+    disable the animations and hide the Query and Buffer progress indicators.</p>
+
 
 </div>
diff --git a/src/components/progressLinear/demoBasicUsage/script.js b/src/components/progressLinear/demoBasicUsage/script.js
@@ -2,20 +2,41 @@ angular.module('progressLinearDemo1', ['ngMaterial'])
   .config(function($mdThemingProvider) {
   })
   .controller('AppCtrl', ['$scope', '$interval', function($scope, $interval) {
-    $scope.mode = 'query';
-    $scope.determinateValue = 30;
-    $scope.determinateValue2 = 30;
+    var self = this, j= 0, counter = 0;
+
+    self.mode = 'query';
+    self.activated = true;
+    self.determinateValue = 30;
+    self.determinateValue2 = 30;
+
+    self.modes = [ ];
+
+    /**
+     * Turn off or on the 5 themed loaders
+     */
+    self.toggleActivation = function() {
+        if ( !self.activated ) self.modes = [ ];
+        if (  self.activated ) j = counter = 0;
+    };
 
     $interval(function() {
-      $scope.determinateValue += 1;
-      $scope.determinateValue2 += 1.5;
-      if ($scope.determinateValue > 100) {
-        $scope.determinateValue = 30;
-        $scope.determinateValue2 = 30;
-      }
+      self.determinateValue += 1;
+      self.determinateValue2 += 1.5;
+
+      if (self.determinateValue > 100) self.determinateValue = 30;
+      if (self.determinateValue2 > 100) self.determinateValue2 = 30;
+
+        // Incrementally start animation the five (5) Indeterminate,
+        // themed progress circular bars
+
+        if ( (j < 2) && !self.modes[j] && self.activated ) {
+          self.modes[j] = (j==0) ? 'buffer' : 'query';
+        }
+        if ( counter++ % 4 == 0 ) j++;
+
     }, 100, 0, true);
 
     $interval(function() {
-      $scope.mode = ($scope.mode == 'query' ? 'determinate' : 'query');
+      self.mode = (self.mode == 'query' ? 'determinate' : 'query');
     }, 7200, 0, true);
   }]);
diff --git a/src/components/progressLinear/demoBasicUsage/style.css b/src/components/progressLinear/demoBasicUsage/style.css
@@ -7,6 +7,32 @@ h4 {
 }
 
 md-progress-linear {
-  padding-top:10px;
-  margin-bottom:20px;
+  padding-top: 10px;
+  margin-bottom: 20px;
 }
+
+#loaders > md-switch {
+  margin: 0;
+  margin-left: 10px;
+  margin-top: -10px;
+}
+
+#loaders > h5 {
+  padding-top: 8px;
+}
+
+#loaders > p {
+  margin-right: 20px;
+}
+
+p.small {
+  font-size: 0.8em;
+  margin-top: -18px;
+}
+
+hr {
+  width: 100%;
+  margin-top: 20px;
+  border-color: rgba(221, 221, 177, 0.1);
+}
+