feature: VerticalProgressBar supports 'sections'

lib/assets/styles/material.css

@@ -4902,7 +4902,6 @@ input.mdl-button[type="submit"] {
   display: block;
   position: absolute;
   bottom: 0;
-  height: 0;
   width: 100%;
   -webkit-transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
@@ -4921,6 +4920,39 @@ input.mdl-button[type="submit"] {
 .mdl-vprogress > .auxbar {
   top: 0; }
 
+.mdl-vprogress > .indicatorbar {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -ms-flex-line-pack: justify;
+      align-content: space-between;
+  -webkit-box-align: stretch;
+      -ms-flex-align: stretch;
+          align-items: stretch;
+  height: 100%;
+  top: 0;
+  opacity: 0.5; }
+  .mdl-vprogress > .indicatorbar .mdl-vprogress__section {
+    width: 100%;
+    border-top: 1px solid #9fa8da;
+    margin: 0;
+    padding: 0;
+    background-color: transparent;
+    -webkit-box-flex: 1;
+        -ms-flex-positive: 1;
+            flex-grow: 1; }
+    .mdl-vprogress > .indicatorbar .mdl-vprogress__section:first-child {
+      border-top: none; }
+
 .mdl-vprogress:not(.mdl-vprogress--indeterminate) > .auxbar,
 .mdl-vprogress:not(.mdl-vprogress__indeterminate) > .auxbar {
   background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.26)), -webkit-linear-gradient(left, #3f51b5, #3f51b5);

lib/assets/styles/progress/_mixin.scss

@@ -0,0 +1,33 @@
+@mixin progress_color_indicator() {
+    $colors : ( nth($palette-green,6),nth($palette-orange,6),nth($palette-red,6));
+    %commonStyles {
+        transition : background-color 0.2s $animation-curve-default;
+    }
+
+    @for $i from 0 through 30 {
+        .mdl-vprogress.mdl-vprogress--progress-#{$i} {
+            .mdl-vprogress__section {
+                @extend %commonStyles;
+                background-color : nth($colors, (3));
+            }
+        }
+    }
+
+    @for $i from 31 through 60 {
+        .mdl-vprogress.mdl-vprogress--progress-#{$i} {
+            .mdl-vprogress__section {
+                @extend %commonStyles;
+                background-color : nth($colors, (2));
+            }
+        }
+    }
+
+    @for $i from 61 through 100 {
+        .mdl-vprogress.mdl-vprogress--progress-#{$i} {
+            .mdl-vprogress__section {
+                @extend %commonStyles;
+                background-color : nth($colors, (1));
+            }
+        }
+    }
+}

lib/assets/styles/progress/_progress.scss

@@ -3,6 +3,8 @@
 
 @import "variables";
 @import "functions";
+@import "mixin";
+
 @import "vprogress";
 @import "progress.orig";
 

lib/assets/styles/progress/_variables.scss

@@ -4,6 +4,9 @@ $progress-secondary-color: rgba($color-primary-contrast, 0.7) !default;
 $progress-fallback-buffer-color: rgba($color-primary-contrast, 0.26) !default;
 $progress-image-path: ""; // (orig - in global variables: $image_path: '/images' !default;)
 
+$progress-section-indicator: nth($palette-primary,3) !default;
+$progress-section-background: transparent !default;
+
 // Dimensions
 $bar-height: 4px !default;
 $bar-width: 8px !default;

lib/assets/styles/progress/_vprogress.scss

