chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip moved the category-menu css in the widget library to the themes file

Browse Source
This commit is contained in:
vkuchenik
2026-09-14 08:58:09 -07:00
parent 0c8820d109
commit 10cbedb6ef
2 changed files with 74 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/dashboard/SettingsButton.jsx
+9 -71
View File
@@ -97,25 +97,15 @@ export function SettingsButton() {
// 📝 EDIT MODE: The 3-Pill Layout // 📝 EDIT MODE: The 3-Pill Layout
<HStack css={settingsButtonStyles.root}> <HStack css={settingsButtonStyles.root}>
{/* 1. The Add Widget Button */} {/* 1. The Add Widget Button */}
<Box <Box as="button" css={tabStyles} data-state="open" onClick={() => setIsLibraryOpen(true)}
as="button" color={{base: "blue.500", _dark: "blue.300"}} _hover={{bg: "rgba(66, 153, 225, 0.1)"}}
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}}/> <LayoutGrid size={20} style={{flexShrink: 0}}/>
<Box as="span">Widget Library</Box> <Box as="span">Widget Library</Box>
</Box> </Box>
{/* 2. The Save Button */} {/* 2. The Save Button */}
<Box <Box as="button" css={tabStyles} data-state="open" onClick={saveEdit} color={{base: "green.600", _dark: "green.400"}}
as="button"
css={tabStyles}
data-state="open"
onClick={saveEdit}
color={{base: "green.600", _dark: "green.400"}}
_hover={{bg: "rgba(72, 187, 120, 0.1)"}} _hover={{bg: "rgba(72, 187, 120, 0.1)"}}
> >
<Save size={20} style={{flexShrink: 0}}/> <Save size={20} style={{flexShrink: 0}}/>
@@ -123,12 +113,7 @@ export function SettingsButton() {
</Box> </Box>
{/* 3. The Discard Button */} {/* 3. The Discard Button */}
<Box <Box as="button" css={tabStyles} data-state="open" onClick={cancelEdit} color={{base: "red.500", _dark: "red.400"}}
as="button"
css={tabStyles}
data-state="open"
onClick={cancelEdit}
color={{base: "red.500", _dark: "red.400"}}
_hover={{bg: "rgba(245, 101, 101, 0.1)"}} _hover={{bg: "rgba(245, 101, 101, 0.1)"}}
> >
<X size={20} style={{flexShrink: 0}}/> <X size={20} style={{flexShrink: 0}}/>
@@ -193,35 +178,11 @@ export function SettingsButton() {
<Dialog.Body> <Dialog.Body>
<Tabs.Root defaultValue={categories[0]} variant="unstyled"> <Tabs.Root defaultValue={categories[0]} variant="unstyled">
{/* HORIZONTAL SCROLLABLE MENU OF WIDGET CATEGORIES */} {/* HORIZONTAL SCROLLABLE MENU OF WIDGET CATEGORIES */}
<Box position="relative" display="flex" maxWidth="100%" mx={5} mt={4} mb={6}> <Box>
{/* left glass crescent */} {/* left glass crescent */}
{canScrollLeft && ( {canScrollLeft && (
<Flex <Flex onClick={() => tabsRef.current.scrollBy({left: -200, behavior: 'smooth'})}>
position="absolute" <ChevronLeft size={18} style={{ marginLeft: "-30px" }}/> {/* Shifted slightly left to optically center it in the crescent mass */}
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> </Flex>
)} )}
@@ -239,30 +200,7 @@ export function SettingsButton() {
{/* right glass crescent */} {/* right glass crescent */}
{canScrollRight && ( {canScrollRight && (
<Flex <Flex onClick={() => tabsRef.current.scrollBy({left: 200, behavior: 'smooth'})}>
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)"}
}}
>
{/* Shifted slightly right to optically center it in the crescent mass */} {/* Shifted slightly right to optically center it in the crescent mass */}
<ChevronRight size={18} style={{ marginRight: "-30px" }}/> <ChevronRight size={18} style={{ marginRight: "-30px" }}/>
</Flex> </Flex>
@@ -310,7 +248,7 @@ export function SettingsButton() {
h="24px" h="24px"
flexShrink={0} flexShrink={0}
borderRadius="full" borderRadius="full"
bg={{base: "blue.50", _dark: "whiteAlpha.200"}} // bg={{base: "blue.50", _dark: "whiteAlpha.200"}}
fontWeight="black" fontWeight="black"
fontSize="xs" fontSize="xs"
bg='transparent' bg='transparent'
client/src/theme.js
+65 -49
View File
@@ -288,22 +288,6 @@ const homeRecipe = defineSlotRecipe({
}, },
}) })
const settingsButtonRecipe = defineSlotRecipe({
slots: ["root", "dialog"],
base: {
root: {
gap: 2,
"& > button": {
}
},
dialog: {
}
}
})
// const canvasRecipe = defineRecipe({ // const canvasRecipe = defineRecipe({
// base: { // base: {
// bg: "{transparent}", // bg: "{transparent}",
@@ -486,7 +470,18 @@ const glassPanelRecipe = defineSlotRecipe({
"& > div.chakra-dialog__body": { "& > div.chakra-dialog__body": {
p: 0, p: 0,
// everything below is specific to the widget menu found in the settings button component
// IMPORTANT: everything below is specific to the widget menu found in the settingsButton component
// 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 // the horizontal widget categories menu
"& div.chakra-tabs__list": { "& div.chakra-tabs__list": {
bg: { bg: {
@@ -507,6 +502,8 @@ const glassPanelRecipe = defineSlotRecipe({
scrollbarWidth: "none", scrollbarWidth: "none",
"&::-webkit-scrollbar": {display: "none"}, "&::-webkit-scrollbar": {display: "none"},
// the pill shaped menu options
"& button.chakra-tabs__trigger": { "& button.chakra-tabs__trigger": {
px: 5, px: 5,
py: 2, py: 2,
@@ -540,37 +537,57 @@ const glassPanelRecipe = defineSlotRecipe({
} }
}, },
// "& div.chakra-tabs__root > div:first-child div > svg": { // base styling applied to both chevron navigators
// position: "absolute", "& div.chakra-tabs__root > div:first-child div:has(svg)": {
// top: "0", position: "absolute",
// bottom: "0", top: "0",
// w: "50px", bottom: "0",
// align: "center", w: "50px",
// justify: "center", alignItems: "center",
// zIndex: 2, justifyContent: "center",
// cursor: "pointer", zIndex: 2,
// bg: { cursor: "pointer",
// base: "rgba(255, 255, 255, 0.7)", bg: {
// _dark: "rgba(30, 30, 30, 0.8)" base: "rgba(255, 255, 255, 0.7)",
// }, _dark: "rgba(30, 30, 30, 0.8)"
// backdropFilter: "blur(1px)", },
// color: {
// color: { base: "gray.600",
// base: "gray.600", _dark: "gray.300"
// _dark: "gray.300" },
// }, backdropFilter: "blur(1px)",
// transition: "background-color 0.2s", transition: "background-color 0.2s",
// _hover: {
// color: { _hover: {
// base: "blue.500", color: {
// _dark: "blue.300" base: "blue.500",
// }, _dark: "blue.300"
// bg: { },
// base: "rgba(255, 255, 255, 0.9)", bg: {
// _dark: "rgba(40, 40, 40, 0.95)" 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)",
}
}
} }
} }
} }
@@ -763,7 +780,6 @@ const config = defineConfig({
// widget: widgetRecipe, // widget: widgetRecipe,
glassPanel: glassPanelRecipe, glassPanel: glassPanelRecipe,
home: homeRecipe, home: homeRecipe,
settingsButton: settingsButtonRecipe,
}, },
}, },
}); });