admin: move theme icon to top left; add icon

This commit is contained in:
Harvey Tindall 2021-12-24 19:34:18 +00:00
parent 535a100314
commit aedea1bea6
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
2 changed files with 24 additions and 2 deletions

View File

@ -408,6 +408,7 @@
</div>
</div>
</span>
<span class="button ~warning" alt="{{ .strings.theme }}" id="button-theme"><i class="ri-sun-line"></i></span>
<div class="page-container">
<div class="mb-1">
<header class="flex flex-wrap items-center justify-between">
@ -421,7 +422,6 @@
<div class="mb-1">
<div class="text-neutral-700">
<span class="button ~critical !normal mb-1 unfocused" id="logout-button">{{ .strings.logout }}</span>
<span id="button-theme" class="button ~neutral !normal mb-1">{{ .strings.theme }}</span>
</div>
</div>
<div id="tab-invites">

View File

@ -10,7 +10,29 @@ import { _get, _post, notificationBox, whichAnimationEvent, toggleLoader } from
import { Updater } from "./modules/update.js";
loadTheme();
(document.getElementById('button-theme') as HTMLSpanElement).onclick = toggleTheme;
const themeButton = document.getElementById('button-theme') as HTMLSpanElement;
const switchThemeIcon = () => {
const icon = themeButton.childNodes[0] as HTMLElement;
if (document.documentElement.classList.contains("dark-theme")) {
icon.classList.add("ri-sun-line");
icon.classList.remove("ri-moon-line");
themeButton.classList.add("~warning");
themeButton.classList.remove("~neutral");
themeButton.classList.remove("!high");
} else {
icon.classList.add("ri-moon-line");
icon.classList.remove("ri-sun-line");
themeButton.classList.add("!high");
themeButton.classList.add("~neutral");
themeButton.classList.remove("~warning");
}
};
themeButton.onclick = () => {
toggleTheme();
switchThemeIcon();
}
switchThemeIcon();
window.lang = new lang(window.langFile as LangFile);
loadLangSelector("admin");