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

update sidebar layout, update theme, update client table data

Browse source
This commit is contained in:
Casey 2025-12-16 06:45:50 -06:00
parent 011080e0f8
commit 1a837ffcfc
4 changed files with 109 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

43
frontend/src/App.vue
View file

@ -19,6 +19,7 @@ const notificationStore = useNotificationStore();
const toast = ref();
const companyStore = useCompanyStore();
const themeStore = useThemeStore();
const sidebarCollapsed = ref(false);
// Connect the toast instance to the store when component mounts
onMounted(() => {
@ -46,8 +47,8 @@ watchEffect(() => {
}"
>
<div id="snw-ui">
<div class="sidebar-column">
<SideBar />
<div class="sidebar-column" :class="{ collapsed: sidebarCollapsed }">
<SideBar @toggle="sidebarCollapsed = $event" />
</div>
<div id="display-content">
<ScrollPanel style="width: 100%; height: 100%">
@ -82,21 +83,53 @@ watchEffect(() => {
width: 100%;
margin: 10px auto;
height: 90vh;
background: var(--theme-gradient);
background: var(--theme-background-gradient);
}
.sidebar-column {
display: flex;
flex-direction: column;
gap: 8px;
width: 170px;
min-width: 170px;
transition: width 0.3s ease, min-width 0.3s ease;
}
.sidebar-column.collapsed {
width: 56px;
min-width: 56px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.sidebar-column {
width: 140px;
min-width: 140px;
}
.sidebar-column.collapsed {
width: 56px;
min-width: 56px;
}
}
@media (max-width: 480px) {
.sidebar-column {
width: 120px;
min-width: 120px;
}
.sidebar-column.collapsed {
width: 56px;
min-width: 56px;
}
}
#display-content {
/* flex-grow: 1; */
flex-grow: 1;
margin-left: auto;
margin-right: auto;
max-width: 50vw;
max-width: 100%;
min-width: 80%;
height: 100%;
}

3
frontend/src/components/SideBar.vue
View file

@ -22,6 +22,8 @@ import {
} from "@iconoir/vue";
import SidebarSpeedDial from "./SidebarSpeedDial.vue";
const emit = defineEmits(['toggle']);
const router = useRouter();
const modalStore = useModalStore();
const notifications = useNotificationStore();
@ -40,6 +42,7 @@ const focusClientInput = (inputId) => {
const toggleSidebar = () => {
isCollapsed.value = !isCollapsed.value;
emit('toggle', isCollapsed.value);
};
const openSidebarAndDial = (category) => {

10
frontend/src/stores/theme.js
View file

@ -12,6 +12,7 @@ const themeMap = {
secondaryGradientStart: "#2c9b64",
secondaryGradientEnd: "#38c487",
secondaryGradient: "linear-gradient(90deg, #2c9b64 0%, #38c487 100%)",
backgroundGradient: "linear-gradient(90deg, #f0f8ff 0%, #e6f3ff 100%)",
surface: "#cadcf1ff",
surfaceAlt: "#dbfdefff",
border: "#cfe5f7",
@ -32,6 +33,7 @@ const themeMap = {
secondaryGradientStart: "#d2a106",
secondaryGradientEnd: "#f7de6d",
secondaryGradient: "linear-gradient(90deg, #d2a106 0%, #f7de6d 100%)",
backgroundGradient: "linear-gradient(90deg, #f8fff0 0%, #f0f8e6 100%)",
surface: "#f7fbe9",
surfaceAlt: "#f1f4d6",
border: "#dfe8b5",
@ -52,6 +54,7 @@ const themeMap = {
secondaryGradientStart: "#4f8ee5",
secondaryGradientEnd: "#5fa4ff",
secondaryGradient: "linear-gradient(90deg, #4f8ee5 0%, #5fa4ff 100%)",
backgroundGradient: "linear-gradient(90deg, #f5f7fb 0%, #e7ecf5 100%)",
surface: "#f5f7fb",
surfaceAlt: "#e7ecf5",
border: "#ced6e5",
@ -72,6 +75,7 @@ const themeMap = {
secondaryGradientStart: "#b2a89c",
secondaryGradientEnd: "#cfc6b8",
secondaryGradient: "linear-gradient(90deg, #b2a89c 0%, #cfc6b8 100%)",
backgroundGradient: "linear-gradient(90deg, #f7f5f2 0%, #ebe6df 100%)",
surface: "#f7f5f2",
surfaceAlt: "#ebe6df",
border: "#d8d0c5",
@ -92,6 +96,7 @@ const themeMap = {
secondaryGradientStart: "#f28c28",
secondaryGradientEnd: "#ffc174",
secondaryGradient: "linear-gradient(90deg, #f28c28 0%, #ffc174 100%)",
backgroundGradient: "linear-gradient(90deg, #f8fbf4 0%, #f2f1e9 100%)",
surface: "#f8fbf4",
surfaceAlt: "#f2f1e9",
border: "#d9e5cc",
@ -105,11 +110,11 @@ const themeMap = {
export const useThemeStore = defineStore("theme", {
state: () => ({
currentTheme: themeMap.SprinklersNW,
currentTheme: themeMap["Sprinklers Northwest"],
}),
actions: {
applyTheme(companyName) {
const theme = themeMap[companyName] || themeMap.SprinklersNW;
const theme = themeMap[companyName] || themeMap["Sprinklers Northwest"];
this.currentTheme = theme;
if (typeof document === "undefined") return;
const root = document.documentElement;
@ -123,6 +128,7 @@ export const useThemeStore = defineStore("theme", {
root.style.setProperty("--theme-secondary-gradient-start", theme.secondaryGradientStart);
root.style.setProperty("--theme-secondary-gradient-end", theme.secondaryGradientEnd);
root.style.setProperty("--theme-secondary-gradient", theme.secondaryGradient);
root.style.setProperty("--theme-background-gradient", theme.backgroundGradient);
root.style.setProperty("--theme-surface", theme.surface);
root.style.setProperty("--theme-surface-alt", theme.surfaceAlt);
root.style.setProperty("--theme-border", theme.border);