Convert vertical splitter

questdb · Nov 8, 2023 · 6608c63 · 6608c63
1 parent 61d1a06
commit 6608c63
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 102 deletions.
diff --git a/packages/web-console/src/scenes/Console/index.tsx b/packages/web-console/src/scenes/Console/index.tsx
@@ -31,12 +31,16 @@ const Root = styled.div`
 `
 
 const Top = styled.div`
+  display: flex;
+  height: 100%;
+  flex: 1;
   position: relative;
   overflow: hidden;
 `
 
 const Bottom = styled.div`
   display: flex;
+  height: 100%;
   flex: 1;
   min-height: 0px;
 `
@@ -119,120 +123,130 @@ const Console = () => {
 
   return (
     <Root>
-      <Splitter
-        direction="vertical"
-        fallback={editorSplitterBasis}
-        min={100}
-        onChange={handleEditorSplitterChange}
+      <Allotment
+        vertical={true}
+        onDragEnd={(sizes) => {
+          updateSettings(StoreKey.EDITOR_SPLITTER_BASIS, sizes[0])
+          setTimeout(() => {
+            window.bus.trigger(BusEvent.MSG_ACTIVE_SIDEBAR)
+          }, 0)
+        }}
       >
-        <Top>
-          <Sidebar align="top">
-            {!sm && (
-              <PopperHover
-                placement="bottom"
-                trigger={
-                  <Navigation
-                    data-hook="tables-panel-button"
-                    direction="left"
-                    onClick={() => {
-                      dispatch(
-                        actions.console.setActiveTopPanel(
-                          resultsSplitterBasis === 0 ? "tables" : undefined,
-                        ),
-                      )
-                      updateSettings(
-                        StoreKey.RESULTS_SPLITTER_BASIS,
-                        resultsSplitterBasis === 0 ? 300 : 0,
-                      )
-                    }}
-                    selected={resultsSplitterBasis !== 0}
-                  >
-                    <Database2 size={BUTTON_ICON_SIZE} />
-                  </Navigation>
-                }
-              >
-                <Tooltip>
-                  {resultsSplitterBasis === 0 ? "Show" : "Hide"} tables
-                </Tooltip>
-              </PopperHover>
-            )}
-          </Sidebar>
-          <Allotment
-            ref={horizontalSplitterRef}
-            onDragEnd={(sizes) => {
-              updateSettings(StoreKey.RESULTS_SPLITTER_BASIS, sizes[0])
-              setTimeout(() => {
-                window.bus.trigger(BusEvent.MSG_ACTIVE_SIDEBAR)
-              }, 0)
-            }}
-            snap
-          >
-            <Allotment.Pane
-              preferredSize={resultsSplitterBasis}
-              visible={resultsSplitterBasis !== 0 && !sm}
-            >
-              <Schema />
-            </Allotment.Pane>
-            <Allotment.Pane>
-              <Editor />
-            </Allotment.Pane>
-          </Allotment>
-        </Top>
-        <Bottom>
-          <Sidebar align="bottom">
-            {result &&
-              viewModes.map(({ icon, mode, tooltipText }) => (
+        <Allotment.Pane minSize={100} preferredSize={editorSplitterBasis}>
+          <Top>
+            <Sidebar align="top">
+              {!sm && (
                 <PopperHover
-                  key={mode}
-                  placement="right"
+                  placement="bottom"
                   trigger={
                     <Navigation
-                      data-hook={`${mode}-panel-button`}
+                      data-hook="tables-panel-button"
                       direction="left"
                       onClick={() => {
-                        dispatch(actions.console.setActiveBottomPanel("result"))
-                        setResultViewMode(mode)
+                        dispatch(
+                          actions.console.setActiveTopPanel(
+                            resultsSplitterBasis === 0 ? "tables" : undefined,
+                          ),
+                        )
+                        updateSettings(
+                          StoreKey.RESULTS_SPLITTER_BASIS,
+                          resultsSplitterBasis === 0 ? 300 : 0,
+                        )
                       }}
-                      selected={
-                        activeBottomPanel === "result" &&
-                        resultViewMode === mode
-                      }
+                      selected={resultsSplitterBasis !== 0}
                     >
-                      {icon}
+                      <Database2 size={BUTTON_ICON_SIZE} />
                     </Navigation>
                   }
                 >
-                  <Tooltip>{tooltipText}</Tooltip>
+                  <Tooltip>
+                    {resultsSplitterBasis === 0 ? "Show" : "Hide"} tables
+                  </Tooltip>
                 </PopperHover>
-              ))}
-            <PopperHover
-              placement="right"
-              trigger={
-                <PrimaryToggleButton
-                  onClick={() => {
-                    dispatch(actions.console.setActiveBottomPanel("import"))
-                  }}
-                  selected={activeBottomPanel === "import"}
-                  data-hook="import-panel-button"
-                >
-                  <Upload2 size={BUTTON_ICON_SIZE} />
-                </PrimaryToggleButton>
-              }
+              )}
+            </Sidebar>
+            <Allotment
+              ref={horizontalSplitterRef}
+              onDragEnd={(sizes) => {
+                updateSettings(StoreKey.RESULTS_SPLITTER_BASIS, sizes[0])
+                setTimeout(() => {
+                  window.bus.trigger(BusEvent.MSG_ACTIVE_SIDEBAR)
+                }, 0)
+              }}
+              snap
             >
-              <Tooltip>Import files from CSV</Tooltip>
-            </PopperHover>
-          </Sidebar>
-          <Tab ref={resultRef}>
-            {result && <Result viewMode={resultViewMode} />}
-          </Tab>
-          <Tab ref={zeroStateRef}>
-            <ZeroState />
-          </Tab>
-          <Tab ref={importRef}>
-            <Import />
-          </Tab>
-        </Bottom>
-      </Splitter>
+              <Allotment.Pane
+                preferredSize={resultsSplitterBasis}
+                visible={resultsSplitterBasis !== 0 && !sm}
+              >
+                <Schema />
+              </Allotment.Pane>
+              <Allotment.Pane>
+                <Editor />
+              </Allotment.Pane>
+            </Allotment>
+          </Top>
+        </Allotment.Pane>
+
+        <Allotment.Pane minSize={100}>
+          <Bottom>
+            <Sidebar align="bottom">
+              {result &&
+                viewModes.map(({ icon, mode, tooltipText }) => (
+                  <PopperHover
+                    key={mode}
+                    placement="right"
+                    trigger={
+                      <Navigation
+                        data-hook={`${mode}-panel-button`}
+                        direction="left"
+                        onClick={() => {
+                          dispatch(
+                            actions.console.setActiveBottomPanel("result"),
+                          )
+                          setResultViewMode(mode)
+                        }}
+                        selected={
+                          activeBottomPanel === "result" &&
+                          resultViewMode === mode
+                        }
+                      >
+                        {icon}
+                      </Navigation>
+                    }
+                  >
+                    <Tooltip>{tooltipText}</Tooltip>
+                  </PopperHover>
+                ))}
+              <PopperHover
+                placement="right"
+                trigger={
+                  <PrimaryToggleButton
+                    onClick={() => {
+                      dispatch(actions.console.setActiveBottomPanel("import"))
+                    }}
+                    selected={activeBottomPanel === "import"}
+                    data-hook="import-panel-button"
+                  >
+                    <Upload2 size={BUTTON_ICON_SIZE} />
+                  </PrimaryToggleButton>
+                }
+              >
+                <Tooltip>Import files from CSV</Tooltip>
+              </PopperHover>
+            </Sidebar>
+            <Tab ref={resultRef}>
+              {result && <Result viewMode={resultViewMode} />}
+            </Tab>
+            <Tab ref={zeroStateRef}>
+              <ZeroState />
+            </Tab>
+            <Tab ref={importRef}>
+              <Import />
+            </Tab>
+          </Bottom>
+        </Allotment.Pane>
+      </Allotment>
     </Root>
   )
 }

