Permalink
Browse files

feature: VerticalProgressBar supports 'sections'

  • Loading branch information...
MikeMitterer committed May 4, 2017
1 parent 8863f43 commit ad4ad7c4a15a415fed1b23d91b37456c30c676d0
@@ -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);

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -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));
}
}
}
}
@@ -3,6 +3,8 @@
@import "variables";
@import "functions";
@import "mixin";
@import "vprogress";
@import "progress.orig";
@@ -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;
@@ -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 {
@@ -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";
}

0 comments on commit ad4ad7c

Please sign in to comment.