richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fixes to progress bar

pull/1129/head
jlukic 10 years ago
parent
514641ec8d
commit
33068c4ddb
8 changed files with 213 additions and 58 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      build/less/themes/packages/basic/modules/progress.overrides
  2. 15
      build/less/themes/packages/basic/modules/progress.variables
  3. 50
      server/documents/elements/progress.html.eco
  4. 1
      server/files/javascript/progress.js
  5. 118
      src/definitions/modules/progress.js
  6. 66
      src/definitions/modules/progress.less
  7. 2
      src/themes/packages/classic/modules/progress.variables
  8. 16
      src/themes/packages/default/modules/progress.variables

3
build/less/themes/packages/basic/modules/progress.overrides
View File

@ -0,0 +1,3 @@
/*******************************
Progress
*******************************/

15
build/less/themes/packages/basic/modules/progress.variables
View File

@ -0,0 +1,15 @@
/*******************************
Progress
*******************************/
@background: transparent;
@border: none;
@padding: 0em;
@progressLeft: 0em;
@progressWidth: 100%;
@progressTextAlign: center;
@labelFontWeight: normal;
@labelTextAlign: left;
@labelHeight: 1.5em;

50
server/documents/elements/progress.html.eco
View File

@ -9,7 +9,7 @@ title : 'Progress'
description : 'A progress bar shows the progression of a task'
type : 'UI Module'
themes : ['Default', 'Basic', 'Striped']
themes : ['Default', 'Classic', 'Basic', 'Striped']
---
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/modules/progress.less" />
<script src="/javascript/progress.js"></script>
@ -121,6 +121,36 @@ themes : ['Default', 'Basic', 'Striped']
<h2 class="ui dividing header">Variations</h2>
<div class="example">
<h4 class="ui header">Inverted</h4>
<p>A progress bar can have its colors inverted</p>
<div class="ui inverted segment">
<div class="ui inverted progress">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Uploading Files</div>
</div>
<div class="ui inverted progress success">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Success</div>
</div>
<div class="ui inverted progress warning">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Warning</div>
</div>
<div class="ui inverted progress error">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Error</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Attached</h4>
@ -177,29 +207,29 @@ themes : ['Default', 'Basic', 'Striped']
<div class="example">
<h4 class="ui header">With metadata</h4>
<p>A progress bar can be initialized with its</p>
<p>A progress bar can be initialized with metadata</p>
<div class="code" data-type="javascript" data-demo="true">
$('#example1').progress();
</div>
<div class="code" data-type="html" data-preview="true">
<div class="ui progress" data-percent="74" id="example1">
<div class="ui teal progress" data-percent="74" id="example1">
<div class="bar"></div>
<div class="label">Creating Profile</div>
<div class="label">74% Funded</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">With javascript</h4>
<p>A progress bar can be initialized with its</p>
<p>A progress bar can be initialized with a javascript settings object</p>
<div class="code" data-type="javascript" data-demo="true">
$('#example2').progress({
percent: 22
});
</div>
<div class="code" data-type="html" data-preview="true">
<div class="ui progress" id="example2">
<div class="ui teal progress" id="example2">
<div class="bar"></div>
<div class="label">Creating Profile</div>
<div class="label">22% Earned</div>
</div>
</div>
</div>
@ -216,7 +246,7 @@ themes : ['Default', 'Basic', 'Striped']
;
</div>
<div class="code" data-type="html" data-preview="true">
<div class="ui progress" id="example3">
<div class="ui teal progress" id="example3">
<div class="bar">
<div class="progress"></div>
</div>
@ -243,7 +273,7 @@ themes : ['Default', 'Basic', 'Striped']
;
</div>
<div class="code" data-type="html" data-preview="true">
<div class="ui progress" data-value="15" data-total="20" id="example4">
<div class="ui teal progress" data-value="15" data-total="20" id="example4">
<div class="bar">
<div class="progress"></div>
</div>
@ -272,7 +302,7 @@ themes : ['Default', 'Basic', 'Striped']
;
</div>
<div class="code" data-type="html" data-preview="true">
<div class="ui progress" data-value="15" data-total="20" id="example5">
<div class="ui teal progress" data-value="15" data-total="20" id="example5">
<div class="bar">
<div class="progress"></div>
</div>

1
server/files/javascript/progress.js
View File

@ -12,6 +12,7 @@ semantic.progress.ready = function() {
$progress
.progress({
showActivity: false,
random: {
min: 10,
max: 90

118
src/definitions/modules/progress.js
View File

@ -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'

66
src/definitions/modules/progress.less
View File

@ -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
---------------*/

2
src/themes/packages/classic/modules/progress.variables
View File

@ -2,4 +2,4 @@
Progress
*******************************/
@border: none;
@border: 1px solid @borderColor;

16
src/themes/packages/default/modules/progress.variables
View File

@ -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;
Write Preview
Loading…
Cancel
Save