Merge pull request #106 from fishshi/fix/Page

Some fixes
ximu3 · Dec 16, 2024 · 2b34b9d · 2b34b9d
2 parents d9a1969 + 5e6e79d
commit 2b34b9d
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 33 deletions.
diff --git a/src/renderer/src/components/Game/Header.tsx b/src/renderer/src/components/Game/Header.tsx
@@ -77,7 +77,7 @@ export function Header({ gameId, className }: { gameId: string; className?: stri
         className
       )}
     >
-      <div className={cn('flex flex-row gap-3 justify-center max-w-[46vw]')}>
+      <div className={cn('flex flex-row gap-3 grow overflow-hidden')}>
         <div className={cn('truncate')}>
           <span className={cn('font-bold text-2xl text-accent-foreground')}>{name}</span>
           {showOriginalNameInGameHeader && originalName && originalName !== name && (

diff --git a/src/renderer/src/components/Showcase/posters/CollectionPoster.tsx b/src/renderer/src/components/Showcase/posters/CollectionPoster.tsx
@@ -18,25 +18,26 @@ export function CollectionPoster({
   const gameId = collections[collctionId].games[0]
   const length = collections[collctionId].games.length
   return (
-    <div
-      className={cn(
-        'group relative overflow-hidden shadow-custom-initial cursor-pointer w-[160px] h-[160px] rounded-[0.3rem]',
-        'transition-border duration-300 ease-in-out',
-        'border-2 border-transparent',
-        'hover:border-primary hover:border-2',
-        '3xl:w-[190px] 3xl:h-[190px]'
-      )}
-      onClick={() => navigate(`/library/collections/${collctionId}`)}
-    >
-      {/* background mask layer */}
+    <CollectionCM collectionId={collctionId}>
       <div
         className={cn(
-          'absolute inset-0 bg-muted/40 backdrop-blur-sm z-10 border-t-0.5 border-white/30 pointer-events-none'
+          'group relative overflow-hidden shadow-custom-initial cursor-pointer w-[160px] h-[160px] rounded-[0.3rem]',
+          'transition-border duration-300 ease-in-out',
+          'border-2 border-transparent',
+          'hover:border-primary hover:border-2',
+          '3xl:w-[190px] 3xl:h-[190px]'
         )}
-      />
+        onClick={() => navigate(`/library/collections/${collctionId}`)}
+      >
+        {/* background mask layer */}
+        <div
+          className={cn(
+            'absolute inset-0 bg-muted/40 backdrop-blur-sm z-10 border-t-0.5 border-white/30 pointer-events-none'
+          )}
+        />
+
+        {/* HoverBigCardAnimation layer */}
 
-      {/* HoverBigCardAnimation layer */}
-      <CollectionCM collectionId={collctionId}>
         <div className="relative z-0">
           <HoverSquareCardAnimation className={cn('rounded-none')}>
             <GameImage
@@ -60,21 +61,23 @@ export function CollectionPoster({
             />
           </HoverSquareCardAnimation>
         </div>
-      </CollectionCM>
 
-      {/* text content layer */}
-      <div
-        className={cn(
-          'absolute inset-0 z-20 mt-7',
-          'flex items-center justify-center',
-          'pointer-events-none'
-        )}
-      >
-        <div className="flex flex-col gap-1 items-center justify-center">
-          <div className={cn('text-accent-foreground text-lg font-semibold')}>{collectionName}</div>
-          <div className={cn('text-accent-foreground/70')}>{`( ${length} )`}</div>
+        {/* text content layer */}
+        <div
+          className={cn(
+            'absolute inset-0 z-20 mt-7',
+            'flex items-center justify-center',
+            'pointer-events-none'
+          )}
+        >
+          <div className="flex flex-col gap-1 items-center justify-center">
+            <div className={cn('text-accent-foreground text-lg font-semibold')}>
+              {collectionName}
+            </div>
+            <div className={cn('text-accent-foreground/70')}>{`( ${length} )`}</div>
+          </div>
         </div>
       </div>
-    </div>
+    </CollectionCM>
   )
 }
diff --git a/src/renderer/src/components/contextMenu/CollectionCM/main.tsx b/src/renderer/src/components/contextMenu/CollectionCM/main.tsx
@@ -21,7 +21,7 @@ import {
 } from '@ui/alert-dialog'
 import { useCollections } from '~/hooks'
 import { cn } from '~/utils'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 export function CollectionCM({
   collectionId,
@@ -33,6 +33,13 @@ export function CollectionCM({
   const { renameCollection, removeCollection, collections } = useCollections()
   const [newName, setNewName] = useState<string>('')
   const [isOpen, setIsOpen] = useState<boolean>(false)
+
+  useEffect(() => {
+    if (collections[collectionId].name !== newName) {
+      setNewName(collections[collectionId].name)
+    }
+  }, [collections[collectionId].name])
+
   return (
     <ContextMenu>
       <ContextMenuTrigger>{children}</ContextMenuTrigger>
@@ -59,12 +66,19 @@ export function CollectionCM({
             <Button
               onClick={() => {
                 renameCollection(collectionId, newName)
-                setNewName('')
                 setIsOpen(false)
               }}
             >
               确定
             </Button>
+            <Button
+              onClick={() => {
+                setIsOpen(false)
+                setNewName(collections[collectionId].name)
+              }}
+            >
+              取消
+            </Button>
           </DialogContent>
         </Dialog>
         <ContextMenuSeparator />

diff --git a/src/renderer/src/pages/GameBatchAdder/GameList.tsx b/src/renderer/src/pages/GameBatchAdder/GameList.tsx
@@ -16,7 +16,7 @@ export function GameList(): JSX.Element {
     })
   }
   return (
-    <div className="w-[870px] h-[670px] 3xl:h-[812px]">
+    <div className="w-[870px] h-[75vh]">
       <div className="py-[10px]">
         <GameListTable />
         <div className="flex flex-row-reverse pt-[20px]">

diff --git a/src/renderer/src/pages/GameBatchAdder/GameListTable.tsx b/src/renderer/src/pages/GameBatchAdder/GameListTable.tsx
@@ -28,7 +28,7 @@ export function GameListTable(): JSX.Element {
       </Table>
       <Table>
         <TableBody>
-          <div className={cn('overflow-auto scrollbar-base w-full', 'h-[570px] 3xl:h-[712px]')}>
+          <div className={cn('overflow-auto scrollbar-base w-full', 'h-[calc(75vh-100px)]')}>
             {games.map((game) => (
               <GameListItem key={game.dataId} game={game} />
             ))}