merge up2k and bup into one panel

contrib/plugins/minimal-up2k.html

@@ -18,7 +18,7 @@
 
     #ops, #tree, #path, #wfp,  /* main tabs and navigators (tree/breadcrumbs) */
 
-    #u2conf tr:first-child>td[rowspan]:not(#u2btn_cw),  /* most of the config options */
+    #u2conf tr:first-child>td[rowspan],  /* most of the config options */
 
     #srch_dz, #srch_zd,  /* the filesearch dropzone */
 

contrib/plugins/minimal-up2k.js

@@ -39,17 +39,6 @@ var u2min = `
   display: none !important;
 }
 #u2conf {margin:5em auto 0 auto !important}
-#u2conf.w {width:50em}
-#u2conf.w .c,
-#u2conf.w #u2btn_cw {text-align:left}
-#u2conf.w #u2btn_cw {width:70%}
-#u2etaw {margin:3em auto}
-#u2etaw.w {
-  text-align: center;
-  margin: -3.5em auto 5em auto;
-}
-#u2etaw.w #u2etas {margin-right:-37em}
-#u2etaw.w #u2etas.o {margin-top:-2.2em}
 #u2etas {
   background: none !important;
   border: none !important;

copyparty/web/browser.css

@@ -68,10 +68,10 @@
 	--u2-tab-bg: linear-gradient(to bottom, var(--bg), var(--bg-u1));
 	--u2-tab-b1: rgba(128,128,128,0.8);
 	--u2-tab-1-fg: var(--a-hil);
-	--u2-tab-1-bg: linear-gradient(to bottom, #353, var(--bg) 80%);
+	--u2-tab-1-bg: var(--bg);
-	--u2-tab-1-b1: #7c5;
+	--u2-tab-1-b1: #999;
-	--u2-tab-1-b2: #583;
+	--u2-tab-1-b2: #999;
-	--u2-tab-1-sh: #280;
+	--u2-tab-1-sh: transparent;
 	--u2-b-fg: #fff;
 	--u2-b1-bg: #c83;
 	--u2-b2-bg: #d80;
@@ -1522,17 +1522,19 @@ html.y #ops svg circle {
 }
 .opbox {
 	padding: .5em;
-	border-radius: 0 .3em .3em 0;
+	border-radius: .3em;
-	border-width: 1px 1px 1px 0;
+	border-width: 1px;
 	max-width: 41em;
-	max-width: min(41em, calc(100% - 2.6em));
 }
 .opbox input {
 	position: relative;
 	margin: .2em;
 }
-#op_cfg input[type=text] {
+#op_bup {
-	top: -.3em;
+	margin-bottom: 1em;
+}
+#op_cfg {
+	display: none;
 }
 #pathBar input[type=text],
 .opview select,
@@ -1969,10 +1971,6 @@ html.y #tree.nowrap .ntree a+a:hover {
 	margin: 0 .4em;
 	padding: 0;
 }
-#op_cfg>div>div>span {
-	display: inline-block;
-	padding: .2em .4em;
-}
 .opbox h3 {
 	margin: .8em 0 0 .6em;
 	padding: 0;
@@ -2570,8 +2568,7 @@ html.y #bbox-overlay figcaption a {
 	display: flex;
 	flex-direction: column;
 	overflow-y: auto;
-	padding: .5em;
+	padding: 0 .5em 5em .5em;
-	padding-top: 0;
 }
 .divider{
 	background: var(--a);
@@ -2739,6 +2736,11 @@ html.y #bbox-overlay figcaption a {
 	background: var(--bg-u5);
 	border: 0px solid var(--bg-u5);
 }
+#up_status_h {
+	margin: -1.8em .5em 0 .5em;
+	position: absolute;
+	z-index: 1;
+}
 #u2err.err {
 	color: var(--a-dark);
 	padding: .5em;
@@ -2753,11 +2755,22 @@ html.y #bbox-overlay figcaption a {
 	border: .15em dashed var(--u2-btn-b1);
 	border-radius: .4em;
 	text-align: center;
-	font-size: 1.5em;
+	font-size: 1.3em;
-	margin: .5em auto;
+	padding: 1em 2em;
-	padding: .8em 0;
 	cursor: pointer;
 }
+#u2btn sup {
+	font-size: 1.1em;
+}
+#u2btn:hover {
+	background: linear-gradient(var(--a) 0%, var(--a) 20%, transparent 99%);
+	border-color: var(--bg);
+	border-style: solid;
+	color: var(--fg-max);
+}
+#u2c3t {
+	margin: 1em 0;
+}
 #op_up2k.srch #u2btn {
 	border-color: var(--u2-sbtn-b1);
 }
@@ -2769,11 +2782,9 @@ html.y #bbox-overlay figcaption a {
 	max-width: 12em;
 	display: inline-block;
 }
-#u2conf #u2btn_cw {
-	text-align: right;
-}
 #u2bm {
-	display: block;
+	display: flex;
+	justify-content: center;
 }
 #u2bm sup {
 	font-weight: bold;
@@ -2821,11 +2832,6 @@ html.y #bbox-overlay figcaption a {
 #u2tab td:nth-child(3) {
 	width: 40%;
 }
-#u2tab.up.ok td:nth-child(3),
-#u2tab.up.bz td:nth-child(3),
-#u2tab.up.q  td:nth-child(3) {
-	width: 18em;
-}
 @media (max-width: 65em) {
 	#u2tab {
 		font-size: .9em;
@@ -2852,7 +2858,6 @@ html.y #bbox-overlay figcaption a {
 	width: 17em;
 	cursor: pointer;
 	text-align: center;
-	white-space: nowrap;
 	display: inline-block;
 	font-family: 'scp', monospace, monospace;
 	font-family: var(--font-mono), 'scp', monospace, monospace;
@@ -2868,9 +2873,8 @@ html.y #bbox-overlay figcaption a {
 	display: unset;
 }
 #u2etaw {
-	width: 18em;
+	display: flex;
-	font-size: .94em;
+	justify-content: center;
-	margin: 1.8em auto .5em auto;
 }
 #u2etas.o #u2etaw {
 	width: 21em;
@@ -2917,9 +2921,17 @@ html.y #bbox-overlay figcaption a {
 	text-align: center;
 	min-width: 1.3em;
 }
-#u2conf {
+#u2conft {
-	margin: 1em 1em;
+	width: max-content;
-	width: 30em;
+}
+#u2conf details[open] {
+	border-bottom: none;
+	border-radius: .3em .3em 0 0;
+}
+#u2conf .setting {
+	margin: 0;
+	border-left: none;
+	border-right: none;
 }
 #u2conf .c,
 #u2conf .c * {
@@ -2929,6 +2941,9 @@ html.y #bbox-overlay figcaption a {
 	padding: 0;
 	border: none;
 }
+#u2conf .c {
+	margin: .3em;
+}
 #u2conf .txtbox {
 	width: 3em;
 	color: var(--fg-max);
@@ -2971,9 +2986,8 @@ html.b #u2conf a.b:hover {
 	border-radius: .25em;
 }
 #u2conf input[type="checkbox"] {
-	position: relative;
+	position: absolute;
 	opacity: .02;
-	top: 2em;
 }
 #u2conf input[type="checkbox"]+label,
 #u2conf input[type="checkbox"]:checked+label {
@@ -3102,27 +3116,22 @@ html.b #u2conf a.b:hover {
 	font-size: 1.1em;
 	line-height: 0;
 }
-#up_list {
+details {
-	padding-bottom: 2em;
-}
-#up_list details {
 	border: var(--bg-u3) solid 1px;
 	border-radius: .3em;
-	margin: .3em;
+	margin: .3em 0;
 }
-#up_list summary {
+summary {
 	cursor: pointer;
 	background: var(--bg-u1);
 	color: var(--a);
 	padding: .3em;
 	border-radius: .3em;
+	font-size: large;
 }
-#up_list summary:hover {
+summary:hover {
 	background: var(--bg-u3);
 }
-#up_list .sub {
-	margin: .3em;
-}
 
 
 
@@ -3151,10 +3160,6 @@ html.a #ops {
 	border-radius: .3em;
 	border-width: 1px 0;
 }
-html.c .opbox,
-html.a .opbox {
-	margin: 1.5em 0 0 0;
-}
 html.dz .opview input.i {
 	width: calc(100% - 18em);
 }
@@ -3198,7 +3203,7 @@ html.a .ghead {
 	border: 1px solid var(--bg-u3);
 	box-shadow: 0 0 .3em var(--bg-d3);
 }
-html.c #u2btn,
+/* html.c #u2btn,
 html.a #u2btn {
 	color: #eee;
 	background: var(--bg-u5);
@@ -3207,19 +3212,19 @@ html.a #u2btn {
 	background: linear-gradient(to bottom, #367 0%, #489 50%, #38788a 51%, #367 100%);
 	box-shadow: .4em .4em 0 var(--bg-d3);
 	border: 1px solid #222;
-}
+} */
 html.ay #u2btn {
 	box-shadow: .4em .4em 0 #ccc;
 }
 html.dz #u2btn {
 	letter-spacing: -.033em;
 }
-html.c #op_up2k.srch #u2btn,
+/* html.c #op_up2k.srch #u2btn,
 html.a #op_up2k.srch #u2btn {
 	background: linear-gradient(to bottom, #ca3 0%, #fd8 50%, #fc6 51%, #b92 100%);
 	text-shadow: 1px 1px 1px #fc6;
 	color: #333;
-}
+} */
 html.c #u2conf #u2btn,
 html.a #u2conf #u2btn {
 	padding: .6em 0;
@@ -3463,6 +3468,13 @@ html.d #treepar {
 	.divider {
 		display: none;
 	}
+	#up_status_h {
+		margin: .5em .5em 0 .5em;
+		position: inherit;
+	}
+	#u2btn {
+		padding: 1em .3em;
+	}
 	#pctl {
 		padding: .2em .5em .5em .5em;
 	}
@@ -3482,16 +3494,6 @@ html.d #treepar {
 		pointer-events: all;
 	}
 }
-@media (max-width: 32em) {
-	#u2conf {
-		font-size: .9em;
-	}
-}
-@media (max-width: 28em) {
-	#u2conf {
-		font-size: .8em;
-	}
-}
 @media (min-width: 70em) {
 	html.d #barpos,
 	html.b #barpos,

copyparty/web/browser.html

@@ -36,7 +36,6 @@
 	<div id="op_player" class="opview opbox opwide"></div>
 
 	<div id="op_bup" class="opview opbox {% if not ls0 %}act{% endif %}">
-		<div id="u2err"></div>
 		<form method="post" enctype="multipart/form-data" accept-charset="utf-8" action="{{ url_suf }}">
 			<input type="hidden" name="act" value="bput" />
 			<input type="file" name="f" multiple /><br />

copyparty/web/browser.js

@@ -894,40 +894,73 @@ ebi('widget').innerHTML = (
 ebi('op_up2k').innerHTML = (
 	'<form id="u2form" method="post" enctype="multipart/form-data" onsubmit="return false;"></form>\n' +
 
-	'<table id="u2conf">\n' +
+	'<div id="u2conf" tt="">' +
-	'	<tr>\n' +
+	'<details><summary>options</summary>' +
-	'		<td class="c" data-perm="read"><br />' + L.ul_par + '</td>\n' +
+
-	'		<td class="c" rowspan="2">\n' +
+	'	<div class="setting">' +
+	'		<table id="u2conft">\n' +
+	'			<tr>\n' +
+	'				<td class="c" data-perm="read">' + L.ul_par + '</td>\n' +
+	'			</tr>\n' +
+	'			<tr>\n' +
+	'				<td class="c" data-perm="read">\n' +
+	'					<a href="#" class="b" id="nthread_sub">&ndash;</a><input\n' +
+	'						class="txtbox" id="nthread" value=""/><a\n' +
+	'						href="#" class="b" id="nthread_add">+</a>&nbsp;\n' +
+	'				</td>\n' +
+	'			</tr>\n' +
+	'		</table>\n' +
+	'		<p class="s_desc">' + tt.parse(L.ut_par ) + '</p>\n' +
+	'	</div>\n' +
+
+	'	<div class="setting">' +
+	'		<div class="c">\n' +
 	'			<input type="checkbox" id="multitask" />\n' +
-	'			<label for="multitask" tt="' + L.ut_mt + '">🏃</label>\n' +
+	'			<label for="multitask">🏃</label>\n' +
-	'		</td>\n' +
+	'		</div>\n' +
-	'		<td class="c" rowspan="2">\n' +
+	'		<p class="s_desc">' + tt.parse(L.ut_mt ) + '</p>\n' +
+	'	</div>\n' +
+
+	'	<div class="setting">' +
+	'		<div class="c">\n' +
 	'			<input type="checkbox" id="potato" />\n' +
-	'			<label for="potato" tt="' + L.ut_pot + '">🥔</label>\n' +
+	'			<label for="potato">🥔</label>\n' +
-	'		</td>\n' +
+	'		</div>\n' +
-	'		<td class="c" rowspan="2">\n' +
+	'		<p class="s_desc">' + tt.parse(L.ut_pot ) + '</p>\n' +
+	'	</div>\n' +
+
+	'	<div class="setting">' +
+	'		<div class="c">\n' +
 	'			<input type="checkbox" id="u2rand" />\n' +
-	'			<label for="u2rand" tt="' + L.ut_rand + '">🎲</label>\n' +
+	'			<label for="u2rand">🎲</label>\n' +
-	'		</td>\n' +
+	'		</div>\n' +
-	'		<td class="c" rowspan="2">\n' +
+	'		<p class="s_desc">' + tt.parse(L.ut_rand ) + '</p>\n' +
+	'	</div>\n' +
+
+	'	<div class="setting">' +
+	'		<div class="c">\n' +
 	'			<input type="checkbox" id="u2ow" />\n' +
-	'			<label for="u2ow" tt="' + L.ut_ow + '">?</a>\n' +
+	'			<label for="u2ow">?</a>\n' +
-	'		</td>\n' +
+	'		</div>\n' +
-	'		<td class="c" data-perm="read" data-dep="idx" rowspan="2">\n' +
+	'		<p class="s_desc">' + tt.parse(L.ut_ow ) + '</p>\n' +
+	'	</div>\n' +
+
+	'	<div class="setting">' +
+	'		<div class="c" data-perm="read" data-dep="idx">\n' +
 	'			<input type="checkbox" id="fsearch" />\n' +
-	'			<label for="fsearch" tt="' + L.ut_srch + '">🔎</label>\n' +
+	'			<label for="fsearch">🔎</label>\n' +
-	'		</td>\n' +
+	'		</div>\n' +
-	'		<td data-perm="read" rowspan="2" id="u2btn_cw"></td>\n' +
+	'		<p class="s_desc">' + tt.parse(L.ut_srch ) + '</p>\n' +
-	'		<td data-perm="read" rowspan="2" id="u2c3w"></td>\n' +
+	'	</div>\n' +
-	'	</tr>\n' +
+
-	'	<tr>\n' +
+	'	<div class="setting">' +
-	'		<td class="c" data-perm="read">\n' +
+	'		<a id="up_moreopts" class="btn" href="#h_upload">↗️ more options</a>\n' +
-	'			<a href="#" class="b" id="nthread_sub">&ndash;</a><input\n' +
+	'	</div>\n' +
-	'				class="txtbox" id="nthread" value="" tt="' + L.ut_par + '"/><a\n' +
+
-	'				href="#" class="b" id="nthread_add">+</a><br />&nbsp;\n' +
+	'	<div data-perm="read" rowspan="2" id="u2c3w"></div>\n' +
-	'		</td>\n' +
+
-	'	</tr>\n' +
+	'</details>' +
-	'</table>\n' +
+	'</div>' +
 
 	'<div id="u2notbtn"></div>\n' +
 
@@ -939,16 +972,23 @@ ebi('op_up2k').innerHTML = (
 
 	'<div id="u2c3t">\n' +
 
-	'<div id="u2etaw"><div id="u2etas"><div class="o">\n' +
+	'	<div id="u2etaw">' +
+	'		<div id="u2etas">' +
+	'			<div class="o">\n' +
 	L.ul_hash + ': <span id="u2etah" tt="' + L.ut_etah + '">(' + L.ul_idle1 + ')</span><br />\n' +
 	L.ul_send + ': <span id="u2etau" tt="' + L.ut_etau + '">(' + L.ul_idle1 + ')</span><br />\n' +
-	'	</div><span class="o">' +
+	'			</div><span class="o">' +
 	L.ul_done + ': </span><span id="u2etat" tt="' + L.ut_etat + '">(' + L.ul_idle1 + ')</span>\n' +
-	'</div>');
+	'		</div>' +
+	'	</div>' +
+	'</div>' +
+
+	'<details id="bup_tgl" href="#v=bup" data-dest="bup" data-perm="write"><summary>basic uploader</summary></details>'
+);
 
 
 ebi('up_info').innerHTML = (
-	'<h3>Status</h3>' +
+	'<h3 id="up_status_h">Status</h3>' +
 
 	'</div>\n<div id="u2cards">\n' +
 	'	<a href="#" act="ok" tt="' + L.uct_ok + '">ok <span>0</span></a><a\n' +
@@ -970,13 +1010,6 @@ ebi('up_info').innerHTML = (
 	'	<tbody></tbody>\n' +
 	'</table><div id="u2mu"></div></div>\n' +
 
-	'<div id="up_list">' +
-	'	<div id="up_status"></div>' +
-	'	<details open><summary>Uploading</summary><table id="up_loading" class="sub"></table></details>' +
-	'	<details open><summary>Failed</summary><table id="up_failed" class="sub"></table></details>' +
-	'	<details open><summary>Done</summary><table id="up_done" class="sub"></table></details>' +
-	'</div>' +
-
 	'<p id="u2flagblock"><b>' + L.ul_flagblk + '</p>\n' +
 	'<div id="u2life"></div>' +
 	'<div id="u2foot"></div>'
@@ -993,6 +1026,21 @@ var x = ebi('bbsw');
 x.parentNode.insertBefore(mknod('div', null,
 	'<input type="checkbox" id="uput" name="uput"><label for="uput">' + L.u_uput + '</label>'), x);
 
+var bup = ebi('op_bup');
+ebi('bup_tgl').after(bup);
+ebi('bup_tgl').onclick = function() {
+	var open = !clgot(bup, 'act');
+	if(open)
+		modaltoggle('bup', true);
+	else
+		modaltoggle('up2k', true);
+	this.open = !open;
+};
+
+ebi('up_moreopts').onclick = function(){
+	modaltoggle('cfg', true);
+	location.hash = ebi('up_moreopts').href;
+};
 
 (function () {
 	var o = mknod('div');
@@ -1010,7 +1058,7 @@ x.parentNode.insertBefore(mknod('div', null,
 // config panel
 
 var musicSettings = (
-	'<div><h3>🎵 ' + L.ot_mp + '</h3><div>' +
+	'<div><h3 id="h_mpopts">🎵 ' + L.ot_mp + '</h3><div>' +
 	'<a href="#" class="tgl btn" id="au_loop" tt="' + L.mt_loop + '">🔂</a>' +
 	'<a href="#" class="tgl btn" id="au_one" tt="' + L.mt_one + '</a>' +
 	'<a href="#" class="tgl btn" id="au_aplay" tt="' + L.mt_aplay + '</a>' +
@@ -1028,23 +1076,23 @@ var musicSettings = (
 	'<a href="#" class="tgl btn" id="au_compact" tt="' + L.mt_compact + '</a>' +
 	'</div></div>' +
 
-	'<div><h3>▶️ ' + L.ml_btns + '</h3><div>' +
+	'<div><h3 id="h_cmds">▶️ ' + L.ml_btns + '</h3><div>' +
 	'<a href="#" class="btn" id="au_uncache" tt="' + L.mt_uncache + '</a>' +
 	'</div></div>' +
 
-	'<div><h3>📁 ' + L.ml_pmode + '</h3><div id="pb_mode">' +
+	'<div><h3 id="h_pbmode">📁 ' + L.ml_pmode + '</h3><div id="pb_mode">' +
 	'<a href="#" class="tgl btn" m="loop" tt="' + L.mt_mloop + '">🔁</a>' +
 	'<a href="#" class="tgl btn" m="next" tt="' + L.mt_mnext + '</a>' +
 	'<a href="#" class="tgl btn" m="stop" tt="' + L.mt_mstop + '</a>' +
 	'</div></div>' +
 
 	(have_acode ? (
-		'<div><h3>🏹 ' + L.ml_tcode + '</h3><div>' +
+		'<div><h3 id="h_transfrom">🏹 ' + L.ml_tcode + '</h3><div>' +
 		'<a href="#" id="ac_flac" class="tgl btn" tt="' + L.mt_cflac + '</a>' +
 		'<a href="#" id="ac_aac" class="tgl btn" tt="' + L.mt_caac + '</a>' +
 		'<a href="#" id="ac_oth" class="tgl btn" tt="' + L.mt_coth + '</a>' +
 		'</div></div>' +
-		'<div><h3>🎯 ' + L.ml_tcode2 + '</h3><div>' +
+		'<div><h3 id="h_transto">🎯 ' + L.ml_tcode2 + '</h3><div>' +
 		'<a href="#" id="ac2opus" class="tgl btn" tt="' + L.mt_c2opus + '</a>' +
 		'<a href="#" id="ac2owa" class="tgl btn" tt="' + L.mt_c2owa + '</a>' +
 		'<a href="#" id="ac2caf" class="tgl btn" tt="' + L.mt_c2caf + '</a>' +
@@ -1054,18 +1102,18 @@ var musicSettings = (
 		'</div></div>'
 	) : '') +
 
-	'<div><h3>🕶️ ' + L.ml_tint + '</h3><div>' +
+	'<div><h3 id="h_tint">🕶️ ' + L.ml_tint + '</h3><div>' +
 	'<input type="text" id="pb_tint" value="0" ' + NOAC + ' style="width:2.4em" tt="' + L.mt_tint + '" />' +
 	'</div></div>' +
 
 	'<div><h3 id="h_drc">🐘 ' + L.ml_drc + '</h3><div><div id="audio_drc"></div></div></div>' +
-	'<div><h3>📊 ' + L.ml_eq + '</h3><div><div id="audio_eq"></div></div></div>' +
+	'<div><h3 id="h_eq">📊 ' + L.ml_eq + '</h3><div><div id="audio_eq"></div></div></div>' +
-	'<div><h3>🔇 ' + L.ml_ss + '</h3><div><div id="audio_ss"></div></div></div>' +
+	'<div><h3 id="h_silence">🔇 ' + L.ml_ss + '</h3><div><div id="audio_ss"></div></div></div>' +
 	'');
 
 ebi('op_cfg').innerHTML = (
 	'<div>\n' +
-	'	<h3>✅ ' + L.cl_opts + '</h3>\n' +
+	'	<h3 id="h_general">✅ ' + L.cl_opts + '</h3>\n' +
 	'	<div>\n' +
 	'		<a id="tooltips" class="tgl btn" tt="' + L.ct_ttips + '</a>\n' +
 	'		<a id="griden" class="tgl btn" tt="' + L.wt_grid + '">' + L.ct_grid + '</a>\n' +
@@ -1085,9 +1133,9 @@ ebi('op_cfg').innerHTML = (
 	'		<a id="sbars" class="tgl btn" tt="' + L.ct_sbars + '</a>\n' +
 	'	</div>\n' +
 	'</div>\n' +
-	(!MOBILE ? '<div><h3>🖱️ ' + L.cl_rcm + '</h3><div><a id="rcm_en" class="tgl btn" tt="' + L.cdt_ren + '</a><a id="rcm_db" class="tgl btn" tt="' + L.cdt_rdb + '</a></div></div>' : '') +
+	(!MOBILE ? '<div><h3 id="h_mouse">🖱️ ' + L.cl_rcm + '</h3><div><a id="rcm_en" class="tgl btn" tt="' + L.cdt_ren + '</a><a id="rcm_db" class="tgl btn" tt="' + L.cdt_rdb + '</a></div></div>' : '') +
 	'<div>\n' +
-	'	<h3>🔢 ' + L.cl_hfsz + '</h3>\n' +
+	'	<h3 id="h_filesize">🔢 ' + L.cl_hfsz + '</h3>\n' +
 	'	<div><select id="fszfmt">\n' +
 	'		<option value="0">0 ┃ 1234567</option>\n' +
 	'		<option value="1">1 ┃ 1 234 567</option>\n' +
@@ -1103,19 +1151,19 @@ ebi('op_cfg').innerHTML = (
 	'	</select></div>\n' +
 	'</div>\n' +
 	'<div>\n' +
-	'	<h3>🎨 ' + L.cl_themes + '</h3>\n' +
+	'	<h3 id="h_theme">🎨 ' + L.cl_themes + '</h3>\n' +
 	'	<div><select id="themes"></select></div>\n' +
 	'	</div>\n' +
 	'</div>\n' +
 	'<div>\n' +
-	'	<h3>🌐 ' + L.cl_langs + '</h3>\n' +
+	'	<h3 id="h_language">🌐 ' + L.cl_langs + '</h3>\n' +
 	'	<div><select id="langs"></select></div>\n' +
 	'</div>\n' +
 	(have_zip ? (
-		'<div><h3>⬇️ ' + L.cl_ziptype + '</h3><div><div id="arc_fmt"></div></div></div>\n'
+		'<div><h3 id="h_zip">⬇️ ' + L.cl_ziptype + '</h3><div><div id="arc_fmt"></div></div></div>\n'
 	) : '') +
 	'<div>\n' +
-	'	<h3>🚀 ' + L.cl_uopts + '</h3>\n' +
+	'	<h3 id="h_upload">🚀 ' + L.cl_uopts + '</h3>\n' +
 	'	<div>\n' +
 	'		<a id="ask_up" class="tgl btn" tt="' + L.ut_ask + '</a>\n' +
 	'		<a id="u2ts" class="tgl btn" tt="' + L.ut_u2ts + '</a>\n' +
@@ -1133,7 +1181,7 @@ ebi('op_cfg').innerHTML = (
 	'	</div>\n' +
 	'</div>\n' +
 	'<div>\n' +
-	'	<h3><span id="ico1">🎉</span> ' + L.cl_favico + '</h3>\n' +
+	'	<h3 id="h_favico"><span id="ico1">🎉</span> ' + L.cl_favico + '</h3>\n' +
 	'	<div>\n' +
 	'		<input type="text" id="icot" value="" ' + NOAC + ' style="width:1.3em" tt="' + L.cft_text + '" />' +
 	'		<input type="text" id="icof" value="" ' + NOAC + ' style="width:2em" tt="' + L.cft_fg + '" />' +
@@ -1142,7 +1190,7 @@ ebi('op_cfg').innerHTML = (
 	'	</div>\n' +
 	'</div>\n' +
 	'<div>\n' +
-	'	<h3>📁 ' + L.cl_bigdir + '</h3>\n' +
+	'	<h3 id="h_bigdir">📁 ' + L.cl_bigdir + '</h3>\n' +
 	'	<div>\n' +
 	'		<input type="text" id="bd_lim" value="250" ' + NOAC + ' style="width:4em" tt="' + L.cdt_lim + '" />' +
 	'		<a id="bd_ask" class="tgl btn" tt="' + L.cdt_ask + '">ask</a>\n' +
@@ -1150,15 +1198,15 @@ ebi('op_cfg').innerHTML = (
 	'	</div>\n' +
 	'</div>\n' +
 	'<div>\n' +
-	'	<h3>🔃 ' + L.cl_hsort + '</h3>\n' +
+	'	<h3 id="h_sort">🔃 ' + L.cl_hsort + '</h3>\n' +
 	'	<div>\n' +
 	'		<input type="text" id="hsortn" value="" ' + NOAC + ' style="width:3em" tt="' + L.cdt_hsort + '" />' +
 	'		</td>\n' +
 	'	</div>\n' +
 	'</div>\n' +
 	musicSettings +
-	'<div><h3>🎼 ' + L.cl_keytype + '</h3><div><select id="key_notation"></select></div></div>\n' +
+	'<div><h3 id="h_keytype">🎼 ' + L.cl_keytype + '</h3><div><select id="key_notation"></select></div></div>\n' +
-	'<div><h3>👁️ ' + L.cl_hiddenc + ' &nbsp;</h3><div>' + 
+	'<div><h3 id="h_hidden">👁️ ' + L.cl_hiddenc + ' &nbsp;</h3><div>' + 
 	(MOBILE ? '<a id="hcolsh">' + L.cl_hidec + '</a> / ' : '') + '<a id="hcolsr">' + L.cl_reset + '</a><div id="hcols"></div></div></div>'
 );
 
@@ -1167,8 +1215,10 @@ ebi('op_cfg').innerHTML = (
 	ebi('s_header').innerHTML = '⚙️ ' + L.ot_cfg;
 	var sections = ebi('op_cfg').children;
 	for (var i = 0; i < sections.length; i++){
-		var sName = sections[i].children[0].innerHTML;
+		var h = sections[i].children[0];
-		var sId = 's_section_' + i;
+		var sName = h.innerHTML;
+		var sId = h.id;
+		h.id = ''
 		var subSettings = sections[i].children[1];
 
 		var section = `<div id="${sId}" class="s_section"><h3>${sName}</h3>`;
@@ -1274,8 +1324,8 @@ ebi('rcm').innerHTML = (
 
 })();
 
-function modaltoggle(dest){
+function modaltoggle(dest, show = 't'){
-	if (QS('#' + dest + '.vis'))
+	if (show == false || show == 't' && QS('#' + dest + '.vis'))
 		dest = '';
 
 	swrite('opmode', dest || null);
@@ -1347,6 +1397,12 @@ function goto(dest) {
 		clmod(page, 'act', 1);
 		clmod(lnk, 'act', 1);
 
+		if(dest == 'bup'){
+			clmod(ebi('up2k'), 'vis', true);
+		}
+		if(dest == 'bup' || dest == 'up2k')
+			ebi('bup_tgl').open = dest == 'bup';
+
 		var fn = window['goto_' + dest];
 		if (fn)
 			fn();

copyparty/web/up2k.js

@@ -597,7 +597,6 @@ function U2pvis(act, btns, uc, st) {
     r.addrow = function (nfile) {
         var tr = r.genrow(nfile);
         ebi('u2tab').tBodies[0].appendChild(tr);
-        ebi('up_loading').appendChild(tr)
     };
 
     btns = QSA(btns + '>a[act]');
@@ -872,7 +871,7 @@ function up2k_init(subtle) {
         return false;
     }
 
-    setmsg(suggest_up2k, 'msg');
+    //setmsg(suggest_up2k, 'msg');
 
     var u2szs = u2sz.split(','),
         u2sz_min = parseInt(u2szs[0]),