Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Maps] Fix some overlays designs #36837

Merged
merged 9 commits into from
May 22, 2019
Merged

[Maps] Fix some overlays designs #36837

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3e5cabc
Better text as overlay
May 21, 2019
2a55d02
Make “Go to” button an icon button
May 21, 2019
721c604
Fix layout with scrolling and overflow shadow of right side
May 21, 2019
5af4701
cleanup
May 21, 2019
53735ce
aww snap!
May 21, 2019
955ae6b
FF fixes
May 21, 2019
0f55f85
Show full stroke of fillable circle
May 21, 2019
2bc70aa
One more snap
May 21, 2019
78a9bb3
Moved mapbox styles to a hack file, increased text shadow for better …
May 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions x-pack/plugins/maps/public/components/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,19 @@
@import './layer_panel/index';
@import './widget_overlay/index';
@import './toolbar_overlay/index';

// The following code will only get compiled from this file

// 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 {
cchaos marked this conversation as resolved.
Show resolved Hide resolved
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");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

15px i assume so it centers? Surprised this worked in ie11.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

15px is the actual size of the icon
Screen Shot 2019-05-21 at 19 55 34 PM

Why is it surprising to have worked in IE?

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 changes: 2 additions & 0 deletions x-pack/plugins/maps/public/components/widget_overlay/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import './mixins';

@import './widget_overlay';
@import './attribution_control/attribution_control';
@import './layer_control/index';
Expand Down
3 changes: 3 additions & 0 deletions x-pack/plugins/maps/public/components/widget_overlay/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@mixin mapOverlayIsTextOnly() {
text-shadow: 0 0 2px $euiColorEmptyShade, 0 0 1px $euiColorFullShade;
}
14 changes: 5 additions & 9 deletions x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -45,5 +43,3 @@
flex-shrink: 0;
text-transform: uppercase;
}


32 changes: 15 additions & 17 deletions ...maps/public/components/widget_overlay/attribution_control/__snapshots__/view.test.js.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion ...ugins/maps/public/components/widget_overlay/attribution_control/_attribution_control.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
.mapAttributionControl {
padding: 0 $euiSizeXS;
@include mapOverlayIsTextOnly;
pointer-events: all;
padding-left: $euiSizeM;
}
11 changes: 5 additions & 6 deletions x-pack/plugins/maps/public/components/widget_overlay/attribution_control/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import React, { Fragment } from 'react';
import _ from 'lodash';
import {
EuiText,
EuiPanel,
EuiLink,
} from '@elastic/eui';

Expand Down Expand Up @@ -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>
);
}

Expand All @@ -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>
);
}
}
10 changes: 8 additions & 2 deletions x-pack/plugins/maps/public/components/widget_overlay/layer_control/_layer_control.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -18,7 +23,8 @@
}

.mapLayerControl__openLayerTOCButton,
.mapLayerControl__closeLayerTOCButton {
.mapLayerControl__closeLayerTOCButton,
.mapViewControl__gotoButton {
@include size($euiSizeXL);
background-color: $euiColorEmptyShade !important; // During all states
}
2 changes: 1 addition & 1 deletion x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/maps/public/components/widget_overlay/view_control/_view_control.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/

.mapViewControl__coordinates {
padding: $euiSizeXS $euiSizeS;
@include mapOverlayIsTextOnly;
justify-content: center;
pointer-events: none;
}
Expand Down
37 changes: 20 additions & 17 deletions x-pack/plugins/maps/public/components/widget_overlay/view_control/view_control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand All @@ -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}
>
Expand All @@ -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"
Expand All @@ -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>

Expand Down
19 changes: 5 additions & 14 deletions x-pack/plugins/maps/public/components/widget_overlay/widget_overlay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/>
Expand Down
4 changes: 4 additions & 0 deletions x-pack/plugins/maps/public/shared/icons/_color_gradient.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,7 @@
bottom: 0;
left: 0;
}

.mapFillableCircle {
overflow: visible;
}
2 changes: 1 addition & 1 deletion x-pack/plugins/maps/public/shared/icons/additional_layer_icons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down