From 35d4a1a6af1ec9ac16c7a5362243e66715dcf45d Mon Sep 17 00:00:00 2001
From: ed <s@ocv.me>
Date: Thu, 16 Jun 2022 11:02:05 +0200
Subject: [PATCH] ux: delay loading animation + focus outlines + explain ng

---
 copyparty/web/browser.css |  9 +++++----
 copyparty/web/browser.js  | 23 ++++++++++++++---------
 copyparty/web/ui.css      |  4 ++++
 copyparty/web/up2k.js     |  2 +-
 4 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index 7151fd93..8c62e9cd 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -869,6 +869,10 @@ html.y #widget.open {
 @keyframes spin {
 	100% {transform: rotate(360deg)}
 }
+@keyframes fadein {
+	0% {opacity: 0}
+	100% {opacity: 1}
+}
 #wtoggle {
 	position: absolute;
 	white-space: nowrap;
@@ -1010,7 +1014,6 @@ html.y #widget.open {
 	font-size: 1.5em;
 	padding: .25em .4em;
 	margin: 0;
-	outline: none;
 }
 #ops a.act {
 	color: #fff;
@@ -1333,7 +1336,7 @@ html.y #tree.nowrap .ntree a+a:hover {
 	margin: 1em .3em 1em 1em;
 	padding: 0 1.2em 0 0;
 	font-size: 4em;
-	animation: spin 1s linear infinite;
+	animation: spin 1s linear infinite, fadein .2s ease;
 	position: absolute;
 	z-index: 9;
 }
@@ -1933,7 +1936,6 @@ html.y #bbox-overlay figcaption a {
 #u2form input {
 	background: var(--bg-u5);
 	border: 0px solid var(--bg-u5);
-	outline: none;
 }
 #u2err.err {
 	color: var(--a-dark);
@@ -2130,7 +2132,6 @@ html.y #bbox-overlay figcaption a {
 	margin: 0;
 	padding: 0;
 	border: none;
-	outline: none;
 }
 #u2conf .txtbox {
 	width: 3em;
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js
index 8b2048a7..20fde688 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -78,7 +78,7 @@ var Ls = {
 		"ut_etat": "average &lt;em&gt;total&lt;/em&gt; speed and estimated time until finish",
 
 		"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_bz": "hashing or uploading",
 		"uct_q": "idle, pending",
@@ -735,7 +735,7 @@ ebi('op_up2k').innerHTML = (
 	'<div id="u2notbtn"></div>\n' +
 
 	'<div id="u2btn_ct">\n' +
-	'	<div id="u2btn">\n' +
+	'	<div id="u2btn" tabindex="0">\n' +
 	'		<span id="u2bm"></span>\n' + L.ul_btn +
 	'	</div>\n' +
 	'</div>\n' +
@@ -4970,17 +4970,22 @@ var treectl = (function () {
 })();
 
 
+var enspin_timer = null;
 function enspin(sel) {
-	despin(sel);
-	var d = mknod('div');
-	d.className = 'dumb_loader_thing';
-	d.innerHTML = '🌲';
-	var tgt = QS(sel);
-	tgt.insertBefore(d, tgt.childNodes[0]);
+	clearTimeout(enspin_timer);
+	enspin_timer = setTimeout(function () {
+		despin(sel);
+		var d = mknod('div');
+		d.className = 'dumb_loader_thing';
+		d.innerHTML = '🌲';
+		var tgt = QS(sel);
+		tgt.insertBefore(d, tgt.childNodes[0]);
+	}, 50);
 }
 
 
 function despin(sel) {
+	clearTimeout(enspin_timer);
 	var o = QSA(sel + '>.dumb_loader_thing');
 	for (var a = o.length - 1; a >= 0; a--)
 		o[a].parentNode.removeChild(o[a]);
@@ -5436,7 +5441,7 @@ var settheme = (function () {
 		L = Ls[this.textContent];
 		swrite("lang", this.textContent);
 		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();
diff --git a/copyparty/web/ui.css b/copyparty/web/ui.css
index 042d4dc7..ee132bed 100644
--- a/copyparty/web/ui.css
+++ b/copyparty/web/ui.css
@@ -281,15 +281,19 @@ html.y #tth {
 	max-width: 24em;
 }
 *:focus,
+*:focus+label,
 #pctl *:focus,
 .btn:focus {
 	box-shadow: 0 .1em .2em #fc0 inset;
+	outline: #fc0 solid .1em;
 	border-radius: .2em;
 }
 html.y *:focus,
+html.y *:focus+label,
 html.y #pctl *:focus,
 html.y .btn:focus {
 	box-shadow: 0 .1em .2em #037 inset;
+	outline: #037 solid .1em;
 }
 input[type="text"]:focus,
 input:not([type]):focus,
diff --git a/copyparty/web/up2k.js b/copyparty/web/up2k.js
index 055d6482..15297286 100644
--- a/copyparty/web/up2k.js
+++ b/copyparty/web/up2k.js
@@ -1067,7 +1067,7 @@ function up2k_init(subtle) {
     function more_one_file() {
         fdom_ctr++;
         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('file' + fdom_ctr).onchange = gotfile;
     }