Commit 9eed4845 authored by Camil Staps's avatar Camil Staps 🚀

Merge branch '245-text-label-of-itasks-ui-editor-controls-progressbar-is-not-shown' into 'master'

fix showing label for progressbar

Closes #245

See merge request !321
parents ea1990c6 6658bc68
Pipeline #29381 passed with stage
in 4 minutes and 34 seconds
......@@ -980,6 +980,36 @@ div.itasks-exception {
padding: 5px;
}
.itasks-progress {
height: 1.5em;
width: 100%;
background-color: #c9c9c9;
position: relative;
}
.itasks-progress:before {
content: attr(title);
font-size: 0.8em;
position: absolute;
text-align: center;
height: 80%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.itasks-progress .value {
background-color: #7cc4ff;
display: inline-block;
height: 100%;
width: 100%;
}
.itasks-checkgroup {
margin: 0;
padding: 0;
......
......@@ -980,6 +980,36 @@ div.itasks-exception {
padding: 5px;
}
.itasks-progress {
height: 1.5em;
width: 100%;
background-color: #c9c9c9;
position: relative;
}
.itasks-progress:before {
content: attr(title);
font-size: 0.8em;
position: absolute;
text-align: center;
height: 80%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.itasks-progress .value {
background-color: #7cc4ff;
display: inline-block;
height: 100%;
width: 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(title);
font-size: 0.8em;
position: absolute;
text-align: center;
height: 80%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.#{$prefix}progress .value {
background-color: #7cc4ff;
display: inline-block;
height: 100%;
width: 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('title', 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