fix: grid mode for images and video content page, shadow not fully di…

…splayed when the mouse hovers over (#727) Co-authored-by: cuikaipeng <cuikaipeng@users.noreply.github.com>
RSSNext · Sep 30, 2024 · 361b09e · 361b09e
1 parent ad5adc3
commit 361b09e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/apps/renderer/src/modules/entry-column/item.tsx b/apps/renderer/src/modules/entry-column/item.tsx
@@ -5,6 +5,7 @@ import { LoadingCircle } from "~/components/ui/loading"
 import { views } from "~/constants"
 import { useAuthQuery } from "~/hooks/common"
 import type { FeedViewType } from "~/lib/enum"
+import { FeedViewType as FeedViewTypeEnum } from "~/lib/enum"
 import { cn } from "~/lib/utils"
 import { Queries } from "~/queries"
 import type { FlatEntryModel } from "~/store/entry"
@@ -38,9 +39,17 @@ function EntryItemImpl({ entry, view }: { entry: FlatEntryModel; view?: number }
   )
 
   const Item: EntryListItemFC = getItemComponentByView(view as FeedViewType)
+  const overlayItemClassName =
+    view === FeedViewTypeEnum.Pictures || view === FeedViewTypeEnum.Videos ? "top-0" : ""
 
   return (
-    <EntryItemWrapper itemClassName={Item.wrapperClassName} entry={entry} view={view} overlay>
+    <EntryItemWrapper
+      itemClassName={Item.wrapperClassName}
+      entry={entry}
+      view={view}
+      overlay
+      overlayItemClassName={overlayItemClassName}
+    >
       <Item entryId={entry.entries.id} translation={translation.data} />
     </EntryItemWrapper>
   )

diff --git a/apps/renderer/src/modules/entry-column/layouts/EntryItemWrapper.tsx b/apps/renderer/src/modules/entry-column/layouts/EntryItemWrapper.tsx
@@ -21,10 +21,11 @@ export const EntryItemWrapper: FC<
     entry: FlatEntryModel
     view?: number
     itemClassName?: string
+    overlayItemClassName?: string
     overlay?: boolean
     style?: React.CSSProperties
   } & PropsWithChildren
-> = ({ entry, view, overlay, children, itemClassName, style }) => {
+> = ({ entry, view, overlay, children, itemClassName, overlayItemClassName, style }) => {
   const { items } = useEntryActions({
     view,
     entry,
@@ -127,7 +128,10 @@ export const EntryItemWrapper: FC<
         onContextMenu={handleContextMenu}
       >
         {overlay ? (
-          <ListItemHoverOverlay isActive={isActive || isContextMenuOpen}>
+          <ListItemHoverOverlay
+            isActive={isActive || isContextMenuOpen}
+            className={overlayItemClassName}
+          >
             {children}
           </ListItemHoverOverlay>
         ) : (