chg: [front:theme] Better support of theme choice

This commit is contained in:
Sami Mokaddem 2024-07-08 14:59:52 +02:00
parent e1010793dc
commit f1a0ed3ab1
4 changed files with 54 additions and 38 deletions

View file

@ -5,10 +5,13 @@ import TheAdminPanel from './components/TheAdminPanel.vue'
import TheSocketConnectionState from './components/TheSocketConnectionState.vue' import TheSocketConnectionState from './components/TheSocketConnectionState.vue'
import TheDahboard from './TheDahboard.vue' import TheDahboard from './TheDahboard.vue'
import { socketConnected } from "@/socket"; import { socketConnected } from "@/socket";
import { darkModeEnabled } from "@/settings.js"
onMounted(() => { onMounted(() => {
document.getElementsByTagName('body')[0].classList.add('dark') if (darkModeEnabled.value) {
document.getElementsByTagName('body')[0].classList.add('dark')
}
}) })
</script> </script>

View file

@ -1,6 +1,7 @@
<script setup> <script setup>
import { ref, watch, computed } from "vue" import { ref, watch, computed } from "vue"
import { notificationHistory, notificationHistoryConfig } from "@/socket"; import { notificationHistory, notificationHistoryConfig } from "@/socket";
import { darkModeEnabled } from "@/settings.js"
const theChart = ref(null) const theChart = ref(null)
const chartInitSeries = [ const chartInitSeries = [
@ -16,48 +17,54 @@
return [{data: Array.from(notificationHistory.value)}] return [{data: Array.from(notificationHistory.value)}]
}) })
const chartOptions = { const chartOptions = computed(() => {
chart: { return {
type: 'bar', chart: {
width: '100%', type: 'bar',
height: 32, width: '100%',
sparkline: { height: 32,
enabled: true sparkline: {
enabled: true
},
dropShadow: {
enabled: true,
enabledOnSeries: undefined,
top: 2,
left: 1,
blur: 2,
color: '#000',
opacity: darkModeEnabled.value ? 0.35 : 0.15
},
animations: {
enabled: false,
easing: 'easeinout',
speed: 200,
},
}, },
dropShadow: { colors: [darkModeEnabled.value ? '#008ffb' : '#1f9eff'],
enabled: true, plotOptions: {
enabledOnSeries: undefined, bar: {
top: 2, columnWidth: '80%'
left: 1, }
blur: 3,
color: '#000',
opacity: 0.45
}, },
animations: { yaxis: {
min: 0,
labels: {
show: false,
}
},
tooltip: {
enabled: false, enabled: false,
easing: 'easeinout',
speed: 200,
}, },
}, }
plotOptions: { })
bar: {
columnWidth: '80%'
}
},
yaxis: {
min: 0,
},
tooltip: {
enabled: false,
},
}
</script> </script>
<template> <template>
<div class="my-2 --ml-1 bg-slate-600 py-1 pl-1 pr-3 rounded-md relative flex flex-col"> <div class="my-2 --ml-1 bg-slate-50 dark:bg-slate-600 py-1 pl-1 pr-3 rounded-md relative flex flex-col">
<div :class="`${!hasActivity ? 'hidden' : 'absolute'} h-10 -mt-1 w-full z-40`"> <div :class="`${!hasActivity ? 'hidden' : 'absolute'} h-10 -mt-1 w-full z-40`">
<div class="text-xxs flex justify-between h-full items-center"> <div class="text-xxs flex justify-between h-full items-center text-slate-500 dark:text-slate-300">
<span class="-rotate-90 w-8 -ml-3">- {{ notificationHistoryConfig.buffer_timestamp_min }}min</span> <span class="-rotate-90 w-8 -ml-3">- {{ notificationHistoryConfig.buffer_timestamp_min }}min</span>
<span class="-rotate-90 w-8 text-xs"></span> <span class="-rotate-90 w-8 text-xs"></span>
<span class="-rotate-90 w-8 text-lg"></span> <span class="-rotate-90 w-8 text-lg"></span>

View file

@ -2,14 +2,16 @@
import { ref, watch } from 'vue' import { ref, watch } from 'vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons' import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
import { darkModeOn } from "@/settings.js"
const darkMode = ref(true) const darkMode = ref(darkModeOn.value)
watch(darkMode, (newValue) => { watch(darkMode, (newValue) => {
darkModeOn.value = newValue
if (newValue) { if (newValue) {
document.getElementsByTagName('body')[0].classList.add('dark') document.getElementsByTagName('body')[0].classList.add('dark')
} else { } else {
document.getElementsByTagName('body')[0].classList.remove('dark') document.getElementsByTagName('body')[0].classList.remove('dark')
} }
}) })
</script> </script>

4
src/settings.js Normal file
View file

@ -0,0 +1,4 @@
import { ref, computed } from 'vue'
export const darkModeOn = ref(true)
export const darkModeEnabled = computed(() => darkModeOn.value)