fix(progress-spinner): ie11_edge_fix (#17)

positive-js · Jul 22, 2018 · d746bc3 · d746bc3
1 parent f5647af
commit d746bc3
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 26 deletions.
diff --git a/src/lib/progress-spinner/progress-spinner.component.html b/src/lib/progress-spinner/progress-spinner.component.html
@@ -1,19 +1,15 @@
-<svg focusable="false"
-     preserveAspectRatio="xMidYMid meet"
-     viewBox="0 0 100 100"
-     class="mc-progress-spinner__inner"
-     [ngSwitch]="mode">
-    <circle *ngSwitchCase="'indeterminate'"
-             cx="50%"
-             cy="50%"
-             r="43.5%"
-             class="mc-progress-spinner__circle mc-progress-spinner__circle--indeterminate">
-    </circle>
-    <circle *ngSwitchDefault
-            cx="50%"
-            cy="50%"
-            r="43.5%"
-            class="mc-progress-spinner__circle"
-            [ngStyle]="{'stroke-dashoffset': dashOffsetPercent}">
-    </circle>
-</svg>
+<div class="mc-progress-spinner__inner"
+     [ngClass]="{'mc-progress-spinner__inner--indeterminate': mode === 'indeterminate'}">
+    <svg focusable="false"
+         preserveAspectRatio="xMidYMid meet"
+         viewBox="0 0 100 100"
+         class="mc-progress-spinner__svg">
+        <circle cx="50%"
+                cy="50%"
+                r="42.5%"
+                class="mc-progress-spinner__circle"
+                [ngStyle]="{'stroke-dashoffset': mode === 'determinate' ? dashOffsetPercent : null}">
+        </circle>
+    </svg>
+</div>
+
diff --git a/src/lib/progress-spinner/progress-spinner.component.spec.ts b/src/lib/progress-spinner/progress-spinner.component.spec.ts
@@ -82,7 +82,7 @@ describe('McProgressSpinner', () => {
         testComponent.mode = 'indeterminate';
         fixture.detectChanges();
 
-        expect(progressSpinnerDebugElement.query(By.css('.mc-progress-spinner__circle--indeterminate'))).not.toBeNull();
+        expect(progressSpinnerDebugElement.query(By.css('.mc-progress-spinner__inner--indeterminate'))).not.toBeNull();
     });
 
     it('should show determinate circle by default', () => {

diff --git a/src/lib/progress-spinner/progress-spinner.scss b/src/lib/progress-spinner/progress-spinner.scss
@@ -15,6 +15,21 @@
     &__inner {
         width: 100%;
         height: 100%;
+        transform: rotateZ(-90deg);
+
+        &--indeterminate {
+            animation: mc-progress-spinner-indeterminate 1.5s $ease-in-out-quad infinite;
+
+            // TODO: rework this place
+            .mc-progress-spinner__circle {
+                stroke-dashoffset: 80%;
+            }
+        }
+    }
+
+    &__svg {
+        width: 100%;
+        height: 100%;
     }
 
     &__circle {
@@ -24,11 +39,5 @@
         stroke-width: 13%;
         transition: stroke-dashoffset 0.3s;
         transform-origin: center center;
-        transform: rotateZ(-90deg);
-
-        &--indeterminate {
-            stroke-dashoffset: 80%;
-            animation: mc-progress-spinner-indeterminate 1.5s $ease-in-out-quad infinite;
-        }
     }
 }