Add transitions for doubleclick to resize

ui/src/shared/components/ResizeDivision.tsx

@@ -27,7 +27,11 @@ class Division extends PureComponent<Props> {
     const {name, render} = this.props
     return (
       <>
-        <div className="threesizer--division" style={this.containerStyle}>
+        <div
+          className={this.containerClass}
+          style={this.containerStyle}
+          title={this.title}
+        >
           <div
             draggable={true}
             className={this.className}
@@ -44,21 +48,37 @@ class Division extends PureComponent<Props> {
     )
   }
 
+  private get title() {
+    return 'Drag to resize.\nDouble click to expand.'
+  }
+
   private get containerStyle() {
     return {
       height: `calc((100% - 90px) * ${this.props.size} + 30px)`,
     }
   }
 
+  private get containerClass(): string {
+    const isAnyHandleBeingDragged = !!this.props.activeHandleID
+    return classnames('threesizer--division', {
+      dragging: isAnyHandleBeingDragged,
+    })
+  }
+
   private get className(): string {
-    const {draggable, id, activeHandleID} = this.props
+    const {draggable} = this.props
 
     return classnames('threesizer--handle', {
       disabled: !draggable,
-      dragging: id === activeHandleID,
+      dragging: this.isDragging,
     })
   }
 
+  private get isDragging(): boolean {
+    const {id, activeHandleID} = this.props
+    return id === activeHandleID
+  }
+
   private drag = e => {
     const {draggable, id} = this.props
 

ui/src/shared/components/Threesizer.tsx

@@ -77,10 +77,6 @@ class Threesizer extends Component<Props, State> {
       dragEvent.mouseY
     )
 
-    if (!this.state.activeHandleID) {
-      return
-    }
-
     if (orientation === HANDLE_VERTICAL) {
       const left = dragEvent.percentX < prevState.dragEvent.percentX
 
@@ -166,7 +162,7 @@ class Threesizer extends Component<Props, State> {
     const isMaxed = clickedDiv.size === 1
 
     if (isMaxed) {
-      this.equalize()
+      return this.equalize()
     }
 
     const divisions = this.state.divisions.map(d => {
@@ -181,8 +177,8 @@ class Threesizer extends Component<Props, State> {
   }
 
   private equalize = () => {
+    const denominator = this.state.divisions.length
     const divisions = this.state.divisions.map(d => {
-      const denominator = this.state.divisions.length
       return {...d, size: 1 / denominator}
     })
 

ui/src/style/components/threesizer.scss

@@ -24,6 +24,10 @@ $threesizer-contents-z: 1;
 .threesizer--division {
   position: relative;
   overflow: hidden;
+  transition: all 0.25s ease-in-out;
+  &.dragging {
+    transition: none;
+  }
 }
 
 /* Draggable Handle With Title */