Commit 7eb20adc authored by Mart Lubbers's avatar Mart Lubbers

fix showing label for progressbar

For this the html progress entry is not used since it is not cross
browser compatible regarding the label.
Also, I didn't regenerate the css because sass produces totally
different output.

apply suggestions and clean up

Apply suggestion to Libraries/iTasks/UI/WebPublic/js/itasks-components-display.js

correctly break cases
parent 64c119c5
Pipeline #29341 passed with stage
in 4 minutes and 35 seconds
......@@ -980,6 +980,27 @@ div.itasks-exception {
padding: 5px;
}
.itasks-progress {
height: 1.5em;
width: 100%;
background-color: #c9c9c9;
position: relative;
}
.itasks-progress:before {
content: attr(data-label);
font-size: 0.8em;
position: absolute;
text-align: center;
top: 5px;
left: 0;
right: 0;
}
.itasks-progress .value {
background-color: #7cc4ff;
display: inline-block;
height: 100%;
}
.itasks-checkgroup {
margin: 0;
padding: 0;
......
......@@ -980,6 +980,27 @@ div.itasks-exception {
padding: 5px;
}
.itasks-progress {
height: 1.5em;
width: 100%;
background-color: #c9c9c9;
position: relative;
}
.itasks-progress:before {
content: attr(data-label);
font-size: 0.8em;
position: absolute;
text-align: center;
top: 5px;
left: 0;
right: 0;
}
.itasks-progress .value {
background-color: #7cc4ff;
display: inline-block;
height: 100%;
}
.itasks-checkgroup {
margin: 0;
padding: 0;
......
.#{$prefix}textview, .#{$prefix}htmlview {
padding: 5px;
}
.#{$prefix}progress {
height: 1.5em;
width: 100%;
background-color: #c9c9c9;
position: relative;
}
.#{$prefix}progress:before {
content: attr(data-label);
font-size: 0.8em;
position: absolute;
text-align: center;
top: 5px;
left: 0;
right: 0;
}
.#{$prefix}progress .value {
background-color: #7cc4ff;
display: inline-block;
height: 100%;
}
......@@ -28,23 +28,34 @@ itasks.HtmlView = {
}
};
itasks.ProgressBar = {
domTag: 'progress',
domTag: 'div',
cssCls: 'progress',
initDOMEl: function() {
var me = this,
el = this.domEl;
initDOMEl: function() {
var me = this,
el = this.domEl;
//https://stackoverflow.com/questions/41429906/how-to-display-data-label-inside-html5-progress-bar-cross-browser-compatible
var child = document.createElement('span');
child.setAttribute('class', 'value');
el.appendChild(child);
el.innerHTML = me.attributes.text;
el.min = 0;
el.max = 100;
if(typeof me.attributes.value == 'number') {
el.value = me.attributes.value;
}
},
me.setProgress(me.attributes.value);
me.setText(me.attributes.text);
},
setProgress:function(value) {
this.domEl.children[0].style=typeof value == 'number' ? ('width:'+value+'%;') : '';
},
setText:function(text) {
this.domEl.setAttribute('data-label', text);
},
onAttributeChange:function(name,value) {
switch(name) {
case 'value': if (value == null) this.domEl.removeAttribute('value'); else this.domEl.value = value; break;
case 'text': this.domEl.innerHTML = value; break;
case 'value':
this.setProgress(value);
break;
case 'text':
this.setText(value);
break;
}
}
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment