diff --git a/server/files/javascript/progress.js b/server/files/javascript/progress.js
index ba2af74e9..357fe4cd6 100755
--- a/server/files/javascript/progress.js
+++ b/server/files/javascript/progress.js
@@ -12,6 +12,7 @@ semantic.progress.ready = function() {
$progress
.progress({
+ showActivity: false,
random: {
min: 10,
max: 90
diff --git a/src/definitions/modules/progress.js b/src/definitions/modules/progress.js
index a773725d7..4d1be7f87 100755
--- a/src/definitions/modules/progress.js
+++ b/src/definitions/modules/progress.js
@@ -123,7 +123,7 @@ $.fn.progress = function(parameters) {
edgeValue = module.total;
module.debug('Incrementing value by', incrementValue, startValue, edgeValue);
if(newValue > edgeValue ) {
- module.debug('Value cannot decrement above total', edgeValue);
+ module.debug('Value cannot increment above total', edgeValue);
newValue = edgeValue;
}
module.set.progress(newValue);
@@ -132,10 +132,10 @@ $.fn.progress = function(parameters) {
startValue = module.percent || 0;
incrementValue = incrementValue || module.get.randomValue();
newValue = startValue + incrementValue;
- edgeValue = 0;
- module.debug('Incrementing percentage by value', incrementValue, startValue);
- if(newValue < edgeValue ) {
- module.debug('Value cannot decrement below zero');
+ edgeValue = 100;
+ module.debug('Incrementing percentage by', incrementValue, startValue);
+ if(newValue > edgeValue ) {
+ module.debug('Value cannot increment above 100 percent');
newValue = edgeValue;
}
module.set.progress(newValue);
@@ -143,27 +143,29 @@ $.fn.progress = function(parameters) {
},
decrement: function(decrementValue) {
var
- total = module.total || false,
+ total = module.total || false,
+ edgeValue = 0,
startValue,
newValue
;
if(total) {
startValue = module.value || 0;
- decrementValue = -decrementValue || -1;
- newValue = startValue + decrementValue;
+ decrementValue = decrementValue || 1;
+ newValue = startValue - decrementValue;
module.debug('Decrementing value by', decrementValue, startValue);
- if(newValue > module.total ) {
- newValue = module.total;
- }
- module.set.progress(newValue);
}
else {
startValue = module.percent || 0;
- decrementValue = -decrementValue || -module.get.randomValue();
- newValue = startValue + decrementValue;
- module.debug('Decrementing percentage by value', decrementValue, startValue);
- module.set.progress(newValue);
+ decrementValue = decrementValue || module.get.randomValue();
+ newValue = startValue - decrementValue;
+ module.debug('Decrementing percentage by', decrementValue, startValue);
}
+
+ if(newValue < edgeValue) {
+ module.debug('Value cannot decrement below 0');
+ newValue = 0;
+ }
+ module.set.progress(newValue);
},
get: {
@@ -209,8 +211,30 @@ $.fn.progress = function(parameters) {
}
},
+ remove: {
+ active: function() {
+ module.verbose('Removing active state');
+ $module.removeClass(className.active);
+ },
+ success: function() {
+ module.verbose('Removing success state');
+ $module.removeClass(className.success);
+ },
+ warning: function() {
+ module.verbose('Removing warning state');
+ $module.removeClass(className.warning);
+ },
+ error: function() {
+ module.verbose('Removing error state');
+ $module.removeClass(className.error);
+ }
+ },
+
set: {
barWidth: function(value) {
+ if(value > 100) {
+ module.error(error.tooHigh, value);
+ }
$bar
.css('width', value + '%')
;
@@ -257,12 +281,17 @@ $.fn.progress = function(parameters) {
}
module.set.barWidth(percent);
module.set.barLabel();
- if(percent === 100 && settings.autoSuccess && !(module.is.warning() || module.is.error())) {
- module.debug('Automatically triggering success at 100%');
- module.set.success();
+ if(percent === 100) {
+ if(settings.autoSuccess && !(module.is.warning() || module.is.error())) {
+ module.set.success();
+ module.debug('Automatically triggering success at 100%');
+ }
+ else {
+ module.remove.active();
+ }
}
- else if(settings.text.active) {
- module.set.label(settings.text.active);
+ else {
+ module.set.active();
}
$.proxy(settings.onChange, element)(percent, module.value, module.total);
},
@@ -287,12 +316,26 @@ $.fn.progress = function(parameters) {
$progress.text( module.get.text(settings.text.percent) );
}
},
+ active: function(text) {
+ text = text || settings.text.active;
+ module.debug('Setting active state');
+ if(settings.showActivity) {
+ $module.addClass(className.active);
+ }
+ module.remove.warning();
+ module.remove.error();
+ module.remove.success();
+ if(text) {
+ module.set.label(text);
+ }
+ },
success : function(text) {
text = text || settings.text.success;
module.debug('Setting success state');
$module.addClass(className.success);
- $module.removeClass(className.warning);
- $module.removeClass(className.error);
+ module.remove.active();
+ module.remove.warning();
+ module.remove.error();
module.complete();
if(text) {
module.set.label(text);
@@ -302,8 +345,9 @@ $.fn.progress = function(parameters) {
text = text || settings.text.warning;
module.debug('Setting warning state');
$module.addClass(className.warning);
- $module.removeClass(className.success);
- $module.removeClass(className.error);
+ module.remove.active();
+ module.remove.success();
+ module.remove.error();
module.complete();
if(text) {
module.set.label(text);
@@ -313,8 +357,9 @@ $.fn.progress = function(parameters) {
text = text || settings.text.error;
module.debug('Setting error state');
$module.addClass(className.error);
- $module.removeClass(className.success);
- $module.removeClass(className.warning);
+ module.remove.active();
+ module.remove.success();
+ module.remove.warning();
module.complete();
if(text) {
module.set.label(text);
@@ -531,7 +576,7 @@ $.fn.progress.settings = {
name : 'Progress',
namespace : 'progress',
- debug : false,
+ debug : true,
verbose : true,
performance : true,
@@ -540,15 +585,17 @@ $.fn.progress.settings = {
max : 3
},
- label : 'percent',
- autoSuccess : true,
- precision : 1,
+ autoSuccess : true,
+ showActivity : true,
+
+ label : 'percent',
+ precision : 1,
- percent : false,
- total : false,
- value : false,
+ percent : false,
+ total : false,
+ value : false,
- onChange : function(percent, value, total){},
+ onChange : function(percent, value, total){},
error : {
method : 'The method you called is not defined.',
@@ -582,6 +629,7 @@ $.fn.progress.settings = {
},
className : {
+ active : 'active',
error : 'error',
success : 'success',
warning : 'warning'
diff --git a/src/definitions/modules/progress.less b/src/definitions/modules/progress.less
index 8e384c2d2..fb2362631 100755
--- a/src/definitions/modules/progress.less
+++ b/src/definitions/modules/progress.less
@@ -106,7 +106,7 @@
/*--------------
- Success
+ Success
---------------*/
.ui.progress.success .bar {
@@ -174,11 +174,10 @@
}
@keyframes progress-active {
0% {
- opacity: 0;
+ opacity: @activePulseMaxOpacity;
width: 0;
}
- 50% {
- opacity: @activePulseMaxOpacity;
+ 90% {
}
100% {
opacity: 0;
@@ -199,19 +198,46 @@
}
-
/*******************************
Variations
*******************************/
+/*--------------
+ Inverted
+---------------*/
+
+/* bottom attached */
+.ui.inverted.progress {
+ background: @invertedBackground;
+ border: @invertedBorder;
+}
+.ui.inverted.progress .bar {
+ background: @invertedBarBackground;
+}
+.ui.inverted.progress .bar > .progress {
+ color: @invertedProgressColor;
+}
+.ui.inverted.progress > .label {
+ color: @invertedLabelColor;
+}
+.ui.inverted.progress.success > .label {
+ color: @successColor;
+}
+.ui.inverted.progress.warning > .label {
+ color: @warningColor;
+}
+.ui.inverted.progress.error > .label {
+ color: @errorColor;
+}
+
/*--------------
Attached
---------------*/
/* bottom attached */
.ui.progress.attached {
- background-color: transparent;
+ background: none transparent;
position: relative;
border: none;
margin: 0em;
@@ -271,6 +297,34 @@
background-color: @yellow;
}
+.ui.black.inverted.progress .bar {
+ background-color: @lightBlack;
+}
+.ui.blue.inverted.progress .bar {
+ background-color: @lightBlue;
+}
+.ui.green.inverted.progress .bar {
+ background-color: @lightGreen;
+}
+.ui.orange.inverted.progress .bar {
+ background-color: @lightOrange;
+}
+.ui.pink.inverted.progress .bar {
+ background-color: @lightPink;
+}
+.ui.purple.inverted.progress .bar {
+ background-color: @lightPurple;
+}
+.ui.red.inverted.progress .bar {
+ background-color: @lightRed;
+}
+.ui.teal.inverted.progress .bar {
+ background-color: @lightTeal;
+}
+.ui.yellow.inverted.progress .bar {
+ background-color: @lightYellow;
+}
+
/*--------------
Sizes
---------------*/
diff --git a/src/themes/packages/classic/modules/progress.variables b/src/themes/packages/classic/modules/progress.variables
index b3d822e0c..3bd792d5f 100755
--- a/src/themes/packages/classic/modules/progress.variables
+++ b/src/themes/packages/classic/modules/progress.variables
@@ -2,4 +2,4 @@
Progress
*******************************/
-@border: none;
\ No newline at end of file
+@border: 1px solid @borderColor;
diff --git a/src/themes/packages/default/modules/progress.variables b/src/themes/packages/default/modules/progress.variables
index d2694d86f..0329b3f47 100755
--- a/src/themes/packages/default/modules/progress.variables
+++ b/src/themes/packages/default/modules/progress.variables
@@ -7,7 +7,6 @@
--------------------*/
@verticalSpacing: 1em;
-
@margin: @verticalSpacing 0em (@labelHeight + @verticalSpacing);
@firstMargin: 0em 0em (@labelHeight + @verticalSpacing);
@lastMargin: 0em 0em (@labelHeight);
@@ -28,7 +27,7 @@
background-color 1s @defaultEasing
;
-
+/* Progress Bar Label */
@progressWidth: auto;
@progressSize: 0.9em;
@progressPosition: absolute;
@@ -42,6 +41,7 @@
@progressFontWeight: bold;
@progressTextAlign: left;
+/* Label */
@labelWidth: 100%;
@labelHeight: 1.25em;
@labelSize: 1em;
@@ -61,6 +61,7 @@
States
--------------------*/
+/* Active */
@activePulseColor: @white;
@activePulseMaxOpacity: 0.3;
@activePulseDuration: 2s;
@@ -70,10 +71,13 @@
Types
--------------------*/
+/* Attached */
@attachedHeight: 0.25em;
@attachedBorderRadius: @borderRadius;
-
-/*-------------------
- Variations
---------------------*/
+/* Inverted */
+@invertedBackground: @transparentWhite;
+@invertedBorder: none;
+@invertedBarBackground: @offWhite;
+@invertedProgressColor: @textColor;
+@invertedLabelColor: @white;