@@ -18,37 +18,67 @@
 //
 
 .mdl-vprogress {
-  display: block;
-  position: relative;
-  height: 100px;
-  width: $bar-width;
-  max-height: 100%;
+    display    : block;
+    position   : relative;
+    height     : 100px;
+    width      : $bar-width;
+    max-height : 100%;
 }
 
 .mdl-vprogress > .bar {
-  display: block;
-  position: absolute;
-  bottom: 0;
-  height: 0;
-  width: 100%;
-  transition: height 0.2s $animation-curve-default;
+    display    : block;
+    position   : absolute;
+    bottom     : 0;
+    //height     : 0;
+    width      : 100%;
+    transition : height 0.2s $animation-curve-default;
 }
 
 .mdl-vprogress > .progressbar {
-  background-color: $progress-main-color;
-  z-index: 1;
-  left: 0;
+    background-color : $progress-main-color;
+    z-index          : 1;
+    left             : 0;
 }
 
 .mdl-vprogress > .bufferbar {
-  background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
+    background-image : linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
     linear-gradient(to right, $progress-main-color, $progress-main-color);
-  z-index: 0;
-  left: 0;
+    z-index          : 0;
+    left             : 0;
 }
 
 .mdl-vprogress > .auxbar {
-  top: 0;
+    top : 0;
+}
+
+.mdl-vprogress > .indicatorbar {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: space-between; // ↓
+    align-content: space-between; // =
+    align-items: stretch; // ⇾
+
+    height: 100%;
+    top : 0;
+    opacity: 0.5;
+
+    .mdl-vprogress__section {
+        width: 100%;
+        border-top: 1px solid $progress-section-indicator;
+        margin: 0;
+        padding :0;
+        //height: 1px;
+        background-color: $progress-section-background;
+        flex-grow: 1;
+
+        &:first-child {
+            border-top: none;
+        }
+
+        //transition : background-color 0.2s $animation-curve-default;
+
+    }
 }
 
 // Webkit only
@@ -66,22 +96,21 @@
 
 .mdl-vprogress:not(.mdl-vprogress--indeterminate) > .auxbar,
 .mdl-vprogress:not(.mdl-vprogress__indeterminate) > .auxbar {
-  background-image: linear-gradient(to right, $progress-fallback-buffer-color, $progress-fallback-buffer-color),
+    background-image          : linear-gradient(to right, $progress-fallback-buffer-color, $progress-fallback-buffer-color),
     linear-gradient(to right, $progress-main-color, $progress-main-color);
-
-    animation-name: fadeinout;
-    animation-duration: 2s;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
+    animation-name            : fadeinout;
+    animation-duration        : 2s;
+    animation-iteration-count : infinite;
+    animation-timing-function : linear;
 }
 
 .mdl-vprogress.mdl-vprogress--indeterminate > .bar1,
 .mdl-vprogress.mdl-vprogress__indeterminate > .bar1 {
-  background-color: $progress-main-color;
-  animation-name: vindeterminate1;
-  animation-duration: 4s;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
+    background-color          : $progress-main-color;
+    animation-name            : vindeterminate1;
+    animation-duration        : 4s;
+    animation-iteration-count : infinite;
+    animation-timing-function : linear;
 }
 
 //.mdl-vprogress.mdl-vprogress--indeterminate > .bar3,
@@ -95,18 +124,18 @@
 //}
 
 @keyframes vindeterminate1 {
-  0% {
-    bottom: 0;
-    height: 0;
-  }
-  50% {
-      bottom: 25%;
-      height: 75%;
-  }
-  75% {
-      bottom: 100%;
-      height: 0;
-  }
+    0% {
+        bottom : 0;
+        height : 0;
+    }
+    50% {
+        bottom : 25%;
+        height : 75%;
+    }
+    75% {
+        bottom : 100%;
+        height : 0;
+    }
 }
 
 //@keyframes vindeterminate2 {

lib/src/components/MaterialProgressVertical.dart

