web: Add a resize drag component to the sidebar

Fixes #4614
tilt-dev · Jul 19, 2021 · 5b89976 · 5b89976
1 parent 59cbf06
commit 5b89976
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 6 deletions.
diff --git a/web/package.json b/web/package.json
@@ -28,6 +28,7 @@
     "react-outline-manager": "^1.2.2",
     "react-router-dom": "^5.1.0",
     "react-scripts": "^4.0.1",
+    "react-split-pane": "^0.1.92",
     "react-storage-hooks": "^4.0.1",
     "react-table": "^7.7.0",
     "react-timeago": "^4.4.0",

diff --git a/web/src/OverviewResourcePane.tsx b/web/src/OverviewResourcePane.tsx
@@ -11,6 +11,8 @@ import StarredResourceBar, {
 } from "./StarredResourceBar"
 import { Color } from "./style-helpers"
 import { ResourceName } from "./types"
+import SplitPane from "react-split-pane"
+import "./Resizer.scss"
 
 type UIResource = Proto.v1alpha1UIResource
 type OverviewResourcePaneProps = {
@@ -25,13 +27,20 @@ let OverviewResourcePaneRoot = styled.div`
   background-color: ${Color.grayDark};
   max-height: 100%;
 `
-
 let Main = styled.div`
   display: flex;
   width: 100%;
   // In Safari, flex-basis "auto" squishes OverviewTabBar + OverviewResourceBar
   flex: 1 1 100%;
   overflow: hidden;
+  position: relative;
+
+  .SplitPane {
+    position: relative !important;
+  }
+  .Pane {
+    display: flex;
+  }
 `
 
 export default function OverviewResourcePane(props: OverviewResourcePaneProps) {
@@ -88,13 +97,15 @@ export default function OverviewResourcePane(props: OverviewResourcePaneProps) {
         {...starredResourcePropsFromView(props.view, selectedTab)}
       />
       <Main>
+      <SplitPane split="vertical" minSize={336} defaultSize={336}>
         <OverviewResourceSidebar {...props} name={name} />
         <OverviewResourceDetails
           resource={r}
           name={name}
           alerts={alerts}
           buttons={buttons}
-        />
+      />
+      </SplitPane>
       </Main>
     </OverviewResourcePaneRoot>
   )

diff --git a/web/src/OverviewResourceSidebar.tsx b/web/src/OverviewResourceSidebar.tsx
@@ -13,11 +13,10 @@ type OverviewResourceSidebarProps = {
 let OverviewResourceSidebarRoot = styled.div`
   display: flex;
   flex-direction: column;
-  flex-basis: 336px;
   flex-shrink: 0;
-  flex-grow: 0;
+  flex-grow: 1;
   height: 100%;
-  width: 336px;
+  min-width: 336px;
 `
 
 export default function OverviewResourceSidebar(

diff --git a/web/src/Resizer.scss b/web/src/Resizer.scss
@@ -0,0 +1,51 @@
+/* Adapted from https://github.com/tomkp/react-split-pane */
+
+.Resizer {
+  background: #000;
+  opacity: 0.2;
+  z-index: 1;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding;
+  background-clip: padding-box;
+}
+
+.Resizer:hover {
+  -webkit-transition: all 2s ease;
+  transition: all 2s ease;
+}
+
+.Resizer.horizontal {
+  height: 11px;
+  margin: -5px 0;
+  border-top: 5px solid rgba(255, 255, 255, 0);
+  border-bottom: 5px solid rgba(255, 255, 255, 0);
+  cursor: row-resize;
+  width: 100%;
+}
+
+.Resizer.horizontal:hover {
+  border-top: 5px solid rgba(0, 0, 0, 0.5);
+  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+}
+
+.Resizer.vertical {
+  width: 11px;
+  margin: 0 -5px;
+  border-left: 5px solid rgba(255, 255, 255, 0);
+  border-right: 5px solid rgba(255, 255, 255, 0);
+  cursor: col-resize;
+}
+
+.Resizer.vertical:hover {
+  border-left: 5px solid rgba(0, 0, 0, 0.5);
+  border-right: 5px solid rgba(0, 0, 0, 0.5);
+}
+.Resizer.disabled {
+  cursor: not-allowed;
+}
+.Resizer.disabled:hover {
+  border-color: transparent;
+}
diff --git a/web/yarn.lock b/web/yarn.lock
@@ -12339,7 +12339,7 @@ prop-types-exact@^1.2.0:
     object.assign "^4.1.0"
     reflect.ownkeys "^0.2.0"
 
-prop-types@^15.0.0, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.0.0, prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -12845,11 +12845,27 @@ react-sizeme@^3.0.1:
     shallowequal "^1.1.0"
     throttle-debounce "^3.0.1"
 
+react-split-pane@^0.1.92:
+  version "0.1.92"
+  resolved "https://registry.yarnpkg.com/react-split-pane/-/react-split-pane-0.1.92.tgz#68242f72138aed95dd5910eeb9d99822c4fc3a41"
+  integrity sha512-GfXP1xSzLMcLJI5BM36Vh7GgZBpy+U/X0no+VM3fxayv+p1Jly5HpMofZJraeaMl73b3hvlr+N9zJKvLB/uz9w==
+  dependencies:
+    prop-types "^15.7.2"
+    react-lifecycles-compat "^3.0.4"
+    react-style-proptype "^3.2.2"
+
 react-storage-hooks@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/react-storage-hooks/-/react-storage-hooks-4.0.1.tgz#e30ed5cda48c77c431ecc02ec3824bd615f5b7fb"
   integrity sha512-fetDkT5RDHGruc2NrdD1iqqoLuXgbx6AUpQSQLLkrCiJf8i97EtwJNXNTy3+GRfsATLG8TZgNc9lGRZOaU5yQA==
 
+react-style-proptype@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-style-proptype/-/react-style-proptype-3.2.2.tgz#d8e998e62ce79ec35b087252b90f19f1c33968a0"
+  integrity sha512-ywYLSjNkxKHiZOqNlso9PZByNEY+FTyh3C+7uuziK0xFXu9xzdyfHwg4S9iyiRRoPCR4k2LqaBBsWVmSBwCWYQ==
+  dependencies:
+    prop-types "^15.5.4"
+
 react-syntax-highlighter@^13.5.3:
   version "13.5.3"
   resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-13.5.3.tgz#9712850f883a3e19eb858cf93fad7bb357eea9c6"