fix: Panels size (#1017)

* chore: Upgrade react-resizable-panels package * fix: Min panel size * fix: Min size for Assets Panel
decentraland · Oct 10, 2024 · 0c4dc9b · 0c4dc9b
1 parent be05f6f
commit 0c4dc9b
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 32 deletions.
diff --git a/packages/@dcl/inspector/package-lock.json b/packages/@dcl/inspector/package-lock.json
diff --git a/packages/@dcl/inspector/package.json b/packages/@dcl/inspector/package.json
@@ -48,7 +48,7 @@
     "react-icons": "^4.7.1",
     "react-modal": "^3.16.1",
     "react-redux": "^8.1.0",
-    "react-resizable-panels": "^0.0.48",
+    "react-resizable-panels": "^2.1.4",
     "redux-saga": "^1.2.3",
     "redux-saga-test-plan": "^4.0.6",
     "ts-node": "^10.9.1",

diff --git a/packages/@dcl/inspector/src/components/App/App.tsx b/packages/@dcl/inspector/src/components/App/App.tsx
@@ -1,15 +1,7 @@
-import React from 'react'
+import React, { useCallback, useState } from 'react'
 import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels'
 import cx from 'classnames'
 
-import { EntityInspector } from '../EntityInspector'
-import { Hierarchy } from '../Hierarchy'
-import { Renderer } from '../Renderer'
-import { Box } from '../Box'
-import { Toolbar } from '../Toolbar'
-
-import './App.css'
-import Assets from '../Assets'
 import { useSelectedEntity } from '../../hooks/sdk/useSelectedEntity'
 import { useWindowSize } from '../../hooks/useWindowSize'
 import { useAppSelector } from '../../redux/hooks'
@@ -18,6 +10,15 @@ import { selectEngines } from '../../redux/sdk'
 import { getHiddenPanels } from '../../redux/ui'
 import { PanelName } from '../../redux/ui/types'
 
+import { EntityInspector } from '../EntityInspector'
+import { Hierarchy } from '../Hierarchy'
+import { Renderer } from '../Renderer'
+import { Box } from '../Box'
+import { Toolbar } from '../Toolbar'
+import Assets from '../Assets'
+
+import './App.css'
+
 const App = () => {
   const selectedEntity = useSelectedEntity()
   const { height } = useWindowSize()
@@ -26,16 +27,25 @@ const App = () => {
 
   const hiddenPanels = useAppSelector(getHiddenPanels)
 
+  const [isAssetsPanelCollapsed, setIsAssetsPanelCollapsed] = useState(false)
+
+  const handleToggleAssetsPanel = useCallback((collapse: boolean) => {
+    setIsAssetsPanelCollapsed(collapse)
+  }, [])
+
+  // Collapse the panel at 75 pixels
+  const collapseAt = (75 / Math.max(1, height ?? 1)) * 100
   // Footer's height is 48 pixels, so we need to calculate the percentage of the screen that it takes to pass as the minSize prop for the Panel
-  const footerMin = (48 / height!) * 100
+  const footerMin = (48 / Math.max(1, height ?? 1)) * 100
+
   const disconnected = useAppSelector(selectDataLayerError)
   return (
     <div
       className={cx('App', { 'is-ready': !!sdkInitialized })}
       style={{ pointerEvents: disconnected ? 'none' : 'auto' }}
     >
       <PanelGroup direction="vertical" autoSaveId="vertical">
-        <Panel>
+        <Panel defaultSize={70}>
           <PanelGroup direction="horizontal" autoSaveId="horizontal">
             {!hiddenPanels[PanelName.ENTITIES] && (
               <>
@@ -76,9 +86,15 @@ const App = () => {
         {!hiddenPanels[PanelName.ASSETS] && (
           <>
             <PanelResizeHandle className="vertical-handle" />
-            <Panel minSize={footerMin} defaultSize={30}>
+            <Panel
+              id="assets"
+              defaultSize={30}
+              {...(height ? { collapsible: true, collapsedSize: footerMin, minSize: collapseAt } : {})}
+              onCollapse={() => handleToggleAssetsPanel(true)}
+              onExpand={() => handleToggleAssetsPanel(false)}
+            >
               <Box className="composite-renderer">
-                <Assets />
+                <Assets isAssetsPanelCollapsed={isAssetsPanelCollapsed} />
               </Box>
             </Panel>
           </>

diff --git a/packages/@dcl/inspector/src/components/Assets/Assets.css b/packages/@dcl/inspector/src/components/Assets/Assets.css
@@ -21,17 +21,17 @@
   position: relative;
 }
 
-.Assets .Assets-buttons>div>div {
+.Assets .Assets-buttons > div > div {
   display: flex;
   position: relative;
 }
 
-.Assets .Assets-buttons>div:hover>div::after,
-.Assets .Assets-buttons>div>div.underlined::after {
+.Assets .Assets-buttons > div:hover > div::after,
+.Assets .Assets-buttons > div > div.underlined::after {
   width: 100%;
 }
 
-.Assets .Assets-buttons>div>div::after {
+.Assets .Assets-buttons > div > div::after {
   content: '';
   position: absolute;
   bottom: -6px;
@@ -40,24 +40,24 @@
   background: var(--white-gray);
 }
 
-.Assets .Assets-buttons>div span {
+.Assets .Assets-buttons > div span {
   margin-left: 4px;
 }
 
-.Assets .Assets-buttons>div {
+.Assets .Assets-buttons > div {
   display: flex;
   align-items: center;
   padding: 8px;
   cursor: pointer;
   user-select: none;
 }
 
-.Assets .Assets-buttons>div:last-child svg {
+.Assets .Assets-buttons > div:last-child svg {
   width: 16px;
   height: 16px;
 }
 
-.Assets .Assets-buttons>div:last-child {
+.Assets .Assets-buttons > div:last-child {
   position: absolute;
   right: 0px;
   margin-right: 8px;
@@ -67,3 +67,7 @@
   background: var(--tree-bg-color) !important;
   height: calc(100% - 36px);
 }
+
+.Assets .Assets-content.Hide {
+  display: none;
+}
diff --git a/packages/@dcl/inspector/src/components/Assets/Assets.tsx b/packages/@dcl/inspector/src/components/Assets/Assets.tsx
@@ -1,15 +1,15 @@
 import React, { useCallback } from 'react'
 import cx from 'classnames'
-
-import { FolderOpen } from '../Icons/Folder'
 import { MdImageSearch } from 'react-icons/md'
 import { HiOutlinePlus } from 'react-icons/hi'
-import { AssetsCatalog } from '../AssetsCatalog'
+
 import { AssetPack, catalog, isSmart } from '../../lib/logic/catalog'
 import { getConfig } from '../../lib/logic/config'
-import { getSelectedAssetsTab, selectAssetsTab } from '../../redux/ui'
 import { useAppDispatch, useAppSelector } from '../../redux/hooks'
+import { getSelectedAssetsTab, selectAssetsTab } from '../../redux/ui'
 import { AssetsTab } from '../../redux/ui/types'
+import { FolderOpen } from '../Icons/Folder'
+import { AssetsCatalog } from '../AssetsCatalog'
 import { ProjectAssetExplorer } from '../ProjectAssetExplorer'
 import ImportAsset from '../ImportAsset'
 
@@ -22,7 +22,7 @@ function removeSmartItems(assetPack: AssetPack) {
   }
 }
 
-function Assets() {
+function Assets({ isAssetsPanelCollapsed }: { isAssetsPanelCollapsed: boolean }) {
   const dispatch = useAppDispatch()
   const tab = useAppSelector(getSelectedAssetsTab)
 
@@ -59,7 +59,7 @@ function Assets() {
           </div>
         </div>
       </div>
-      <div className="Assets-content">
+      <div className={cx('Assets-content', { Hide: isAssetsPanelCollapsed })}>
         {tab === AssetsTab.AssetsPack && <AssetsCatalog catalog={filteredCatalog} />}
         {tab === AssetsTab.FileSystem && <ProjectAssetExplorer />}
         {tab === AssetsTab.Import && <ImportAsset onSave={handleTabClick(AssetsTab.FileSystem)} />}