mirrors/copyparty
1
0
Fork 0
mirror of https://github.com/9001/copyparty.git synced 2025-08-18 09:22:31 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

ux: delay loading animation + focus outlines + explain ng

Browse source
This commit is contained in:
ed 2022-06-16 11:02:05 +02:00
parent eb3fa5aa6b
commit 35d4a1a6af
4 changed files with 24 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
copyparty/web/browser.css
View file

@ -869,6 +869,10 @@ html.y #widget.open {
@keyframes spin { @keyframes spin {
100% {transform: rotate(360deg)} 100% {transform: rotate(360deg)}
} }
@keyframes fadein {
0% {opacity: 0}
100% {opacity: 1}
}
#wtoggle { #wtoggle {
position: absolute; position: absolute;
white-space: nowrap; white-space: nowrap;
@ -1010,7 +1014,6 @@ html.y #widget.open {
font-size: 1.5em; font-size: 1.5em;
padding: .25em .4em; padding: .25em .4em;
margin: 0; margin: 0;
outline: none;
} }
#ops a.act { #ops a.act {
color: #fff; color: #fff;
@ -1333,7 +1336,7 @@ html.y #tree.nowrap .ntree a+a:hover {
margin: 1em .3em 1em 1em; margin: 1em .3em 1em 1em;
padding: 0 1.2em 0 0; padding: 0 1.2em 0 0;
font-size: 4em; font-size: 4em;
animation: spin 1s linear infinite; animation: spin 1s linear infinite, fadein .2s ease;
position: absolute; position: absolute;
z-index: 9; z-index: 9;
} }
@ -1933,7 +1936,6 @@ html.y #bbox-overlay figcaption a {
#u2form input { #u2form input {
background: var(--bg-u5); background: var(--bg-u5);
border: 0px solid var(--bg-u5); border: 0px solid var(--bg-u5);
outline: none;
} }
#u2err.err { #u2err.err {
color: var(--a-dark); color: var(--a-dark);
@ -2130,7 +2132,6 @@ html.y #bbox-overlay figcaption a {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: none; border: none;
outline: none;
} }
#u2conf .txtbox { #u2conf .txtbox {
width: 3em; width: 3em;

11
copyparty/web/browser.js
View file

@ -78,7 +78,7 @@ var Ls = {
"ut_etat": "average <em>total</em> speed and estimated time until finish", "ut_etat": "average <em>total</em> speed and estimated time until finish",
"uct_ok": "completed successfully", "uct_ok": "completed successfully",
"uct_ng": "failed / rejected / not-found", "uct_ng": "no-good: failed / rejected / not-found",
"uct_done": "ok and ng combined", "uct_done": "ok and ng combined",
"uct_bz": "hashing or uploading", "uct_bz": "hashing or uploading",
"uct_q": "idle, pending", "uct_q": "idle, pending",
@ -735,7 +735,7 @@ ebi('op_up2k').innerHTML = (
'<div id="u2notbtn"></div>\n' + '<div id="u2notbtn"></div>\n' +
'<div id="u2btn_ct">\n' + '<div id="u2btn_ct">\n' +
' <div id="u2btn">\n' + ' <div id="u2btn" tabindex="0">\n' +
' <span id="u2bm"></span>\n' + L.ul_btn + ' <span id="u2bm"></span>\n' + L.ul_btn +
' </div>\n' + ' </div>\n' +
'</div>\n' + '</div>\n' +
@ -4970,17 +4970,22 @@ var treectl = (function () {
})(); })();
var enspin_timer = null;
function enspin(sel) { function enspin(sel) {
clearTimeout(enspin_timer);
enspin_timer = setTimeout(function () {
despin(sel); despin(sel);
var d = mknod('div'); var d = mknod('div');
d.className = 'dumb_loader_thing'; d.className = 'dumb_loader_thing';
d.innerHTML = '🌲'; d.innerHTML = '🌲';
var tgt = QS(sel); var tgt = QS(sel);
tgt.insertBefore(d, tgt.childNodes[0]); tgt.insertBefore(d, tgt.childNodes[0]);
}, 50);
} }
function despin(sel) { function despin(sel) {
clearTimeout(enspin_timer);
var o = QSA(sel + '>.dumb_loader_thing'); var o = QSA(sel + '>.dumb_loader_thing');
for (var a = o.length - 1; a >= 0; a--) for (var a = o.length - 1; a >= 0; a--)
o[a].parentNode.removeChild(o[a]); o[a].parentNode.removeChild(o[a]);
@ -5436,7 +5441,7 @@ var settheme = (function () {
L = Ls[this.textContent]; L = Ls[this.textContent];
swrite("lang", this.textContent); swrite("lang", this.textContent);
freshen(); freshen();
modal.confirm(L.lang_set, location.reload.bind(location), null); modal.confirm(Ls.eng.lang_set + "\n\n" + Ls.nor.lang_set, location.reload.bind(location), null);
}; };
freshen(); freshen();

4
copyparty/web/ui.css
View file

@ -281,15 +281,19 @@ html.y #tth {
max-width: 24em; max-width: 24em;
} }
*:focus, *:focus,
*:focus+label,
#pctl *:focus, #pctl *:focus,
.btn:focus { .btn:focus {
box-shadow: 0 .1em .2em #fc0 inset; box-shadow: 0 .1em .2em #fc0 inset;
outline: #fc0 solid .1em;
border-radius: .2em; border-radius: .2em;
} }
html.y *:focus, html.y *:focus,
html.y *:focus+label,
html.y #pctl *:focus, html.y #pctl *:focus,
html.y .btn:focus { html.y .btn:focus {
box-shadow: 0 .1em .2em #037 inset; box-shadow: 0 .1em .2em #037 inset;
outline: #037 solid .1em;
} }
input[type="text"]:focus, input[type="text"]:focus,
input:not([type]):focus, input:not([type]):focus,

2
copyparty/web/up2k.js
View file

@ -1067,7 +1067,7 @@ function up2k_init(subtle) {
function more_one_file() { function more_one_file() {
fdom_ctr++; fdom_ctr++;
var elm = mknod('div'); var elm = mknod('div');
elm.innerHTML = '<input id="file{0}" type="file" name="file{0}[]" multiple="multiple" />'.format(fdom_ctr); elm.innerHTML = '<input id="file{0}" type="file" name="file{0}[]" multiple="multiple" tabindex="-1" />'.format(fdom_ctr);
ebi('u2form').appendChild(elm); ebi('u2form').appendChild(elm);
ebi('file' + fdom_ctr).onchange = gotfile; ebi('file' + fdom_ctr).onchange = gotfile;
} }