feat: use styled-components for panel resizer (#1131)

packages/web/src/javascripts/Components/PanelResizer/PanelResizer.tsx

@@ -1,5 +1,6 @@
 import { Component, createRef, MouseEventHandler } from 'react'
 import { debounce } from '@/Utils'
+import styled from 'styled-components'
 
 export type ResizeFinishCallback = (
   lastWidth: number,
@@ -38,6 +39,50 @@ type State = {
   pressed: boolean
 }
 
+const StyledPanelResizer = styled.div<{
+  hoverable?: boolean
+  alwaysVisible?: boolean
+  pressed: boolean
+  collapsed: boolean
+}>`
+  background-color: var(--panel-resizer-background-color);
+  border-bottom: none;
+  border-top: none;
+  cursor: col-resize;
+  height: 100%;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 4px;
+  z-index: var(--z-index-panel-resizer);
+
+  @keyframes fade {
+    0% {
+      opacity: 0;
+    }
+
+    50% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+
+  &.left {
+    left: 0;
+    right: none;
+  }
+
+  ${(props) => (props.alwaysVisible || props.collapsed || props.pressed) && 'opacity: 1;'}
+
+  &:hover {
+    ${(props) => props.hoverable && 'opacity: 1;'}
+  }
+`
+
 class PanelResizer extends Component<Props, State> {
   private overlay?: HTMLDivElement
   private resizerElementRef = createRef<HTMLDivElement>()
@@ -77,6 +122,7 @@ class PanelResizer extends Component<Props, State> {
   }
 
   override componentDidMount() {
+    console.log(this.resizerElementRef.current)
     this.resizerElementRef.current?.addEventListener('dblclick', this.onDblClick)
   }
 
@@ -306,13 +352,15 @@ class PanelResizer extends Component<Props, State> {
 
   override render() {
     return (
-      <div
+      <StyledPanelResizer
-        className={`panel-resizer ${this.props.side} ${this.props.hoverable ? 'hoverable' : ''} ${
+        hoverable={this.props.hoverable}
-          this.props.alwaysVisible ? 'alwaysVisible' : ''
+        alwaysVisible={this.props.alwaysVisible}
-        } ${this.state.pressed ? 'dragging' : ''} ${this.state.collapsed ? 'collapsed' : ''}`}
+        pressed={this.state.pressed}
+        collapsed={this.state.collapsed}
+        className={this.props.side}
         onMouseDown={this.onMouseDown}
         ref={this.resizerElementRef}
-      ></div>
+      />
     )
   }
 }

packages/web/src/stylesheets/_main.scss

@@ -4,7 +4,6 @@ $z-index-editor-title-bar: 100;
 $z-index-dropdown-menu: 1002;
 
 $z-index-resizer-overlay: 1000;
-$z-index-panel-resizer: 1001;
 
 $z-index-component-view: 1000;
 
@@ -19,6 +18,10 @@ $z-index-purchase-flow: 4000;
 $z-index-lock-screen: 10000;
 $z-index-modal: 10000;
 
+:root {
+  --z-index-panel-resizer: 1001;
+}
+
 html {
   font-size: 100%;
 }
@@ -126,64 +129,6 @@ $footer-height: 2rem;
   vertical-align: top;
   width: 100%;
 
-  panel-resizer,
-  .panel-resizer {
-    top: 0;
-    right: 0;
-    z-index: $z-index-panel-resizer;
-    width: 4px;
-    height: 100%;
-    position: absolute;
-    cursor: col-resize;
-    background-color: var(--panel-resizer-background-color);
-    opacity: 0;
-    border-top: none;
-    border-bottom: none;
-
-    @keyframes fade {
-      0% {
-        opacity: 0;
-      }
-
-      50% {
-        opacity: 1;
-      }
-
-      100% {
-        opacity: 0;
-      }
-    }
-
-    &.left {
-      left: 0;
-      right: none;
-    }
-
-    &.always-visible {
-      opacity: 1;
-    }
-
-    &.collapsed {
-      opacity: 1;
-    }
-
-    &.dragging {
-      opacity: 1;
-    }
-
-    &.animate-opacity {
-      animation-duration: 1.6s;
-      animation-name: fade;
-      animation-delay: 0.25s;
-    }
-
-    &.hoverable {
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-
   .section {
     padding-bottom: 0px;
     height: 100%;