NuKVM/xen-orchestra
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(lite/dark mode): persistence + icon (#6383)

Browse Source
This commit is contained in:
Pierre Donias 2022-08-30 09:04:20 +02:00 committed by Julien Fontanet
parent 8d64a0a232
commit 72090ea8ff
2 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
@xen-orchestra/lite/src/App.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div v-if="!xenApiStore.isConnected" style="display: flex"> <div v-if="!xenApiStore.isConnected">
<AppLogin /> <AppLogin />
</div> </div>
<div v-else> <div v-else>
@ -17,9 +17,9 @@
<script lang="ts" setup> <script lang="ts" setup>
import { watchEffect } from "vue"; import { watchEffect } from "vue";
import favicon from "@/assets/favicon.svg";
import AppHeader from "@/components/AppHeader.vue"; import AppHeader from "@/components/AppHeader.vue";
import AppLogin from "@/components/AppLogin.vue"; import AppLogin from "@/components/AppLogin.vue";
import favicon from "@/assets/favicon.svg";
import InfraPoolList from "@/components/infra/InfraPoolList.vue"; import InfraPoolList from "@/components/infra/InfraPoolList.vue";
import { useXenApiStore } from "@/stores/xen-api.store"; import { useXenApiStore } from "@/stores/xen-api.store";
@ -31,6 +31,12 @@ if (link == null) {
} }
link.href = favicon; link.href = favicon;
document.title = "XO Lite";
if (window.localStorage?.getItem("colorMode") !== "light") {
document.documentElement.classList.add("dark");
}
const xenApiStore = useXenApiStore(); const xenApiStore = useXenApiStore();
watchEffect(() => { watchEffect(() => {

33
@xen-orchestra/lite/src/components/AppHeader.vue
View File

@ -1,26 +1,36 @@
<template> <template>
<header class="app-header"> <header class="app-header">
<RouterLink :to="{ name: 'home' }"> <RouterLink :to="{ name: 'home' }">
<img alt="XO Lite" src="../assets/logo.svg" style="width: 6rem" /> <img alt="XO Lite" src="../assets/logo.svg" />
</RouterLink> </RouterLink>
<slot /> <slot />
<span style="cursor: pointer" @click="toggleTheme">Switch theme</span> <div>
<span style="cursor: pointer; margin-left: 1rem" @click="logout"> <span @click="toggleTheme"
Logout ><FontAwesomeIcon style="font-size: 1.5em" :icon="colorModeIcon"
</span> /></span>
<span style="margin-left: 1rem" @click="logout">Logout</span>
</div>
</header> </header>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { nextTick } from "vue"; import { computed, nextTick, ref } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { faMoon, faSun } from "@fortawesome/pro-solid-svg-icons";
import { useLocalStorage } from "@vueuse/core";
import { useXenApiStore } from "@/stores/xen-api.store"; import { useXenApiStore } from "@/stores/xen-api.store";
const router = useRouter(); const router = useRouter();
const colorMode = useLocalStorage<string>("colorMode", "dark");
const toggleTheme = () => { const toggleTheme = () => {
document.documentElement.classList.toggle("dark"); colorMode.value = document.documentElement.classList.toggle("dark")
? "dark"
: "light";
}; };
const colorModeIcon = computed(() =>
colorMode.value === "light" ? faMoon : faSun
);
const logout = () => { const logout = () => {
const xenApiStore = useXenApiStore(); const xenApiStore = useXenApiStore();
@ -33,9 +43,16 @@ const logout = () => {
.app-header { .app-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
min-height: 8rem; min-height: 8rem;
padding: 0 0.8rem; padding: 1rem;
border-bottom: 0.1rem solid var(--color-blue-scale-400); border-bottom: 0.1rem solid var(--color-blue-scale-400);
background-color: var(--background-color-secondary); background-color: var(--background-color-secondary);
img {
width: 4rem;
}
span {
cursor: pointer;
}
} }
</style> </style>