fix: modal draggable area

Signed-off-by: Innei <i@innei.in>
RSSNext · Jun 25, 2024 · b8abf06 · b8abf06
1 parent 1c5d2e2
commit b8abf06
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 23 deletions.
diff --git a/src/renderer/src/components/ui/modal/stacked/modal.tsx b/src/renderer/src/components/ui/modal/stacked/modal.tsx
@@ -2,9 +2,9 @@ import * as Dialog from "@radix-ui/react-dialog"
 import { stopPropagation } from "@renderer/lib/dom"
 import { cn } from "@renderer/lib/utils"
 import { useUIStore } from "@renderer/store"
-import { m, useAnimationControls } from "framer-motion"
+import { m, useAnimationControls, useDragControls } from "framer-motion"
 import { useSetAtom } from "jotai"
-import type { SyntheticEvent } from "react"
+import type { PointerEventHandler, SyntheticEvent } from "react"
 import {
   createElement,
   Fragment,
@@ -123,6 +123,16 @@ export const ModalInternal: Component<{
       })
   }, [animateController])
 
+  const dragController = useDragControls()
+  const handleDrag: PointerEventHandler<HTMLDivElement> = useCallback(
+    (e) => {
+      if (draggable) {
+        dragController.start(e)
+      }
+    },
+    [dragController, draggable],
+  )
+
   useEffect(() => {
     if (isTop) return
     animateController.start({
@@ -227,12 +237,20 @@ export const ModalInternal: Component<{
                   modalClassName,
                 )}
                 onClick={stopPropagation}
-                drag={draggable}
+                drag
+                dragControls={dragController}
                 dragElastic={0}
+                dragListener={false}
                 dragMomentum={false}
                 dragConstraints={edgeElementRef}
+                whileDrag={{
+                  cursor: "grabbing",
+                }}
               >
-                <div className="relative flex items-center">
+                <div
+                  className="relative flex items-center"
+                  onPointerDownCapture={handleDrag}
+                >
                   <Dialog.Title className="flex shrink-0 grow items-center gap-2 px-4 py-1 text-lg font-semibold">
                     {icon && <span className="size-4">{icon}</span>}
 
@@ -244,10 +262,7 @@ export const ModalInternal: Component<{
                 </div>
                 <Divider className="my-2 shrink-0 border-slate-200 opacity-80 dark:border-neutral-800" />
 
-                <div
-                  className="min-h-0 shrink grow overflow-auto px-4 py-2"
-                  onPointerDownCapture={stopPropagation}
-                >
+                <div className="min-h-0 shrink grow overflow-auto px-4 py-2">
                   {finalChildren}
                 </div>
               </m.div>

diff --git a/src/renderer/src/components/ui/select.tsx b/src/renderer/src/components/ui/select.tsx
@@ -10,14 +10,17 @@ const SelectValue = SelectPrimitive.Value
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
+    size?: "default" | "sm"
+  }
+>(({ size = "default", className, children, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex w-full items-center justify-between whitespace-nowrap rounded-md bg-transparent placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       "ring-theme-accent/20 duration-200 focus:border-theme-accent/80 focus:outline-none focus:ring-2",
       "border border-border",
+      size === "sm" ? "h-7 p-2 text-sm" : "h-9 px-3 py-2 text-sm",
       className,
     )}
     {...props}

diff --git a/src/renderer/src/modules/settings/modal/content.tsx b/src/renderer/src/modules/settings/modal/content.tsx
@@ -23,7 +23,8 @@ export const SettingModalContent = () => (
     <SettingModalLayout>
       <ScrollArea.ScrollArea
         scrollbarClassName="mt-12 mb-2"
-        rootClassName="h-full flex-1 shrink-0 overflow-auto px-8"
+        rootClassName="h-full flex-1 shrink-0 overflow-auto pl-8 pr-7"
+        viewportClassName="pr-1"
       >
         <Content />
         <Close />

diff --git a/src/renderer/src/modules/settings/modal/layout.tsx b/src/renderer/src/modules/settings/modal/layout.tsx
@@ -1,11 +1,11 @@
 import { Logo } from "@renderer/components/icons/logo"
 import { APP_NAME } from "@renderer/lib/constants"
-import { preventDefault, stopPropagation } from "@renderer/lib/dom"
+import { preventDefault } from "@renderer/lib/dom"
 import { cn } from "@renderer/lib/utils"
 import { useUIStore } from "@renderer/store"
-import { m } from "framer-motion"
-import type { PropsWithChildren } from "react"
-import { useEffect } from "react"
+import { m, useDragControls } from "framer-motion"
+import type { PointerEventHandler, PropsWithChildren } from "react"
+import { useCallback, useEffect } from "react"
 import { useShallow } from "zustand/react/shallow"
 
 import { settings } from "../constants"
@@ -27,21 +27,37 @@ export function SettingModalLayout(props: PropsWithChildren) {
       overlay: state.modalOverlay,
     })),
   )
+  const dragController = useDragControls()
+  const handleDrag: PointerEventHandler<HTMLDivElement> = useCallback(
+    (e) => {
+      if (draggable) {
+        dragController.start(e)
+      }
+    },
+    [dragController, draggable],
+  )
+
   return (
     <m.div
       exit={{
         opacity: 0,
         scale: 0.96,
       }}
       className={cn(
-        "flex h-[500px] max-h-[80vh] w-[660px] max-w-full flex-col overflow-hidden rounded-xl border border-border",
+        "relative flex h-[500px] max-h-[80vh] w-[660px] max-w-full flex-col overflow-hidden rounded-xl border border-border",
         !overlay && "shadow-perfect",
       )}
       onContextMenu={preventDefault}
       drag={draggable}
+      dragControls={dragController}
+      dragListener={false}
       dragMomentum={false}
       dragElastic={false}
+      whileDrag={{
+        cursor: "grabbing",
+      }}
     >
+      {draggable && <div className="absolute inset-x-0 top-0 z-[1] h-8" onPointerDown={handleDrag} />}
       <div className="flex h-0 flex-1 bg-theme-tooltip-background">
         <div className="w-44 border-r px-2 py-5">
           <div className="mb-4 flex h-8 items-center gap-2 px-4 font-bold">
@@ -66,10 +82,7 @@ export function SettingModalLayout(props: PropsWithChildren) {
             </button>
           ))}
         </div>
-        <div
-          className="relative h-full flex-1 bg-theme-background pt-0"
-          onPointerDownCapture={stopPropagation}
-        >
+        <div className="relative h-full flex-1 bg-theme-background pt-0">
           {children}
         </div>
       </div>

diff --git a/src/renderer/src/modules/settings/tabs/apperance.tsx b/src/renderer/src/modules/settings/tabs/apperance.tsx
@@ -109,7 +109,7 @@ const Fonts = () => {
           uiActions.set("readerFontFamily", value)
         }}
       >
