feat(loader): remove blocking background from linear loader (#941)

* feat(loader): Remove blocking background from linear loader closes #823 * chore(): add linear overlay example in `boolean` demo * fix(): create class for circular overlay to reduce scss code
Teradata · Oct 21, 2017 · 5bdf4a4 · 5bdf4a4
1 parent da0221b
commit 5bdf4a4
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/src/app/components/components/loading/loading.component.html b/src/app/components/components/loading/loading.component.html
@@ -292,11 +292,11 @@ <h4 class="md-subhead">with accent [tdLoadingColor]</h4>
 <mat-card>
   <mat-card-content>
     <h3 class="md-title">[tdLoading] until template syntax with booleans</h3>
-    <h4 class="md-subhead">with overlay [tdLoadingStrategy]</h4>
+    <h4 class="md-subhead">with overlay [tdLoadingStrategy], linear [tdLoadingType]</h4>
     <mat-tab-group mat-stretch-tabs dynamicHeight>
       <mat-tab>
         <ng-template matTabLabel>Demo</ng-template>
-        <ng-template tdLoading [tdLoadingUntil]="!loading" tdLoadingStrategy="overlay">
+        <ng-template tdLoading [tdLoadingUntil]="!loading" tdLoadingStrategy="overlay" tdLoadingType="linear">
           <div layout="row">
             <mat-form-field flex>
               <input matInput [(ngModel)]="untilOverlayDemo.name" placeholder="Name"/>
@@ -317,7 +317,7 @@ <h4 class="md-subhead">with overlay [tdLoadingStrategy]</h4>
         <p>HTML:</p>
         <td-highlight lang="html">
           <![CDATA[
-            <ng-template tdLoading [tdLoadingUntil]="!loading" tdLoadingStrategy="overlay">
+            <ng-template tdLoading [tdLoadingUntil]="!loading" tdLoadingStrategy="overlay" tdLoadingType="linear">
               <div layout="row">
                 <mat-form-field flex>
                   <input matInput [(ngModel)]="untilOverlayDemo.name" placeholder="Name"/>
@@ -400,7 +400,7 @@ <h4 class="md-subhead">with indeterminate [mode], circular [type], primary [colo
 </mat-card>
 <mat-card>
   <mat-card-content>
-   <h3 class="md-title">Custom [TdLoading] fullscreen mask</h3>
+   <h3 class="md-title">Custom [TdLoading] linear at top of page</h3>
     <h4 class="md-subhead">with indeterminate [mode], linear [type], accent [color]</h4>
     <mat-tab-group mat-stretch-tabs dynamicHeight>
       <mat-tab>

diff --git a/src/platform/core/loading/loading.component.html b/src/platform/core/loading/loading.component.html
@@ -1,4 +1,8 @@
-<div class="td-loading-wrapper" [style.min-height]="getHeight()" [class.td-overlay]="isOverlay() || isFullScreen()" [class.td-fullscreen]="isFullScreen()">
+<div class="td-loading-wrapper"
+    [style.min-height]="getHeight()"
+    [class.td-overlay-circular]="(isOverlay() || isFullScreen()) && !isLinear()"
+    [class.td-overlay]="isOverlay() || isFullScreen()" 
+    [class.td-fullscreen]="isFullScreen()">
   <div [@tdFadeInOut]="animation"
      (@tdFadeInOut.done)="animationComplete($event)"
      [style.min-height]="getHeight()"

diff --git a/src/platform/core/loading/loading.component.scss b/src/platform/core/loading/loading.component.scss
@@ -11,7 +11,6 @@
       top: 0;
       left: 0;
       right: 0;
-      bottom: 0;
       z-index: 1000;
       mat-progress-bar {
         position: absolute;
@@ -21,4 +20,9 @@
       }
     }
   }
+  &.td-overlay-circular {
+    .td-loading {
+      bottom: 0;
+    }
+  }
 }