Esanders has uploaded a new change for review.
https://gerrit.wikimedia.org/r/171548
Change subject: Add 'indeterminate' state to progress bar widget
......................................................................
Add 'indeterminate' state to progress bar widget
Use typical 'bouncing' animation in apex & MW themes.
Change-Id: Ib97d39cdc695ac714fb64f709bae0e20f7c73db0
---
M demos/pages/widgets.js
M src/styles/common.less
M src/themes/apex/widgets.less
M src/themes/mediawiki/widgets.less
M src/widgets/ProgressBarWidget.js
5 files changed, 71 insertions(+), 9 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/48/171548/1
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index c70afec..2a4de1c 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -662,6 +662,15 @@
label: 'Progress bar',
align: 'top'
}
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ProgressBarWidget( {
+ progress: false
+ } ),
+ {
+ label: 'Progress bart
(indeterminate)\u200E',
+ align: 'top'
+ }
)
];
diff --git a/src/styles/common.less b/src/styles/common.less
index 53c7aad..d0dc08a 100644
--- a/src/styles/common.less
+++ b/src/styles/common.less
@@ -52,6 +52,15 @@
.oo-ui-image-variant( texture, @name, @file, @variant, @ext, @path );
}
+.oo-ui-animation( @value1, @value2: X, ... ) {
+ @value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
+ -webkit-animation: @value;
+ -moz-animation: @value;
+ -ms-animation: @value;
+ -o-animation: @value;
+ animation: @value;
+}
+
.oo-ui-transition( @value1, @value2: X, ... ) {
@value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
-webkit-transition: @value;
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index 88f8ff0..b92de81 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -622,17 +622,36 @@
}
.theme-oo-ui-progressBarWidget () {
- width: 100%;
max-width: 50em;
border: solid 1px @primary-border;
border-radius: 0.25em;
+ overflow: hidden;
+
&-bar {
height: 1em;
border-right: solid 1px @primary-border;
- .oo-ui-transition(width 200ms);
+ .oo-ui-transition(width 200ms, margin-left 200ms);
.oo-ui-vertical-gradient(@primary-gradient-start,
@primary-gradient-end);
+ }
+ &-indeterminate {
+ .oo-ui-progressBarWidget-bar {
+ .oo-ui-animation(oo-ui-progressBarWidget-pulsate 1s
infinite alternate ease-in-out);
+ width: 40%;
+ margin-left: -10%;
+ border-left-width: 1px;
+ }
}
&.oo-ui-widget-disabled {
opacity: 0.6;
}
}
+
+.oo-ui-progressBarWidget-pulsate-frames {
+ 0% { margin-left: -2%; }
+ 100% { margin-left: 62%; }
+}
+@-webkit-keyframes oo-ui-progressBarWidget-pulsate {
.oo-ui-progressBarWidget-pulsate-frames }
+@-moz-keyframes oo-ui-progressBarWidget-pulsate {
.oo-ui-progressBarWidget-pulsate-frames }
+@-ms-keyframes oo-ui-progressBarWidget-pulsate {
.oo-ui-progressBarWidget-pulsate-frames }
+@-o-keyframes oo-ui-progressBarWidget-pulsate {
.oo-ui-progressBarWidget-pulsate-frames }
+@keyframes oo-ui-progressBarWidget-pulsate {
.oo-ui-progressBarWidget-pulsate-frames }
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index d5a6e85..81c50e1 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -638,17 +638,36 @@
}
.theme-oo-ui-progressBarWidget () {
- width: 100%;
max-width: 50em;
border: solid 1px @primary-fill;
border-radius: 0.1em;
+ overflow: hidden;
+
&-bar {
height: 1em;
border-right: solid 1px @primary-fill;
background: @primary-fill;
- .oo-ui-transition(width 200ms);
+ .oo-ui-transition(width 200ms, margin-left 200ms);
+ }
+ &-indeterminate {
+ .oo-ui-progressBarWidget-bar {
+ .oo-ui-animation(oo-ui-progressBarWidget-pulsate 1s
infinite alternate ease-in-out);
+ width: 40%;
+ margin-left: -10%;
+ border-left-width: 1px;
+ }
}
&.oo-ui-widget-disabled {
opacity: 0.2;
}
}
+
+.oo-ui-progressBarWidget-pulsate-frames {
+ 0% { margin-left: -2%; }
+ 100% { margin-left: 62%; }
+}
+@-webkit-keyframes oo-ui-progressBarWidget-pulsate {
.oo-ui-progressBarWidget-pulsate-frames }
+@-moz-keyframes oo-ui-progressBarWidget-pulsate {
.oo-ui-progressBarWidget-pulsate-frames }
+@-ms-keyframes oo-ui-progressBarWidget-pulsate {
.oo-ui-progressBarWidget-pulsate-frames }
+@-o-keyframes oo-ui-progressBarWidget-pulsate {
.oo-ui-progressBarWidget-pulsate-frames }
+@keyframes oo-ui-progressBarWidget-pulsate {
.oo-ui-progressBarWidget-pulsate-frames }
diff --git a/src/widgets/ProgressBarWidget.js b/src/widgets/ProgressBarWidget.js
index 4db8f21..12c8bb0 100644
--- a/src/widgets/ProgressBarWidget.js
+++ b/src/widgets/ProgressBarWidget.js
@@ -6,7 +6,7 @@
*
* @constructor
* @param {Object} [config] Configuration options
- * @cfg {number} [progress=0] Initial progress
+ * @cfg {number|boolean} [progress=false] Initial progress percent or false
for indeterminate
*/
OO.ui.ProgressBarWidget = function OoUiProgressBarWidget( config ) {
// Configuration initialization
@@ -20,7 +20,7 @@
this.progress = null;
// Initialization
- this.setProgress( config.progress || 0 );
+ this.setProgress( config.progress !== undefined ? config.progress :
false );
this.$bar.addClass( 'oo-ui-progressBarWidget-bar');
this.$element
.attr( {
@@ -54,11 +54,17 @@
/**
* Set progress percent
*
- * @param {number} progress Progress percent
+ * @param {number|boolean} progress Progress percent or false for indeterminate
*/
OO.ui.ProgressBarWidget.prototype.setProgress = function ( progress ) {
this.progress = progress;
- this.$bar.css( 'width', this.progress + '%' );
- this.$element.attr( 'aria-valuenow', this.progress );
+ if ( progress !== false ) {
+ this.$bar.css( 'width', this.progress + '%' );
+ this.$element.attr( 'aria-valuenow', this.progress );
+ } else {
+ this.$bar.css( 'width', '' );
+ this.$element.removeAttr( 'aria-valuenow' );
+ }
+ this.$element.toggleClass( 'oo-ui-progressBarWidget-indeterminate',
!progress );
};
--
To view, visit https://gerrit.wikimedia.org/r/171548
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ib97d39cdc695ac714fb64f709bae0e20f7c73db0
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Esanders <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
