fix: ui show user-name next to the user-icon (#278)

diff --git a/assets/index.css b/assets/index.css
index c68f139aa8af30f3b563bd48ad50729c02ba07e6..69b306e2f49c4d8758ddca45075fbe08b2e1100b 100644 (file)
--- a/assets/index.css
+++ b/assets/index.css
@@ -210,7 +210,7 @@ body {
   outline: none;
 }
 
-.toolbox2 {
+.toolbox-right {
   margin-left: auto;
   margin-right: 2em;
 }
@@ -220,6 +220,15 @@ body {
   user-select: none;
 }
 
+.user-btn {
+    display: flex;
+    align-items: center;
+}
+
+.user-name {
+  padding-left: 3px;
+}
+
 .not-editable {
   font-style: italic;
 }

diff --git a/assets/index.html b/assets/index.html
index 17cd8a5dd1eb4d53dcd115b8af5901c56f7d617d..a1b865d160adaaab6d4581eab0b41b9e75e37421 100644 (file)
--- a/assets/index.html
+++ b/assets/index.html
@@ -77,7 +77,7 @@
       <input id="search" name="q" type="text" maxlength="128" autocomplete="off" tabindex="1">
       <input type="submit" hidden />
     </form>
-    <div class="toolbox2">
+    <div class="toolbox-right">
       <div class="login-btn hidden" title="Login for upload/move/delete/edit permissions">
         <svg width="16" height="16" viewBox="0 0 16 16">
           <path fill-rule="evenodd"
@@ -91,6 +91,7 @@
           <path
             d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z" />
         </svg>
+        <span class="user-name"></span>
       </div>
       <div class="save-btn hidden" title="Save file">
         <svg viewBox="0 0 1024 1024" width="24" height="24">

diff --git a/assets/index.js b/assets/index.js
index 7a897b6f8a610cfb7a6a92578de75c8685e0677b..cbc48872077de3cdb06a3ac0425794d0474d9dad 100644 (file)
--- a/assets/index.js
+++ b/assets/index.js
@@ -86,6 +86,10 @@ let $editor;
  * @type Element
  */
 let $userBtn;
+/**
+ * @type Element
+ */
+let $userName;
 
 function ready() {
   $pathsTable = document.querySelector(".paths-table")
@@ -95,6 +99,7 @@ function ready() {
   $emptyFolder = document.querySelector(".empty-folder");
   $editor = document.querySelector(".editor");
   $userBtn = document.querySelector(".user-btn");
+  $userName = document.querySelector(".user-name");
 
   addBreadcrumb(DATA.href, DATA.uri_prefix);
 
@@ -438,7 +443,7 @@ function setupDropzone() {
 function setupAuth() {
   if (DATA.user) {
     $userBtn.classList.remove("hidden");
-    $userBtn.title = DATA.user;
+    $userName.textContent = DATA.user;
   } else {
     const $loginBtn = document.querySelector(".login-btn");
     $loginBtn.classList.remove("hidden");
@@ -669,7 +674,7 @@ async function checkAuth() {
   await assertResOK(res);
   document.querySelector(".login-btn").classList.add("hidden");
   $userBtn.classList.remove("hidden");
-  $userBtn.title = "";
+  $userName.textContent = "";
 }
 
 /**