MyFavMirrors/vaultwarden
1
0
Fork 0
mirror of https://github.com/dani-garcia/vaultwarden.git synced 2025-11-25 03:56:22 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix: admin theme emoji alignment (#6459)

Browse Source 
* Fix: admin theme dropdown emoji alignment

* Sprites
This commit is contained in:
Joep Duin
2025-11-14 18:46:31 +01:00
committed by GitHub
parent 2ee40d6105
commit b519832086
3 changed files with 62 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/static/scripts/admin.css vendored
View File

@@ -58,3 +58,20 @@ img {
.abbr-badge {
cursor: help;
}
.theme-icon,
.theme-icon-active {
display: inline-flex;
flex: 0 0 1.75em;
justify-content: center;
}
.theme-icon svg,
.theme-icon-active svg {
width: 1.25em;
height: 1.25em;
min-width: 1.25em;
min-height: 1.25em;
display: block;
overflow: visible;
}

13
src/static/scripts/admin.js vendored
View File

@@ -106,7 +106,11 @@ const showActiveTheme = (theme, focus = false) => {
const themeSwitcherText = document.querySelector("#bd-theme-text");
const activeThemeIcon = document.querySelector(".theme-icon-active use");
const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`);
const svgOfActiveBtn = btnToActive.querySelector("span use").textContent;
if (!btnToActive) {
return;
}
const btnIconUse = btnToActive ? btnToActive.querySelector("[data-theme-icon-use]") : null;
const iconHref = btnIconUse ? btnIconUse.getAttribute("href") || btnIconUse.getAttribute("xlink:href") : null;
document.querySelectorAll("[data-bs-theme-value]").forEach(element => {
element.classList.remove("active");
@@ -115,7 +119,12 @@ const showActiveTheme = (theme, focus = false) => {
btnToActive.classList.add("active");
btnToActive.setAttribute("aria-pressed", "true");
activeThemeIcon.textContent = svgOfActiveBtn;
if (iconHref && activeThemeIcon) {
activeThemeIcon.setAttribute("href", iconHref);
activeThemeIcon.setAttribute("xlink:href", iconHref);
}
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);

38
src/static/templates/admin/base.hbs
View File

@@ -11,6 +11,28 @@
<script src="{{urlpath}}/vw_static/admin.js"></script>
</head>
<body>
<svg class="d-none">
<symbol id="vw-icon-sun" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="5" fill="currentColor"></circle>
<g stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
<line x1="12" y1="2" x2="12" y2="5"></line>
<line x1="12" y1="19" x2="12" y2="22"></line>
<line x1="4.22" y1="4.22" x2="6.34" y2="6.34"></line>
<line x1="17.66" y1="17.66" x2="19.78" y2="19.78"></line>
<line x1="2" y1="12" x2="5" y2="12"></line>
<line x1="19" y1="12" x2="22" y2="12"></line>
<line x1="4.22" y1="19.78" x2="6.34" y2="17.66"></line>
<line x1="17.66" y1="6.34" x2="19.78" y2="4.22"></line>
</g>
</symbol>
<symbol id="vw-icon-moon" viewBox="0 0 32 32">
<path fill="currentColor" transform="translate(0,-1.2)" d="M25.2 27.3a11.2 11.2 0 0 1-6.6-20.5A13 13 0 1 0 29.6 25.5 11.6 11.6 0 0 1 25.2 27.3z"></path>
</symbol>
<symbol id="vw-icon-auto" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.5"></circle>
<path fill="currentColor" d="M12 3a9 9 0 1 1 0 18V3z"></path>
</symbol>
</svg>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4 shadow fixed-top">
<div class="container-xl">
<a class="navbar-brand" href="{{urlpath}}/admin"><img class="vaultwarden-icon" src="{{urlpath}}/vw_static/vaultwarden-icon.png" alt="V">aultwarden Admin</a>
@@ -46,7 +68,9 @@
id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown"
data-bs-display="static" aria-label="Toggle theme (auto)">
<span class="my-1 fs-4 theme-icon-active">
<use>&#9775;</use>
<svg class="vw-theme-icon" focusable="false" aria-hidden="true">
<use data-theme-icon-use href="#vw-icon-auto"></use>
</svg>
</span>
<span class="d-md-none ms-2" id="bd-theme-text">Toggle theme</span>
</button>
@@ -55,7 +79,9 @@
<button type="button" class="dropdown-item d-flex align-items-center"
data-bs-theme-value="light" aria-pressed="false">
<span class="me-2 fs-4 theme-icon">
<use>&#9728;</use>
<svg class="vw-theme-icon" focusable="false" aria-hidden="true">
<use data-theme-icon-use href="#vw-icon-sun"></use>
</svg>
</span>
Light
</button>
@@ -64,7 +90,9 @@
<button type="button" class="dropdown-item d-flex align-items-center"
data-bs-theme-value="dark" aria-pressed="false">
<span class="me-2 fs-4 theme-icon">
<use>&starf;</use>
<svg class="vw-theme-icon" focusable="false" aria-hidden="true">
<use data-theme-icon-use href="#vw-icon-moon"></use>
</svg>
</span>
Dark
</button>
@@ -73,7 +101,9 @@
<button type="button" class="dropdown-item d-flex align-items-center active"
data-bs-theme-value="auto" aria-pressed="true">
<span class="me-2 fs-4 theme-icon">
<use>&#9775;</use>
<svg class="vw-theme-icon" focusable="false" aria-hidden="true">
<use data-theme-icon-use href="#vw-icon-auto"></use>
</svg>
</span>
Auto
</button>