Refactor continued of UI. changes to theme to make baselines
This commit is contained in:
@@ -60,50 +60,82 @@ export function SettingsButton() {
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* THE STATIC DROPDOWN MENU */}
|
||||
<Menu.Root positioning={{getAnchorRect}}>
|
||||
<Menu.Trigger asChild>
|
||||
{isEditing ? (
|
||||
// 📝 EDIT MODE: The 3-Pill Layout
|
||||
<HStack gap={2}>
|
||||
{/* 1. The Add Widget Button */}
|
||||
<Box
|
||||
ref={menuRef}
|
||||
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)" }}
|
||||
>
|
||||
{/* size increased to 24 to match tabs. flexShrink: 0 is CRITICAL */}
|
||||
<Settings size={24} style={{flexShrink: 0}}/>
|
||||
|
||||
{/* Dynamic text based on editing state! */}
|
||||
<Box as="span">
|
||||
{isEditing ? "Editing Layout..." : "Dashboard Settings"}
|
||||
<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" }}
|
||||
_hover={{ bg: "rgba(72, 187, 120, 0.1)" }}
|
||||
>
|
||||
<Save size={20} style={{ flexShrink: 0 }} />
|
||||
<Box as="span">Save Layout</Box>
|
||||
</Box>
|
||||
|
||||
{/* 3. The Discard Button */}
|
||||
<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 }} />
|
||||
<Box as="span">Discard</Box>
|
||||
</Box>
|
||||
</HStack>
|
||||
) : (
|
||||
// 👀 VIEW MODE: The Static Dropdown Menu
|
||||
<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 size={24} style={{ flexShrink: 0 }} />
|
||||
<Box as="span">Dashboard Settings</Box>
|
||||
</Box>
|
||||
</Menu.Trigger>
|
||||
|
||||
<Menu.Positioner>
|
||||
<Menu.Content css={panelStyles.root} zIndex="dropdown" minW="200px">
|
||||
{isEditing ? (
|
||||
<>
|
||||
<Menu.Item onClick={saveEdit} color="green.600" cursor="pointer" _hover={{WebkitTextStroke: "0.5px currentColor"}}>
|
||||
<Save size={16} style={{marginRight: '8px'}}/> Save Layout
|
||||
<Menu.Item
|
||||
onClick={enterEditMode}
|
||||
cursor="pointer"
|
||||
_hover={{ WebkitTextStroke: "0.5px currentColor" }}
|
||||
>
|
||||
<Move size={16} style={{ marginRight: '8px' }} /> Edit Layout
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item onClick={cancelEdit} color="red.500" cursor="pointer" _hover={{WebkitTextStroke: "0.5px currentColor"}}>
|
||||
<X size={16} style={{marginRight: '8px'}}/> Discard Changes
|
||||
</Menu.Item>
|
||||
</>
|
||||
) : (
|
||||
<Menu.Item onClick={enterEditMode} cursor="pointer" _hover={{WebkitTextStroke: "0.5px currentColor"}}>
|
||||
<Move size={16} style={{marginRight: '8px'}}/> Edit Layout
|
||||
</Menu.Item>
|
||||
)}
|
||||
<Menu.Separator my={1} borderColor="glassSeperator" />
|
||||
|
||||
<Menu.Separator my={1} borderColor="glassSeperator"/>
|
||||
|
||||
<Menu.Item onClick={() => setIsLibraryOpen(true)} cursor="pointer" _hover={{WebkitTextStroke: "0.5px currentColor"}}>
|
||||
<LayoutGrid size={16} style={{marginRight: '8px'}}/> Widget Library
|
||||
<Menu.Item
|
||||
onClick={() => setIsLibraryOpen(true)}
|
||||
cursor="pointer"
|
||||
_hover={{ WebkitTextStroke: "0.5px currentColor" }}
|
||||
>
|
||||
<LayoutGrid size={16} style={{ marginRight: '8px' }} /> Widget Library
|
||||
</Menu.Item>
|
||||
</Menu.Content>
|
||||
</Menu.Positioner>
|
||||
</Menu.Root>
|
||||
)}
|
||||
|
||||
{/* THE WIDGET LIBRARY MODAL (Controlled by isLibraryOpen) */}
|
||||
<Dialog.Root
|
||||
|
||||
@@ -36,6 +36,7 @@ export default function MyDashboard() {
|
||||
// 1. Pull the new global slot recipe
|
||||
const recipe = useSlotRecipe({key: "glassPanel"});
|
||||
const styles = recipe({ layout: "widget" });
|
||||
const popoverStyles = recipe({ layout: "popover" });
|
||||
|
||||
useEffect(() => {
|
||||
if (user?.preferences?.dashboard_layout && !hasHydrated.current) {
|
||||
@@ -96,7 +97,7 @@ export default function MyDashboard() {
|
||||
|
||||
{/* NEW: The Positioner lifts the content out of the Flexbox flow */}
|
||||
<Popover.Positioner zIndex={10}>
|
||||
<Popover.Content bg="gray.50" p={4} boxShadow="xl" borderRadius="md">
|
||||
<Popover.Content css={popoverStyles.root}>
|
||||
<Suspense fallback={<Spinner size="sm"/>}>
|
||||
<SettingsUI
|
||||
widgetId={widget.id}
|
||||
@@ -149,7 +150,7 @@ export default function MyDashboard() {
|
||||
boxShadow={isEditing ? "outline" : styles.root.boxShadow}
|
||||
borderStyle={isEditing ? "dashed" : "solid"}
|
||||
borderWidth={isEditing ? "2px" : "1px"}
|
||||
borderColor={isEditing ? "gray.400" : styles.root.borderColor}
|
||||
borderColor={isEditing ? "orange.300" : styles.root.borderColor}
|
||||
cursor={isEditing ? "grab" : "default"}
|
||||
position="relative" // 3. REQUIRED so the absolute button stays inside this box
|
||||
>
|
||||
|
||||
+14
-37
@@ -179,43 +179,6 @@ const widgetRecipe = defineSlotRecipe({
|
||||
}
|
||||
});
|
||||
|
||||
// const glassPanelRecipe = defineSlotRecipe({
|
||||
// slots: ["root", "header", "body"],
|
||||
// base: {
|
||||
// root: {
|
||||
// // Structure
|
||||
// display: "flex",
|
||||
// flexDirection: "column",
|
||||
// width: "100%",
|
||||
// height: "100%",
|
||||
// position: "relative",
|
||||
// overflow: "hidden",
|
||||
// borderRadius: "3xl",
|
||||
//
|
||||
// // Glass Aesthetics (Syncs nicely with your sidebar/tabs)
|
||||
// bg: { base: "rgba(255, 255, 255, 0.4)", _dark: "rgba(255, 255, 255, 0.04)" },
|
||||
// backdropFilter: "blur(12px)",
|
||||
// WebkitBackdropFilter: "blur(12px)",
|
||||
// border: "1px solid",
|
||||
// borderColor: { base: "gray.200", _dark: "whiteAlpha.200" },
|
||||
// boxShadow: "sm",
|
||||
// },
|
||||
// header: {
|
||||
// display: "flex",
|
||||
// justifyContent: "space-between",
|
||||
// alignItems: "center",
|
||||
// px: 3,
|
||||
// py: 2,
|
||||
// },
|
||||
// body: {
|
||||
// flex: "1",
|
||||
// overflow: "hidden",
|
||||
// position: "relative",
|
||||
// p: 1,
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
const glassPanelRecipe = defineSlotRecipe({
|
||||
slots: ["root", "header", "body"],
|
||||
|
||||
@@ -246,6 +209,20 @@ const glassPanelRecipe = defineSlotRecipe({
|
||||
dropdown: {
|
||||
root: {borderRadius: "xl", p: 1}
|
||||
// (Header and body slots are ignored here because dropdowns don't use them)
|
||||
},
|
||||
popover: {
|
||||
root: {
|
||||
borderRadius: "2xl",
|
||||
p: 4,
|
||||
boxShadow: "xl",
|
||||
minW: "240px",
|
||||
// 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)" },
|
||||
|
||||
// OVERRIDES: Increase the blur just to smooth out any stubborn gridlines
|
||||
backdropFilter: "blur(20px)",
|
||||
WebkitBackdropFilter: "blur(20px)",
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user