From 0c4dc9b4fd20f4cc3ffeccc71e340abba228cff8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gabriel=20D=C3=ADaz?= Date: Thu, 10 Oct 2024 12:15:24 -0300 Subject: [PATCH] fix: Panels size (#1017) * chore: Upgrade react-resizable-panels package * fix: Min panel size * fix: Min size for Assets Panel --- packages/@dcl/inspector/package-lock.json | 9 ++-- packages/@dcl/inspector/package.json | 2 +- .../@dcl/inspector/src/components/App/App.tsx | 42 +++++++++++++------ .../src/components/Assets/Assets.css | 20 +++++---- .../src/components/Assets/Assets.tsx | 12 +++--- 5 files changed, 53 insertions(+), 32 deletions(-) diff --git a/packages/@dcl/inspector/package-lock.json b/packages/@dcl/inspector/package-lock.json index 63692e531..2f853c880 100644 --- a/packages/@dcl/inspector/package-lock.json +++ b/packages/@dcl/inspector/package-lock.json @@ -54,7 +54,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", @@ -5121,10 +5121,11 @@ "dev": true }, "node_modules/react-resizable-panels": { - "version": "0.0.48", - "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-0.0.48.tgz", - "integrity": "sha512-fJa3itmJ3HLLmVG7y8tka80wFW63N6ai76q7MGwU8nSXeA0qkX36vnmPyXm34lvtsGjn1Cgi5IPhPQnf42SVpA==", + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.1.4.tgz", + "integrity": "sha512-kzue8lsoSBdyyd2IfXLQMMhNujOxRoGVus+63K95fQqleGxTfvgYLTzbwYMOODeAHqnkjb3WV/Ks7f5+gDYZuQ==", "dev": true, + "license": "MIT", "peerDependencies": { "react": "^16.14.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0" diff --git a/packages/@dcl/inspector/package.json b/packages/@dcl/inspector/package.json index f3643d2e0..6c0ebce11 100644 --- 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 index 6757b7e8a..a0f0e0438 100644 --- 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,8 +27,17 @@ 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 (
{ style={{ pointerEvents: disconnected ? 'none' : 'auto' }} > - + {!hiddenPanels[PanelName.ENTITIES] && ( <> @@ -76,9 +86,15 @@ const App = () => { {!hiddenPanels[PanelName.ASSETS] && ( <> - + handleToggleAssetsPanel(true)} + onExpand={() => handleToggleAssetsPanel(false)} + > - + diff --git a/packages/@dcl/inspector/src/components/Assets/Assets.css b/packages/@dcl/inspector/src/components/Assets/Assets.css index 2d1af5b01..0176711f1 100644 --- 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,11 +40,11 @@ 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; @@ -52,12 +52,12 @@ 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 index e80cdb995..5766126e0 100644 --- 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() {
-
+
{tab === AssetsTab.AssetsPack && } {tab === AssetsTab.FileSystem && } {tab === AssetsTab.Import && }