diff --git a/packages/web-console/src/scenes/Layout/index.tsx b/packages/web-console/src/scenes/Layout/index.tsx
@@ -35,7 +35,7 @@ import { useSelector } from "react-redux"
 import { selectors } from "../../store"
 import News from "../../scenes/News"
 import { CreateTableDialog } from "../../components/CreateTableDialog"
-import { EditorProvider } from "../../providers/EditorProvider"
+import { EditorProvider } from "../../providers"
 import { Help } from "./help"
 
 import "allotment/dist/style.css"

diff --git a/packages/web-console/src/theme/global-styles.ts b/packages/web-console/src/theme/global-styles.ts
@@ -36,6 +36,16 @@ const DocSearchStyles = css`
     --separator-border: ${({ theme }) => theme.color.backgroundDarker};
     --sash-size: 2rem;
     --sash-hover-size: 0.5rem;
+    .allotment-module_splitView__L-yRc.allotment-module_separatorBorder__x-rDS.allotment-module_vertical__WSwwa
+      > .allotment-module_splitViewContainer__rQnVa
+      > .allotment-module_splitViewView__MGZ6O:not(:first-child)::before {
+      height: 2px;
+    }
+    .allotment-module_splitView__L-yRc.allotment-module_separatorBorder__x-rDS.allotment-module_horizontal__7doS8
+      > .allotment-module_splitViewContainer__rQnVa
+      > .allotment-module_splitViewView__MGZ6O:not(:first-child)::before {
+      width: 2px;
+    }
   }
 
   .DocSearch-Button {