adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-18 05:02:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix light/dark theme not currectly initializing on shared report, unify logic

Browse Source
This commit is contained in:
Gregor Vostrak
2025-04-30 13:32:25 +02:00
parent da5fc3f113
commit 7673b365ca
4 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
resources/js/Components/AuthenticationCard.vue
View File

@@ -1,13 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, watch } from "vue"; import { onMounted } from "vue";
import { theme } from "@/utils/theme.js"; import { useTheme } from "@/utils/theme.js";
onMounted(async () => { onMounted(async () => {
document.documentElement.classList.add(theme.value); useTheme()
watch(theme, (newTheme, oldTheme) => {
document.documentElement.classList.remove(oldTheme);
document.documentElement.classList.add(newTheme);
});
}); });
</script> </script>

13
resources/js/Layouts/AppLayout.vue
View File

@@ -20,7 +20,7 @@ import {
import NavigationSidebarItem from '@/Components/NavigationSidebarItem.vue'; import NavigationSidebarItem from '@/Components/NavigationSidebarItem.vue';
import UserSettingsIcon from '@/Components/UserSettingsIcon.vue'; import UserSettingsIcon from '@/Components/UserSettingsIcon.vue';
import MainContainer from '@/packages/ui/src/MainContainer.vue'; import MainContainer from '@/packages/ui/src/MainContainer.vue';
import { onMounted, ref, watch } from "vue"; import { onMounted, ref } from "vue";
import NotificationContainer from '@/Components/NotificationContainer.vue'; import NotificationContainer from '@/Components/NotificationContainer.vue';
import { initializeStores, refreshStores } from '@/utils/init'; import { initializeStores, refreshStores } from '@/utils/init';
import { import {
@@ -31,13 +31,13 @@ import {
canViewProjects, canViewReport, canViewProjects, canViewReport,
canViewTags, canViewTags,
} from '@/utils/permissions'; } from '@/utils/permissions';
import {isBillingActivated, isInvoicingActivated} from '@/utils/billing'; import { isBillingActivated, isInvoicingActivated } from '@/utils/billing';
import type { User } from '@/types/models'; import type { User } from '@/types/models';
import { ArrowsRightLeftIcon } from '@heroicons/vue/16/solid'; import { ArrowsRightLeftIcon } from '@heroicons/vue/16/solid';
import { fetchToken, isTokenValid } from '@/utils/session'; import { fetchToken, isTokenValid } from '@/utils/session';
import UpdateSidebarNotification from '@/Components/UpdateSidebarNotification.vue'; import UpdateSidebarNotification from '@/Components/UpdateSidebarNotification.vue';
import BillingBanner from '@/Components/Billing/BillingBanner.vue'; import BillingBanner from '@/Components/Billing/BillingBanner.vue';
import { theme } from "@/utils/theme"; import { useTheme } from "@/utils/theme";
defineProps({ defineProps({
title: String, title: String,
@@ -47,12 +47,7 @@ const showSidebarMenu = ref(false);
const isUnloading = ref(false); const isUnloading = ref(false);
onMounted(async () => { onMounted(async () => {
document.documentElement.classList.add(theme.value); useTheme()
watch(theme, (newTheme, oldTheme) => {
document.documentElement.classList.remove(oldTheme);
document.documentElement.classList.add(newTheme);
});
// make sure that the initial requests are only loaded once, this can be removed once we move away from inertia // make sure that the initial requests are only loaded once, this can be removed once we move away from inertia
if (window.initialDataLoaded !== true) { if (window.initialDataLoaded !== true) {
window.initialDataLoaded = true; window.initialDataLoaded = true;

5
resources/js/Pages/SharedReport.vue
View File

@@ -14,6 +14,7 @@ import { api } from '@/packages/api/src';
import { getRandomColorWithSeed } from '@/packages/ui/src/utils/color'; import { getRandomColorWithSeed } from '@/packages/ui/src/utils/color';
import { useReportingStore } from '@/utils/useReporting'; import { useReportingStore } from '@/utils/useReporting';
import { Head } from '@inertiajs/vue3'; import { Head } from '@inertiajs/vue3';
import { useTheme } from "@/utils/theme";
const sharedSecret = ref<string | null>(null); const sharedSecret = ref<string | null>(null);
@@ -136,6 +137,10 @@ function getGroupLabel(key: string) {
return option.value === key; return option.value === key;
})?.label; })?.label;
} }
onMounted(async () => {
useTheme();
})
</script> </script>
<template> <template>

10
resources/js/utils/theme.ts
View File

@@ -22,4 +22,12 @@ const theme = computed(() => {
return themeSetting.value return themeSetting.value
}); });
export { type themeOption, themeSetting, theme }; function useTheme() {
document.documentElement.classList.add(theme.value);
watch(theme, (newTheme, oldTheme) => {
document.documentElement.classList.remove(oldTheme);
document.documentElement.classList.add(newTheme);
});
}
export { type themeOption, themeSetting, theme, useTheme };