fix(progressCircular): fixes scaling issues

Closes #4839
angular · Nov 25, 2015 · 5db570e · 5db570e
1 parent b8ffdfe
commit 5db570e
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 28 deletions.
diff --git a/src/components/progressCircular/progress-circular.js b/src/components/progressCircular/progress-circular.js
@@ -64,14 +64,16 @@ function MdProgressCircularDirective($mdTheming, $mdUtil, $log) {
     template:
         // The progress 'circle' is composed of two half-circles: the left side and the right
         // side. Each side has CSS applied to 'fill-in' the half-circle to the appropriate progress.
-        '<div class="md-spinner-wrapper">' +
-          '<div class="md-inner">' +
-            '<div class="md-gap"></div>' +
-            '<div class="md-left">' +
-              '<div class="md-half-circle"></div>' +
-            '</div>' +
-            '<div class="md-right">' +
-              '<div class="md-half-circle"></div>' +
+        '<div class="md-scale-wrapper">' +
+          '<div class="md-spinner-wrapper">' +
+            '<div class="md-inner">' +
+              '<div class="md-gap"></div>' +
+              '<div class="md-left">' +
+                '<div class="md-half-circle"></div>' +
+              '</div>' +
+              '<div class="md-right">' +
+                '<div class="md-half-circle"></div>' +
+              '</div>' +
             '</div>' +
           '</div>' +
         '</div>',
@@ -135,8 +137,14 @@ function MdProgressCircularDirective($mdTheming, $mdUtil, $log) {
      * Watch the "value" and "md-mode" attributes
      */
     function updateScale() {
-      circle.css(toVendorCSS({
-        transform : $mdUtil.supplant('scale( {0} )',[getDiameterRatio()])
+      // set the outer container to the size the user specified
+      circle.css({
+        width: (100 * getDiameterRatio()) + 'px',
+        height: (100 * getDiameterRatio()) + 'px'
+      });
+      // the internal element is still 100px, so we have to scale it down to match the size
+      circle.children().eq(0).css(toVendorCSS({
+        transform : $mdUtil.supplant('translate(-50%, -50%) scale( {0} )',[getDiameterRatio()])
       }));
     }
 

diff --git a/src/components/progressCircular/progress-circular.scss b/src/components/progressCircular/progress-circular.scss
@@ -16,13 +16,14 @@ md-progress-circular {
   padding-top: 0 !important;
   margin-bottom: 0 !important;
 
-  transform: scale(0.5);
   z-index: $z-index-progress-circular; // Used to fix a Chrome bug with spinner animation
 
   .md-spinner-wrapper {
     display:block;
-    position: relative;
+    position: absolute;
     overflow: hidden;
+    top: 50%;
+    left: 50%;
 
     .md-inner {
        width: $progress-circular-size;
@@ -74,7 +75,7 @@ md-progress-circular {
   }
 
 
-  .md-spinner-wrapper.md-mode-indeterminate  {
+  .md-mode-indeterminate .md-spinner-wrapper {
     animation: outer-rotate $progress-circular-outer-duration linear infinite;
     .md-inner {
       animation: sporadic-rotate $progress-circular-sporadic-duration $progress-circular-ease-in-out infinite;
@@ -141,24 +142,25 @@ md-progress-circular {
 // Keyframe animation for the Indeterminate Progress
 //
 @keyframes outer-rotate {
- 100%     { transform: rotate(360deg); }
+  0%       { transform: rotate(0deg) scale(0.5); }
+  100%     { transform: rotate(360deg) scale(0.5); }
 }
 @keyframes left-wobble {
- 0%, 100% { transform: rotate(130deg); }
- 50%      { transform: rotate( -5deg); }
+  0%, 100% { transform: rotate(130deg); }
+  50%      { transform: rotate( -5deg); }
 }
 @keyframes right-wobble {
- 0%, 100% { transform: rotate(-130deg); }
- 50%      { transform: rotate(   5deg); }
+  0%, 100% { transform: rotate(-130deg); }
+  50%      { transform: rotate(   5deg); }
 }
 @keyframes sporadic-rotate {
- 12.5%    { transform: rotate( 135deg); }
- 25%      { transform: rotate( 270deg); }
- 37.5%    { transform: rotate( 405deg); }
- 50%      { transform: rotate( 540deg); }
- 62.5%    { transform: rotate( 675deg); }
- 75%      { transform: rotate( 810deg); }
- 87.5%    { transform: rotate( 945deg); }
- 100%     { transform: rotate(1080deg); }
+  12.5%    { transform: rotate( 135deg); }
+  25%      { transform: rotate( 270deg); }
+  37.5%    { transform: rotate( 405deg); }
+  50%      { transform: rotate( 540deg); }
+  62.5%    { transform: rotate( 675deg); }
+  75%      { transform: rotate( 810deg); }
+  87.5%    { transform: rotate( 945deg); }
+  100%     { transform: rotate(1080deg); }
 }
 
diff --git a/src/components/progressCircular/progress-circular.spec.js b/src/components/progressCircular/progress-circular.spec.js
@@ -70,7 +70,9 @@ describe('mdProgressCircular', function() {
 
   it('should set scaling using percentage values',function() {
     var progress = buildIndicator('<md-progress-circular md-diameter="25%"></md-progress-circular>');
-    expect( getScale(progress) ).toBe(0.25);
+    expect( getScale(progress[0].children[0]) ).toBe(0.25);
+    expect(progress.css('width')).toBe('25px');
+    expect(progress.css('height')).toBe('25px');
   });
 
   it('should set scaling using pixel values', function() {
@@ -79,7 +81,7 @@ describe('mdProgressCircular', function() {
     var progress = buildIndicator('<md-progress-circular md-diameter="37px"></md-progress-circular>');
     var value = Math.round( (37 / DEFAULT_SIZE) * 100 )/100;
 
-    expect( getScale(progress) ).toBe(value);
+    expect( getScale(progress[0].children[0]) ).toBe(value);
   });
 
   /**

diff --git a/src/components/tabs/js/tabDirective.js b/src/components/tabs/js/tabDirective.js
@@ -65,6 +65,7 @@ function MdTab () {
         label = angular.element('<md-tab-label></md-tab-label>');
         if (attr.label) label.text(attr.label);
         else label.append(element.contents());
+
         if (body.length == 0) {
           var contents = element.contents().detach();
           body         = angular.element('<md-tab-body></md-tab-body>');