wip moved the category-menu css in the widget library to the themes file
This commit is contained in:
@@ -97,25 +97,15 @@ export function SettingsButton() {
|
||||
// 📝 EDIT MODE: The 3-Pill Layout
|
||||
<HStack css={settingsButtonStyles.root}>
|
||||
{/* 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}}/>
|
||||
@@ -123,12 +113,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}}/>
|
||||
@@ -193,35 +178,11 @@ export function SettingsButton() {
|
||||
<Dialog.Body>
|
||||
<Tabs.Root defaultValue={categories[0]} variant="unstyled">
|
||||
{/* HORIZONTAL SCROLLABLE MENU OF WIDGET CATEGORIES */}
|
||||
<Box position="relative" display="flex" maxWidth="100%" mx={5} mt={4} mb={6}>
|
||||
<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>
|
||||
)}
|
||||
|
||||
@@ -239,30 +200,7 @@ export function SettingsButton() {
|
||||
|
||||
{/* 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>
|
||||
@@ -310,7 +248,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'
|
||||
|
||||
+65
-49
@@ -288,22 +288,6 @@ const homeRecipe = defineSlotRecipe({
|
||||
},
|
||||
})
|
||||
|
||||
const settingsButtonRecipe = defineSlotRecipe({
|
||||
slots: ["root", "dialog"],
|
||||
base: {
|
||||
root: {
|
||||
gap: 2,
|
||||
|
||||
"& > button": {
|
||||
|
||||
}
|
||||
},
|
||||
dialog: {
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// const canvasRecipe = defineRecipe({
|
||||
// base: {
|
||||
// bg: "{transparent}",
|
||||
@@ -486,7 +470,18 @@ const glassPanelRecipe = defineSlotRecipe({
|
||||
"& > div.chakra-dialog__body": {
|
||||
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
|
||||
"& div.chakra-tabs__list": {
|
||||
bg: {
|
||||
@@ -507,6 +502,8 @@ const glassPanelRecipe = defineSlotRecipe({
|
||||
scrollbarWidth: "none",
|
||||
"&::-webkit-scrollbar": {display: "none"},
|
||||
|
||||
|
||||
// the pill shaped menu options
|
||||
"& button.chakra-tabs__trigger": {
|
||||
px: 5,
|
||||
py: 2,
|
||||
@@ -540,37 +537,57 @@ const glassPanelRecipe = defineSlotRecipe({
|
||||
}
|
||||
},
|
||||
|
||||
// "& div.chakra-tabs__root > div:first-child div > svg": {
|
||||
// position: "absolute",
|
||||
// top: "0",
|
||||
// bottom: "0",
|
||||
// w: "50px",
|
||||
// align: "center",
|
||||
// justify: "center",
|
||||
// zIndex: 2,
|
||||
// cursor: "pointer",
|
||||
// bg: {
|
||||
// base: "rgba(255, 255, 255, 0.7)",
|
||||
// _dark: "rgba(30, 30, 30, 0.8)"
|
||||
// },
|
||||
// backdropFilter: "blur(1px)",
|
||||
//
|
||||
// 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)"
|
||||
// },
|
||||
// }
|
||||
// }
|
||||
// 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)",
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -763,7 +780,6 @@ const config = defineConfig({
|
||||
// widget: widgetRecipe,
|
||||
glassPanel: glassPanelRecipe,
|
||||
home: homeRecipe,
|
||||
settingsButton: settingsButtonRecipe,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user