topaLE
/
vaultwarden
mirror of https://github.com/dani-garcia/vaultwarden
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fix: admin theme emoji alignment (#6459) 

* Fix: admin theme dropdown emoji alignment

* Sprites
main
Joep Duin 4 days ago
committed by GitHub
parent
2ee40d6105
commit
b519832086
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
3 changed files with 62 additions and 6 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      src/static/scripts/admin.css
  2. 13
      src/static/scripts/admin.js
  3. 38
      src/static/templates/admin/base.hbs

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

@ -58,3 +58,20 @@ img {
.abbr-badge { .abbr-badge {
cursor: help; 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
View File

@ -106,7 +106,11 @@ const showActiveTheme = (theme, focus = false) => {
const themeSwitcherText = document.querySelector("#bd-theme-text"); const themeSwitcherText = document.querySelector("#bd-theme-text");
const activeThemeIcon = document.querySelector(".theme-icon-active use"); const activeThemeIcon = document.querySelector(".theme-icon-active use");
const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`); 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 => { document.querySelectorAll("[data-bs-theme-value]").forEach(element => {
element.classList.remove("active"); element.classList.remove("active");
@ -115,7 +119,12 @@ const showActiveTheme = (theme, focus = false) => {
btnToActive.classList.add("active"); btnToActive.classList.add("active");
btnToActive.setAttribute("aria-pressed", "true"); 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})`; const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
themeSwitcher.setAttribute("aria-label", themeSwitcherLabel); 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> <script src="{{urlpath}}/vw_static/admin.js"></script>
</head> </head>
<body> <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"> <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4 shadow fixed-top">
<div class="container-xl"> <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> <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" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown"
data-bs-display="static" aria-label="Toggle theme (auto)"> data-bs-display="static" aria-label="Toggle theme (auto)">
<span class="my-1 fs-4 theme-icon-active"> <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>
<span class="d-md-none ms-2" id="bd-theme-text">Toggle theme</span> <span class="d-md-none ms-2" id="bd-theme-text">Toggle theme</span>
</button> </button>
@ -55,7 +79,9 @@
<button type="button" class="dropdown-item d-flex align-items-center" <button type="button" class="dropdown-item d-flex align-items-center"
data-bs-theme-value="light" aria-pressed="false"> data-bs-theme-value="light" aria-pressed="false">
<span class="me-2 fs-4 theme-icon"> <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> </span>
Light Light
</button> </button>
@ -64,7 +90,9 @@
<button type="button" class="dropdown-item d-flex align-items-center" <button type="button" class="dropdown-item d-flex align-items-center"
data-bs-theme-value="dark" aria-pressed="false"> data-bs-theme-value="dark" aria-pressed="false">
<span class="me-2 fs-4 theme-icon"> <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> </span>
Dark Dark
</button> </button>
@ -73,7 +101,9 @@
<button type="button" class="dropdown-item d-flex align-items-center active" <button type="button" class="dropdown-item d-flex align-items-center active"
data-bs-theme-value="auto" aria-pressed="true"> data-bs-theme-value="auto" aria-pressed="true">
<span class="me-2 fs-4 theme-icon"> <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> </span>
Auto Auto
</button> </button>

Write Preview
Loading…
Cancel
Save