feat(progress_linear): support buffer and query indicators and add tests

examples/app.scss

@@ -6,8 +6,8 @@ $md-font-url: '../public/font/';
 
 demos-app {
   md-content {
+    max-width: 800px;
     > section {
-      max-width: 800px;
       > h1 {
         margin-top: rem(6);
         margin-bottom: rem(6);

examples/components/progress_linear/basic_usage.html

@@ -24,8 +24,8 @@ <h4 class="md-title">Buffer</h4>
     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" [mode]="modes[0]" [value]="determinateValue"
-                      [buffer-value]="determinateValue2"></md-progress-linear>
+  <md-progress-linear class="md-warn" mode="buffer" [value]="determinateValue"
+                      [bufferValue]="determinateValue2"></md-progress-linear>
 
   <h4 class="md-title">Query</h4>
 
@@ -34,30 +34,17 @@ <h4 class="md-title">Query</h4>
     use the <b>query</b> indicator:
   </p>
 
-  <div class="container" [ngClass]="{'visible' : !activated}">
-    <md-progress-linear [mode]="modes[1]"></md-progress-linear>
+  <div class="container">
+    <md-progress-linear mode="query"></md-progress-linear>
     <div class="bottom-block">
       <span>Loading application libraries...</span>
     </div>
   </div>
 
-  <hr [ngClass]="{'visible' : activated}">
-
-  <div id="loaders" layout="row" layout-align="start center">
-
-    <p>Query and Buffer progress linear indicators: </p>
-
-    <md-switch
-        [checked]="activated"
-        (mdOnChange)="toggleActivation()"
-        aria-label="Enable Indicators">
-      <h5>{{ activated ? 'On' : 'Off' }}</h5>
-    </md-switch>
-  </div>
+  <hr>
 
   <p class="small">
-    Note: With the above switch -- which simply clears the mode in each <code>&lt;md-progress-linear
-    md-mode=""&gt;</code> element --
-    developers now easily disable the animations and hide their progress indicators.</p>
+    Hide indicators by adding a <code>hidden</code> attribute, or by binding to a dynamic value <code>[hidden]="yourValue"</code>
+  </p>
 
 </div>

examples/components/progress_linear/basic_usage.scss

@@ -0,0 +1,50 @@
+@import "../../../ng2-material/core/style/variables";
+@import "../../../ng2-material/core/style/theme-functions";
+@import "../../../ng2-material/core/style/default-theme";
+
+body {
+  padding: 20px;
+}
+
+h4 {
+  margin: 10px 0;
+}
+
+md-progress-linear:not([mode=query]) {
+  padding-top: 10px;
+  margin-bottom: 20px;
+}
+
+p.small > code {
+  font-size: 0.8em;
+}
+
+.visible {
+  opacity: 0;
+  border: 2px solid white !important;
+}
+
+.container {
+  display: block;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  border: 2px solid md-color($md-primary, 100);
+  transition: opacity 0.1s linear;
+  border-top: 0px;
+}
+
+.bottom-block {
+  display: block;
+  position: relative;
+  background-color: rgba(255, 235, 169, 0.25);
+  height: 85px;
+  width: 100%;
+}
+
+.bottom-block > span {
+  display: inline-block;
+  margin-top: 10px;
+  padding: 25px;
+  font-size: 0.9em;
+}

examples/components/progress_linear/basic_usage.ts

@@ -2,17 +2,15 @@ import {View, Component} from 'angular2/core';
 import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
 
 @Component({selector: 'progress-linear-basic-usage'})
-@View({templateUrl: 'examples/components/progress_linear/basic_usage.html', directives: [MATERIAL_DIRECTIVES]})
+@View({
+  templateUrl: 'examples/components/progress_linear/basic_usage.html',
+  styleUrls: ['examples/components/progress_linear/basic_usage.css'],
+  directives: [MATERIAL_DIRECTIVES]
+})
 export default class ProgressLinearBasicUsage {
-  public modes: string[] = [];
-  public mode: string = 'query';
-  public activated: boolean = true;
   public determinateValue: number = 30;
   public determinateValue2: number = 30;
 
-  private _counter: number = 0;
-  private _j: number = 0;
-
   constructor() {
 
     // Iterate every 100ms, non-stop
@@ -26,42 +24,7 @@ export default class ProgressLinearBasicUsage {
       if (this.determinateValue2 > 100) {
         this.determinateValue2 = 30;
       }
-
-      // Incrementally start animation the five (5) Indeterminate,
-      // themed progress circular bars
-
-      if ((this._j < 2) && !this.modes[this._j] && this.activated) {
-        this.modes[this._j] = (this._j === 0) ? 'buffer' : 'query';
-      }
-      if (this._counter++ % 4 === 0) {
-        this._j++;
-      }
-
-      // Show the indicator in the "Used within Containers" after 200ms delay
-      if (this._j === 2) {
-        this.mode = 'indeterminate';
-      }
     }, 100, 0, true);
-
-    setInterval(() => {
-      this.mode = (this.mode === 'query' ? 'determinate' : 'query');
-    }, 7200, 0, true);
-
   }
 
-  /**
-   * Turn off or on the 5 themed loaders
-   */
-  toggleActivation() {
-    if (!this.activated) {
-      this.modes = [null,null,null,null,null];
-    }
-    if (this.activated) {
-      this._j = this._counter = 0;
-      this.determinateValue = 30;
-      this.determinateValue2 = 30;
-    }
-    this.activated = !this.activated;
-  };
-
 }

ng2-material/components/progress_linear/progress_linear.scss

@@ -1,5 +1,4 @@
 @import "../../core/style/variables";
-
 // TODO(jelbourn): This goes away.
 @import "../../core/style/default-theme";
 
@@ -10,6 +9,10 @@ md-progress-linear {
   width: 100%;
   height: $progress-linear-bar-height;
 
+  &[hidden] {
+    display: none;
+  }
+
   *, *:before {
     box-sizing: border-box;
   }
@@ -18,7 +21,7 @@ md-progress-linear {
     overflow: hidden;
     position: relative;
     height: $progress-linear-bar-height;
-    top: $progress-linear-bar-height;
+    //top: $progress-linear-bar-height;
     transform: translate(0, 5px) scale(1, 0);
     transition: all .3s linear;
   }
@@ -37,13 +40,13 @@ md-progress-linear {
     transition: all 0.2s linear;
   }
 
-  &[mode="determinate"] {
+  &[mode=determinate] {
     .md-progress-linear-bar1 {
       display: none;
     }
   }
 
-  &[mode="indeterminate"] {
+  &[mode=indeterminate] {
     .md-progress-linear-bar1 {
       animation: indeterminate1 4s infinite linear;
     }
@@ -53,7 +56,7 @@ md-progress-linear {
     }
   }
 
-  &[mode="buffer"] {
+  &[mode=buffer] {
     .md-progress-linear-container {
       background-color: transparent !important;
     }
@@ -72,7 +75,10 @@ md-progress-linear {
     }
   }
 
-  &[mode="query"] {
+  &[mode=query] {
+    .md-progress-linear-bar1 {
+      display: none;
+    }
     .md-progress-linear-bar2 {
       animation: query .8s infinite cubic-bezier(0.390, 0.575, 0.565, 1.000);
     }
@@ -152,7 +158,7 @@ md-progress-linear {
   0% {
     transform: translateX(-50%) scale(0, 1);
   }
-  25.99%{
+  25.99% {
     transform: translateX(-50%) scale(0, 1);
   }
   28% {
@@ -209,35 +215,42 @@ md-progress-linear {
   }
 }
 
-
 // THEME
 
 md-progress-linear {
   .md-progress-linear-container {
     background-color: md-color($md-primary, 100);
   }
-
   .md-progress-linear-bar {
     background-color: md-color($md-primary);
   }
 
-  &.md-warn .md-progress-linear-container {
-    background-color: md-color($md-warn, 100);
-  }
-
-  &.md-warn .md-progress-linear-bar {
-    background-color: md-color($md-warn);
-  }
-
-  &.md-accent .md-progress-linear-container {
-    background-color: md-color($md-accent, 100);
+  &.md-warn {
+    .md-progress-linear-container {
+      background-color: md-color($md-warn, 100);
+    }
+    .md-progress-linear-bar {
+      background-color: md-color($md-warn);
+    }
   }
 
-  &.md-accent .md-progress-linear-bar {
-    background-color: md-color($md-accent);
+  &.md-accent {
+    .md-progress-linear-container {
+      background-color: md-color($md-accent, 100);
+    }
+    .md-progress-linear-bar {
+      background-color: md-color($md-accent);
+    }
   }
 
   &[mode=buffer] {
+    background-color: transparent !important;
+    transition: all 0.2s linear;
+    .md-progress-linear-display:before {
+      display: block;
+      animation: buffer 3s infinite linear;
+    }
+
     &.md-primary {
       .md-progress-linear-bar1 {
         background-color: md-color($md-primary, 100);

ng2-material/components/progress_linear/progress_linear.ts

@@ -6,7 +6,7 @@ import {Input} from 'angular2/core';
 
 /** Different display / behavior modes for progress_linear. */
 @CONST()
-class ProgressMode {
+export class ProgressMode {
   @CONST() static DETERMINATE = 'determinate';
   @CONST() static INDETERMINATE = 'indeterminate';
   @CONST() static BUFFER = 'buffer';
@@ -15,12 +15,13 @@ class ProgressMode {
 
 @Component({
   selector: 'md-progress-linear',
-  inputs: ['value', 'bufferValue'],
+  inputs: ['value', 'bufferValue', 'mode'],
   host: {
     'role': 'progressbar',
     'aria-valuemin': '0',
     'aria-valuemax': '100',
-    '[attr.aria-valuenow]': 'value'
+    '[attr.aria-valuenow]': 'value',
+    '[attr.mode]': 'mode'
   }
 })
 @View({
@@ -76,15 +77,17 @@ export class MdProgressLinear implements OnChanges {
 
   ngOnChanges(_) {
     // If the mode does not use a value, or if there is no value, do nothing.
-    if (this.mode === ProgressMode.QUERY || this.mode === ProgressMode.INDETERMINATE ||
-        isBlank(this.value)) {
+    if (this.mode === ProgressMode.QUERY || this.mode === ProgressMode.INDETERMINATE) {
       return;
     }
 
-    this.primaryBarTransform = this.transformForValue(this.value);
+    if (!isBlank(this.value)) {
+      this.primaryBarTransform = this.transformForValue(this.value);
+    }
+
 
     // The bufferValue is only used in buffer mode.
-    if (this.mode === ProgressMode.BUFFER) {
+    if (this.mode === ProgressMode.BUFFER && !isBlank(this.bufferValue)) {
       this.secondaryBarTransform = this.transformForValue(this.bufferValue);
     }
   }

ng2-material/core/style/default-theme.scss

@@ -9,5 +9,5 @@ $md-is-dark-theme: false;
 $md-primary: md-palette($md-indigo, 500, 100, 700, $md-contrast-palettes);
 $md-accent: md-palette($md-pink, 500, 300, 700, $md-contrast-palettes);
 $md-background: md-palette($md-grey, 500, 0, 600, $md-contrast-palettes);
-$md-warn: md-palette($md-red, 500, 300, 800, $md-contrast-palettes);
+$md-warn: md-palette($md-red, 500, 100, 700, $md-contrast-palettes);
 $md-foreground: if($md-is-dark-theme, $md-dark-theme-foreground, $md-light-theme-foreground);