ItsSkaiya/WaifuBoard
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

better titlebar ui

Browse Source
This commit is contained in:
lenafx
2026-01-10 20:19:08 +01:00
parent e6c3320a7c
commit 91d19049ef
3 changed files with 84 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
desktop/src/scripts/auth-guard.js
View File

@@ -7,6 +7,7 @@
async function loadMeUI() {
const token = localStorage.getItem("token")
if (!token) return
try {
@@ -31,20 +32,15 @@ async function loadMeUI() {
if (dropdownAvatar) dropdownAvatar.src = avatarUrl
}
const titlebarUserBox = document.getElementById("titlebar-user-box")
const titlebarUsername = document.getElementById("titlebar-username")
const titlebarAvatar = document.getElementById("titlebar-avatar")
const titlebarDropdownAvatar = document.getElementById("titlebar-dropdown-avatar")
const titlebarDropdownUsername = document.getElementById("titlebar-dropdown-username")
const titlebarActions = document.getElementById("titlebar-actions")
if (titlebarUserBox && titlebarUsername && titlebarAvatar) {
titlebarUserBox.style.display = "flex"
titlebarUsername.textContent = user.username
if (titlebarAvatar) {
titlebarAvatar.src = avatarUrl
}
if (titlebarDropdownAvatar) titlebarDropdownAvatar.src = avatarUrl
if (titlebarDropdownUsername) titlebarDropdownUsername.textContent = user.username
if (titlebarActions) {
titlebarActions.style.display = "flex"
}
setupDropdown()

39
desktop/views/components/titlebar.html
View File

@@ -9,37 +9,20 @@
<div class="title-drag-area"></div>
<div class="title-right">
<div id="titlebar-actions" style="display: none; height: 100%; align-items: center;">
<div class="user-box" id="titlebar-user-box" style="display: none;">
<img id="titlebar-avatar" src="/public/assets/waifuboards.ico" alt="User" />
<span id="titlebar-username">Guest</span>
<button class="title-action-btn" id="titlebar-settings" title="Settings">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="3"/>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.65 1.65 0 0 0 15 19.4a1.65 1.65 0 0 0-1 .6 1.65 1.65 0 0 0-.33 1.82V22a2 2 0 1 1-4 0v-.18a1.65 1.65 0 0 0-.33-1.82 1.65 1.65 0 0 0-1-.6 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-.6-1 1.65 1.65 0 0 0-1.82-.33H2a2 2 0 1 1 0-4h.18a1.65 1.65 0 0 0 1.82-.33 1.65 1.65 0 0 0 .6-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6c.37 0 .72-.14 1-.6A1.65 1.65 0 0 0 10.33 2.18V2a2 2 0 1 1 4 0v.18a1.65 1.65 0 0 0 .33 1.82c.28.46.63.6 1 .6a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c0 .37.14.72.6 1 .46.28.6.63.6 1z"/>
</svg>
</button>
<div class="nav-dropdown" id="titlebar-dropdown">
<div class="dropdown-header">
<img id="titlebar-dropdown-avatar" src="/public/assets/waifuboards.ico" class="dropdown-avatar">
<div class="dropdown-user-info">
<div class="dropdown-username" id="titlebar-dropdown-username">Guest</div>
<div class="dropdown-status">Online</div>
</div>
</div>
<a href="/profile" class="title-avatar-link" id="titlebar-profile-link" title="Profile">
<img id="titlebar-avatar" src="/public/assets/waifuboards.ico" alt="User" />
</a>
<a href="/profile" class="dropdown-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
<span>Profile</span>
</a>
<button class="dropdown-item" id="titlebar-settings">
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.65 1.65 0 0 0 15 19.4a1.65 1.65 0 0 0-1 .6 1.65 1.65 0 0 0-.33 1.82V22a2 2 0 1 1-4 0v-.18a1.65 1.65 0 0 0-.33-1.82 1.65 1.65 0 0 0-1-.6 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-.6-1 1.65 1.65 0 0 0-1.82-.33H2a2 2 0 1 1 0-4h.18a1.65 1.65 0 0 0 1.82-.33 1.65 1.65 0 0 0 .6-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6c.37 0 .72-.14 1-.6A1.65 1.65 0 0 0 10.33 2.18V2a2 2 0 1 1 4 0v.18a1.65 1.65 0 0 0 .33 1.82c.28.46.63.6 1 .6a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c0 .37.14.72.6 1 .46.28.6.63.6 1z"/></svg>
<span>Settings</span>
</button>
<div class="dropdown-divider"></div>
<button class="dropdown-item logout-item" id="titlebar-logout">
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
<span>Logout</span>
</button>
</div>
<div class="title-sep"></div>
</div>
<div class="window-controls">

67
desktop/views/css/components/titlebar.css
View File

@@ -381,4 +381,71 @@ html.electron::-webkit-scrollbar-track {
height: 100%;
object-fit: contain;
max-width: none;
}
/* Nuevo estilo para la parte derecha */
.title-right {
display: flex;
height: 100%;
align-items: center;
-webkit-app-region: no-drag;
gap: 0; /* Quitamos gap general para controlar mejor los botones */
}
/* Botones de acción (Settings, etc) */
.title-action-btn {
width: 40px; /* Un poco más estrechos que los controles de ventana */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: #a1a1aa;
cursor: pointer;
transition: all 0.2s;
outline: none;
}
.title-action-btn:hover {
background: rgba(255, 255, 255, 0.08);
color: white;
}
.title-action-btn svg {
width: 16px;
height: 16px;
}
/* Contenedor del Avatar */
.title-avatar-link {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 10px; /* Espacio a los lados */
cursor: pointer;
transition: background 0.2s;
/* Quitamos el borde por defecto de los links */
text-decoration: none;
}
.title-avatar-link:hover {
background: rgba(255, 255, 255, 0.08);
}
.title-avatar-link img {
width: 22px;
height: 22px;
border-radius: 50%;
object-fit: cover;
border: 1px solid rgba(139, 92, 246, 0.4); /* Borde morado sutil */
}
/* Separador visual antes de los controles de ventana */
.title-sep {
width: 1px;
height: 16px;
background: rgba(255, 255, 255, 0.1);
margin: 0 4px;
}