github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Maps] Fix some overlays designs (#36837) (#36856)

Browse source 
* Better text as overlay

* Make “Go to” button an icon button

* Fix layout with scrolling and overflow shadow of right side

* Show full stroke of fillable circle

* Moved mapbox styles to a hack file, increased text shadow for better visibility
This commit is contained in:
Caroline Horn 2019-05-23 15:48:20 -04:00 • committed by GitHub
parent fd797f3665
commit 30b1ee3a16
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 137 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

38
x-pack/plugins/maps/public/_main.scss
View file

@ -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;
}

51
x-pack/plugins/maps/public/_mapbox_hacks.scss Normal file
View file

@ -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;
}

2
x-pack/plugins/maps/public/components/widget_overlay/_index.scss
View file

@ -1,3 +1,5 @@
@import './mixins';
@import './widget_overlay';
@import './attribution_control/attribution_control';
@import './layer_control/index';

12
x-pack/plugins/maps/public/components/widget_overlay/_mixins.scss Normal file
View file

@ -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;
}

16
x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss
View file

@ -13,16 +13,14 @@
pointer-events: none; /* 1 */
}
.mapWidgetOverlay__rightSideWrapper {
overflow: hidden; // Fixes Chrome overflow
}
.mapWidgetOverlay__rightSide {
width: $euiSize * 20;
}
.mapWidgetOverlay__layerWrapper {
align-items: flex-end;
width: $euiSize * 20;
min-height: 0; // Fixes scroll in Firefox
}
.mapWidgetControl__headerFlexItem {
flex-shrink: 0;
}
.mapWidgetControl {
@ -45,5 +43,3 @@
flex-shrink: 0;
text-transform: uppercase;
}

32
x-pack/plugins/maps/public/components/widget_overlay/attribution_control/__snapshots__/view.test.js.snap generated
View file

