bnilsen/custom_ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add theme store and input, update some components to use theme

Browse source
This commit is contained in:
Casey 2025-12-12 14:21:42 -06:00
parent 43c205e577
commit 0c55c9996f
12 changed files with 459 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

30
frontend/src/App.vue
View file

@ -1,7 +1,10 @@
<script setup>
import { ref, onMounted } from "vue";
import { IconoirProvider } from "@iconoir/vue";
import SideBar from "./components/SideBar.vue";
import CompanySelector from "./components/CompanySelector.vue";
import { watchEffect, onMounted, ref } from "vue";
import { useCompanyStore } from "@/stores/company";
import { useThemeStore } from "@/stores/theme";
import CreateClientModal from "./components/modals/CreateClientModal.vue";
import CreateEstimateModal from "./components/modals/CreateEstimateModal.vue";
import CreateJobModal from "./components/modals/CreateJobModal.vue";
@ -15,12 +18,22 @@ import { useNotificationStore } from "@/stores/notifications-primevue";
// Get the notification store and create a ref for the toast
const notificationStore = useNotificationStore();
const toast = ref();
const companyStore = useCompanyStore();
const themeStore = useThemeStore();
// Connect the toast instance to the store when component mounts
onMounted(() => {
if (toast.value) {
notificationStore.setToastInstance(toast.value);
}
// Apply initial theme
themeStore.applyTheme(companyStore.selectedCompany);
});
// Reactively apply theme when company changes
watchEffect(() => {
themeStore.applyTheme(companyStore.selectedCompany);
});
</script>
@ -34,7 +47,10 @@ onMounted(() => {
}"
>
<div id="snw-ui">
<SideBar />
<div class="sidebar-column">
<CompanySelector />
<SideBar />
</div>
<div id="display-content">
<ScrollPanel style="width: 100%; height: 100%">
<RouterView />
@ -63,11 +79,19 @@ onMounted(() => {
flex-direction: row;
border-radius: 10px;
padding: 10px;
border: 4px solid rgb(235, 230, 230);
border: 4px solid var(--theme-border);
max-width: 2500px;
width: 100%;
margin: 10px auto;
height: 90vh;
background: linear-gradient(145deg, var(--theme-surface) 0%, var(--theme-surface-alt) 60%);
}
.sidebar-column {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 170px;
}
#display-content {