feat: mobile toolbar menu

fluid-design-io · Oct 20, 2023 · eeb2f4c · eeb2f4c
1 parent aed40f2
commit eeb2f4c
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 56 deletions.
diff --git a/apps/web/components/toolbar/download-base-palette.tsx b/apps/web/components/toolbar/download-base-palette.tsx
@@ -1,33 +1,39 @@
 "use client";
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@ui/components/ui/dialog";
-import DesktopPreviewToolbarIcon from "../ui/desktop-primary-toolbar-button";
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@ui/components/ui/popover";
+
 import primaryToolbarMenu from "../ui/primary-toolbar-menu";
+import { useState } from "react";
+import dynamic from "next/dynamic";
+import { Skeleton } from "ui/components/ui/skeleton";
+import { usePathname } from "next/navigation";
+import ToolbarMenuItem from "./toolbar-menu-item";
+
+const DownloadBasePalettePlugin = dynamic(
+  () => import("@/components/toolbar/plugin/download-base-palette.plugin"),
+  {
+    loading: () => <Skeleton className="h-52 w-full" />,
+    ssr: false,
+  },
+);
 
 function ToolbarDownloadBasePalette() {
   const menuItem = primaryToolbarMenu.Download;
+  const pathname = usePathname();
+  const [open, setOpen] = useState(false);
+  if (pathname !== "/") return null;
   return (
-    <Dialog>
-      {/* //TODO Add function */}
-      <DialogTrigger disabled>
-        <DesktopPreviewToolbarIcon {...menuItem} />
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Are you sure absolutely sure?</DialogTitle>
-          <DialogDescription>
-            This action cannot be undone. This will permanently delete your
-            account and remove your data from our servers.
-          </DialogDescription>
-        </DialogHeader>
-      </DialogContent>
-    </Dialog>
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger>
+        <ToolbarMenuItem {...menuItem} />
+      </PopoverTrigger>
+      <PopoverContent className="w-[18rem] sm:w-[24rem]" align="end">
+        {open && <DownloadBasePalettePlugin setOpen={setOpen} />}
+      </PopoverContent>
+    </Popover>
   );
 }
 

