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

This commit is contained in:
sigoden 2023-11-03 14:55:07 +08:00 committed by GitHub
parent 53c9bc8bea
commit 6766e0d437
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 4 deletions

View file

@ -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;
}

View file

@ -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">

View file

@ -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 = "";
}
/**