mirror of
https://github.com/dani-garcia/vaultwarden.git
synced 2026-01-16 20:50:33 +00:00
Fix: admin theme emoji alignment (#6459)
* Fix: admin theme dropdown emoji alignment * Sprites
This commit is contained in:
17
src/static/scripts/admin.css
vendored
17
src/static/scripts/admin.css
vendored
@@ -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
13
src/static/scripts/admin.js
vendored
@@ -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);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user