Fixed up the Go To and Draw popovers

x-pack/legacy/plugins/maps/public/components/geometry_filter_form.js

@@ -16,6 +16,7 @@ import {
   EuiButton,
   EuiSelect,
   EuiSpacer,
+  EuiTextAlign,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ES_GEO_FIELD_TYPE, ES_SPATIAL_RELATIONS } from '../../common/constants';
@@ -154,8 +155,6 @@ export class GeometryFilterForm extends Component {
     });
     return (
       <EuiForm className={this.props.className}>
-        <EuiSpacer size="s" />
-
         <EuiFormRow
           label={i18n.translate('xpack.maps.geometryFilterForm.geometryLabelLabel', {
             defaultMessage: 'Geometry label',
@@ -190,14 +189,18 @@ export class GeometryFilterForm extends Component {
 
         {this._renderRelationInput()}
 
-        <EuiButton
-          size="s"
-          fill
-          onClick={this._onSubmit}
-          isDisabled={!this.state.geometryLabel || !this.state.geoFieldTag}
-        >
-          {this.props.buttonLabel}
-        </EuiButton>
+        <EuiSpacer size="m" />
+
+        <EuiTextAlign textAlign="right">
+          <EuiButton
+            size="s"
+            fill
+            onClick={this._onSubmit}
+            isDisabled={!this.state.geometryLabel || !this.state.geoFieldTag}
+          >
+            {this.props.buttonLabel}
+          </EuiButton>
+        </EuiTextAlign>
       </EuiForm>
     );
   }

x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/set_view_control.js

@@ -13,6 +13,8 @@ import {
   EuiFieldNumber,
   EuiButtonIcon,
   EuiPopover,
+  EuiTextAlign,
+  EuiSpacer,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -72,7 +74,7 @@ export class SetViewControl extends Component {
     return {
       isInvalid,
       component: (
-        <EuiFormRow label={label} isInvalid={isInvalid} error={error} display="rowCompressed">
+        <EuiFormRow label={label} isInvalid={isInvalid} error={error} display="columnCompressed">
           <EuiFieldNumber
             compressed
             value={value}
@@ -125,22 +127,29 @@ export class SetViewControl extends Component {
     });
 
     return (
-      <EuiForm data-test-subj="mapSetViewForm">
+      <EuiForm data-test-subj="mapSetViewForm" style={{ width: 240 }}>
         {latFormRow}
 
         {lonFormRow}
 
         {zoomFormRow}
 
-        <EuiButton
-          size="s"
-          fill
-          disabled={isLatInvalid || isLonInvalid || isZoomInvalid}
-          onClick={this._onSubmit}
-          data-test-subj="submitViewButton"
-        >
-          <FormattedMessage id="xpack.maps.setViewControl.submitButtonLabel" defaultMessage="Go" />
-        </EuiButton>
+        <EuiSpacer size="s" />
+
+        <EuiTextAlign textAlign="right">
+          <EuiButton
+            size="s"
+            fill
+            disabled={isLatInvalid || isLonInvalid || isZoomInvalid}
+            onClick={this._onSubmit}
+            data-test-subj="submitViewButton"
+          >
+            <FormattedMessage
+              id="xpack.maps.setViewControl.submitButtonLabel"
+              defaultMessage="Go"
+            />
+          </EuiButton>
+        </EuiTextAlign>
       </EuiForm>
     );
   }
@@ -149,6 +158,7 @@ export class SetViewControl extends Component {
     return (
       <EuiPopover
         anchorPosition="leftUp"
+        panelPaddingSize="s"
         button={
           <EuiButtonIcon
             className="mapToolbarOverlay__button"

x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/tools_control/tools_control.js

@@ -26,10 +26,17 @@ const DRAW_BOUNDS_LABEL = i18n.translate('xpack.maps.toolbarOverlay.drawBoundsLa
   defaultMessage: 'Draw bounds to filter data',
 });
 
-export class ToolsControl extends Component {
+const DRAW_SHAPE_LABEL_SHORT = i18n.translate('xpack.maps.toolbarOverlay.drawShapeLabelShort', {
+  defaultMessage: 'Draw shape',
+});
+
+const DRAW_BOUNDS_LABEL_SHORT = i18n.translate('xpack.maps.toolbarOverlay.drawBoundsLabelShort', {
+  defaultMessage: 'Draw bounds',
+});
 
+export class ToolsControl extends Component {
   state = {
-    isPopoverOpen: false
+    isPopoverOpen: false,
   };
 
   _togglePopover = () => {
@@ -42,18 +49,18 @@ export class ToolsControl extends Component {
     this.setState({ isPopoverOpen: false });
   };
 
-  _initiateShapeDraw = (options) => {
+  _initiateShapeDraw = options => {
     this.props.initiateDraw({
       drawType: DRAW_TYPE.POLYGON,
-      ...options
+      ...options,
     });
     this._closePopover();
-  }
+  };
 
-  _initiateBoundsDraw = (options) => {
+  _initiateBoundsDraw = options => {
     this.props.initiateDraw({
       drawType: DRAW_TYPE.BOUNDS,
-      ...options
+      ...options,
     });
     this._closePopover();
   };
@@ -68,48 +75,50 @@ export class ToolsControl extends Component {
         items: [
           {
             name: DRAW_SHAPE_LABEL,
-            panel: 1
+            panel: 1,
           },
           {
             name: DRAW_BOUNDS_LABEL,
-            panel: 2
-          }
-        ]
+            panel: 2,
+          },
+        ],
       },
       {
         id: 1,
-        title: DRAW_SHAPE_LABEL,
+        title: DRAW_SHAPE_LABEL_SHORT,
         content: (
           <GeometryFilterForm
             className="mapDrawControl__geometryFilterForm"
-            buttonLabel={i18n.translate('xpack.maps.toolbarOverlay.drawShape.onSubmitButtonLabel', {
-              defaultMessage: 'Draw shape',
-            })}
+            buttonLabel={DRAW_SHAPE_LABEL_SHORT}
             geoFields={this.props.geoFields}
-            intitialGeometryLabel={i18n.translate('xpack.maps.toolbarOverlay.drawShape.initialGeometryLabel', {
-              defaultMessage: 'shape',
-            })}
+            intitialGeometryLabel={i18n.translate(
+              'xpack.maps.toolbarOverlay.drawShape.initialGeometryLabel',
+              {
+                defaultMessage: 'shape',
+              }
+            )}
             onSubmit={this._initiateShapeDraw}
           />
-        )
+        ),
       },
       {
         id: 2,
-        title: DRAW_BOUNDS_LABEL,
+        title: DRAW_BOUNDS_LABEL_SHORT,
         content: (
           <GeometryFilterForm
             className="mapDrawControl__geometryFilterForm"
-            buttonLabel={i18n.translate('xpack.maps.toolbarOverlay.drawBounds.onSubmitButtonLabel', {
-              defaultMessage: 'Draw bounds',
-            })}
+            buttonLabel={DRAW_BOUNDS_LABEL_SHORT}
             geoFields={this.props.geoFields}
-            intitialGeometryLabel={i18n.translate('xpack.maps.toolbarOverlay.drawBounds.initialGeometryLabel', {
-              defaultMessage: 'bounds',
-            })}
+            intitialGeometryLabel={i18n.translate(
+              'xpack.maps.toolbarOverlay.drawBounds.initialGeometryLabel',
+              {
+                defaultMessage: 'bounds',
+              }
+            )}
             onSubmit={this._initiateBoundsDraw}
           />
-        )
-      }
+        ),
+      },
     ];
   }
 
@@ -141,10 +150,7 @@ export class ToolsControl extends Component {
         withTitle
         anchorPosition="leftUp"
       >
-        <EuiContextMenu
-          initialPanelId={0}
-          panels={this._getDrawPanels()}
-        />
+        <EuiContextMenu initialPanelId={0} panels={this._getDrawPanels()} />
       </EuiPopover>
     );
 
@@ -154,15 +160,9 @@ export class ToolsControl extends Component {
 
     return (
       <EuiFlexGroup gutterSize="s">
+        <EuiFlexItem>{toolsPopoverButton}</EuiFlexItem>
         <EuiFlexItem>
-          {toolsPopoverButton}
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiButton
-            size="s"
-            fill
-            onClick={this.props.cancelDraw}
-          >
+          <EuiButton size="s" fill onClick={this.props.cancelDraw}>
             <FormattedMessage
               id="xpack.maps.tooltip.toolsControl.cancelDrawButtonLabel"
               defaultMessage="Cancel"