diff --git a/apps/web/components/toolbar/plugin/shareable-link.plugin.tsx b/apps/web/components/toolbar/plugin/shareable-link.plugin.tsx
@@ -38,7 +38,7 @@ function ShareableLinkPlugin({ colors, setOpen }) {
           <Image
             src={`${process.env.NEXT_PUBLIC_URL}/api/og?colors=${colors}`}
             className={cn(
-              "absolute inset-0 h-full w-full object-cover transition-opacity",
+              "absolute inset-0 h-full w-full rounded border object-cover transition-opacity",
               loadingSocialPreview ? "opacity-0" : "opacity-100",
             )}
             alt="Social preview"

diff --git a/apps/web/components/toolbar/shareable-link.tsx b/apps/web/components/toolbar/shareable-link.tsx
@@ -12,6 +12,7 @@ import { useColorStore } from "@/store/store";
 import { colorHelper } from "@/lib/colorHelper";
 import dynamic from "next/dynamic";
 import { Skeleton } from "ui/components/ui/skeleton";
+import ToolbarMenuItem from "./toolbar-menu-item";
 
 const ShareableLinkPlugin = dynamic(
   () => import("@/components/toolbar/plugin/shareable-link.plugin"),
@@ -37,7 +38,7 @@ function ToolbarShareableLink() {
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger>
-        <DesktopPreviewToolbarIcon {...menuItem} />
+        <ToolbarMenuItem {...menuItem} />
       </PopoverTrigger>
       <PopoverContent className="w-[18rem] sm:w-[24rem]" align="end">
         {open && <ShareableLinkPlugin colors={colors} setOpen={setOpen} />}

diff --git a/apps/web/components/toolbar/toolbar-menu-item.tsx b/apps/web/components/toolbar/toolbar-menu-item.tsx
@@ -0,0 +1,21 @@
+import { ToolbarMenu } from "../ui/primary-toolbar-menu";
+import DesktopPreviewToolbarIcon from "../ui/desktop-primary-toolbar-button";
+
+const ToolbarMenuItem = ({ title, description, icon: Icon }: ToolbarMenu) => (
+  <div>
+    <DesktopPreviewToolbarIcon {...{ title, description, icon: Icon }} />
+    <div className="flex items-center gap-4 lg:hidden">
+      <div className="flex-shrink-0">
+        <div className="rounded bg-muted p-1 ring-1 ring-border">
+          <Icon className="h-5 w-5 text-muted-foreground" />
+        </div>
+      </div>
+      <div className="flex flex-col items-start">
+        <div className="text-sm font-medium text-foreground">{title}</div>
+        <div className="text-xs text-accent-foreground/50">{description}</div>
+      </div>
+    </div>
+  </div>
+);
+
+export default ToolbarMenuItem;
diff --git a/apps/web/components/toolbar/upload-image.tsx b/apps/web/components/toolbar/upload-image.tsx
@@ -7,16 +7,16 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@ui/components/ui/dialog";
-import DesktopPreviewToolbarIcon from "../ui/desktop-primary-toolbar-button";
 import primaryToolbarMenu from "../ui/primary-toolbar-menu";
+import ToolbarMenuItem from "./toolbar-menu-item";
 
 function ToolbarUploadImage() {
   const menuItem = primaryToolbarMenu["Upload Image"];
   return (
     <Dialog>
       {/* //TODO Add function */}
       <DialogTrigger disabled>
-        <DesktopPreviewToolbarIcon {...menuItem} />
+        <ToolbarMenuItem {...menuItem} />
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>

diff --git a/apps/web/components/ui/desktop-primary-toolbar-button.tsx b/apps/web/components/ui/desktop-primary-toolbar-button.tsx
@@ -29,7 +29,7 @@ const DesktopPreviewToolbarIcon = ({
             variant="ghost"
             aria-label={title}
             size="icon"
-            className="flex h-8 w-8 select-none items-center rounded-sm px-1 py-1 text-sm font-medium outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+            className="hidden h-8 w-8 select-none items-center rounded-sm px-1 py-1 text-sm font-medium outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground lg:flex"
             asChild
           >
             <div>

diff --git a/apps/web/components/ui/mobile-primary-menu.tsx b/apps/web/components/ui/mobile-primary-menu.tsx
@@ -10,6 +10,7 @@ import {
 import { cn } from "@ui/lib/utils";
 import { ChevronUp, Download, ImagePlus, LucideIcon, Menu } from "lucide-react";
 import primaryToolbarMenu from "./primary-toolbar-menu";
+import { Toolbar } from "../toolbar";
 
 function MobilePrimaryMenu({ disabled }: { disabled: boolean }) {
   return (
@@ -28,39 +29,23 @@ function MobilePrimaryMenu({ disabled }: { disabled: boolean }) {
           <ChevronUp className="h-4 w-4 sm:rotate-180" />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="min-w-[9.7rem]">
+      <DropdownMenuContent align="end">
         <DropdownMenuLabel>Tools</DropdownMenuLabel>
         <DropdownMenuSeparator />
-        {/* {primaryToolbarMenu.map(({ title, description, icon: Icon }) => (
-          <DropdownMenuItem key={`mobile-primary-menu-${title}`}>
-            <MenuItem title={title} description={description} icon={Icon} />
+        <Toolbar>
+          <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+            <Toolbar.UploadImage />
           </DropdownMenuItem>
-        ))} */}
+          <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+            <Toolbar.DownloadBasePalette />
+          </DropdownMenuItem>
+          <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+            <Toolbar.ShareableLink />
+          </DropdownMenuItem>
+        </Toolbar>
       </DropdownMenuContent>
     </DropdownMenu>
   );
 }
 
-const MenuItem = ({
-  title,
-  description,
-  icon: Icon,
-}: {
-  title: string;
-  description: string;
-  icon: LucideIcon;
-}) => (
-  <div className="flex items-center gap-4">
-    <div className="flex-shrink-0">
-      <div className="rounded bg-muted p-1 ring-1 ring-border">
-        <Icon className="h-5 w-5 text-muted-foreground" />
-      </div>
-    </div>
-    <div className="flex flex-col">
-      <div className="text-sm font-medium text-foreground">{title}</div>
-      <div className="text-xs text-accent-foreground/50">{description}</div>
-    </div>
-  </div>
-);
-
 export default MobilePrimaryMenu;
diff --git a/apps/web/components/ui/primary-toolbar-menu.tsx b/apps/web/components/ui/primary-toolbar-menu.tsx
@@ -24,7 +24,7 @@ const primaryToolbarMenu: PrimaryToolbarMenu = {
   },
   [ToolbarMenus.DOWNLOAD]: {
     title: "Download",
-    description: "Coming Soon... Download the current palette as a PNG",
+    description: "Download the current palette as a PNG",
     icon: Download,
   },
   [ToolbarMenus.SHARE]: {