diff --git a/x-pack/plugins/maps/public/_main.scss b/x-pack/plugins/maps/public/_main.scss index 74f670641574c..8f361a6287eb7 100644 --- a/x-pack/plugins/maps/public/_main.scss +++ b/x-pack/plugins/maps/public/_main.scss @@ -18,44 +18,6 @@ flex-direction: column; } - -// MapBox - -.mapContainer { - flex-grow: 1; - - .mapboxgl-popup { - z-index: 100; - border-color: $euiColorEmptyShade; - } - - .mapboxgl-popup-content { - background-color: $euiColorEmptyShade; - } - - .mapboxgl-popup-tip { - border-top-color: $euiColorEmptyShade !important; - } - - .mapboxgl-ctrl-top-left .mapboxgl-ctrl { - margin-left: $euiSizeM; - margin-top: $euiSizeM; - } - - .mapboxgl-ctrl-group:not(:empty) { - @include euiBottomShadowLarge; - background-color: $euiColorEmptyShade; - border-radius: $euiBorderRadius; - - > button { - @include size($euiSizeXL); - - + button { - border: none; - } - } - } -} .euiColorPicker__emptySwatch { position: relative; } diff --git a/x-pack/plugins/maps/public/_mapbox_hacks.scss b/x-pack/plugins/maps/public/_mapbox_hacks.scss new file mode 100644 index 0000000000000..1a1207667f37d --- /dev/null +++ b/x-pack/plugins/maps/public/_mapbox_hacks.scss @@ -0,0 +1,51 @@ +// MapBox + +.mapContainer { + flex-grow: 1; + + .mapboxgl-popup { + z-index: 100; + border-color: $euiColorEmptyShade; + } + + .mapboxgl-popup-content { + background-color: $euiColorEmptyShade; + } + + .mapboxgl-popup-tip { + border-top-color: $euiColorEmptyShade !important; + } + + .mapboxgl-ctrl-top-left .mapboxgl-ctrl { + margin-left: $euiSizeM; + margin-top: $euiSizeM; + } + + .mapboxgl-ctrl-group:not(:empty) { + @include euiBottomShadowLarge; + background-color: $euiColorEmptyShade; + border-radius: $euiBorderRadius; + + > button { + @include size($euiSizeXL); + + + button { + border: none; + } + } + } +} + +// Custom SVG as background for zoom controls based off of EUI glyphs plusInCircleFilled and minusInCircleFilled +// Also fixes dark mode +.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in { + background-repeat: no-repeat; + background-image: url("data:image/svg+xml,%0A%3Csvg width='15px' height='15px' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{hexToRGB($euiTextColor)}' d='M8,7 L8,3.5 C8,3.22385763 7.77614237,3 7.5,3 C7.22385763,3 7,3.22385763 7,3.5 L7,7 L3.5,7 C3.22385763,7 3,7.22385763 3,7.5 C3,7.77614237 3.22385763,8 3.5,8 L7,8 L7,11.5 C7,11.7761424 7.22385763,12 7.5,12 C7.77614237,12 8,11.7761424 8,11.5 L8,8 L11.5,8 C11.7761424,8 12,7.77614237 12,7.5 C12,7.22385763 11.7761424,7 11.5,7 L8,7 Z M7.5,15 C3.35786438,15 0,11.6421356 0,7.5 C0,3.35786438 3.35786438,0 7.5,0 C11.6421356,0 15,3.35786438 15,7.5 C15,11.6421356 11.6421356,15 7.5,15 Z' /%3E%3C/svg%3E"); + background-position: center; +} + +.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out { + background-repeat: no-repeat; + background-image: url("data:image/svg+xml,%0A%3Csvg width='15px' height='15px' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{hexToRGB($euiTextColor)}' d='M7.5,0 C11.6355882,0 15,3.36441176 15,7.5 C15,11.6355882 11.6355882,15 7.5,15 C3.36441176,15 0,11.6355882 0,7.5 C0,3.36441176 3.36441176,0 7.5,0 Z M3.5,7 C3.22385763,7 3,7.22385763 3,7.5 C3,7.77614237 3.22385763,8 3.5,8 L11.5,8 C11.7761424,8 12,7.77614237 12,7.5 C12,7.22385763 11.7761424,7 11.5,7 L3.5,7 Z' /%3E%3C/svg%3E"); + background-position: center; +} diff --git a/x-pack/plugins/maps/public/components/widget_overlay/_index.scss b/x-pack/plugins/maps/public/components/widget_overlay/_index.scss index b4e97724cda82..cc1ab35039dac 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/_index.scss +++ b/x-pack/plugins/maps/public/components/widget_overlay/_index.scss @@ -1,3 +1,5 @@ +@import './mixins'; + @import './widget_overlay'; @import './attribution_control/attribution_control'; @import './layer_control/index'; diff --git a/x-pack/plugins/maps/public/components/widget_overlay/_mixins.scss b/x-pack/plugins/maps/public/components/widget_overlay/_mixins.scss new file mode 100644 index 0000000000000..09548813a4576 --- /dev/null +++ b/x-pack/plugins/maps/public/components/widget_overlay/_mixins.scss @@ -0,0 +1,12 @@ +@mixin mapOverlayIsTextOnly() { + text-shadow: + 0 0 2px $euiColorEmptyShade, + // Multiple shadows helps turn it into an outline since + // text shadows have no spread value + 0 0 1px $euiColorEmptyShade, + 0 0 1px $euiColorEmptyShade, + 0 0 1px $euiColorEmptyShade, + 0 0 1px $euiColorEmptyShade, + 0 0 1px $euiColorEmptyShade, + 0 0 1px $euiColorEmptyShade; +} diff --git a/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss b/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss index c2ff67ac818d2..6000e188155e1 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss +++ b/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss @@ -13,16 +13,14 @@ pointer-events: none; /* 1 */ } -.mapWidgetOverlay__rightSideWrapper { - overflow: hidden; // Fixes Chrome overflow -} - -.mapWidgetOverlay__rightSide { +.mapWidgetOverlay__layerWrapper { + align-items: flex-end; width: $euiSize * 20; + min-height: 0; // Fixes scroll in Firefox } -.mapWidgetOverlay__layerWrapper { - align-items: flex-end; +.mapWidgetControl__headerFlexItem { + flex-shrink: 0; } .mapWidgetControl { @@ -45,5 +43,3 @@ flex-shrink: 0; text-transform: uppercase; } - - diff --git a/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/__snapshots__/view.test.js.snap b/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/__snapshots__/view.test.js.snap index 25f8232012645..d61f08152f0c8 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/__snapshots__/view.test.js.snap +++ b/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/__snapshots__/view.test.js.snap @@ -1,28 +1,26 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AttributionControl is rendered 1`] = ` - - attribution with no link - , - - attribution with link - + + attribution with no link + , + + attribution with link + + - + `; diff --git a/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/_attribution_control.scss b/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/_attribution_control.scss index 4654055705b2c..a11822605ac53 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/_attribution_control.scss +++ b/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/_attribution_control.scss @@ -1,3 +1,5 @@ .mapAttributionControl { - padding: 0 $euiSizeXS; + @include mapOverlayIsTextOnly; + pointer-events: all; + padding-left: $euiSizeM; } diff --git a/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/view.js b/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/view.js index c0f8087f6f214..4a8a4a5a440a1 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/view.js +++ b/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/view.js @@ -8,7 +8,6 @@ import React, { Fragment } from 'react'; import _ from 'lodash'; import { EuiText, - EuiPanel, EuiLink, } from '@elastic/eui'; @@ -68,7 +67,7 @@ export class AttributionControl extends React.Component { } return ( - {label} + {label} ); } @@ -88,11 +87,11 @@ export class AttributionControl extends React.Component { return null; } return ( - - - {this._renderAttributions()} +
+ + {this._renderAttributions()} - +
); } } diff --git a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/__snapshots__/view.test.js.snap b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/__snapshots__/view.test.js.snap index 73041b29b290b..ddc1f53ba5ee0 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/__snapshots__/view.test.js.snap +++ b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/__snapshots__/view.test.js.snap @@ -9,6 +9,7 @@ exports[`LayerControl is rendered 1`] = ` paddingSize="none" > - + { @@ -31,18 +31,20 @@ export function ViewControl({ isSetViewOpen, closeSetView, openSetView, mouseCoo - - )} + iconType="crosshairs" + color="text" + aria-label={i18n.translate('xpack.maps.viewControl.goToButtonLabel', { + defaultMessage: 'Go to' + })} + title={i18n.translate('xpack.maps.viewControl.goToButtonLabel', { + defaultMessage: 'Go to' + })} + /> + )} isOpen={isSetViewOpen} closePopover={closeSetView} > @@ -58,9 +60,9 @@ export function ViewControl({ isSetViewOpen, closeSetView, openSetView, mouseCoo ? _.round(mouseCoordinates.lon, DECIMAL_DEGREES_PRECISION) : ''; return ( - +
-

+ {lon} -

+ - +
); } return ( - + {mouseCoordinates && renderMouseCoordinates()} diff --git a/x-pack/plugins/maps/public/components/widget_overlay/widget_overlay.js b/x-pack/plugins/maps/public/components/widget_overlay/widget_overlay.js index bd59361cc61b2..712bffa86030f 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/widget_overlay.js +++ b/x-pack/plugins/maps/public/components/widget_overlay/widget_overlay.js @@ -16,20 +16,11 @@ import { AttributionControl } from './attribution_control'; export function WidgetOverlay() { return ( - - - - - - - - - + + + + + diff --git a/x-pack/plugins/maps/public/index.scss b/x-pack/plugins/maps/public/index.scss index 7549877b46861..a55d7a8c875d3 100644 --- a/x-pack/plugins/maps/public/index.scss +++ b/x-pack/plugins/maps/public/index.scss @@ -11,5 +11,6 @@ // mapChart__legend-isLoading @import './main'; +@import './mapbox_hacks'; @import './components/index'; @import './shared/index'; diff --git a/x-pack/plugins/maps/public/shared/icons/_color_gradient.scss b/x-pack/plugins/maps/public/shared/icons/_color_gradient.scss index 960a8dc1aa3ce..dbe9575ce5698 100644 --- a/x-pack/plugins/maps/public/shared/icons/_color_gradient.scss +++ b/x-pack/plugins/maps/public/shared/icons/_color_gradient.scss @@ -7,3 +7,7 @@ bottom: 0; left: 0; } + +.mapFillableCircle { + overflow: visible; +} diff --git a/x-pack/plugins/maps/public/shared/icons/additional_layer_icons.js b/x-pack/plugins/maps/public/shared/icons/additional_layer_icons.js index 671b94fb4fbc8..accc6eb13ef16 100644 --- a/x-pack/plugins/maps/public/shared/icons/additional_layer_icons.js +++ b/x-pack/plugins/maps/public/shared/icons/additional_layer_icons.js @@ -9,7 +9,7 @@ import React from 'react'; export const FillableCircle = ({ style }) => (