@@ -31,37 +31,39 @@ class MaterialProgressVertical extends MdlComponent {
     dom.DivElement _progressbar;
     dom.DivElement _bufferbar;
     dom.DivElement _auxbar;
+    dom.DivElement _indicatorbar;
 
-    MaterialProgressVertical.fromElement(final dom.HtmlElement element,final di.Injector injector)
-        : super(element,injector) {
+    MaterialProgressVertical.fromElement(final dom.HtmlElement element, final di.Injector injector)
+        : super(element, injector) {
         _init();
     }
 
-    static MaterialProgressVertical widget(final dom.HtmlElement element) => mdlComponent(element,MaterialProgressVertical) as MaterialProgressVertical;
+    static MaterialProgressVertical widget(final dom.HtmlElement element) =>
+        mdlComponent(element, MaterialProgressVertical) as MaterialProgressVertical;
 
     /// Set the current progress of the progressbar.
     /// [heightInPercent] Percentage of the progress (0-100)
     void set progress(int heightInPercent) {
-        heightInPercent = Math.max(0,Math.min(100,heightInPercent));
+        heightInPercent = Math.max(0, Math.min(100, heightInPercent));
 
         if (element.classes.contains(_cssClasses.INDETERMINATE_CLASS)) {
             return;
         }
-
+        _setProgressStyle(heightInPercent);
         _progressbar.style.height = "${heightInPercent}%";
     }
 
     int get progress {
         if (element.classes.contains(_cssClasses.INDETERMINATE_CLASS)) {
             return 0;
         }
-        return int.parse(_progressbar.style.height.replaceFirst("%",""));
+        return int.parse(_progressbar.style.height.replaceFirst("%", ""));
     }
 
     /// Set the current progress of the buffer in percent.
     /// [heightPercent] Percentage of the buffer (0-100)
     void set buffer(int heightPercent) {
-        heightPercent = Math.max(0,Math.min(100,heightPercent));
+        heightPercent = Math.max(0, Math.min(100, heightPercent));
 
         _bufferbar.style.height = "${heightPercent}%";
         _auxbar.style.height = "${100 - heightPercent}%";
@@ -73,7 +75,6 @@ class MaterialProgressVertical extends MdlComponent {
         _logger.fine("MaterialProgressVertical - init");
 
         if (element != null) {
-
             _progressbar = new dom.DivElement();
             _progressbar.classes.addAll([ 'progressbar', 'bar', 'bar1']);
             element.append(_progressbar);
@@ -86,19 +87,43 @@ class MaterialProgressVertical extends MdlComponent {
             _auxbar.classes.addAll([ 'auxbar', 'bar', 'bar3']);
             element.append(_auxbar);
 
+            _indicatorbar = new dom.DivElement();
+            _indicatorbar.classes.addAll([ 'indicatorbar', 'bar', 'bar4']);
+            element.append(_indicatorbar);
+
+            if (element.dataset.containsKey(_MaterialProgressDataSet.SECTIONS)) {
+                final int sections = int.parse(
+                    element.dataset[_MaterialProgressDataSet.SECTIONS], onError: (_) => 0);
+
+                for (int hrIndex = 0; hrIndex < sections; hrIndex++) {
+                    final dom.SpanElement hr = new dom.SpanElement();
+                    hr.classes.add(_cssClasses.SECTION);
+                    _indicatorbar.append(hr);
+                }
+            }
+
             _progressbar.style.height = '0%';
             _bufferbar.style.height = '100%';
             _auxbar.style.height = '0%';
 
+            _setProgressStyle(0);
             element.classes.add(_cssClasses.IS_UPGRADED);
         }
     }
+
+    /// Sets the current progress-value as style
+    void _setProgressStyle(final int heightInPercent) {
+        element.classes.removeWhere((final String name) => name.startsWith(_cssClasses.PROGRESS));
+        element.classes.add("${_cssClasses.PROGRESS}${heightInPercent}");
+    }
+
 }
 
 /// creates MdlConfig for MaterialProgressVertical
-MdlConfig materialProgressVerticalConfig() => new MdlWidgetConfig<MaterialProgressVertical>(
-    _MaterialProgressVerticalCssClasses.MAIN_CLASS, (final dom.HtmlElement element,final di.Injector injector)
-=> new MaterialProgressVertical.fromElement(element,injector));
+MdlConfig materialProgressVerticalConfig() =>
+    new MdlWidgetConfig<MaterialProgressVertical>(
+        _MaterialProgressVerticalCssClasses.MAIN_CLASS, (final dom.HtmlElement element,
+        final di.Injector injector) => new MaterialProgressVertical.fromElement(element, injector));
 
 /// registration-Helper
 void registerMaterialProgressVertical() => componentHandler().register(materialProgressVerticalConfig());
@@ -108,9 +133,13 @@ void registerMaterialProgressVertical() => componentHandler().register(materialP
 /// decide to modify at a later date.
 class _MaterialProgressVerticalCssClasses {
 
-    static const String MAIN_CLASS  = "mdl-vprogress";
+    static const String MAIN_CLASS = "mdl-vprogress";
 
     final String INDETERMINATE_CLASS = 'mdl-vprogress__indeterminate';
+    final String SECTION = 'mdl-vprogress__section';
+
+    final String PROGRESS = 'mdl-vprogress--progress-';
+
     final String IS_UPGRADED = 'is-upgraded';
 
     const _MaterialProgressVerticalCssClasses();
@@ -120,3 +149,7 @@ class _MaterialProgressVerticalCssClasses {
 class _MaterialProgressVerticalConstant {
     const _MaterialProgressVerticalConstant();
 }
+
+class _MaterialProgressDataSet {
+    static const String SECTIONS = "sections";
+}