web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Use a FontAwesome spinner to replace the old unaligned one

Browse Source
This commit is contained in:
yflory 2017-01-12 17:05:16 +01:00
parent 6352656737
commit 29c8f0bbef
3 changed files with 22 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
customize.dist/src/less/toolbar.less
View File

@ -243,9 +243,11 @@
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
} }
button {
span.fa { span.fa {
vertical-align: baseline; vertical-align: baseline;
} }
}
@media screen and (max-width: @media-narrow-screen) { @media screen and (max-width: @media-narrow-screen) {
top: 3em; top: 3em;
} }
@ -313,11 +315,11 @@
text-align: right; text-align: right;
} }
.cryptpad-spinner { .cryptpad-spinner {
display: inline-block; height: 16px;
height: 26px; width: 16px;
margin: 2px; margin: 8px;
line-height: 26px; line-height: 16px;
font-size: 20px; font-size: 16px;
} }
.cryptpad-readonly { .cryptpad-readonly {
margin-right: 5px; margin-right: 5px;

12
customize.dist/toolbar.css
View File

@ -290,7 +290,7 @@
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
} }
.cryptpad-toolbar-top .cryptpad-user span.fa { .cryptpad-toolbar-top .cryptpad-user button span.fa {
vertical-align: baseline; vertical-align: baseline;
} }
@media screen and (max-width: 400px) { @media screen and (max-width: 400px) {
@ -364,11 +364,11 @@
text-align: right; text-align: right;
} }
.cryptpad-spinner { .cryptpad-spinner {
display: inline-block; height: 16px;
height: 26px; width: 16px;
margin: 2px; margin: 8px;
line-height: 26px; line-height: 16px;
font-size: 20px; font-size: 16px;
} }
.cryptpad-readonly { .cryptpad-readonly {
margin-right: 5px; margin-right: 5px;

17
www/common/toolbar.js
View File

@ -43,7 +43,6 @@ define([
var LOCALSTORAGE_DISALLOW = Bar.constants.localstorageDisallow = 'cryptpad-disallow'; var LOCALSTORAGE_DISALLOW = Bar.constants.localstorageDisallow = 'cryptpad-disallow';
var SPINNER_DISAPPEAR_TIME = 3000; var SPINNER_DISAPPEAR_TIME = 3000;
var SPINNER = [ '-', '\\', '|', '/' ];
var uid = function () { var uid = function () {
return 'cryptpad-uid-' + String(Math.random()).substring(2); return 'cryptpad-uid-' + String(Math.random()).substring(2);
@ -80,21 +79,19 @@ define([
}; };
var createSpinner = function ($container) { var createSpinner = function ($container) {
var $spinner = $('<div>', { var $spinner = $('<span>', {
id: uid(), id: uid(),
'class': SPINNER_CLS, 'class': SPINNER_CLS + ' fa fa fa-spinner fa-pulse',
}); }).hide();
$container.prepend($spinner); $container.prepend($spinner);
return $spinner[0]; return $spinner[0];
}; };
var kickSpinner = function (spinnerElement, reversed) { var kickSpinner = function (spinnerElement) {
var txt = spinnerElement.textContent || '-'; $(spinnerElement).show();
var inc = (reversed) ? -1 : 1;
spinnerElement.textContent = SPINNER[(SPINNER.indexOf(txt) + inc) % SPINNER.length];
if (spinnerElement.timeout) { clearTimeout(spinnerElement.timeout); } if (spinnerElement.timeout) { clearTimeout(spinnerElement.timeout); }
spinnerElement.timeout = setTimeout(function () { spinnerElement.timeout = setTimeout(function () {
spinnerElement.textContent = ''; $(spinnerElement).hide();
}, SPINNER_DISAPPEAR_TIME); }, SPINNER_DISAPPEAR_TIME);
}; };
@ -616,7 +613,7 @@ define([
} }
var ks = function () { var ks = function () {
if (connected) { kickSpinner(spinner, false); } if (connected) { kickSpinner(spinner); }
}; };
realtime.onPatch(ks); realtime.onPatch(ks);