Fix bugs reponsive for Unregconized Tabs and File Search

ShokoAnime · Jan 11, 2024 · ef0e71a · ef0e71a
1 parent b809899
commit ef0e71a
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 20 deletions.
diff --git a/src/components/Input/ButtonDropdown.tsx b/src/components/Input/ButtonDropdown.tsx
@@ -43,16 +43,23 @@ const ButtonDropdown = (props: Props) => {
   });
   const [containerRef, containerBounds] = useMeasure();
   const [menuRef, menuBounds] = useMeasure();
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
   const menuShift = useMemo(() => containerBounds.x - (menuBounds.width - (containerBounds.width)), [
     containerBounds.x,
     containerBounds.width,
     menuBounds.width,
   ]);
 
+  const isOutOfBounds = useMemo(() => containerBounds.right > windowWidth, [windowWidth, containerBounds.right]);
+
   useEffect(() => {
-    window.addEventListener('resize', () => setOpen(_ => false));
+    const resizeEvent = () => {
+      setOpen(_ => false);
+      setWindowWidth(_ => window.innerWidth);
+    };
+    window.addEventListener('resize', resizeEvent);
     return () => {
-      window.removeEventListener('resize', () => setOpen(_ => false));
+      window.removeEventListener('resize', resizeEvent);
     };
   }, [className]);
 
@@ -89,7 +96,7 @@ const ButtonDropdown = (props: Props) => {
           open ? 'flex' : 'hidden',
           buttonTypes !== undefined && `${buttonTypeClasses[buttonTypes]} border border-panel-border`,
         ])}
-        style={{ left: `${menuShift}px` }}
+        style={{ left: isOutOfBounds ? `${menuShift}px` : `${containerBounds.left}px` }}
         ref={menuRef}
       >
         {children}

diff --git a/src/pages/utilities/FileSearch.tsx b/src/pages/utilities/FileSearch.tsx
@@ -124,8 +124,8 @@ const Menu = (
   });
 
   return (
-    <div className="relative box-border flex grow items-center rounded-md border border-panel-border bg-panel-background-alt px-4 py-3">
-      <TransitionDiv className="absolute flex grow gap-x-4" show={selectedRows.length === 0}>
+    <div className="box-border flex grow items-center rounded-md border border-panel-border bg-panel-background-alt px-4 py-3">
+      <TransitionDiv className="flex grow gap-x-4" show={selectedRows.length === 0}>
         <MenuButton
           onClick={() => {
             setSelectedRows([]);
@@ -135,7 +135,7 @@ const Menu = (
           name="Refresh"
         />
       </TransitionDiv>
-      <TransitionDiv className="absolute flex grow gap-x-4" show={selectedRows.length !== 0}>
+      <TransitionDiv className="flex grow gap-x-4" show={selectedRows.length !== 0}>
         <MenuButton onClick={rescanFiles} icon={mdiDatabaseSearchOutline} name="Rescan" />
         <MenuButton onClick={rehashFiles} icon={mdiDatabaseSyncOutline} name="Rehash" />
         <MenuButton onClick={showDeleteConfirmation} icon={mdiMinusCircleOutline} name="Delete" highlight />
@@ -146,12 +146,6 @@ const Menu = (
           highlight
         />
       </TransitionDiv>
-      <span className="ml-auto font-semibold text-panel-text-important">
-        {selectedRows.length}
-        &nbsp;
-      </span>
-      {selectedRows.length === 1 ? 'File ' : 'Files '}
-      Selected
       <DeleteFilesModal
         show={showConfirmModal}
         selectedFiles={selectedRows}
@@ -306,7 +300,7 @@ const FileSearch = () => {
 
   return (
     <div className="flex grow flex-col gap-y-8">
-      <ShokoPanel title="File Search" options={<ItemCount count={fileCount} />}>
+      <ShokoPanel title="File Search" options={<ItemCount count={fileCount} selected={selectedRows?.length} />}>
         <div className="flex items-center gap-x-3">
           <Input
             type="text"

diff --git a/src/pages/utilities/UnrecognizedUtilityTabs/UnrecognizedTab.tsx b/src/pages/utilities/UnrecognizedUtilityTabs/UnrecognizedTab.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
+import useMeasure from 'react-use-measure';
 import {
   mdiCloseCircleOutline,
   mdiDatabaseSearchOutline,
@@ -311,9 +312,24 @@ function UnrecognizedTab() {
     ),
   }));
 
+  const [tabContainerRef, bounds] = useMeasure();
+  const isOverlay = useMemo(
+    () => bounds.width <= 1462 && bounds.width >= 1206 && selectedRows.length !== 0,
+    [bounds.width, selectedRows.length],
+  );
+
+  const searchClassName = useMemo(() => {
+    if (bounds.width < 1206) {
+      if (selectedRows.length === 0) return '!w-[calc(100vw-20rem)]';
+      return '!w-[calc(100vw-40rem)]';
+    }
+    if (isOverlay) return '!w-[calc(100vw-40rem)]';
+    return '';
+  }, [selectedRows.length, bounds, isOverlay]);
+
   return (
     <>
-      <div className="flex grow flex-col gap-y-8">
+      <div className="flex grow flex-col gap-y-8" ref={tabContainerRef}>
         <div>
           <ShokoPanel title={<Title />} options={<ItemCount count={fileCount} selected={selectedRows?.length} />}>
             <div className="flex items-center gap-x-3">
@@ -324,18 +340,18 @@ function UnrecognizedTab() {
                 id="search"
                 value={search}
                 onChange={e => setSearch(e.target.value)}
-                inputClassName="px-4 py-3"
-                isOverlay={selectedRows.length !== 0}
-                overlayClassName="w-[25rem] xl:w-[43.75rem] max-xl:w-[59.75rem] grow 2xl:w-auto 2xl:grow-0"
-                onToggleOverlay={setIsSearching}
+                inputClassName={cx('px-4 py-3', searchClassName)}
+                isOverlay={isOverlay}
+                overlayClassName="grow 2xl:w-auto 2xl:grow-0"
+                onToggleOverlay={show => setIsSearching(_ => show)}
               />
               <Menu
                 selectedRows={selectedRows}
                 setSelectedRows={setRowSelection}
                 setSeriesSelectModal={setSeriesSelectModal}
                 isShow={!isSearching}
               />
-              <TransitionDiv show={selectedRows.length !== 0} className="flex h-[50px] gap-x-3">
+              <div className={cx('h-[50px] gap-x-3', selectedRows.length !== 0 ? 'flex' : 'hidden')}>
                 <Button
                   buttonType="primary"
                   className="flex flex-row flex-wrap items-center px-4 py-3"
@@ -357,7 +373,7 @@ function UnrecognizedTab() {
                     {!isAvdumpFinished && !dumpInProgress && 'AVDump Files'}
                   </span>
                 </Button>
-              </TransitionDiv>
+              </div>
             </div>
           </ShokoPanel>
         </div>