From c84a21c4b3b8ec5c0d6834267d8455241188cdf9 Mon Sep 17 00:00:00 2001
From: Alirie Gray <alirie.gray@gmail.com>
Date: Tue, 26 Mar 2019 15:37:37 -0700
Subject: [PATCH] polish(variables): fix margin and padding on
 VariablesControlBar

---
 .../variablesControlBar/DraggableDropdown.tsx    |  2 +-
 .../variablesControlBar/VariablesControlBar.scss | 12 ++++++++++--
 .../variablesControlBar/VariablesControlBar.tsx  | 16 ++++++++++++++--
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/ui/src/dashboards/components/variablesControlBar/DraggableDropdown.tsx b/ui/src/dashboards/components/variablesControlBar/DraggableDropdown.tsx
index c06e9f99a6..33233e4c50 100644
--- a/ui/src/dashboards/components/variablesControlBar/DraggableDropdown.tsx
+++ b/ui/src/dashboards/components/variablesControlBar/DraggableDropdown.tsx
@@ -82,7 +82,7 @@ class Dropdown extends React.Component<
 
     return connectDragSource(
       connectDropTarget(
-        <div style={{display: 'inline-block'}}>
+        <div className="variable-dropdown--container">
           <div className={className}>
             {/* TODO: Add variable description to title attribute when it is ready */}
             <div className="variable-dropdown--label">
diff --git a/ui/src/dashboards/components/variablesControlBar/VariablesControlBar.scss b/ui/src/dashboards/components/variablesControlBar/VariablesControlBar.scss
index 4ba2749597..69ca0ad954 100644
--- a/ui/src/dashboards/components/variablesControlBar/VariablesControlBar.scss
+++ b/ui/src/dashboards/components/variablesControlBar/VariablesControlBar.scss
@@ -21,7 +21,11 @@ $variables-control-bar--gutter: $ix-marg-a;
   }
 
   .variable-dropdown {
-    margin: 0 $variables-control-bar--gutter / 2;
+    margin-right: $variables-control-bar--gutter / 2;
+  }
+
+  .variable-dropdown--container {
+    padding-bottom: 5px;
   }
 
   .variables-spinner-container {
@@ -29,7 +33,6 @@ $variables-control-bar--gutter: $ix-marg-a;
   }
 }
 
-
 .variables-control-bar--empty {
   background-color: $g3-castle;
   border-radius: $radius;
@@ -40,3 +43,8 @@ $variables-control-bar--gutter: $ix-marg-a;
 .variables-control-bar > .techno-spinner {
   margin-left: 10px;
 }
+
+.variables-control-bar.presentation-mode {
+  padding: 8px 0px 0px 8px;
+  min-height: 0px;
+}
diff --git a/ui/src/dashboards/components/variablesControlBar/VariablesControlBar.tsx b/ui/src/dashboards/components/variablesControlBar/VariablesControlBar.tsx
index 7e9dc4ca98..a387b89cfa 100644
--- a/ui/src/dashboards/components/variablesControlBar/VariablesControlBar.tsx
+++ b/ui/src/dashboards/components/variablesControlBar/VariablesControlBar.tsx
@@ -4,6 +4,7 @@ import {connect} from 'react-redux'
 import {isEmpty} from 'lodash'
 import {DragDropContext} from 'react-dnd'
 import HTML5Backend from 'react-dnd-html5-backend'
+import classnames from 'classnames'
 
 // Components
 import {EmptyState, ComponentSize} from 'src/clockface'
@@ -39,6 +40,7 @@ interface StateProps {
   variables: Variable[]
   valuesStatus: RemoteDataState
   variablesStatus: RemoteDataState
+  inPresentationMode: boolean
 }
 
 interface DispatchProps {
@@ -67,7 +69,11 @@ class VariablesControlBar extends PureComponent<Props, State> {
 
   render() {
     return (
-      <div className="variables-control-bar">
+      <div
+        className={classnames('variables-control-bar', {
+          'presentation-mode': this.props.inPresentationMode,
+        })}
+      >
         <SpinnerContainer
           loading={this.state.initialLoading}
           spinnerComponent={<TechnoSpinner diameterPixels={50} />}
@@ -139,7 +145,13 @@ const mstp = (state: AppState, props: OwnProps): StateProps => {
   const valuesStatus = getDashboardValuesStatus(state, props.dashboardID)
   const variablesStatus = getDashboardVariablesStatus(state)
 
-  return {variables, valuesStatus, variablesStatus}
+  const {
+    app: {
+      ephemeral: {inPresentationMode},
+    },
+  } = state
+
+  return {variables, valuesStatus, variablesStatus, inPresentationMode}
 }
 
 export default DragDropContext(HTML5Backend)(