Merge pull request #250 from daodaoedu/feat/my-island

feat: upgrade button and layout for UX
daodaoedu · Jan 25, 2025 · 4c60167 · 4c60167
2 parents 54cfe03 + c19924d
commit 4c60167
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 19 deletions.
diff --git a/layout/DefaultLayout.tsx b/layout/DefaultLayout.tsx
@@ -9,7 +9,7 @@ import {
 
 function DefaultLayoutContent({ children }: React.PropsWithChildren) {
   const headerRef = useRef<HTMLDivElement>(null);
-  const { height, showPromotionBar, setHeight } = usePromotion();
+  const { showPromotionBar, setHeight } = usePromotion();
   const prevShowPromotionBar = useRef<boolean | null>(null);
 
   useEffect(() => {
@@ -41,12 +41,7 @@ function DefaultLayoutContent({ children }: React.PropsWithChildren) {
       <Header ref={headerRef}>
         <PromotionBar />
       </Header>
-      <main
-        className="min-h-screen-with-padding-top"
-        style={{ paddingTop: `${height}px` }}
-      >
-        {children}
-      </main>
+      <main className="min-h-screen-with-padding-top">{children}</main>
     </>
   );
 }

diff --git a/layout/ManageLayout.tsx b/layout/ManageLayout.tsx
@@ -28,11 +28,11 @@ export default function ManageLayout({ children }: React.PropsWithChildren) {
                 個人名片
               </Sidebar.Link>
               <Collapse>
-                <Sidebar.Button className="w-full p-0">
+                <Sidebar.Item>
                   <Collapse.Toggle className="w-full px-10 py-2" withIcon>
                     百寶箱
                   </Collapse.Toggle>
-                </Sidebar.Button>
+                </Sidebar.Item>
                 <Collapse.List className="*:my-2 *:aria-hidden:my-0">
                   <Collapse.Item>
                     <Sidebar.Link

diff --git a/pages/manage/index.tsx b/pages/manage/index.tsx
@@ -67,29 +67,29 @@ const Calendar = ({ date, onChange }: CalendarProps) => {
 
   return (
     <div ref={ref} className="relative">
-      <div className="mb-6 px-4 py-3.5 flex items-center justify-between bg-white rounded-xl shadow-lg shadow-basic-200/40">
+      <div className="mb-6 pl-1 pr-3 py-2 flex items-center justify-between bg-white rounded-xl shadow-lg shadow-basic-200/40">
         <Button
-          className="p-0 flex items-center gap-3"
+          className="px-3 py-2.5 flex items-center gap-3"
           onClick={() => setIsOpen(!isOpen)}
         >
-          <PiCalendarBlankBold className="size-5" />
+          <PiCalendarBlankBold className="size-5 pointer-events-none" />
           <div className="heading-sm text-basic-500">
             {date?.format('YYYY/MM/DD')}（{date?.format('dd')}）任務
           </div>
         </Button>
-        <div className="flex items-center gap-2.5">
-          <Button className="p-0 body-lg text-basic-400" onClick={handleToday}>
+        <div className="flex items-center gap-0.5">
+          <Button className="px-1 py-2 body-lg text-basic-400" onClick={handleToday}>
             今日
           </Button>
           <Button
-            className="p-0"
+            className="p-1"
             isDisabled={date.isBefore(MIN_DATE) || date.isSame(MIN_DATE, 'day')}
             onClick={() => onChange(date.subtract(1, 'day'))}
           >
             <CiCircleChevLeft className="size-8 text-basic-400" />
           </Button>
           <Button
-            className="p-0"
+            className="p-1"
             isDisabled={date.isAfter(MAX_DATE) || date.isSame(MAX_DATE, 'day')}
             onClick={() => onChange(date.add(1, 'day'))}
           >

diff --git a/shared/components/Button.tsx b/shared/components/Button.tsx
@@ -1,3 +1,4 @@
+import { useRef } from 'react';
 import { cn } from '@/utils/cn';
 
 export enum ButtonColorEnum {
@@ -16,6 +17,11 @@ export enum ButtonSizeEnum {
   Medium = 'md',
 }
 
+export enum ButtonAnimationEnum {
+  Ripple = 'ripple',
+  None = 'none',
+}
+
 export interface ButtonProps
   extends Omit<
     React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -24,6 +30,7 @@ export interface ButtonProps
   variant?: ButtonVariantEnum | `${ButtonVariantEnum}`;
   color?: ButtonColorEnum | `${ButtonColorEnum}`;
   size?: ButtonSizeEnum | `${ButtonSizeEnum}`;
+  animation?: ButtonAnimationEnum | `${ButtonAnimationEnum}`;
   isDisabled?: boolean;
   isSubmit?: boolean;
 }
@@ -34,14 +41,39 @@ function Button({
   variant,
   color = ButtonColorEnum.Primary,
   size = ButtonSizeEnum.Medium,
+  animation = ButtonAnimationEnum.Ripple,
   isDisabled = false,
   isSubmit = false,
+  onClick,
   ...props
 }: ButtonProps) {
+  const rippleRef = useRef<HTMLDivElement>(null);
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (animation === ButtonAnimationEnum.None) {
+      onClick?.(e);
+      return;
+    }
+    const rect = e.currentTarget.getBoundingClientRect();
+    const ripple = document.createElement('span');
+    onClick?.(e);
+    ripple.className = cn(
+      'absolute size-10 rounded-full bg-basic-black/10 animate-button-ripple',
+      variant === ButtonVariantEnum.Solid &&
+        color !== ButtonColorEnum.White &&
+        'bg-basic-white/40'
+    );
+    ripple.style.top = `${((e.clientY - rect.top) / rect.height) * 100}%`;
+    ripple.style.left = `${((e.clientX - rect.left) / rect.width) * 100}%`;
+    rippleRef.current?.appendChild(ripple);
+    setTimeout(() => ripple.remove(), 1000);
+  };
+
   return (
     <button
       type={isSubmit ? 'submit' : 'button'}
       className={cn(
+        'relative overflow-hidden rounded-md',
         variant === ButtonVariantEnum.Solid && [
           'rounded-full transition-[box-shadow,color,background-color]',
           color === ButtonColorEnum.Primary &&
@@ -64,9 +96,13 @@ function Button({
         className
       )}
       disabled={isDisabled}
+      onClick={handleClick}
       {...props}
     >
       {children}
+      {animation !== ButtonAnimationEnum.None && (
+        <div ref={rippleRef} className="absolute inset-0 pointer-events-none" />
+      )}
     </button>
   );
 }

diff --git a/shared/components/Sidebar.tsx b/shared/components/Sidebar.tsx
@@ -92,7 +92,37 @@ function SidebarLink({
   );
 }
 
+interface SidebarItemProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  isActive?: boolean;
+  isDisabled?: boolean;
+}
+
+function SidebarItem({
+  children,
+  className,
+  isActive,
+  isDisabled,
+  ...props
+}: SidebarItemProps) {
+  return (
+    <div
+      className={cn(
+        defaultClass,
+        isActive && activeClass,
+        isDisabled && disableClass,
+        "w-full p-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
 Sidebar.Button = SidebarButton;
 Sidebar.Link = SidebarLink;
+Sidebar.Item = SidebarItem;
 
 export default Sidebar;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -150,6 +150,21 @@ module.exports = {
             },
           },
         },
+        [`.animate-button-ripple`]: {
+          animation:
+            'button-ripple var(--animation-duration, 500ms) var(--animation-delay, 0ms) forwards cubic-bezier(0, 0, 0.2, 1)',
+          '@keyframes button-ripple': {
+            '0%': { transform: 'translate(-50%, -50%) scale(0)', opacity: 1 },
+            '75%': {
+              transform: 'translate(-50%, -50%) scale(4)',
+              opacity: 0.2,
+            },
+            '100%': {
+              transform: 'translate(-50%, -50%) scale(6)',
+              opacity: 0,
+            },
+          },
+        },
       });
       addUtilities({
         [`.animate-slide-x-in`]: {
@@ -174,9 +189,10 @@ module.exports = {
       });
       addUtilities({
         ['.min-h-screen-with-padding-top']: {
-          minHeight: 'calc(100vh - var(--padding-top, 0px))'
-        }
-      })
+          paddingTop: 'var(--padding-top, 0px)',
+          minHeight: 'calc(100vh - var(--padding-top, 0px))',
+        },
+      });
     }),
   ],
 };