@ -1,28 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AttributionControl is rendered 1`] = `
<EuiPanel
className="mapWidgetControl mapAttributionControl"
grow={false}
hasShadow={false}
paddingSize="none"
<div
className="mapAttributionControl"
>
<EuiText
color="subdued"
size="xs"
>
<small>
attribution with no link
,
<EuiLink
color="subdued"
href="https://coolmaps.com"
target="_blank"
type="button"
>
attribution with link
</EuiLink>
<strong>
attribution with no link
,
<EuiLink
color="text"
href="https://coolmaps.com"
target="_blank"
type="button"
>
attribution with link
</EuiLink>
</strong>
</small>
</EuiText>
</EuiPanel>
</div>
`;

4
x-pack/plugins/maps/public/components/widget_overlay/attribution_control/_attribution_control.scss
View file

@ -1,3 +1,5 @@
.mapAttributionControl {
padding: 0 $euiSizeXS;
@include mapOverlayIsTextOnly;
pointer-events: all;
padding-left: $euiSizeM;
}

11
x-pack/plugins/maps/public/components/widget_overlay/attribution_control/view.js
View file

@ -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 (
<EuiLink color="subdued" href={url} target="_blank">{label}</EuiLink>
<EuiLink color="text" href={url} target="_blank">{label}</EuiLink>
);
}
@ -88,11 +87,11 @@ export class AttributionControl extends React.Component {
return null;
}
return (
<EuiPanel className="mapWidgetControl mapAttributionControl" paddingSize="none" grow={false}>
<EuiText color="subdued" size="xs">
<small>{this._renderAttributions()}</small>
<div className="mapAttributionControl">
<EuiText size="xs">
<small><strong>{this._renderAttributions()}</strong></small>
</EuiText>
</EuiPanel>
</div>
);
}
}

2
x-pack/plugins/maps/public/components/widget_overlay/layer_control/__snapshots__/view.test.js.snap generated
View file

@ -9,6 +9,7 @@ exports[`LayerControl is rendered 1`] = `
paddingSize="none"
>
<EuiFlexItem
className="mapWidgetControl__headerFlexItem"
grow={false}
>
<EuiFlexGroup
@ -108,6 +109,7 @@ exports[`LayerControl props isReadOnly 1`] = `
paddingSize="none"
>
<EuiFlexItem
className="mapWidgetControl__headerFlexItem"
grow={false}
>
<EuiFlexGroup

10
x-pack/plugins/maps/public/components/widget_overlay/layer_control/_layer_control.scss
View file

@ -6,8 +6,13 @@
border-top: 1px solid $euiColorLightestShade;
}
.mapLayerControl__addLayerButton {
flex-shrink: 0;
}
.mapLayerControl__addLayerButton,
.mapLayerControl__openLayerTOCButton {
.mapLayerControl__openLayerTOCButton,
.mapViewControl__gotoButton {
pointer-events: all;
&:enabled,
@ -18,7 +23,8 @@
}
.mapLayerControl__openLayerTOCButton,
.mapLayerControl__closeLayerTOCButton {
.mapLayerControl__closeLayerTOCButton,
.mapViewControl__gotoButton {
@include size($euiSizeXL);
background-color: $euiColorEmptyShade !important; // During all states
}

2
x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.js
View file

@ -66,7 +66,7 @@ export function LayerControl({ isReadOnly, isLayerTOCOpen, showAddLayerWizard, c
return (
<Fragment>
<EuiPanel className="mapWidgetControl mapWidgetControl-hasShadow" paddingSize="none" grow={false}>
<EuiFlexItem grow={false}>
<EuiFlexItem className="mapWidgetControl__headerFlexItem" grow={false}>
<EuiFlexGroup
justifyContent="spaceBetween"
alignItems="center"

2
x-pack/plugins/maps/public/components/widget_overlay/view_control/_view_control.scss
View file

@ -5,7 +5,7 @@
*/
.mapViewControl__coordinates {
padding: $euiSizeXS $euiSizeS;
@include mapOverlayIsTextOnly;
justify-content: center;
pointer-events: none;
}

37
x-pack/plugins/maps/public/components/widget_overlay/view_control/view_control.js
View file

@ -9,14 +9,14 @@ import React from 'react';
import {
EuiFlexGroup,
EuiFlexItem,
EuiPanel,
EuiButton,
EuiButtonIcon,
EuiPopover,
EuiText,
} from '@elastic/eui';
import { SetView } from './set_view';
import { DECIMAL_DEGREES_PRECISION } from '../../../../common/constants';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
export function ViewControl({ isSetViewOpen, closeSetView, openSetView, mouseCoordinates }) {
const toggleSetViewVisibility = () => {
@ -31,18 +31,20 @@ export function ViewControl({ isSetViewOpen, closeSetView, openSetView, mouseCoo
<EuiPopover
anchorPosition="upRight"
button={(
<EuiButton
<EuiButtonIcon
className="mapViewControl__gotoButton"
fill
size="s"
onClick={toggleSetViewVisibility}
data-test-subj="toggleSetViewVisibilityButton"
>
<FormattedMessage
id="xpack.maps.viewControl.goToButtonLabel"
defaultMessage="Go to"
/>
</EuiButton>)}
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 (
<EuiPanel className="mapWidgetControl mapViewControl__coordinates" paddingSize="none">
<div className="mapViewControl__coordinates">
<EuiText size="xs">
<p>
<small>
<strong>
<FormattedMessage
id="xpack.maps.viewControl.latLabel"
@ -73,19 +75,20 @@ export function ViewControl({ isSetViewOpen, closeSetView, openSetView, mouseCoo
defaultMessage="lon:"
/>
</strong> {lon}
</p>
</small>
</EuiText>
</EuiPanel>
</div>
);
}
return (
<EuiFlexGroup
justifyContent="spaceBetween"
justifyContent="flexEnd"
alignItems="flexEnd"
gutterSize="s"
responsive={false}
>
<EuiFlexItem>
<EuiFlexItem grow={false}>
{mouseCoordinates && renderMouseCoordinates()}
</EuiFlexItem>

19
x-pack/plugins/maps/public/components/widget_overlay/widget_overlay.js
View file

@ -16,20 +16,11 @@ import { AttributionControl } from './attribution_control';
export function WidgetOverlay() {
return (
<EuiFlexGroup className="mapWidgetOverlay" responsive={false} direction="column" alignItems="flexEnd" gutterSize="s">
<EuiFlexItem className="mapWidgetOverlay__rightSideWrapper">
<EuiFlexGroup
className="mapWidgetOverlay__rightSide"
direction="column"
justifyContent="spaceBetween"
responsive={false}
>
<EuiFlexItem className="mapWidgetOverlay__layerWrapper">
<LayerControl/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<ViewControl/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiFlexItem className="mapWidgetOverlay__layerWrapper">
<LayerControl/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<ViewControl/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<AttributionControl/>

1
x-pack/plugins/maps/public/index.scss
View file

@ -11,5 +11,6 @@
// mapChart__legend-isLoading
@import './main';
@import './mapbox_hacks';
@import './components/index';
@import './shared/index';

4
x-pack/plugins/maps/public/shared/icons/_color_gradient.scss
View file

@ -7,3 +7,7 @@
bottom: 0;
left: 0;
}
.mapFillableCircle {
overflow: visible;
}

2
x-pack/plugins/maps/public/shared/icons/additional_layer_icons.js
View file

@ -9,7 +9,7 @@ import React from 'react';
export const FillableCircle = ({ style }) => (
<svg
className="euiIcon euiIcon--medium"
className="euiIcon euiIcon--medium mapFillableCircle"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"