quick actions / "+" button

copyparty/web/browser.css

@@ -1213,7 +1213,7 @@ html.y #widget.open {
 	white-space: nowrap;
 	top: -1em;
 	right: 0;
-	height: 2em;
+	bottom: 0;
 	font-size: 2em;
 	line-height: 1em;
 	text-align: center;
@@ -1228,6 +1228,52 @@ html.y #widget.open {
 	background: #fff;
 	background: var(--bg-u2);
 }
+#up_quick {
+	position: absolute;
+	bottom: calc(100% + .4em);
+	right: .4em;
+	font-size: xx-large;
+	font-weight: bold;
+	box-shadow: 0 0 .3em var(--bg-d3);
+	transition: all .15s;
+	z-index: 1;
+	border-radius: .3em;
+	text-align: right;
+	background: var(--bg-u2);
+}
+#up_quick_more {
+	display: none;
+	min-width: 4em;
+	font-weight: normal;
+}
+#up_quick_more.vis {
+	display: grid;
+}
+#up_quick_more a:hover {
+	background: var(--btn-h-bg);
+}
+#up_quick_more a {
+	position: static;
+	font-size: large;
+	display: ruby;
+	padding: .5em;
+	cursor: pointer;
+	border-radius: .5em;
+}
+#up_quick .overlay_plus {
+	right: .3em;
+	margin-top: -1.5em;
+}
+#up_quick .btn{
+	box-shadow: none;
+	transition: all .15s;
+	margin: 0;
+	width: max-content;
+	transform: rotate(90deg);
+}
+#up_quick .btn.on {
+	transform: rotate(0);
+}
 #wfs, #wfm, #wzip, #wnp, #wm3u {
 	display: none;
 }
@@ -2837,13 +2883,6 @@ html.y #bbox-overlay figcaption a {
 		font-size: .9em;
 	}
 }
-@media (max-width: 50em) {
-	#u2tab.up.ok td:nth-child(3),
-	#u2tab.up.bz td:nth-child(3),
-	#u2tab.up.q  td:nth-child(3) {
-		width: 16em;
-	}
-}
 #op_up2k.srch td.prog {
 	font-family: sans-serif;
 	font-family: var(--font-main), sans-serif;
@@ -3461,9 +3500,11 @@ html.d #treepar {
 	.modalsplit {
 		display: block;
 		overflow-y: auto;
+		padding-bottom: 5em;
 	}
 	.splitsub {
 		overflow-y: hidden;
+		padding-bottom: .5em;
 	}
 	.divider {
 		display: none;
@@ -3493,6 +3534,9 @@ html.d #treepar {
 		opacity: 1;
 		pointer-events: all;
 	}
+	#up_quick_more a {
+		padding: .6em;
+	}
 }
 @media (min-width: 70em) {
 	html.d #barpos,

copyparty/web/browser.js

@@ -831,6 +831,16 @@ var svg_vol = svg_box + '<path d="M16.0004 9.00009C16.6281 9.83575 17 10.8745 17
 
 ebi('widget').innerHTML = (
 	'<div id="wtoggle">' +
+
+	'<div id="up_quick">' +
+	'	<div id="up_quick_more">' +
+	'		<a id="uq_nd">new folder <span><p class="overlay_plus">+</p>📂</span></a>\n' +
+	'		<a id="uq_nf">new file <span><p class="overlay_plus">+</p>📝</span></a>\n' +
+	'		<a id="uq_up">upload 🚀</a>\n' +
+	'	</div>' +
+	'	<a id="up_quick_btn" class="tgl btn on">+</a>' +
+	'</div>' +
+
 	'<span id="wfs"></span>' +
 	'<span id="wfm"><a' +
 	' href="#" id="fshr" tt="' + L.wt_shr + '">📨<span>share</span></a><a' +
@@ -889,6 +899,20 @@ ebi('widget').innerHTML = (
 	'</div>'
 );
 
+var more = ebi('up_quick_more');
+ebi('up_quick').onclick = function(){
+	var btn = ebi('up_quick_btn');
+	clmod(btn, 'on', 't');
+	var isOff = clgot(btn, 'on'); // button has inverted display logic
+	clmod(more, 'vis', !isOff)
+}
+ebi('uq_nd').onclick = function(){
+	mktemp(true);
+};
+ebi('uq_nf').onclick = function(){
+	mktemp();
+};
+
 
 // up2k ui
 ebi('op_up2k').innerHTML = (

copyparty/web/up2k.js

@@ -1015,7 +1015,7 @@ function up2k_init(subtle) {
 
         modal.confirm(L.u_nav_m, uf, ud, null, L.u_nav_b);
     }
-    ebi('u2btn').onclick = nav;
+    ebi('uq_up').onclick = ebi('u2btn').onclick = nav;
 
     var nenters = 0;
     function ondrag(e) {