blitzwing/cryptpad
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update the lag icon

Browse source
This commit is contained in:
yflory 2017-03-20 16:39:33 +01:00
parent 26edb77cf0
commit 29174b2922
3 changed files with 158 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
customize.dist/src/less/toolbar.less
View file

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

68
customize.dist/toolbar.css
View file

@ -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;
}

35
www/common/toolbar.js
View file

@ -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);
}
};