Style vertical position

ui/src/ifql/components/TimeMachine.tsx

@@ -27,7 +27,7 @@ class TimeMachine extends PureComponent<Props> {
       <Resizer
         topMinPixels={440}
         bottomMinPixels={200}
-        orientation={HANDLE_VERTICAL}
+        orientation={HANDLE_HORIZONTAL}
         containerClass="page-contents"
       >
         {this.renderEditor}
@@ -40,7 +40,7 @@ class TimeMachine extends PureComponent<Props> {
     return (
       <Threesizer
         divisions={this.visPlusBuilder}
-        orientation={HANDLE_HORIZONTAL}
+        orientation={HANDLE_VERTICAL}
       />
     )
   }
@@ -61,7 +61,7 @@ class TimeMachine extends PureComponent<Props> {
 
   private get renderEditor() {
     return (
-      <Threesizer divisions={this.divisions} orientation={HANDLE_HORIZONTAL} />
+      <Threesizer divisions={this.divisions} orientation={HANDLE_VERTICAL} />
     )
   }
 

ui/src/shared/components/ResizeDivision.tsx

@@ -2,6 +2,7 @@ import React, {PureComponent, ReactElement, MouseEvent} from 'react'
 import classnames from 'classnames'
 
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
+import {HANDLE_VERTICAL, HANDLE_HORIZONTAL} from 'src/shared/constants/index'
 
 const NOOP = () => {}
 
@@ -25,7 +26,7 @@ class Division extends PureComponent<Props> {
   }
 
   public render() {
-    const {name, render} = this.props
+    const {name, render, orientation} = this.props
     return (
       <>
         <div className={this.containerClass} style={this.containerStyle}>
@@ -36,9 +37,12 @@ class Division extends PureComponent<Props> {
             onDoubleClick={this.handleDoubleClick}
             title={this.title}
           >
-            {name}
+            <div className="threesizer--title">{name}</div>
           </div>
-          <FancyScrollbar className="threesizer--contents" autoHide={true}>
+          <FancyScrollbar
+            className={`threesizer--contents ${orientation}`}
+            autoHide={true}
+          >
             {render()}
           </FancyScrollbar>
         </div>
@@ -51,13 +55,22 @@ class Division extends PureComponent<Props> {
   }
 
   private get containerStyle() {
-    const {size, offset} = this.props
+    if (this.props.orientation === HANDLE_HORIZONTAL) {
+      return {
+        height: this.size,
+      }
+    }
 
     return {
-      height: `calc((100% - ${offset}px) * ${size} + 30px)`,
+      width: this.size,
     }
   }
 
+  private get size(): string {
+    const {size, offset} = this.props
+    return `calc((100% - ${offset}px) * ${size} + 30px)`
+  }
+
   private get containerClass(): string {
     const isAnyHandleBeingDragged = !!this.props.activeHandleID
     return classnames('threesizer--division', {
@@ -66,11 +79,13 @@ class Division extends PureComponent<Props> {
   }
 
   private get className(): string {
-    const {draggable} = this.props
+    const {draggable, orientation} = this.props
 
     return classnames('threesizer--handle', {
       disabled: !draggable,
       dragging: this.isDragging,
+      vertical: orientation === HANDLE_VERTICAL,
+      horizonatl: orientation === HANDLE_HORIZONTAL,
     })
   }
 

ui/src/style/components/threesizer.scss

@@ -4,49 +4,63 @@
 */
 
 $threesizer-handle: 30px;
-$threesizer-handle-z: 2;
-$threesizer-contents-z: 1;
 
 .threesizer {
-  position: relative;
   width: 100%;
   height: 100%;
   display: flex;
-  flex-direction: column;
   align-items: stretch;
 
   &.dragging .threesizer--division {
     @include no-user-select();
     pointer-events: none;
   }
+
+  &.vertical {
+    flex-direction: row;
+  }
+
+  &.horizontal {
+    flex-direction: column;
+  }
 }
 
 .threesizer--division {
-  position: relative;
   overflow: hidden;
+  display: flex;
+  align-items: stretch;
+
   transition: height 0.25s ease-in-out, width 0.25s ease-in-out;
+
   &.dragging {
     transition: none;
   }
+
+  .vertical & {
+    flex-direction: column;
+  }
+
+  .horizontal & {
+    flex-direction: row;
+  }
 }
 
 /* Draggable Handle With Title */
 .threesizer--handle {
-  position: relative;
-  z-index: $threesizer-handle-z;
   @include no-user-select();
-  height: $threesizer-handle;
   background-color: $g4-onyx;
-  padding: 0 12px;
-  line-height: $threesizer-handle;
-  font-size: 13px;
-  font-weight: 500;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  color: $g11-sidewalk;
   transition: background-color 0.25s ease, color 0.25s ease;
 
+  &.vertical {
+    width: $threesizer-handle;
+    padding: 12px 0;
+  }
+
+  &.horizontal {
+    height: $threesizer-handle;
+    padding: 0 12px;
+  }
+
   &:hover {
     cursor: row-resize;
     color: $g16-pearl;
@@ -60,11 +74,23 @@ $threesizer-contents-z: 1;
   }
 }
 
+.threesizer--title {
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  color: $g11-sidewalk;
+
+  .vertical & {
+    transform: rotate(90deg) translateX(8px);
+  }
+}
+
 /* Division Contents */
 .threesizer--contents {
-  position: absolute !important;
-  top: $threesizer-handle;
-  z-index: $threesizer-contents-z;
-  width: 100%;
-  height: calc(100% - #{$threesizer-handle}) !important;
+  &.horizontal {
+    height: calc(100% - #{$threesizer-handle}) !important;
+  }
+  &.vertical {
+    width: calc(100% - #{$threesizer-handle}) !important;
+  }
 }