Merge pull request #232 from botpress/robgordon-dev-2010-feature-debu…

…gger-panel-should-follow-the fix(layout): bottom panel maintain size
botpress · Jan 11, 2022 · 3a943a9 · 3a943a9
2 parents 79d728e + c82a4a4
commit 3a943a9
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 28 deletions.
diff --git a/packages/studio-ui/src/web/components/Layout/Layout.scss b/packages/studio-ui/src/web/components/Layout/Layout.scss
@@ -12,14 +12,18 @@
 }
 
 .main {
-  overflow-y: auto;
+  overflow: hidden;
   width: 100%;
+  height: 100%;
 }
 
 .mainSplitPaneWToolbar {
   height: auto !important;
   min-height: 0 !important;
   top: 50px !important;
+  > [class*='Pane1'] {
+    overflow: hidden;
+  }
 }
 
 :global(.emulator-open) {

diff --git a/packages/studio-ui/src/web/components/Layout/index.tsx b/packages/studio-ui/src/web/components/Layout/index.tsx
@@ -30,7 +30,6 @@ import { TrainingStatusService } from './training-status-service'
 
 const { isInputFocused } = utils
 const WEBCHAT_PANEL_STATUS = 'bp::webchatOpened'
-const EXPANDED_PANEL_HEIGHT = 200
 
 interface OwnProps {
   location: any
@@ -44,6 +43,11 @@ type DispatchProps = typeof mapDispatchToProps
 
 type Props = DispatchProps & StateProps & OwnProps
 
+const bottomPanelSizeKey = `bp::${window.BOT_ID}::bottom-panel-size`
+const bottomPanelDefaultSize = 175
+const topPanelMinSize = 200
+const bottomPanelMinSize = 100
+
 const Layout: FC<Props> = (props: Props) => {
   const mainElRef = useRef(null)
   const [langSwitcherOpen, setLangSwitcherOpen] = useState(false)
@@ -184,23 +188,7 @@ const Layout: FC<Props> = (props: Props) => {
     'toggle-inspect': props.toggleInspector
   }
 
-  const splitPanelLastSizeKey = `bp::${window.BOT_ID}::bottom-panel-size`
-  const lastSize = parseInt(localStorage.getItem(splitPanelLastSizeKey) || '175', 10)
-  const bottomPanelHeight = props.bottomPanelExpanded ? EXPANDED_PANEL_HEIGHT : lastSize
-  const bottomBarSize = props.bottomPanel ? bottomPanelHeight : '100%'
-
-  const squashSize = size => {
-    if (typeof size === 'string') {
-      return size
-    }
-
-    const maxSize = 100
-    const minSize = window.innerHeight - 100
-    size = Math.max(maxSize, size)
-    size = Math.min(minSize, size)
-    return size
-  }
-
+  const bottomPanelSize = parseInt(localStorage.getItem(bottomPanelSizeKey) || bottomPanelDefaultSize.toString(), 10)
   return (
     <Fragment>
       <HotKeys handlers={keyHandlers} id="mainLayout" className={layout.mainLayout}>
@@ -214,10 +202,13 @@ const Layout: FC<Props> = (props: Props) => {
           />
           <SplitPane
             split={'horizontal'}
-            defaultSize={squashSize(lastSize)}
-            onChange={size => size > 100 && localStorage.setItem(splitPanelLastSizeKey, squashSize(size).toString())}
-            size={squashSize(bottomBarSize)}
-            maxSize={-100}
+            defaultSize={bottomPanelDefaultSize}
+            onChange={size => localStorage.setItem(bottomPanelSizeKey, size.toString())}
+            size={props.bottomPanel ? bottomPanelSize : '100%'}
+            maxSize={-topPanelMinSize}
+            minSize={props.bottomPanel ? bottomPanelMinSize : undefined}
+            allowResize={props.bottomPanel}
+            primary={props.bottomPanel ? 'second' : 'first'}
             className={cx(layout.mainSplitPaneWToolbar, {
               'emulator-open': props.emulatorOpen
             })}

diff --git a/packages/studio-ui/src/web/views/FlowBuilder/style.scss b/packages/studio-ui/src/web/views/FlowBuilder/style.scss
@@ -1,17 +1,17 @@
 .diagram {
-  height: calc(100%);
+  height: 100%;
   flex-shrink: 0;
   flex: auto;
 }
 
 .container {
   display: flex;
   flex-wrap: nowrap;
-  width: 100%
+  width: 100%;
 }
 
 .diagram :global(.srd-diagram) {
-  height: calc(100%);
+  height: 100%;
   background: linear-gradient(90deg, var(--bg) 10px, transparent 1%) center,
     linear-gradient(var(--bg) 10px, transparent 1%) center, #e2e2e2;
   background-position: top left;

diff --git a/packages/ui-shared/src/MainLayout/Wrapper/style.scss b/packages/ui-shared/src/MainLayout/Wrapper/style.scss
@@ -3,8 +3,7 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  overflow: auto;
-  overflow-x: hidden;
+  overflow: hidden;
   padding: 0 var(--spacing-x-large);
   position: relative;
 }