Update the lag icon
This commit is contained in:
parent
26edb77cf0
commit
29174b2922
3 changed files with 158 additions and 12 deletions
|
@ -88,6 +88,73 @@
|
|||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.clag () {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
#newLag {
|
||||
height: 20px;
|
||||
width: 23px;
|
||||
background: transparent;
|
||||
display: inline-block;
|
||||
padding: 3px;
|
||||
margin: 3px;
|
||||
vertical-align: top;
|
||||
box-sizing: content-box;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
margin: 0;
|
||||
margin-right: 1px;
|
||||
background: black;
|
||||
vertical-align: bottom;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid black;
|
||||
transition: background 1s, border 1s;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
&.bar1 { height: 5px; }
|
||||
&.bar2 { height: 10px; }
|
||||
&.bar3 { height: 15px; }
|
||||
&.bar4 { height: 20px; }
|
||||
}
|
||||
&.lag0 {
|
||||
span {
|
||||
.clag();
|
||||
border-color: red;
|
||||
}
|
||||
}
|
||||
&.lag1 {
|
||||
.bar2, .bar3, .bar4 { .clag(); }
|
||||
span {
|
||||
background-color: orange;
|
||||
border-color: orange;
|
||||
}
|
||||
}
|
||||
&.lag2 {
|
||||
.bar3, .bar4 { .clag(); }
|
||||
span {
|
||||
background-color: orange;
|
||||
border-color: orange;
|
||||
}
|
||||
}
|
||||
&.lag3 {
|
||||
.bar4 { .clag(); }
|
||||
span {
|
||||
background-color: green;
|
||||
border-color: green;
|
||||
}
|
||||
}
|
||||
&.lag4 {
|
||||
span {
|
||||
background-color: green;
|
||||
border-color: green;
|
||||
}
|
||||
}
|
||||
}
|
||||
div {
|
||||
white-space: normal;
|
||||
&.cryptpad-back {
|
||||
|
|
|
@ -161,6 +161,74 @@
|
|||
.cryptpad-toolbar .cryptpad-lag div {
|
||||
margin: auto;
|
||||
}
|
||||
.cryptpad-toolbar #newLag {
|
||||
height: 20px;
|
||||
width: 23px;
|
||||
background: transparent;
|
||||
display: inline-block;
|
||||
padding: 3px;
|
||||
margin: 3px;
|
||||
vertical-align: top;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.cryptpad-toolbar #newLag span {
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
margin: 0;
|
||||
margin-right: 1px;
|
||||
background: black;
|
||||
vertical-align: bottom;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid black;
|
||||
transition: background 1s, border 1s;
|
||||
}
|
||||
.cryptpad-toolbar #newLag span:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.cryptpad-toolbar #newLag span.bar1 {
|
||||
height: 5px;
|
||||
}
|
||||
.cryptpad-toolbar #newLag span.bar2 {
|
||||
height: 10px;
|
||||
}
|
||||
.cryptpad-toolbar #newLag span.bar3 {
|
||||
height: 15px;
|
||||
}
|
||||
.cryptpad-toolbar #newLag span.bar4 {
|
||||
height: 20px;
|
||||
}
|
||||
.cryptpad-toolbar #newLag.lag0 span {
|
||||
background: transparent;
|
||||
border-color: red;
|
||||
}
|
||||
.cryptpad-toolbar #newLag.lag1 .bar2,
|
||||
.cryptpad-toolbar #newLag.lag1 .bar3,
|
||||
.cryptpad-toolbar #newLag.lag1 .bar4 {
|
||||
background: transparent;
|
||||
}
|
||||
.cryptpad-toolbar #newLag.lag1 span {
|
||||
background-color: orange;
|
||||
border-color: orange;
|
||||
}
|
||||
.cryptpad-toolbar #newLag.lag2 .bar3,
|
||||
.cryptpad-toolbar #newLag.lag2 .bar4 {
|
||||
background: transparent;
|
||||
}
|
||||
.cryptpad-toolbar #newLag.lag2 span {
|
||||
background-color: orange;
|
||||
border-color: orange;
|
||||
}
|
||||
.cryptpad-toolbar #newLag.lag3 .bar4 {
|
||||
background: transparent;
|
||||
}
|
||||
.cryptpad-toolbar #newLag.lag3 span {
|
||||
background-color: green;
|
||||
border-color: green;
|
||||
}
|
||||
.cryptpad-toolbar #newLag.lag4 span {
|
||||
background-color: green;
|
||||
border-color: green;
|
||||
}
|
||||
.cryptpad-toolbar div {
|
||||
white-space: normal;
|
||||
}
|
||||
|
|
|
@ -342,7 +342,12 @@ define([
|
|||
'class': LAG_ELEM_CLS,
|
||||
id: uid(),
|
||||
});
|
||||
return $lag[0];
|
||||
var $a = $('<span>', {id: 'newLag'});
|
||||
$s1 = $('<span>', {'class': 'bar1'}).appendTo($a);
|
||||
$s2 = $('<span>', {'class': 'bar2'}).appendTo($a);
|
||||
$s3 = $('<span>', {'class': 'bar3'}).appendTo($a);
|
||||
$s4 = $('<span>', {'class': 'bar4'}).appendTo($a);
|
||||
return $a[0];
|
||||
};
|
||||
|
||||
var checkLag = function (getLag, lagElement) {
|
||||
|
@ -354,29 +359,35 @@ define([
|
|||
'class': 'lag'
|
||||
});
|
||||
var title;
|
||||
var $lag = $(lagElement);
|
||||
$lag.attr('class', '');
|
||||
if (lag) {
|
||||
lagErrors = 0;
|
||||
firstConnection = false;
|
||||
title = Messages.lag + ' : ' + lag + ' ms\n';
|
||||
if (lag && lag.waiting || lag > 1000) {
|
||||
lagLight.addClass('lag-orange');
|
||||
if (lag > 30000) {
|
||||
$lag.addClass('lag0');
|
||||
title = Messages.redLight;
|
||||
} else if (lag > 5000) {
|
||||
$lag.addClass('lag1');
|
||||
title += Messages.orangeLight;
|
||||
} else if (lag > 1000) {
|
||||
$lag.addClass('lag2');
|
||||
title += Messages.orangeLight;
|
||||
} else if (lag > 300) {
|
||||
$lag.addClass('lag3');
|
||||
title += Messages.greenLight;
|
||||
} else {
|
||||
lagLight.addClass('lag-green');
|
||||
$lag.addClass('lag4');
|
||||
title += Messages.greenLight;
|
||||
}
|
||||
}
|
||||
else if (!firstConnection) {
|
||||
// Display the red light at the 2nd failed attemp to get the lag
|
||||
//if (lagErrors > 1) {
|
||||
lagLight.addClass('lag-red');
|
||||
title = Messages.redLight;
|
||||
//}
|
||||
lagLight.addClass('lag-red');
|
||||
title = Messages.redLight;
|
||||
}
|
||||
if (title) {
|
||||
lagLight.attr('title', title);
|
||||
$(lagElement).html('');
|
||||
$(lagElement).append(lagLight);
|
||||
$lag.attr('title', title);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in a new issue