WIP style IFQL builder

ui/src/ifql/components/BodyBuilder.tsx

@@ -52,7 +52,7 @@ class BodyBuilder extends PureComponent<Props> {
       )
     })
 
-    return _.flatten(bodybuilder)
+    return <div className="body-builder">{_.flatten(bodybuilder)}</div>
   }
 
   private get funcNames() {

ui/src/ifql/components/From.tsx

@@ -41,12 +41,13 @@ class From extends PureComponent<Props, State> {
 
   public render() {
     const {value, argKey} = this.props
+
     return (
-      <div className="from">
-        <label className="from--label">{argKey}: </label>
+      <div className="func-arg">
+        <label className="func-arg--label">{argKey}</label>
         <Dropdown
           selected={value}
-          className="from--dropdown dropdown-160"
+          className="from--dropdown dropdown-160 func-arg--value"
           menuClass="dropdown-astronaut"
           buttonColor="btn-default"
           items={this.items}

ui/src/ifql/components/FuncArg.tsx

@@ -88,7 +88,8 @@ class FuncArg extends PureComponent<Props> {
         // TODO: make separate function component
         return (
           <div className="func-arg">
-            {argKey} : {value}
+            <label className="func-arg--label">{argKey}</label>
+            <div className="func-arg--value">{value}</div>
           </div>
         )
       }
@@ -96,14 +97,16 @@ class FuncArg extends PureComponent<Props> {
         // TODO: handle nil type
         return (
           <div className="func-arg">
-            {argKey} : {value}
+            <label className="func-arg--label">{argKey}</label>
+            <div className="func-arg--value">{value}</div>
           </div>
         )
       }
       default: {
         return (
           <div className="func-arg">
-            {argKey} : {value}
+            <label className="func-arg--label">{argKey}</label>
+            <div className="func-arg--value">{value}</div>
           </div>
         )
       }

ui/src/ifql/components/FuncArgBool.tsx

@@ -16,9 +16,11 @@ interface Props {
 class FuncArgBool extends PureComponent<Props> {
   public render() {
     return (
-      <div>
-        {this.props.argKey}:
-        <SlideToggle active={this.props.value} onToggle={this.handleToggle} />
+      <div className="func-arg">
+        <label className="func-arg--label">{this.props.argKey}</label>
+        <div className="func-arg--value">
+          <SlideToggle active={this.props.value} onToggle={this.handleToggle} />
+        </div>
       </div>
     )
   }

ui/src/ifql/components/FuncArgInput.tsx

@@ -17,20 +17,25 @@ interface Props {
 class FuncArgInput extends PureComponent<Props> {
   public render() {
     const {argKey, value, type} = this.props
+
     return (
-      <div>
-        <label htmlFor={argKey}>{argKey}: </label>
-        <input
-          name={argKey}
-          value={value}
-          placeholder={type}
-          onChange={this.handleChange}
-          onKeyDown={this.handleKeyDown}
-          type="text"
-          className="form-control input-xs"
-          spellCheck={false}
-          autoComplete="off"
-        />
+      <div className="func-arg">
+        <label className="func-arg--label" htmlFor={argKey}>
+          {argKey}
+        </label>
+        <div className="func-arg--value">
+          <input
+            name={argKey}
+            value={value}
+            placeholder={type}
+            onChange={this.handleChange}
+            onKeyDown={this.handleKeyDown}
+            type="text"
+            className="form-control input-sm"
+            spellCheck={false}
+            autoComplete="off"
+          />
+        </div>
       </div>
     )
   }

ui/src/ifql/components/TimeMachine.tsx

@@ -24,7 +24,7 @@ class TimeMachine extends PureComponent<Props> {
   public render() {
     return (
       <Resizer
-        topMinPixels={200}
+        topMinPixels={440}
         bottomMinPixels={200}
         orientation={HANDLE_VERTICAL}
         containerClass="page-contents"

ui/src/style/components/func-node.scss

@@ -1,6 +1,17 @@
+.body-builder {
+  padding: 12px;
+  min-width: 440px;
+  overflow: hidden;
+  background-color: $g2-kevlar;
+}
+
 .declaration {
-  width: 500px;
-  margin-bottom: 30px;
+  width: 100%;
+  margin-bottom: 12px;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
 }
 
 .variable-name {
@@ -12,6 +23,7 @@
   border-radius: $radius;
   margin-bottom: 2px;
   width: 100%;
+  @include no-user-select();
 }
 
 
@@ -37,6 +49,13 @@
   border-radius: $radius 0 0 $radius;
   font-weight: 600;
   width: 130px;
+  @include no-user-select();
+  display: flex;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  align-items: center;
+  align-content: center;
 }
 
 .func-args {
@@ -52,10 +71,6 @@
   font-weight: 500;
 }
 
-.func-arg {
-  display: flex;
-}
-
 .func-node--delete {
   position: absolute;
   width: 22px;
@@ -76,3 +91,25 @@
     opacity: 1;
   }
 }
+
+.func-arg {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin-bottom: 4px;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}
+.func-arg--label {
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 600;
+  color: $g10-wolf;
+  min-width: 40px;
+  @include no-user-select();
+}
+.func-arg--value {
+  flex: 1 0 0;
+}