Add & Style Varmoji Flipper

ui/src/data_explorer/components/QueryEditor.js

@@ -189,15 +189,6 @@ class QueryEditor extends Component {
 
     return (
       <div className="query-editor">
-        {isTemplating
-          ? <TemplateDrawer
-              onClickTempVar={this.handleClickTempVar}
-              templates={filteredTemplates}
-              selected={selectedTemplate}
-              onMouseOverTempVar={this.handleMouseOverTempVar}
-              handleClickOutside={this.handleCloseDrawer}
-            />
-          : null}
         <textarea
           className="query-editor--field"
           onChange={this.handleChange}
@@ -209,7 +200,22 @@ class QueryEditor extends Component {
           autoComplete="off"
           spellCheck="false"
         />
-        {this.renderStatus(status)}
+        <div className={classNames('varmoji', {'varmoji-rotated': isTemplating})}>
+          <div className="varmoji-container">
+            <div className="varmoji-front">{this.renderStatus(status)}</div>
+            <div className="varmoji-back">
+              {isTemplating
+              ? <TemplateDrawer
+                  onClickTempVar={this.handleClickTempVar}
+                  templates={filteredTemplates}
+                  selected={selectedTemplate}
+                  onMouseOverTempVar={this.handleMouseOverTempVar}
+                  handleClickOutside={this.handleCloseDrawer}
+                />
+              : null}
+            </div>
+          </div>
+        </div>
       </div>
     )
   }

ui/src/shared/components/TemplateDrawer.js

@@ -1,12 +1,6 @@
 import React, {PropTypes} from 'react'
 import OnClickOutside from 'react-onclickoutside'
-
+import classNames from 'classnames'
-const style = {
-  display: 'flex',
-  alignItems: 'center',
-  fontWeight: '700',
-  padding: '15px',
-}
 
 const TemplateDrawer = ({
   templates,
@@ -14,18 +8,13 @@ const TemplateDrawer = ({
   onMouseOverTempVar,
   onClickTempVar,
 }) => (
-  <div style={style}>
+  <div className="template-drawer">
     {templates.map(t => (
-      <div
+      <div className={classNames('template-drawer--item', {'template-drawer--selected': t.tempVar === selected.tempVar})}
         onMouseOver={() => {
           onMouseOverTempVar(t)
         }}
         onClick={() => onClickTempVar(t)}
-        style={{
-          background: t.tempVar === selected.tempVar ? 'red' : 'transparent',
-          marginRight: '5px',
-          cursor: 'pointer',
-        }}
         key={t.tempVar}
       >
         {' '}{t.tempVar}{' '}

ui/src/style/components/query-editor.scss

@@ -11,16 +11,7 @@
   border-radius: 0 $radius 0 0;
   background-color: $query-editor--bg;
   position: relative;
-}
+  z-index: 2; /* Minimum amount to obcure the toggle flip within Query Builder. Will fix later */
-.query-editor--field,
-.query-editor--status {
-  transition:
-    color 0.25s ease,
-    background-color 0.25s ease,
-    border-color 0.25s ease;
-  border: 2px solid $query-editor--bg;
-  background-color: $query-editor--field-bg;
-  
 }
 .query-editor--field {
   font-family: $code-font;
@@ -34,7 +25,13 @@
   resize: none;
   width: 100%;
   height: $query-editor--field-height;
+  transition:
+    color 0.25s ease,
+    background-color 0.25s ease,
+    border-color 0.25s ease;
+  border: 2px solid $query-editor--bg;
   border-bottom: 0;
+  background-color: $query-editor--field-bg;
   color: $query-editor--field-text;
   padding: 12px 10px 0 10px;
   border-radius: $radius $radius 0 0;
@@ -49,7 +46,7 @@
     color: $query-editor--field-text !important;
     border-color: $c-pool;
   }
-  &:focus + .query-editor--status {
+  &:focus + .varmoji {
     border-color: $c-pool;
   }
 }
@@ -58,8 +55,6 @@
   align-items: center;
   justify-content: flex-end;
   height: $query-editor--status-height;
-  border-radius: 0 0 $radius $radius;
-  border-top: 0;
 
   /* Loading State */
   .loading-dots {
@@ -109,3 +104,84 @@
     max-width: $query-editor--templates-menu-width;
   }
 }
+
+
+/*
+  Varmoji Flipper
+  -------------------------------------
+  Handles the 3D flip transition between two states (isTemplating)
+  Contents could in theory be anything
+*/
+.varmoji {
+  transition: border-color 0.25s ease;
+  border: 2px solid $query-editor--bg;
+  border-top: 0;
+  background-color: $query-editor--field-bg;
+  border-radius: 0 0 $radius $radius;
+  height: $query-editor--status-height;
+  width: 100%;
+  perspective: 1000px;
+}
+.varmoji-container {
+  transition: transform 0.6s ease;
+  transform-style: preserve-3d;
+  position: relative;
+  transform-origin: 100% #{$query-editor--status-height / 2};
+}
+.varmoji-front,
+.varmoji-back {
+  backface-visibility: hidden;
+  width: 100%;
+  height: $query-editor--status-height;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.varmoji-front {
+  z-index: 3;
+  transform: rotateX(0deg);
+}
+.varmoji-back {
+  z-index: 2;
+  transform: rotateX(180deg);
+}
+.varmoji.varmoji-rotated .varmoji-container {
+  transform: rotateX(-180deg);
+}
+
+/*
+  Template Drawer
+  -------------------------------------
+  Not sure if this needs its own stylesheet
+*/
+
+.template-drawer {
+  height: $query-editor--status-height;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 4px;
+}
+.template-drawer--item {
+  margin-right: 2px;
+  display: inline-block;
+  font-family: $code-font;
+  font-weight: 700;
+  font-size: 12px;
+  height: ($query-editor--status-height - 14px);
+  line-height: ($query-editor--status-height - 14px);
+  padding: 0 6px;
+  background-color: $query-editor--field-bg;
+  color: $c-comet;
+  border-radius: $radius-small;
+  cursor: pointer;
+  transition:
+    color 0.25s ease,
+    background-color 0.25s ease;
+
+  /* Selected State */
+  &.template-drawer--selected {
+    color: $g20-white;
+    background-color: $c-star;
+  }
+}