Merge branch '20260902_1249_Kuchenik_Flatten_CSS' into 20260605_1123_Hight_updates
This commit is contained in:
@@ -24,6 +24,6 @@ export default defineConfig([globalIgnores(['dist']), {
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
|
||||
'no-unused-vars': 'off',
|
||||
},
|
||||
}, ...storybook.configs["flat/recommended"]])
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
||||
<link rel="icon" type="image/svg+xml" href="volcano.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>VDAP</title>
|
||||
|
||||
+49
-54
@@ -1,7 +1,7 @@
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import { useEffect } from 'react';
|
||||
import { Routes, Route, Navigate, Outlet } from 'react-router-dom';
|
||||
import { useRecipe, Grid, GridItem, useDialog, Flex, Heading } from "@chakra-ui/react";
|
||||
import {useEffect} from 'react';
|
||||
import {Routes, Route, Navigate, Outlet} from 'react-router-dom';
|
||||
import {useRecipe, Grid, GridItem, useDialog, Flex, Heading} from "@chakra-ui/react";
|
||||
|
||||
// --- NEW AUTH IMPORTS ---
|
||||
import useAuthStore from './store/authStore';
|
||||
@@ -19,41 +19,7 @@ import GlobalMap from "./pages/maps/GlobalMap.jsx";
|
||||
import Admin from "./pages/admin/Admin.jsx";
|
||||
import MyDashboard from "./pages/home/tabs/MyDashboard.jsx";
|
||||
|
||||
function AppFoundation() {
|
||||
const recipe = useRecipe({ key: "dashboard" });
|
||||
const styles = recipe();
|
||||
const dialog = useDialog();
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogPopup dialog={dialog} />
|
||||
<Grid css={styles}
|
||||
templateRows="1fr 11fr"
|
||||
templateColumns="auto 1fr"
|
||||
height="100vh"
|
||||
width="100vw"
|
||||
>
|
||||
<GridItem rowSpan={2} colSpan={1}>
|
||||
<Sidebar />
|
||||
</GridItem>
|
||||
<GridItem rowSpan={1} colSpan={1}>
|
||||
<Header />
|
||||
</GridItem>
|
||||
<GridItem colSpan={1} width="100%" overflow="auto">
|
||||
<Outlet />
|
||||
</GridItem>
|
||||
</Grid>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const Placeholder = ({ name }) => (
|
||||
<Flex width="100%" height="100%" align="center" justify="center">
|
||||
<Heading color="gray.500" _dark={{ color: "gray.200" }} size="lg">{name} Dashboard - Coming Soon</Heading>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
function App() {
|
||||
export default function App() {
|
||||
// 1. Pull the initialization function from Zustand
|
||||
const checkAuth = useAuthStore((state) => state.checkAuth);
|
||||
|
||||
@@ -65,34 +31,63 @@ function App() {
|
||||
return (
|
||||
<Routes>
|
||||
{/* --- Public Routes --- */}
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route path="/login" element={<Login/>}/>
|
||||
|
||||
{/* --- SECURE ROUTES --- */}
|
||||
<Route element={<ProtectedRoute />}>
|
||||
{/* --- Secure Routes --- */}
|
||||
<Route element={<ProtectedRoute/>}>
|
||||
|
||||
{/* --- Non-Public Routes (Now completely locked down) --- */}
|
||||
<Route element={<AppFoundation />}>
|
||||
<Route element={<AppFoundation/>}>
|
||||
|
||||
<Route path="/home" element={<Home />}>
|
||||
<Route index element={<MyDashboard />} />
|
||||
<Route path="gas" element={<Placeholder name="Gas" />} />
|
||||
<Route path="seismic" element={<Placeholder name="Seismic" />} />
|
||||
<Route path="remote" element={<Placeholder name="Remote Sensing" />} />
|
||||
<Route path="daily" element={<Placeholder name="Daily Activity" />} />
|
||||
<Route path="/home" element={<Home/>}>
|
||||
<Route index element={<MyDashboard/>}/>
|
||||
<Route path="gas" element={<Placeholder name="Gas"/>}/>
|
||||
<Route path="seismic" element={<Placeholder name="Seismic"/>}/>
|
||||
<Route path="remote" element={<Placeholder name="Remote Sensing"/>}/>
|
||||
<Route path="daily" element={<Placeholder name="Daily Activity"/>}/>
|
||||
</Route>
|
||||
|
||||
<Route path="/global-map" element={<GlobalMap />} />
|
||||
<Route path="/regional-map" element={<RegionalMap />} />
|
||||
<Route path="/volcano" element={<Volcano />} />
|
||||
<Route path="/admin" element={<Admin />} />
|
||||
<Route path="/global-map" element={<GlobalMap/>}/>
|
||||
<Route path="/regional-map" element={<RegionalMap/>}/>
|
||||
<Route path="/volcano" element={<Volcano/>}/>
|
||||
<Route path="/admin" element={<Admin/>}/>
|
||||
</Route>
|
||||
|
||||
</Route>
|
||||
|
||||
{/* --- Redirect Routes --- */}
|
||||
<Route path="/" element={<Navigate to="/home" replace />} />
|
||||
<Route path="/" element={<Navigate to="/home" replace/>}/>
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
// The fundamental layout of the webpage
|
||||
function AppFoundation() {
|
||||
const recipe = useRecipe({key: "dashboard"});
|
||||
const styles = recipe();
|
||||
const dialog = useDialog();
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogPopup dialog={dialog}/>
|
||||
<Grid css={styles} templateRows="1fr 11fr" templateColumns="auto 1fr">
|
||||
<GridItem rowSpan={2} colSpan={1}>
|
||||
<Sidebar/>
|
||||
</GridItem>
|
||||
<GridItem rowSpan={1} colSpan={1}>
|
||||
<Header/>
|
||||
</GridItem>
|
||||
<GridItem colSpan={1}>
|
||||
<Outlet/>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
// A dummy page that acts as a placeholder for pages that aren't developed yet but are navigatable to
|
||||
const Placeholder = ({name}) => (
|
||||
<Flex width="100%" height="100%" align="center" justify="center">
|
||||
<Heading color="gray.500" _dark={{color: "gray.200"}} size="lg">{name} Dashboard - Coming Soon</Heading>
|
||||
</Flex>
|
||||
);
|
||||
@@ -31,8 +31,11 @@ export function SettingsButton() {
|
||||
const cancelEdit = useDashboardStore(state => state.cancelEdit);
|
||||
const addWidget = useDashboardStore(state => state.addWidget);
|
||||
|
||||
const recipe = useRecipe({key: "glassTab"});
|
||||
const tabStyles = recipe();
|
||||
const glassTabRecipe = useRecipe({key: "glassTab"});
|
||||
const tabStyles = glassTabRecipe();
|
||||
|
||||
const [canScrollLeft, setCanScrollLeft] = useState(false);
|
||||
const [canScrollRight, setCanScrollRight] = useState(false);
|
||||
|
||||
// Pull the glass container styles for the dropdown and modal
|
||||
const panelRecipe = useSlotRecipe({key: "glassPanel"});
|
||||
@@ -43,8 +46,6 @@ export function SettingsButton() {
|
||||
|
||||
// ⬅️ ➡️ This is the callbacks and scroll control to add the chevron arrows in the tab list
|
||||
const tabsRef = useRef(null);
|
||||
const [canScrollLeft, setCanScrollLeft] = useState(false);
|
||||
const [canScrollRight, setCanScrollRight] = useState(false);
|
||||
|
||||
const checkScroll = useCallback(() => {
|
||||
if (tabsRef.current) {
|
||||
@@ -92,27 +93,17 @@ export function SettingsButton() {
|
||||
<>
|
||||
{isEditing ? (
|
||||
// 📝 EDIT MODE: The 3-Pill Layout
|
||||
<HStack gap={2}>
|
||||
<HStack>
|
||||
{/* 1. The Add Widget Button */}
|
||||
<Box
|
||||
as="button"
|
||||
css={tabStyles}
|
||||
data-state="open"
|
||||
onClick={() => setIsLibraryOpen(true)}
|
||||
color={{base: "blue.500", _dark: "blue.300"}}
|
||||
_hover={{bg: "rgba(66, 153, 225, 0.1)"}}
|
||||
<Box as="button" css={tabStyles} data-state="open" onClick={() => setIsLibraryOpen(true)}
|
||||
color={{base: "blue.500", _dark: "blue.300"}} _hover={{bg: "rgba(66, 153, 225, 0.1)"}}
|
||||
>
|
||||
<LayoutGrid size={20} style={{flexShrink: 0}}/>
|
||||
<Box as="span">Widget Library</Box>
|
||||
</Box>
|
||||
|
||||
{/* 2. The Save Button */}
|
||||
<Box
|
||||
as="button"
|
||||
css={tabStyles}
|
||||
data-state="open"
|
||||
onClick={saveEdit}
|
||||
color={{base: "green.600", _dark: "green.400"}}
|
||||
<Box as="button" css={tabStyles} data-state="open" onClick={saveEdit} color={{base: "green.600", _dark: "green.400"}}
|
||||
_hover={{bg: "rgba(72, 187, 120, 0.1)"}}
|
||||
>
|
||||
<Save size={20} style={{flexShrink: 0}}/>
|
||||
@@ -120,12 +111,7 @@ export function SettingsButton() {
|
||||
</Box>
|
||||
|
||||
{/* 3. The Discard Button */}
|
||||
<Box
|
||||
as="button"
|
||||
css={tabStyles}
|
||||
data-state="open"
|
||||
onClick={cancelEdit}
|
||||
color={{base: "red.500", _dark: "red.400"}}
|
||||
<Box as="button" css={tabStyles} data-state="open" onClick={cancelEdit} color={{base: "red.500", _dark: "red.400"}}
|
||||
_hover={{bg: "rgba(245, 101, 101, 0.1)"}}
|
||||
>
|
||||
<X size={20} style={{flexShrink: 0}}/>
|
||||
@@ -137,7 +123,7 @@ export function SettingsButton() {
|
||||
<Menu.Root positioning={{getAnchorRect}}>
|
||||
<Menu.Trigger asChild>
|
||||
<Box ref={menuRef} as="button" css={tabStyles}>
|
||||
{/* size increased to 24 to match tabs. flexShrink: 0 is CRITICAL */}
|
||||
{/* settings icon size set to 24 to match tabs. flexShrink 0 is CRITICAL */}
|
||||
<Settings size={24} style={{flexShrink: 0}}/>
|
||||
<Box as="span">Dashboard Settings</Box>
|
||||
</Box>
|
||||
@@ -174,136 +160,52 @@ export function SettingsButton() {
|
||||
<Dialog.Root
|
||||
open={isLibraryOpen}
|
||||
onOpenChange={(e) => setIsLibraryOpen(e.open)}
|
||||
size="xl"
|
||||
placement="center"
|
||||
closeOnInteractOutside={true}
|
||||
closeOnEscapeKeyDown={true}
|
||||
size="xl"
|
||||
placement="center"
|
||||
>
|
||||
{/* Soft blur can be added to the background behind the modal */}
|
||||
{/*<Dialog.Backdrop bg="blackAlpha.100" backdropFilter="blur(2px)"/>*/}
|
||||
<Dialog.Positioner>
|
||||
|
||||
<Dialog.Content css={modalStyles.root} overflow="hidden" maxW="60%" minH="80%" p={0}>
|
||||
|
||||
<Dialog.Header bg="transparent" color={{base: "gray.800", _dark: "white"}} py={4}
|
||||
borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}>
|
||||
<Dialog.Title fontSize="xl" fontWeight="bold">Widgets Shop</Dialog.Title>
|
||||
<Dialog.Content css={modalStyles.root}>
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>Widgets Shop</Dialog.Title>
|
||||
</Dialog.Header>
|
||||
|
||||
<Dialog.Body p={0}>
|
||||
<Dialog.Body>
|
||||
<Tabs.Root defaultValue={categories[0]} variant="unstyled">
|
||||
<Box position="relative" display="flex" mx="auto" maxWidth="100%" mx={5} mt={4} mb={6}>
|
||||
|
||||
{/* LEFT GLASS CRESCENT */}
|
||||
{/* HORIZONTAL SCROLLABLE MENU OF WIDGET CATEGORIES */}
|
||||
<Box>
|
||||
{/* left glass crescent */}
|
||||
{canScrollLeft && (
|
||||
<Flex
|
||||
position="absolute"
|
||||
left="0" top="0" bottom="0"
|
||||
w="50px"
|
||||
align="center" justify="center"
|
||||
zIndex={2}
|
||||
cursor="pointer"
|
||||
onClick={() => tabsRef.current.scrollBy({left: -200, behavior: 'smooth'})}
|
||||
bg={{base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)"}}
|
||||
backdropFilter="blur(1px)"
|
||||
borderTopLeftRadius="full"
|
||||
borderBottomLeftRadius="full"
|
||||
|
||||
// THE MAGIC: Bites a transparent circle out of the flat right side!
|
||||
WebkitMaskImage="radial-gradient(circle at 100% 50%, transparent 30px, black 19px)"
|
||||
maskImage="radial-gradient(circle at 100% 50%, transparent 30px, black 35px)"
|
||||
|
||||
color={{base: "gray.600", _dark: "gray.300"}}
|
||||
transition="background-color 0.2s"
|
||||
_hover={{
|
||||
color: {base: "blue.500", _dark: "blue.300"},
|
||||
bg: {base: "rgba(255, 255, 255, 0.9)", _dark: "rgba(40, 40, 40, 0.95)"}
|
||||
}}
|
||||
>
|
||||
{/* Shifted slightly left to optically center it in the crescent mass */}
|
||||
<ChevronLeft size={18} style={{ marginLeft: "-30px" }}/>
|
||||
<Flex onClick={() => tabsRef.current.scrollBy({left: -200, behavior: 'smooth'})}>
|
||||
<ChevronLeft size={18} style={{ marginLeft: "-30px" }}/> {/* Shifted slightly left to optically center it in the crescent mass */}
|
||||
</Flex>
|
||||
)}
|
||||
<Tabs.List
|
||||
ref={tabsRef}
|
||||
onScroll={checkScroll}
|
||||
bg={{base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)"}}
|
||||
p={1}
|
||||
borderRadius="full"
|
||||
display="flex"
|
||||
flexWrap="nowrap"
|
||||
overflowX="auto"
|
||||
maxWidth="100%"
|
||||
border="1px solid"
|
||||
borderColor={{base: "blackAlpha.50", _dark: "whiteAlpha.100"}}
|
||||
css={{
|
||||
scrollbarWidth: "none",
|
||||
"&::-webkit-scrollbar": {display: "none"},
|
||||
}}
|
||||
// This is for desktop users not on trackpad to scroll the
|
||||
onWheel={(e) => {
|
||||
if (e.currentTarget) {
|
||||
e.currentTarget.scrollLeft += e.deltaY;
|
||||
}
|
||||
}}
|
||||
|
||||
{/* the categories */}
|
||||
<Tabs.List ref={tabsRef} onScroll={checkScroll}
|
||||
// For desktop users (not on trackpad) to scroll
|
||||
onWheel={(e) => { if (e.currentTarget) e.currentTarget.scrollLeft += e.deltaY; }}
|
||||
>
|
||||
{categories.map(cat => (
|
||||
<Tabs.Trigger
|
||||
key={cat}
|
||||
value={cat}
|
||||
px={5}
|
||||
py={2}
|
||||
borderRadius="full"
|
||||
whiteSpace="nowrap"
|
||||
flexShrink={0}
|
||||
color={{base: "gray.500", _dark: "gray.400"}}
|
||||
fontWeight="medium"
|
||||
transition="background-color 0.2s, color 0.2s, box-shadow 0.2s"
|
||||
_hover={{
|
||||
color: {base: "gray.800", _dark: "gray.200"}
|
||||
}}
|
||||
_selected={{
|
||||
bg: {base: "white", _dark: "rgba(255, 255, 255, 0.12)"},
|
||||
color: {base: "blue.600", _dark: "blue.200"},
|
||||
boxShadow: "sm",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
<Tabs.Trigger key={cat} value={cat}>
|
||||
{cat}
|
||||
</Tabs.Trigger>
|
||||
))}
|
||||
</Tabs.List>
|
||||
|
||||
{/* right glass crescent */}
|
||||
{canScrollRight && (
|
||||
<Flex
|
||||
position="absolute"
|
||||
right="0" top="0" bottom="0"
|
||||
w="50px"
|
||||
align="center" justify="center"
|
||||
zIndex={2}
|
||||
cursor="pointer"
|
||||
onClick={() => tabsRef.current.scrollBy({left: 200, behavior: 'smooth'})}
|
||||
bg={{base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)"}}
|
||||
backdropFilter="blur(1px)"
|
||||
borderTopRightRadius="full"
|
||||
borderBottomRightRadius="full"
|
||||
|
||||
// THE MAGIC: Bites a transparent circle out of the flat left side!
|
||||
WebkitMaskImage="radial-gradient(circle at 0% 50%, transparent 30px, black 19px)"
|
||||
maskImage="radial-gradient(circle at 0% 50%, transparent 30px, black 35px)"
|
||||
|
||||
color={{base: "gray.600", _dark: "gray.300"}}
|
||||
transition="background-color 0.2s"
|
||||
_hover={{
|
||||
color: {base: "blue.500", _dark: "blue.300"},
|
||||
bg: {base: "rgba(255, 255, 255, 0.9)", _dark: "rgba(40, 40, 40, 0.95)"}
|
||||
}}
|
||||
>
|
||||
<Flex onClick={() => tabsRef.current.scrollBy({left: 200, behavior: 'smooth'})}>
|
||||
{/* Shifted slightly right to optically center it in the crescent mass */}
|
||||
<ChevronRight size={18} style={{ marginRight: "-30px" }}/>
|
||||
</Flex>
|
||||
)}
|
||||
|
||||
</Box>
|
||||
|
||||
{/* THE WIDGET OPTIONS W/IN EACH CATEGORY */}
|
||||
{categories.map(cat => (
|
||||
<Tabs.Content key={cat} value={cat} p={6}>
|
||||
<Grid templateColumns="repeat(auto-fill, minmax(300px, 1fr))" gap={4}>
|
||||
@@ -344,7 +246,7 @@ export function SettingsButton() {
|
||||
h="24px"
|
||||
flexShrink={0}
|
||||
borderRadius="full"
|
||||
bg={{base: "blue.50", _dark: "whiteAlpha.200"}}
|
||||
// bg={{base: "blue.50", _dark: "whiteAlpha.200"}}
|
||||
fontWeight="black"
|
||||
fontSize="xs"
|
||||
bg='transparent'
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useRecipe, Button, Stack, Text, Flex } from "@chakra-ui/react"
|
||||
import {useSlotRecipe, Text, Flex} from "@chakra-ui/react"
|
||||
import UserAvatarMenu from "./UserAvatarMenu.jsx";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import useAuthStore from "@/store/authStore";
|
||||
import {SearchBar} from "@/components/dashboard/SearchBar.jsx";
|
||||
|
||||
@@ -9,10 +8,10 @@ import {SearchBar} from "@/components/dashboard/SearchBar.jsx";
|
||||
|
||||
// Accept a 'user' prop now, fallback to placeholder if empty
|
||||
export default function Header() {
|
||||
const recipe = useRecipe({ key: "header" });
|
||||
const recipe = useSlotRecipe({key: "header"});
|
||||
const styles = recipe();
|
||||
|
||||
const { user } = useAuthStore();
|
||||
const {user} = useAuthStore();
|
||||
console.log(user);
|
||||
const displayName = user ? (user.firstName || user.username) : "Loading...";
|
||||
const avatarname = user ? (user.fullName || user.username) : "Loading...";
|
||||
@@ -20,11 +19,14 @@ export default function Header() {
|
||||
const displayEmail = user?.email || "LDAP User";
|
||||
|
||||
return (
|
||||
<Flex css={styles} >
|
||||
<SearchBar placeholder="Enter a volcano to search" size="sm" width="410px" />
|
||||
<Flex css={styles.root}>
|
||||
<Flex css={styles.search_bar}>
|
||||
<SearchBar placeholder="Enter a volcano to search"/>
|
||||
</Flex>
|
||||
|
||||
{/* User Profile Section */}
|
||||
<Flex align="center" gap={3} pr={6}>
|
||||
<Text fontWeight="bold" textStyle="md" >{displayName}</Text>
|
||||
<Flex css={styles.user_info}>
|
||||
<Text>{displayName}</Text>
|
||||
<UserAvatarMenu
|
||||
name={avatarname}
|
||||
// avatar={user.avatar}
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import {useSlotRecipe, Box, Button, IconButton} from "@chakra-ui/react";
|
||||
import {Mountain, House, Earth, MapPin, ShieldUser, PanelLeftClose, PanelLeftOpen} from 'lucide-react';
|
||||
import {useSlotRecipe, Box, Button, IconButton, Text, Flex} from "@chakra-ui/react";
|
||||
import {ColorModeButton} from "@/components/ui/color-mode.jsx";
|
||||
import {useState} from "react";
|
||||
import {NavLink} from "react-router-dom";
|
||||
import Tooltip from "../ui/Tooltip.jsx";
|
||||
import {Mountain, House, Earth, MapPin, ShieldUser, Menu, PanelLeftClose, PanelLeftOpen} from 'lucide-react';
|
||||
import {useState} from "react";
|
||||
|
||||
const SIDEBAR_DEFAULT_BUTTONS = [
|
||||
{icon: House, name: "Home", url: "/home"},
|
||||
@@ -14,40 +13,28 @@ const SIDEBAR_DEFAULT_BUTTONS = [
|
||||
];
|
||||
|
||||
export default function Sidebar() {
|
||||
|
||||
const [isOpen, setIsOpen] = useState(true);
|
||||
|
||||
const recipe = useSlotRecipe({key: "sidebar"});
|
||||
const styles = recipe({state: isOpen ? "open" : "closed"});
|
||||
|
||||
// TODO we will need to call buttons here by authorized user, for now we update the visible buttons as simply the default buttons
|
||||
const visibleButtons = SIDEBAR_DEFAULT_BUTTONS;
|
||||
const visibleButtons = SIDEBAR_DEFAULT_BUTTONS; // TODO: call btns here according to users authorization
|
||||
|
||||
const toggleSidebar = () => setIsOpen((prev) => !prev);
|
||||
|
||||
return (
|
||||
<Box css={styles.root}>
|
||||
{/* Home Link Logo */}
|
||||
<Button
|
||||
as={NavLink}
|
||||
to="/home"
|
||||
css={styles.logo}
|
||||
variant="plain"
|
||||
>
|
||||
{isOpen ? "🌋 VDAP" : "🌋"}
|
||||
{/* Logo Navigates to Home Page */}
|
||||
<Button as={NavLink} to="/home" variant="plain" css={styles.logo}>
|
||||
<Flex>
|
||||
<Text>🌋</Text>
|
||||
<Text css={styles.logo_text}>VDAP</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
|
||||
|
||||
{/* Navigation Buttons */}
|
||||
{visibleButtons.map((button) => {
|
||||
const Icon = button.icon;
|
||||
return (
|
||||
<Button
|
||||
as={NavLink}
|
||||
to={button.url}
|
||||
css={styles.buttons}
|
||||
>
|
||||
{/* Navigation buttons are [icon text] */}
|
||||
<Button as={NavLink} to={button.url} css={styles.buttons}> {/* Navigation buttons are [icon text] */}
|
||||
<Icon/>
|
||||
<Box as="span" css={styles.button_text}>
|
||||
{button.name}
|
||||
@@ -55,21 +42,16 @@ export default function Sidebar() {
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
<Box css={styles.footer}>
|
||||
{/* Menu Trigger */}
|
||||
<IconButton
|
||||
aria-label="Toggle Sidebar"
|
||||
variant="plain"
|
||||
size="md"
|
||||
onClick={toggleSidebar}
|
||||
css={styles.collapse_button}
|
||||
>
|
||||
|
||||
{/* Collapse Sidebar and Theme Footer Buttons */}
|
||||
<Flex css={styles.footer}>
|
||||
<IconButton aria-label="Toggle Sidebar" variant="plain" onClick={toggleSidebar} css={styles.collapse_button}>
|
||||
{isOpen ? <PanelLeftClose /> : <PanelLeftOpen />}
|
||||
</IconButton>
|
||||
|
||||
{/* Theme Toggler */}
|
||||
<ColorModeButton _hover={{ bg: "transparent" }} />
|
||||
</Box>
|
||||
<Flex css={styles.color_mode_button}>
|
||||
<ColorModeButton />
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
:root {
|
||||
font-family: Georgia, 'Times New Roman', Times, serif;
|
||||
/*font-family: Georgia, 'Times New Roman', Times, serif;*/
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import {HStack, Flex, Box, useRecipe} from "@chakra-ui/react";
|
||||
import {HStack, Flex, Box, useRecipe, useSlotRecipe} from "@chakra-ui/react";
|
||||
import {NavLink, Outlet, useLocation} from "react-router-dom";
|
||||
import {SearchBar} from "../../components/dashboard/SearchBar.jsx";
|
||||
import {SettingsButton} from "../../components/dashboard/SettingsButton.jsx";
|
||||
@@ -16,30 +16,23 @@ const HOME_TABS = [
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
const recipe = useRecipe({key: "glassTab"});
|
||||
const tabStyles = recipe();
|
||||
const glassTabsRecipe = useRecipe({key: "glassTab"});
|
||||
const homeRecipe = useSlotRecipe({key: "home"});
|
||||
const glassTabsStyle = glassTabsRecipe();
|
||||
const homeStyle = homeRecipe();
|
||||
|
||||
const location = useLocation();
|
||||
const isPersonalDashboard = location.pathname === "/home" || location.pathname === "/home/";
|
||||
const location= useLocation();
|
||||
const isPersonalDashboard= location.pathname === "/home" || location.pathname === "/home/";
|
||||
|
||||
return (
|
||||
<Flex direction="column" height="100%" width="100%">
|
||||
|
||||
<Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="transparent" p={5} align="center"
|
||||
justify="space-between" width="100%">
|
||||
|
||||
<Flex css={homeStyle.root}>
|
||||
<Flex as="header" css={homeStyle.header}>
|
||||
{/* TABS CONTAINER */}
|
||||
<Flex gap={2} alignItems="center">
|
||||
<Flex>
|
||||
{HOME_TABS.map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
return (
|
||||
<Box
|
||||
key={tab.name}
|
||||
as={NavLink}
|
||||
to={tab.url}
|
||||
end={tab.exact} // CRITICAL: Forces exact match so "/home" deactivates on sub-routes
|
||||
css={tabStyles}
|
||||
>
|
||||
<Box key={tab.name} as={NavLink} to={tab.url} end={tab.exact} css={glassTabsStyle}> {/* CRITICAL: 'end' prop forces exact match so "/home" deactivates on sub-routes*/}
|
||||
{/* flexShrink: 0 ensures the icon never squishes during the gooey animation */}
|
||||
<Icon size={24} style={{flexShrink: 0}}/>
|
||||
<Box as="span">{tab.name}</Box>
|
||||
@@ -49,7 +42,6 @@ export default function Home() {
|
||||
|
||||
{/* The Settings button is now inline with the tabs and only renders on the personal dashboard */}
|
||||
{isPersonalDashboard && <SettingsButton/>}
|
||||
|
||||
</Flex>
|
||||
|
||||
{/* EDIT MODE BUTTONS & CONTROLS */}
|
||||
@@ -57,10 +49,10 @@ export default function Home() {
|
||||
<HStack width="258px" justifyContent="flex-end">
|
||||
{/* Future global controls go here */}
|
||||
</HStack>
|
||||
|
||||
</Flex>
|
||||
|
||||
<Flex flex="1" overflow="auto">
|
||||
{/* TABS CONTENT */}
|
||||
<Flex css={homeStyle.body}>
|
||||
<Outlet/>
|
||||
</Flex>
|
||||
|
||||
|
||||
@@ -13,8 +13,8 @@ import {WIDGET_REGISTRY} from '@/constants/widgetRegistry.jsx';
|
||||
// React-Grid-Layout requires this wrapper to automatically calculate screen width
|
||||
const ResponsiveGridLayout = WidthProvider(Responsive);
|
||||
|
||||
export default function MyDashboard() {
|
||||
|
||||
export default function MyDashboard() {
|
||||
// ☁️ Database Connection
|
||||
const {user} = useAuthStore();
|
||||
|
||||
@@ -28,25 +28,23 @@ export default function MyDashboard() {
|
||||
// 🔒 Safety lock to prevent infinite re-renders
|
||||
const hasHydrated = useRef(false);
|
||||
|
||||
// 1. Pull the new global slot recipe
|
||||
// 1. Pull the global slot recipes
|
||||
const recipe = useSlotRecipe({key: "glassPanel"});
|
||||
const styles = recipe({ layout: "widget" });
|
||||
const popoverStyles = recipe({ layout: "popover" });
|
||||
|
||||
// 2. Populate widgets
|
||||
useEffect(() => {
|
||||
if (user?.preferences?.dashboard_layout && !hasHydrated.current) {
|
||||
const savedLayout = user.preferences.dashboard_layout;
|
||||
|
||||
// Safety check: Only inject if it's actually an array of widgets.
|
||||
// (Prevents a crash if MariaDB returns a default empty object {})
|
||||
if (Array.isArray(savedLayout)) {
|
||||
setWidgets(savedLayout);
|
||||
}
|
||||
if (Array.isArray(savedLayout)) setWidgets(savedLayout);
|
||||
hasHydrated.current = true;
|
||||
}
|
||||
}, [user, setWidgets]);
|
||||
|
||||
|
||||
// 🛠️ Format the data for RGL
|
||||
const rglLayout = widgets.map(w => ({
|
||||
i: w.id,
|
||||
@@ -54,10 +52,10 @@ export default function MyDashboard() {
|
||||
y: w.y,
|
||||
w: w.w,
|
||||
h: w.h,
|
||||
isResizable: false // 🚫 The magic lock! No resizing allowed globally.
|
||||
isResizable: false // The magic lock! No resizing allowed globally.
|
||||
}));
|
||||
|
||||
// 3. THE COMPONENT MAPPER
|
||||
// 3. The component mapper
|
||||
const renderWidget = (widget) => {
|
||||
const registryEntry = WIDGET_REGISTRY[widget.type];
|
||||
|
||||
@@ -70,28 +68,21 @@ export default function MyDashboard() {
|
||||
return (
|
||||
<>
|
||||
<Box css={styles.header}>
|
||||
<Text color="titleColor" fontWeight="semibold" fontSize="md" isTruncated>
|
||||
<Text>
|
||||
{registryEntry.name}
|
||||
</Text>
|
||||
|
||||
{/* THE SETTINGS ELLIPSIS */}
|
||||
{SettingsUI ? (
|
||||
{/* WIDGET SETTINGS BUTTON (ELLIPSES) */}
|
||||
{SettingsUI && (
|
||||
<Popover.Root positioning={{placement: "bottom-end"}}>
|
||||
<Popover.Trigger asChild>
|
||||
<IconButton
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
color="gray.400"
|
||||
borderRadius="xl"
|
||||
_hover={{color: "white", bg: "gray.700"}}
|
||||
aria-label="Widget Settings"
|
||||
>
|
||||
<IconButton size="xs" variant="ghost" aria-label="Widget Settings">
|
||||
<MoreVertical size={16}/>
|
||||
</IconButton>
|
||||
</Popover.Trigger>
|
||||
|
||||
{/* NEW: The Positioner lifts the content out of the Flexbox flow */}
|
||||
<Popover.Positioner zIndex={10}>
|
||||
<Popover.Positioner zIndex={1}>
|
||||
<Popover.Content css={popoverStyles.root}>
|
||||
<Suspense fallback={<Spinner size="sm"/>}>
|
||||
<SettingsUI
|
||||
@@ -102,8 +93,6 @@ export default function MyDashboard() {
|
||||
</Popover.Content>
|
||||
</Popover.Positioner>
|
||||
</Popover.Root>
|
||||
) : (
|
||||
<Box w="20px" h="20px"/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
@@ -133,30 +122,28 @@ export default function MyDashboard() {
|
||||
rowHeight={30}
|
||||
isDraggable={isEditing} // Only allows dragging when Settings tools toggle this
|
||||
isResizable={false} // Double lock-down
|
||||
onLayoutChange={(newLayout) => updateLayoutPositions(newLayout)} // Fires when user drops a widget
|
||||
compactType="vertical" // Auto-packs widgets to the top
|
||||
onLayoutChange={(newLayout) => updateLayoutPositions(newLayout)} // Fires when user drops a widget
|
||||
>
|
||||
{/* 3. 🎨 Paint the Widgets */}
|
||||
{/* 🎨 Paint the Widgets */}
|
||||
{widgets.map(widget => (
|
||||
<Box
|
||||
key={widget.id}
|
||||
css={styles.root}
|
||||
// 3. Grid-specific state overrides remain inline
|
||||
// Grid-specific state overrides remain inline
|
||||
boxShadow={isEditing ? "outline" : styles.root.boxShadow}
|
||||
borderStyle={isEditing ? "dashed" : "solid"}
|
||||
borderWidth={isEditing ? "2px" : "1px"}
|
||||
borderColor={isEditing ? "orange.300" : styles.root.borderColor}
|
||||
cursor={isEditing ? "grab" : "default"}
|
||||
position="relative" // 3. REQUIRED so the absolute button stays inside this box
|
||||
position="relative" // REQUIRED so the absolute button stays inside this box
|
||||
>
|
||||
{/* 4. THE DELETE BUTTON */}
|
||||
{/* THE DELETE BUTTON */}
|
||||
{isEditing && (
|
||||
<IconButton
|
||||
aria-label="Remove widget"
|
||||
position="absolute"
|
||||
top={2}
|
||||
right={2}
|
||||
size="xs"
|
||||
bg="white"
|
||||
color="black"
|
||||
border="1px solid"
|
||||
@@ -164,6 +151,8 @@ export default function MyDashboard() {
|
||||
borderColor="gray.200"
|
||||
_hover={{bg: "red.50", color: "red.500", borderColor: "red.200"}}
|
||||
zIndex={2}
|
||||
aria-label="Remove widget"
|
||||
size="xs"
|
||||
onClick={() => removeWidget(widget.id)}
|
||||
onMouseDown={(e) => e.stopPropagation()} // 🚫 Stops RGL from grabbing the widget
|
||||
onTouchStart={(e) => e.stopPropagation()} // 🚫 Same protection for mobile touches
|
||||
@@ -172,7 +161,7 @@ export default function MyDashboard() {
|
||||
</IconButton>
|
||||
)}
|
||||
|
||||
{/* 4. SUSPENSE BOUNDARY wrapping the render function */}
|
||||
{/* SUSPENSE BOUNDARY wrapping the render function */}
|
||||
<Suspense fallback={
|
||||
<Flex css={styles.body} align="center" justify="center">
|
||||
<Spinner size="md" color="blue.400" thickness="3px"/>
|
||||
|
||||
+411
-87
@@ -1,8 +1,10 @@
|
||||
import {defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecipe} from "@chakra-ui/react";
|
||||
|
||||
// RECIPES
|
||||
const headerRecipe = defineRecipe({
|
||||
// CONSOLIDATED ✔
|
||||
const headerRecipe = defineSlotRecipe({
|
||||
slots: ["root", "search_bar", "user_info"],
|
||||
base: {
|
||||
root: {
|
||||
bg: "{transparent}",
|
||||
color: "text",
|
||||
width: "100%",
|
||||
@@ -11,16 +13,40 @@ const headerRecipe = defineRecipe({
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
pl: 3,
|
||||
},
|
||||
search_bar: {
|
||||
width: "100%",
|
||||
// input element in search bar component
|
||||
"& input": {
|
||||
width: "410px",
|
||||
}
|
||||
},
|
||||
user_info: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "flex-end",
|
||||
alignItems: "center",
|
||||
gap: 3,
|
||||
pr: 6,
|
||||
|
||||
// The Text component
|
||||
"& p": {
|
||||
fontWeight: "600",
|
||||
fontSize: "md" // equivalent to 16px
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// CONSOLIDATED ✔
|
||||
const sidebarRecipe = defineSlotRecipe({
|
||||
slots: ["root", "logo", "footer", "button_text","buttons", "collapse_button"],
|
||||
slots: ["root", "logo", "logo_text", "footer", "button_text", "buttons", "collapse_button", "color_mode_button"],
|
||||
base: {
|
||||
root: {
|
||||
// 1. Semi-transparent backgrounds
|
||||
bg: {
|
||||
base: "linear-gradient(to bottom right, #99000040 20%, #FF660040 60%, #EEEE0040 100%)",
|
||||
// base: "linear-gradient(to bottom right, #99000040 20%, #FF660040 60%, #EEEE0040 100%)", // this is too pale for light mode imo
|
||||
base: "linear-gradient(to bottom right, #97282880 20%, #EB7F3160 60%, #FCAD3840 100%)", // colors from: https://colorhunt.co/palette/972828e45742eb7f31fcad38
|
||||
_dark: "linear-gradient(to bottom right, #9900003C 20%, #FF66003C 60%, #FFC0003C 100%)"
|
||||
},
|
||||
|
||||
@@ -47,7 +73,7 @@ const sidebarRecipe = defineSlotRecipe({
|
||||
justifyContent: "start",
|
||||
alignItems: "stretch",
|
||||
gap: 4,
|
||||
transition: "width 0.4s ease",
|
||||
transition: "width 0.5s ease",
|
||||
|
||||
// CRITICAL: Adjust padding and overflow to allow the button to touch the right edge
|
||||
pl: 2, // Keep left padding
|
||||
@@ -62,7 +88,7 @@ const sidebarRecipe = defineSlotRecipe({
|
||||
bg: "transparent",
|
||||
|
||||
justifyContent: "flex-start",
|
||||
transition: "background-color 0.4s ease, color 0.4s ease",
|
||||
transition: "background-color 0.3s ease, color 0.3s ease",
|
||||
|
||||
"& svg": {
|
||||
transition: "stroke-width 0.4s ease",
|
||||
@@ -70,11 +96,13 @@ const sidebarRecipe = defineSlotRecipe({
|
||||
},
|
||||
|
||||
_hover: {
|
||||
bg: "rgba(255, 255, 255, 0.1)",
|
||||
bg: "rgba(255, 255, 255, 0.2)",
|
||||
color: "{text}",
|
||||
fontWeight: "semibold",
|
||||
"& svg": {
|
||||
strokeWidth: "3"
|
||||
},
|
||||
"& span": {
|
||||
fontWeight: "700",
|
||||
}
|
||||
},
|
||||
|
||||
@@ -94,9 +122,11 @@ const sidebarRecipe = defineSlotRecipe({
|
||||
_hover: {
|
||||
bg: "{MainBackground}",
|
||||
color: "{textInverted}",
|
||||
fontWeight: "normal",
|
||||
"& svg": {
|
||||
strokeWidth: "2" // Keeps the active icon at normal thickness on hover
|
||||
},
|
||||
"& span": {
|
||||
fontWeight: "500",
|
||||
}
|
||||
},
|
||||
|
||||
@@ -131,98 +161,198 @@ const sidebarRecipe = defineSlotRecipe({
|
||||
},
|
||||
logo: {
|
||||
width: "100%",
|
||||
height: "auto",
|
||||
overflow: "hidden",
|
||||
justifyContent: "flex-start",
|
||||
ml: 2,
|
||||
textStyle: "4xl",
|
||||
fontWeight: "bold",
|
||||
overflow: "hidden",
|
||||
px: 0,
|
||||
},
|
||||
logo_text: {
|
||||
transition: "opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease",
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "clip",
|
||||
},
|
||||
footer: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
mt: "auto",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
pb: 4,
|
||||
pl: 2,
|
||||
pr: 2,
|
||||
transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease"
|
||||
},
|
||||
button_text: {
|
||||
transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
|
||||
whiteSpace: "nowrap"
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "clip",
|
||||
fontWeight: "500",
|
||||
},
|
||||
collapse_button: {
|
||||
"& svg": { flexShrink: "0" },
|
||||
"& svg": {flexShrink: "0"},
|
||||
},
|
||||
color_mode_button: {
|
||||
"& button": {
|
||||
_hover: {
|
||||
bg: "transparent",
|
||||
},
|
||||
}
|
||||
}
|
||||
// opened_theme_button: {
|
||||
// width: "100%",
|
||||
// align: "center",
|
||||
// justifyContent: "right",
|
||||
// mr: 6,
|
||||
// // "& button": {
|
||||
// // alignSelf: "center",
|
||||
// // transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
|
||||
// // _hover: {
|
||||
// // bg: "transparent",
|
||||
// // }
|
||||
// // }
|
||||
// },
|
||||
// closed_theme_button: {
|
||||
// // ml: 0.9,
|
||||
// // "& button": {
|
||||
// // transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
|
||||
// // _hover: {
|
||||
// // bg: "transparent",
|
||||
// // }
|
||||
// // }
|
||||
// },
|
||||
},
|
||||
variants: {
|
||||
state: {
|
||||
open: {
|
||||
root: { width: "190px" },
|
||||
logo: { justifyContent: "flex-start", ml: 2, textStyle: "4xl" },
|
||||
footer: { gap: 16, flexDirection: "row" },
|
||||
root: {width: "190px"},
|
||||
button_text: {ml: 3, opacity: 1, visibility: "visible"},
|
||||
logo_text: {ml: 3, opacity: 1, visibility: "visible", transition: "opacity 0.5s ease, visibility 0.5s ease, margin 0.5s ease"},
|
||||
color_mode_button: {
|
||||
"& button": {
|
||||
position: "static",
|
||||
},
|
||||
// the css below is equivalent to chakra's 'truncate' prop
|
||||
// it makes sure the icon doesn't jump out of the bounds of the sidebar while it's transitioning from closed to open
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "clip",
|
||||
},
|
||||
},
|
||||
closed: {
|
||||
root: { width: "71px" },
|
||||
logo: { justifyContent: "center", ml: -1, textStyle: "3xl" },
|
||||
footer: { gap: 2, flexDirection: "column-reverse" },
|
||||
button_text: {ml: 0, opacity: 0, visibility: "hidden"},
|
||||
root: {width: "71px"},
|
||||
button_text: {opacity: 0, visibility: "hidden"},
|
||||
logo_text: {opacity: 0, visibility: "hidden", transition: "opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease"},
|
||||
color_mode_button: {"& button": {position: "relative", bottom: "35px", right: "37px",}
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// CONSOLIDATED ✔
|
||||
const dashboardRecipe = defineRecipe({
|
||||
base: {
|
||||
bg: "{MainBackground}"
|
||||
}
|
||||
});
|
||||
height: "100vh",
|
||||
width: "100vw",
|
||||
bg: "{MainBackground}",
|
||||
|
||||
const canvasRecipe = defineRecipe({
|
||||
base: {
|
||||
bg: "{transparent}",
|
||||
zIndex: "-1",
|
||||
color: "{text}"
|
||||
}
|
||||
});
|
||||
|
||||
const widgetRecipe = defineSlotRecipe({
|
||||
slots: ["root", "header", "canvas"],
|
||||
base: {
|
||||
root: {
|
||||
flexDirection: "column",
|
||||
gap: "1",
|
||||
position: "relative",
|
||||
bg: "base100",
|
||||
borderRadius: "md",
|
||||
p: "1",
|
||||
paddingBottom: "2",
|
||||
border: "1px solid",
|
||||
borderColor: "{base300}",
|
||||
textAlign: "center",
|
||||
height: "100%",
|
||||
position: "fixed"
|
||||
},
|
||||
header: {
|
||||
flexShrink: "0",
|
||||
bg: "{base300}",
|
||||
color: "{text}",
|
||||
cursor: "move",
|
||||
borderRadius: "sm",
|
||||
whiteSpace: "nowrap",
|
||||
textAlign: "left",
|
||||
pl: "2"
|
||||
},
|
||||
canvas: {
|
||||
flex: "1 1 auto",
|
||||
bg: "transparent",
|
||||
color: "{text}",
|
||||
cursor: "default",
|
||||
borderRadius: "md",
|
||||
// selects the third div in the grid layout (the canvas)
|
||||
"& > div:nth-of-type(3)": {
|
||||
width: "100%",
|
||||
overflow: "auto",
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// CONSOLIDATED ✔
|
||||
const homeRecipe = defineSlotRecipe({
|
||||
slots: ["root", "header", "body"],
|
||||
base: {
|
||||
root: {
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
},
|
||||
header: {
|
||||
// Flex contianer as a header that contains all the tabs
|
||||
width: "100%",
|
||||
align: "center",
|
||||
justify: "space-between",
|
||||
top: "0",
|
||||
p: 5,
|
||||
position: "sticky",
|
||||
zIndex: "dropdown",
|
||||
bg: "transparent",
|
||||
|
||||
// THE TABS
|
||||
// Flex container renders as div for all the buttons within the header
|
||||
"& > div": {
|
||||
alignItems: "center",
|
||||
gap: 2,
|
||||
|
||||
// icon in each tab button
|
||||
"& svg": {
|
||||
// TODO: bring over svg styling
|
||||
}
|
||||
}
|
||||
},
|
||||
body: {
|
||||
flex: 1,
|
||||
overflow: "auto",
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
// const canvasRecipe = defineRecipe({
|
||||
// base: {
|
||||
// bg: "{transparent}",
|
||||
// zIndex: "-1",
|
||||
// color: "{text}"
|
||||
// }
|
||||
// });
|
||||
|
||||
// const widgetRecipe = defineSlotRecipe({
|
||||
// slots: ["root", "header", "canvas"],
|
||||
// base: {
|
||||
// root: {
|
||||
// flexDirection: "column",
|
||||
// gap: "1",
|
||||
// position: "relative",
|
||||
// bg: "base100",
|
||||
// borderRadius: "md",
|
||||
// p: "1",
|
||||
// paddingBottom: "2",
|
||||
// border: "1px solid",
|
||||
// borderColor: "{base300}",
|
||||
// textAlign: "center",
|
||||
// height: "100%",
|
||||
// // position: "fixed"
|
||||
// },
|
||||
// header: {
|
||||
// flexShrink: "0",
|
||||
// bg: "{base300}",
|
||||
// color: "{text}",
|
||||
// cursor: "move",
|
||||
// borderRadius: "sm",
|
||||
// whiteSpace: "nowrap",
|
||||
// textAlign: "left",
|
||||
// pl: "2"
|
||||
// },
|
||||
// canvas: {
|
||||
// flex: "1 1 auto",
|
||||
// bg: "transparent",
|
||||
// color: "{text}",
|
||||
// cursor: "default",
|
||||
// borderRadius: "md",
|
||||
// overflow: "auto",
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
// USED IN COMPONENTS:
|
||||
// * Settings Button
|
||||
// * My Dashboard
|
||||
const glassPanelRecipe = defineSlotRecipe({
|
||||
slots: ["root", "header", "body"],
|
||||
|
||||
@@ -246,26 +376,216 @@ const glassPanelRecipe = defineSlotRecipe({
|
||||
variants: {
|
||||
layout: {
|
||||
widget: {
|
||||
root: {width: "100%", height: "100%", borderRadius: "3xl"},
|
||||
header: {display: "flex", justifyContent: "space-between", alignItems: "center", px: 3, pt: 2, pb: 0},
|
||||
body: {flex: "1", overflow: "hidden", position: "relative", px: 1, pb: 1, pt: 0}
|
||||
root: {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
borderRadius: "3xl",
|
||||
},
|
||||
header: {
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
px: 3,
|
||||
pt: 2,
|
||||
pb: 0,
|
||||
|
||||
"& > p": {
|
||||
color: "titleColor",
|
||||
fontWeight: "500",
|
||||
fontSize: "16px",
|
||||
|
||||
// the following three specifications are equivalent to Chakra's 'truncate' prop
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "clip",
|
||||
},
|
||||
|
||||
"& > button": {
|
||||
borderRadius: "xl",
|
||||
|
||||
_hover: {
|
||||
color: "white",
|
||||
bg: "gray.500",
|
||||
},
|
||||
}
|
||||
},
|
||||
body: {
|
||||
flex: "1",
|
||||
overflow: "hidden",
|
||||
position: "relative",
|
||||
px: 1,
|
||||
pb: 1,
|
||||
pt: 0
|
||||
}
|
||||
},
|
||||
dropdown: {
|
||||
root: {borderRadius: "xl", p: 1}
|
||||
root: {
|
||||
borderRadius: "xl",
|
||||
p: 1
|
||||
}
|
||||
// (Header and body slots are ignored here because dropdowns don't use them)
|
||||
},
|
||||
popover: {
|
||||
root: {
|
||||
borderRadius: "2xl",
|
||||
p: 4,
|
||||
p: 0,
|
||||
boxShadow: "xl",
|
||||
minW: "240px",
|
||||
maxW: "60%",
|
||||
minH: "80%",
|
||||
overflow: "hidden",
|
||||
// OVERRIDES: Make the background 85-90% opaque instead of 40%
|
||||
bg: { base: "rgba(255, 255, 255, 0.75)", _dark: "rgba(20, 22, 25, 0.8)" },
|
||||
bg: {
|
||||
base: "rgba(255, 255, 255, 0.75)",
|
||||
_dark: "rgba(20, 22, 25, 0.8)"
|
||||
},
|
||||
|
||||
// OVERRIDES: Increase the blur just to smooth out any stubborn gridlines
|
||||
backdropFilter: "blur(15px)",
|
||||
WebkitBackdropFilter: "blur(15px)",
|
||||
|
||||
|
||||
// IMPORTANT: everything below is specific to the widget menu found in the settingsButton component
|
||||
// dialog header
|
||||
"& > div.chakra-dialog__header": {
|
||||
bg: "transparent",
|
||||
color: {
|
||||
base: "gray.800",
|
||||
_dark: "white"
|
||||
},
|
||||
py: 4,
|
||||
borderColor: {
|
||||
base: "gray.200",
|
||||
_dark: "whiteAlpha.200"
|
||||
},
|
||||
|
||||
// title
|
||||
"& h2": {
|
||||
fontSize: "xl",
|
||||
fontWeight: "bold"
|
||||
},
|
||||
},
|
||||
|
||||
// dialog body
|
||||
"& > div.chakra-dialog__body": {
|
||||
p: 0,
|
||||
|
||||
// box container of the widget category menu
|
||||
"& div.chakra-tabs__root > div:first-child": {
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
maxW: "100%",
|
||||
mx: 5,
|
||||
mt: 4,
|
||||
mb: 6
|
||||
},
|
||||
|
||||
// the horizontal widget categories menu
|
||||
"& div.chakra-tabs__list": {
|
||||
bg: {
|
||||
base: "rgba(0, 0, 0, 0.04)",
|
||||
_dark: "rgba(255, 255, 255, 0.05)"
|
||||
},
|
||||
p: 1,
|
||||
borderRadius: "full",
|
||||
display: "flex",
|
||||
flexWrap: "nowrap",
|
||||
overflowX: "auto",
|
||||
maxW: "100%",
|
||||
border: "1px solid",
|
||||
borderColor: {
|
||||
base: "blackAlpha.50",
|
||||
_dark: "whiteAlpha.100"
|
||||
},
|
||||
scrollbarWidth: "none",
|
||||
"&::-webkit-scrollbar": {display: "none"},
|
||||
|
||||
// the pill shaped menu options
|
||||
"& button.chakra-tabs__trigger": {
|
||||
px: 5,
|
||||
py: 2,
|
||||
borderRadius: "full",
|
||||
whiteSpace: "nowrap",
|
||||
flexShrink: 0,
|
||||
color: {
|
||||
base: "gray.500",
|
||||
_dark: "gray.400"
|
||||
},
|
||||
fontWeight: "medium",
|
||||
transition: "background-color 0.2s, color 0.2s, box-shadow 0.2s",
|
||||
_hover: {
|
||||
color: {
|
||||
base: "gray.800",
|
||||
_dark: "gray.200"
|
||||
},
|
||||
},
|
||||
_selected: {
|
||||
bg: {
|
||||
base: "white",
|
||||
_dark: "rgba(255, 255, 255, 0.12)"
|
||||
},
|
||||
color: {
|
||||
base: "blue.600",
|
||||
_dark: "blue.200"
|
||||
},
|
||||
boxShadow: "sm",
|
||||
fontWeight: "bold",
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// base styling applied to both chevron navigators
|
||||
"& div.chakra-tabs__root > div:first-child div:has(svg)": {
|
||||
position: "absolute",
|
||||
top: "0",
|
||||
bottom: "0",
|
||||
w: "50px",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: 2,
|
||||
cursor: "pointer",
|
||||
bg: {
|
||||
base: "rgba(255, 255, 255, 0.7)",
|
||||
_dark: "rgba(30, 30, 30, 0.8)"
|
||||
},
|
||||
color: {
|
||||
base: "gray.600",
|
||||
_dark: "gray.300"
|
||||
},
|
||||
backdropFilter: "blur(1px)",
|
||||
transition: "background-color 0.2s",
|
||||
|
||||
_hover: {
|
||||
color: {
|
||||
base: "blue.500",
|
||||
_dark: "blue.300"
|
||||
},
|
||||
bg: {
|
||||
base: "rgba(255, 255, 255, 0.9)",
|
||||
_dark: "rgba(40, 40, 40, 0.95)"
|
||||
},
|
||||
},
|
||||
|
||||
"&:has(.lucide-chevron-left)": {
|
||||
left: 0,
|
||||
borderTopLeftRadius: "full",
|
||||
borderBottomLeftRadius: "full",
|
||||
// Bites a transparent circle out of the flat right side!
|
||||
WebkitMaskImage: "radial-gradient(circle at 100% 50%, transparent 30px, black 19px)",
|
||||
maskImage: "radial-gradient(circle at 100% 50%, transparent 30px, black 35px)",
|
||||
},
|
||||
|
||||
"&:has(.lucide-chevron-right)": {
|
||||
right: 0,
|
||||
borderTopRightRadius: "full",
|
||||
borderBottomRightRadius: "full",
|
||||
// THE MAGIC: Bites a transparent circle out of the flat left side!
|
||||
WebkitMaskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 19px)",
|
||||
maskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 35px)",
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -305,7 +625,7 @@ const glassTabRecipe = defineRecipe({
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
textDecoration: "none",
|
||||
fontWeight: "bold",
|
||||
fontWeight: "500",
|
||||
color: "fg.muted",
|
||||
|
||||
// --- THE GLASS EFFECT (Inactive) ---
|
||||
@@ -423,16 +743,17 @@ const config = defineConfig({
|
||||
theme: {
|
||||
semanticTokens: {
|
||||
colors: {
|
||||
base100: {value: {base: "#f6f9faff", _dark: "#1617199e"}},
|
||||
base200: {value: {base: "#e6ecf1ff", _dark: "#242424"}},
|
||||
base300: {value: {base: "#d3dae4ff", _dark: "#0a0b0bff"}},
|
||||
primary: {value: {base: "#2B98F8", _dark: "#2B98F8"}},
|
||||
primaryLt: {value: {base: "#98cdffff", _dark: "#98cdffff"}},
|
||||
secondaryBG: {value: {base: "#EDF1F1", _dark: "#121212"}},
|
||||
border: {value: {base: "#000000", _dark: "#cbcbcb84"}},
|
||||
// base100: {value: {base: "#f6f9faff", _dark: "#1617199e"}},
|
||||
// base200: {value: {base: "#e6ecf1ff", _dark: "#242424"}},
|
||||
// base300: {value: {base: "#d3dae4ff", _dark: "#0a0b0bff"}},
|
||||
// primary: {value: {base: "#2B98F8", _dark: "#2B98F8"}},
|
||||
// primaryLt: {value: {base: "#98cdffff", _dark: "#98cdffff"}},
|
||||
// secondaryBG: {value: {base: "#EDF1F1", _dark: "#121212"}},
|
||||
// border: {value: {base: "#000000", _dark: "#cbcbcb84"}},
|
||||
text: {value: {base: "#000000", _dark: "#FFFFFF"}},
|
||||
textInverted: {value: {base: "#000000", _dark: "#FFFFFF"}},
|
||||
icon: {value: {base: "#000000", _dark: "#FFFFFF"}},
|
||||
// icon: {value: {base: "#000000", _dark: "#FFFFFF"}},
|
||||
|
||||
gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "rgba(255, 255, 255, 0.1)"}},
|
||||
MainBackground: {value: {base: "#F9F9F9", _dark: "#141414"}},
|
||||
titleColor: {value: {base: "gray.800", _dark: "#FFFFFF"}},
|
||||
@@ -446,17 +767,20 @@ const config = defineConfig({
|
||||
},
|
||||
},
|
||||
recipes: {
|
||||
header: headerRecipe,
|
||||
dashboard: dashboardRecipe,
|
||||
canvas: canvasRecipe,
|
||||
// canvas: canvasRecipe,
|
||||
glassTab: glassTabRecipe
|
||||
},
|
||||
slotRecipes: {
|
||||
header: headerRecipe,
|
||||
sidebar: sidebarRecipe,
|
||||
widget: widgetRecipe,
|
||||
// widget: widgetRecipe,
|
||||
glassPanel: glassPanelRecipe,
|
||||
home: homeRecipe,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
// Define semantic tokens and export recipes
|
||||
export const system = createSystem(defaultConfig, config);
|
||||
Reference in New Issue
Block a user