Permalink
Browse files

feature: VerticalProgressbar added

  • Loading branch information...
MikeMitterer committed May 3, 2017
1 parent 6500c54 commit d1892f226e420f65b8007adfbbb39fdc8fe8a26a
Showing with 256 additions and 0 deletions.
  1. +134 −0 lib/assets/styles/progress/_vprogress.scss
  2. +122 −0 lib/src/components/MaterialProgressVertical.dart
@@ -0,0 +1,134 @@
// ----------------------------------------------------------------------------
// Copyright (c) 2016, Michael Mitterer (office@mikemitterer.at),
// IT-Consulting and Development Limited.
//
// All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
.mdl-vprogress {
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;
}
.mdl-vprogress > .progressbar {
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),
linear-gradient(to right, $progress-main-color, $progress-main-color);
z-index: 0;
left: 0;
}
.mdl-vprogress > .auxbar {
top: 0;
}
// Webkit only
//@supports (-webkit-appearance:none) {
// .mdl-vprogress:not(.mdl-vprogress--indeterminate):not(.mdl-vprogress--indeterminate) > .auxbar,
// .mdl-vprogress:not(.mdl-vprogress__indeterminate):not(.mdl-vprogress__indeterminate) > .auxbar {
// background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
// linear-gradient(to right, $progress-main-color, $progress-main-color);
//
// // mask: url('#{$progress-image-path}/buffer.svg?embed');
// mask: svg-buffer();
//
// }
//}
.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),
linear-gradient(to right, $progress-main-color, $progress-main-color);
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;
}
//.mdl-vprogress.mdl-vprogress--indeterminate > .bar3,
//.mdl-vprogress.mdl-vprogress__indeterminate > .bar3 {
// background-image: none;
// background-color: $progress-main-color;
// animation-name: vindeterminate2;
// animation-duration: 2s;
// animation-iteration-count: infinite;
// animation-timing-function: linear;
//}
@keyframes vindeterminate1 {
0% {
bottom: 0;
height: 0;
}
50% {
bottom: 25%;
height: 75%;
}
75% {
bottom: 100%;
height: 0;
}
}
//@keyframes vindeterminate2 {
// 0% {
// bottom: 0;
// height: 0;
// }
// 50% {
// bottom: 0;
// height: 0;
// }
// 75% {
// bottom: 0;
// height: 70%;
// }
// 100% {
// bottom: 100%;
// height: 0;
// }
//}
@keyframes fadeinout {
0%, 100% { opacity : 0.3; }
50% { opacity : 0.7; }
}
@@ -0,0 +1,122 @@
/*
* Copyright (c) 2015, Michael Mitterer (office@mikemitterer.at),
* IT-Consulting and Development Limited.
*
* All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
part of mdlcomponents;
/// Controller-View for
/// <div id="p1" class="mdl-progress mdl-progress"></div>
///
class MaterialProgressVertical extends MdlComponent {
final Logger _logger = new Logger('mdlcomponents.MaterialProgressVertical');
static const _MaterialProgressVerticalConstant _constant = const _MaterialProgressVerticalConstant();
static const _MaterialProgressVerticalCssClasses _cssClasses = const _MaterialProgressVerticalCssClasses();
dom.DivElement _progressbar;
dom.DivElement _bufferbar;
dom.DivElement _auxbar;
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;
/// 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));
if (element.classes.contains(_cssClasses.INDETERMINATE_CLASS)) {
return;
}
_progressbar.style.height = "${heightInPercent}%";
}
int get progress {
if (element.classes.contains(_cssClasses.INDETERMINATE_CLASS)) {
return 0;
}
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));
_bufferbar.style.height = "${heightPercent}%";
_auxbar.style.height = "${100 - heightPercent}%";
}
//- private -----------------------------------------------------------------------------------
void _init() {
_logger.fine("MaterialProgressVertical - init");
if (element != null) {
_progressbar = new dom.DivElement();
_progressbar.classes.addAll([ 'progressbar', 'bar', 'bar1']);
element.append(_progressbar);
_bufferbar = new dom.DivElement();
_bufferbar.classes.addAll([ 'bufferbar', 'bar', 'bar2']);
element.append(_bufferbar);
_auxbar = new dom.DivElement();
_auxbar.classes.addAll([ 'auxbar', 'bar', 'bar3']);
element.append(_auxbar);
_progressbar.style.height = '0%';
_bufferbar.style.height = '100%';
_auxbar.style.height = '0%';
element.classes.add(_cssClasses.IS_UPGRADED);
}
}
}
/// 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));
/// registration-Helper
void registerMaterialProgressVertical() => componentHandler().register(materialProgressVerticalConfig());
/// Store strings for class names defined by this component that are used in
/// Dart. This allows us to simply change it in one place should we
/// decide to modify at a later date.
class _MaterialProgressVerticalCssClasses {
static const String MAIN_CLASS = "mdl-vprogress";
final String INDETERMINATE_CLASS = 'mdl-vprogress__indeterminate';
final String IS_UPGRADED = 'is-upgraded';
const _MaterialProgressVerticalCssClasses();
}
/// Store constants in one place so they can be updated easily.
class _MaterialProgressVerticalConstant {
const _MaterialProgressVerticalConstant();
}

0 comments on commit d1892f2

Please sign in to comment.