account button in top right

copyparty/web/browser.css

@@ -644,10 +644,12 @@ a, #blogout, #files tbody div a:last-child {
 	padding: .2em;
 	text-decoration: none;
 }
+#goh,
 #blogout {
 	margin: -.2em;
 	text-shadow: 1px 1px 0px var(--bg-max);
 }
+#goh:hover,
 #blogout:hover,
 a:hover {
 	color: var(--a-hil);
@@ -885,6 +887,7 @@ html.y #path a:hover {
 	left: 2em;
 	padding-right: .5em;
 }
+#acessType,
 #acc_info,
 #srv_info span,
 #srv_info2 span {
@@ -1516,7 +1519,6 @@ html.a #up_quick .btn.on {
 }
 #ops a {
 	color: var(--a);
-	text-shadow: 1px 1px 1px var(--op-a-sh);
 	font-size: 1.5em;
 	padding: .25em .4em;
 	margin: 0;
@@ -1571,12 +1573,23 @@ html.y #ops svg circle {
 	white-space: nowrap;
 	display: flex;
 	max-height: 2.5em;
-	border-radius: 0 0 0 .3em !important;
+	border-radius: 0 0 0 .3em;
 }
 #noie {
 	color: #b60;
 	margin: 0 0 0 .5em;
 }
+#acc_pfp {
+	aspect-ratio: 1 / 1;
+	width: 1.25em;
+	background: var(--a-dark);
+	color: var(--bg);
+	border: var(--btn-bg) solid 1px;
+	border-radius: .3em;  
+	justify-content: center;
+  	display: flex;
+	text-shadow: none;
+}
 .opbox {
 	padding: .5em;
 	border-radius: .3em;
@@ -3216,13 +3229,6 @@ html.e #pctl,
 html.b #pctl {
 	margin-left: .5em;
 }
-html.d #ops,
-html.c #ops,
-html.a #ops {
-	margin: 0 0 0 1.5em;
-	border-radius: .3em;
-	border-width: 1px 0;
-}
 html.dz .opview input.i {
 	width: calc(100% - 18em);
 }
@@ -3487,8 +3493,8 @@ html.d #treepar {
 		margin: .2em;
 	}
 	#ops {
-		margin: .5em !important;
-		border-radius: .3em !important;
+		margin: .5em;
+		border-radius: .3em;
 	}
 	#tree {
 		z-index: 4;
@@ -4544,19 +4550,22 @@ html.e #detree {
 }
 #acc_button p{
 	margin: 0;
-	align-self: center;
 }
 #acc_button {
 	margin: 0;
 	cursor: pointer;
 	display: flex;
 }
-#acc_settings{
-	margin: 0 0 0 .3em;
-	font-size: large;
-	padding: .3em;
+#op_acc {
+	font-size: medium;
+	margin-top: .3em;
+	text-align: right;
+}
+#ops #goh {
+	font-size: medium;
 }
 
+.popup.act,
 .popup.show {
 	visibility: visible;
 	-webkit-animation: fadeIn 1s;
@@ -4577,38 +4586,31 @@ html.e #detree {
 	z-index: 6;
 	bottom: 2.5em;
 }
-.under::after {
-	display: none;
-}
 .under {
 	inset: calc(100% + .2em) 0 auto 0;
   	text-align: left;
 	width: auto;
 }
+#opa_acc,
 #srchfolder_div {
 	position: relative;
 	display: flex;
 	height: max-content;
 	margin-left: .3em;
 }
+#op_acc {
+	left: auto;
+}
+#acessType {
+	font-size: small;
+}
+
 #srchfolder_div:focus-within .popup{
 	visibility: visible;
 	-webkit-animation: fadeIn 1s;
 	animation: fadeIn 1s;
 }
 
-/* Popup arrow */
-.popup::after {
-	content: "";
-	position: absolute;
-	top: 100%;
-	left: 50%;
-	margin-left: -5px;
-	border-width: 5px;
-	border-style: solid;
-	border-color: var(--bg-u5) transparent transparent transparent;
-}
-
 .overlay_plus{
 	position: absolute;
 	margin: -.5em 0 0 .8em;

copyparty/web/browser.html

@@ -147,7 +147,10 @@
 		<div id="spaceUsed_bar" style="width: {{ space_used_percent }}%;"></div>
 	</div>
 
-	<span id="acc_popup" class="popup">
+	<span id="op_acc" class="opview popup under">
+		<div id="acc_button" class="tgl btn on">
+			<p id="acc_name"></p>
+		</div>
 		<div id="acessType" style="display: block;"></div>
 		<a href="{{ r }}/?h" id="goh" style="display: block;">control-panel</a>
 		<form id="flogout" style="display: block;" method="post" enctype="multipart/form-data">
@@ -155,12 +158,6 @@
 			<input id="blogout" type="submit" />
 		</form>
 	</span>
-	<div style="display: grid; grid-template-columns: auto max-content;">
-		<div id="acc_button" class="tgl btn on">
-			<p id="acc_name"></p>
-		</div>
-		<a id="acc_settings" href="#v=cfg" class="tgl btn on" data-dest="cfg">⚙️</a>
-	</div>
 </div>
 	
 

copyparty/web/browser.js

@@ -761,6 +761,7 @@ ebi('ops').innerHTML = (
 	'<a href="#" id="opa_md" data-perm="read write" data-dest="new_md" tt="' + L.ot_md + '"><div><p class="overlay_plus">+</p>📝</div></a>' +
 	'<a href="#" id="opa_msg" data-dest="msg" tt="' + L.ot_msg + '">📟</a>' +
 	'<a href="#" id="opa_cfg" data-dest="cfg" tt="' + L.ot_cfg + '">⚙️</a>' +
+	'<a href="#" id="opa_acc" data-dest="acc" tt=""><div id="acc_pfp">👤</div></a>' +
 	(IE ? '<span id="noie">' + L.ot_noie + '</span>' : '') +
 	'<div id="opdesc"></div>'
 );
@@ -1333,12 +1334,6 @@ ebi('rcm').innerHTML = (
 			ops[a].href = '#v=' + v;
 	}
 
-	// settings
-	ebi('acc_settings').onclick = ebi('opa_cfg').onclick = function(e){
-		modaltoggle('cfg')
-		e.stopPropagation();
-	};
-
 	// new file
 	ebi('opa_md').onclick = function(){
 		mktemp();
@@ -1349,6 +1344,10 @@ ebi('rcm').innerHTML = (
 		mktemp(true);
 	}
 
+	ebi('acc_pfp').before(ebi('op_acc'));
+	ebi('op_acc').onclick = function (e){
+		e.stopPropagation();
+	};
 })();
 
 function modaltoggle(dest, show = 't'){
@@ -8426,14 +8425,15 @@ function apply_perms(res) {
 
 	if(acct != '*'){
 		ebi('acc_name').innerHTML = acct;
+		ebi('acc_pfp').innerHTML = acct.substring(0, 1);
 		ebi('acessType').innerHTML = '<span' + aclass + axs + L.access + '</span>';
 		ebi('blogout').value = L.logout;
-		ebi('acc_button').onclick = function(){
-			ebi('acc_popup').classList.toggle('show');
-		}
+		ebi('acc_button').onclick = function(){};
 	}
 	else{
+		ebi('blogout').style.display = 'none';
 		ebi('acc_name').innerHTML = L.login;
+		ebi('acc_pfp').innerHTML = '👤';
 		ebi('acc_button').onclick = goHome;
 	}