-        <SelectTrigger className="h-8 w-48">
+        <SelectTrigger size="sm" className="w-48">
           <SelectValue />
         </SelectTrigger>
         <SelectContent className="h-64">
@@ -149,7 +149,7 @@ const TextSize = () => {
           )
         }}
       >
-        <SelectTrigger className="h-8 w-24 capitalize">
+        <SelectTrigger size="sm" className="w-24 capitalize">
           <SelectValue />
         </SelectTrigger>
         <SelectContent>

diff --git a/src/renderer/src/styles/tailwind-extend.css b/src/renderer/src/styles/tailwind-extend.css
@@ -229,3 +229,50 @@
       rgba(0, 0, 0, 0.067) 0px 2px 5px, rgba(0, 0, 0, 0.067) 0px 1px 1px;
   }
 }
+/* Container Mask */
+@layer components {
+  .mask-both {
+    mask-image: linear-gradient(
+      rgba(255, 255, 255, 0) 0%,
+      rgb(255, 255, 255) 20px,
+      rgb(255, 255, 255) calc(100% - 20px),
+      rgba(255, 255, 255, 0) 100%
+    );
+  }
+  .mask-both-lg {
+    mask-image: linear-gradient(
+      rgba(255, 255, 255, 0) 0%,
+      rgb(255, 255, 255) 50px,
+      rgb(255, 255, 255) calc(100% - 50px),
+      rgba(255, 255, 255, 0) 100%
+    );
+  }
+
+  .mask-b {
+    mask-image: linear-gradient(
+      rgb(255, 255, 255) calc(100% - 20px),
+      rgba(255, 255, 255, 0) 100%
+    );
+  }
+
+  .mask-b-lg {
+    mask-image: linear-gradient(
+      rgb(255, 255, 255) calc(100% - 50px),
+      rgba(255, 255, 255, 0) 100%
+    );
+  }
+
+  .mask-t {
+    mask-image: linear-gradient(
+      rgba(255, 255, 255, 0) 0%,
+      rgb(255, 255, 255) 20px
+    );
+  }
+
+  .mask-t-lg {
+    mask-image: linear-gradient(
+      rgba(255, 255, 255, 0) 0%,
+      rgb(255, 255, 255) 50px
+    );
+  }
+}