From fdbe3c5fb7664e27258c4a757fb7dc207a02065f Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 28 Jun 2021 12:38:50 +0100 Subject: [PATCH 01/15] Timeslider icons and styles --- .../timeslider/_index.scss | 49 ++++--------------- .../timeslider/timeslider.tsx | 24 ++++----- .../clock_play_icon.tsx | 36 -------------- .../timeslider_toggle_button.tsx | 6 +-- 4 files changed, 25 insertions(+), 90 deletions(-) delete mode 100644 x-pack/plugins/maps/public/connected_components/toolbar_overlay/timeslider_toggle_button/clock_play_icon.tsx diff --git a/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss b/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss index 6e16961575095..029783348ed55 100644 --- a/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss +++ b/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss @@ -4,50 +4,11 @@ left: 50%; bottom: $euiSize; transform: translateX(-50%); - min-width: 530px; + min-width: 580px; z-index: 99999; background: $euiColorEmptyShade; padding: $euiSizeL $euiSizeXL; border-radius: $euiSize; - - .euiRangeTick { - overflow-x: hidden; - text-overflow: ellipsis; - font-size: $euiFontSizeXS; - position: relative; - padding-top: $euiSize; - color: $euiColorDarkShade; - - &::before { - @include size($euiSizeXS); - width: 3px; - height: $euiSizeS; - content: ''; - background-color: $euiColorLightShade; - position: absolute; - top: $euiSizeXS; - left: calc(50% - #{($euiSizeXS/2)}); - } - - &--isCustom { - position: absolute; - transform: translateX(-50%); - } - - &:enabled:hover, - &:focus, - &--selected { - color: $euiColorPrimary; - } - - &--selected { - font-weight: $euiFontWeightMedium; - } - - &:disabled { - cursor: not-allowed; - } - } } .mapTimeslider__row { @@ -77,6 +38,10 @@ .mapTimeslider__controls { margin-left: $euiSizeS; + + .euiButtonIcon + .euiButtonIcon { + margin-left: $euiSizeXS; + } } .mapTimeslider__innerPanel { @@ -87,3 +52,7 @@ display: inline-flex; align-items: center; } + +.mapTimeslider__playButton { + border-radius: 50%; +} \ No newline at end of file diff --git a/x-pack/plugins/maps/public/connected_components/timeslider/timeslider.tsx b/x-pack/plugins/maps/public/connected_components/timeslider/timeslider.tsx index fb3d87b3aa432..a0280835fc56f 100644 --- a/x-pack/plugins/maps/public/connected_components/timeslider/timeslider.tsx +++ b/x-pack/plugins/maps/public/connected_components/timeslider/timeslider.tsx @@ -186,24 +186,18 @@ class KeyedTimeslider extends Component {
- { }) } /> +
diff --git a/x-pack/plugins/maps/public/connected_components/toolbar_overlay/timeslider_toggle_button/clock_play_icon.tsx b/x-pack/plugins/maps/public/connected_components/toolbar_overlay/timeslider_toggle_button/clock_play_icon.tsx deleted file mode 100644 index bc24889d2ec2c..0000000000000 --- a/x-pack/plugins/maps/public/connected_components/toolbar_overlay/timeslider_toggle_button/clock_play_icon.tsx +++ /dev/null @@ -1,36 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import React, { FunctionComponent } from 'react'; - -interface Props { - title?: string; - titleId?: string; -} - -export const ClockPlayIcon: FunctionComponent = ({ title, titleId, ...props }) => ( - - {title ? {title} : null} - - - - -); diff --git a/x-pack/plugins/maps/public/connected_components/toolbar_overlay/timeslider_toggle_button/timeslider_toggle_button.tsx b/x-pack/plugins/maps/public/connected_components/toolbar_overlay/timeslider_toggle_button/timeslider_toggle_button.tsx index 9332c2baaa502..5811d1e970a35 100644 --- a/x-pack/plugins/maps/public/connected_components/toolbar_overlay/timeslider_toggle_button/timeslider_toggle_button.tsx +++ b/x-pack/plugins/maps/public/connected_components/toolbar_overlay/timeslider_toggle_button/timeslider_toggle_button.tsx @@ -8,7 +8,6 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; import { EuiButtonIcon, EuiPanel } from '@elastic/eui'; -import { ClockPlayIcon } from './clock_play_icon'; export interface Props { isTimesliderOpen: boolean; @@ -39,10 +38,11 @@ export function TimesliderToggleButton(props: Props) { size="s" onClick={onClick} data-test-subj="timesliderToggleButton" - iconType={ClockPlayIcon} - color={props.isTimesliderOpen ? 'primary' : 'text'} + iconType="timeslider" aria-label={label} title={label} + isSelected={props.isTimesliderOpen} + display={props.isTimesliderOpen ? 'fill' : 'empty'} /> ); From 7df8d6201854d04633ad534cc2427e13d7e309e7 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 28 Jun 2021 15:29:26 +0100 Subject: [PATCH 02/15] Exit feature editing. Animations for toolbar and timeslider --- x-pack/plugins/maps/public/_animations.scss | 25 +++++++++++++++++++ x-pack/plugins/maps/public/_index.scss | 1 + .../layer_toc/toc_entry/index.ts | 5 ++++ .../layer_toc/toc_entry/toc_entry.tsx | 22 ++++++++++++++-- .../timeslider/_index.scss | 14 ++++++++--- .../timeslider/timeslider.tsx | 2 +- .../toolbar_overlay/_toolbar_overlay.scss | 4 +++ .../feature_edit_tools/feature_edit_tools.tsx | 19 +++----------- .../feature_edit_tools/index.ts | 7 ++---- 9 files changed, 73 insertions(+), 26 deletions(-) create mode 100644 x-pack/plugins/maps/public/_animations.scss diff --git a/x-pack/plugins/maps/public/_animations.scss b/x-pack/plugins/maps/public/_animations.scss new file mode 100644 index 0000000000000..d6fd2b38d12ba --- /dev/null +++ b/x-pack/plugins/maps/public/_animations.scss @@ -0,0 +1,25 @@ +@keyframes headShake { + 0% { + transform: translateX(0); + } + + 6.5% { + transform: translateX(-6px) rotateY(-9deg); + } + + 18.5% { + transform: translateX(5px) rotateY(7deg); + } + + 31.5% { + transform: translateX(-3px) rotateY(-5deg); + } + + 43.5% { + transform: translateX(2px) rotateY(3deg); + } + + 50% { + transform: translateX(0); + } +} diff --git a/x-pack/plugins/maps/public/_index.scss b/x-pack/plugins/maps/public/_index.scss index 5332464ade9fb..01363209cfffd 100644 --- a/x-pack/plugins/maps/public/_index.scss +++ b/x-pack/plugins/maps/public/_index.scss @@ -13,3 +13,4 @@ @import 'connected_components/index'; @import 'components/index'; @import 'classes/index'; +@import 'animations'; \ No newline at end of file diff --git a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/index.ts b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/index.ts index e9c386ce5f8bd..d7d6c7250e312 100644 --- a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/index.ts +++ b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/index.ts @@ -29,7 +29,9 @@ import { hideTOCDetails, showTOCDetails, toggleLayerVisible, + setDrawMode, } from '../../../../../actions'; +import { DRAW_MODE } from '../../../../../../common'; function mapStateToProps(state: MapStoreState, ownProps: OwnProps): ReduxStateProps { const flyoutDisplay = getFlyoutDisplay(state); @@ -63,6 +65,9 @@ function mapDispatchToProps(dispatch: ThunkDispatch { dispatch(toggleLayerVisible(layerId)); }, + cancelEditing: () => { + dispatch(setDrawMode(DRAW_MODE.NONE)); + }, }; } diff --git a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx index 329e7751f67c5..6d36e5731151d 100644 --- a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx +++ b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx @@ -8,8 +8,8 @@ import React, { Component } from 'react'; import classNames from 'classnames'; import type { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd'; - -import { EuiIcon, EuiButtonIcon, EuiConfirmModal } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { EuiIcon, EuiButtonIcon, EuiConfirmModal, EuiButtonEmpty } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { TOCEntryActionsPopover } from './toc_entry_actions_popover'; import { @@ -40,6 +40,7 @@ export interface ReduxDispatchProps { hideTOCDetails: (layerId: string) => void; showTOCDetails: (layerId: string) => void; toggleVisible: (layerId: string) => void; + cancelEditing: () => void; } export interface OwnProps { @@ -332,6 +333,23 @@ export class TOCEntry extends Component { {this._renderDetailsToggle()} {this._renderCancelModal()} + + {this.props.editModeActiveForLayer && ( +
+ + + +
+ )} ); } diff --git a/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss b/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss index 029783348ed55..190c85aac2a63 100644 --- a/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss +++ b/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss @@ -1,10 +1,13 @@ +$timesliderWidth: 580px; + .mapTimeslider { @include euiBottomShadowLarge; position: fixed; left: 50%; bottom: $euiSize; - transform: translateX(-50%); - min-width: 580px; + // we could center with translateX but this would impact the animation + margin-left: -($timesliderWidth / 2); + width: $timesliderWidth; z-index: 99999; background: $euiColorEmptyShade; padding: $euiSizeL $euiSizeXL; @@ -55,4 +58,9 @@ .mapTimeslider__playButton { border-radius: 50%; -} \ No newline at end of file +} + +.mapTimeslider--animation { + animation: headShake 1.2s ease-in-out; + +} diff --git a/x-pack/plugins/maps/public/connected_components/timeslider/timeslider.tsx b/x-pack/plugins/maps/public/connected_components/timeslider/timeslider.tsx index a0280835fc56f..43d0f620cb296 100644 --- a/x-pack/plugins/maps/public/connected_components/timeslider/timeslider.tsx +++ b/x-pack/plugins/maps/public/connected_components/timeslider/timeslider.tsx @@ -166,7 +166,7 @@ class KeyedTimeslider extends Component { render() { return ( -
+
void; - cancelEditing: () => void; } export interface OwnProps { @@ -37,7 +36,10 @@ export function FeatureEditTools(props: Props) { const deleteSelected = props.drawShape === DRAW_SHAPE.DELETE; return ( - + {props.pointsOnly ? null : ( <> - - ); } diff --git a/x-pack/plugins/maps/public/connected_components/toolbar_overlay/feature_draw_controls/feature_edit_tools/index.ts b/x-pack/plugins/maps/public/connected_components/toolbar_overlay/feature_draw_controls/feature_edit_tools/index.ts index 2e103eb2c8c09..727bbbb8c84a3 100644 --- a/x-pack/plugins/maps/public/connected_components/toolbar_overlay/feature_draw_controls/feature_edit_tools/index.ts +++ b/x-pack/plugins/maps/public/connected_components/toolbar_overlay/feature_draw_controls/feature_edit_tools/index.ts @@ -14,9 +14,9 @@ import { ReduxStateProps, OwnProps, } from './feature_edit_tools'; -import { setDrawMode, updateEditShape } from '../../../../actions'; +import { updateEditShape } from '../../../../actions'; import { MapStoreState } from '../../../../reducers/store'; -import { DRAW_MODE, DRAW_SHAPE } from '../../../../../common'; +import { DRAW_SHAPE } from '../../../../../common'; import { getEditState } from '../../../../selectors/map_selectors'; function mapStateToProps(state: MapStoreState): ReduxStateProps { @@ -33,9 +33,6 @@ function mapDispatchToProps( setDrawShape: (shapeToDraw: DRAW_SHAPE) => { dispatch(updateEditShape(shapeToDraw)); }, - cancelEditing: () => { - dispatch(setDrawMode(DRAW_MODE.NONE)); - }, }; } From 77c86bad9e743cecedc1fb8a0937da61fa28b394 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 28 Jun 2021 15:53:25 +0100 Subject: [PATCH 03/15] Removing unnecessary line --- .../maps/public/connected_components/timeslider/_index.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss b/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss index 190c85aac2a63..fc615914e7dd8 100644 --- a/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss +++ b/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss @@ -62,5 +62,4 @@ $timesliderWidth: 580px; .mapTimeslider--animation { animation: headShake 1.2s ease-in-out; - } From d7d5047e83626d41bbce604b1197970bda74b477 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 28 Jun 2021 16:06:49 +0100 Subject: [PATCH 04/15] Adding padding to tooltip field popover --- .../components/tooltip_selector/add_tooltip_field_popover.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/maps/public/components/tooltip_selector/add_tooltip_field_popover.tsx b/x-pack/plugins/maps/public/components/tooltip_selector/add_tooltip_field_popover.tsx index 04ae7af62fddc..3804e3873b47e 100644 --- a/x-pack/plugins/maps/public/components/tooltip_selector/add_tooltip_field_popover.tsx +++ b/x-pack/plugins/maps/public/components/tooltip_selector/add_tooltip_field_popover.tsx @@ -164,14 +164,14 @@ export class AddTooltipFieldPopover extends Component { > {(list, search) => (
- {search} + {search} {list}
)} - + Date: Mon, 28 Jun 2021 17:34:34 +0100 Subject: [PATCH 05/15] Adding pulse animation on open timeslider --- x-pack/plugins/maps/public/_animations.scss | 14 ++++++++++++++ .../connected_components/timeslider/_index.scss | 2 +- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/maps/public/_animations.scss b/x-pack/plugins/maps/public/_animations.scss index d6fd2b38d12ba..49d8d1604443e 100644 --- a/x-pack/plugins/maps/public/_animations.scss +++ b/x-pack/plugins/maps/public/_animations.scss @@ -23,3 +23,17 @@ transform: translateX(0); } } + +@keyframes pulse { + from { + transform: scale3d(1, 1, 1); + } + + 50% { + transform: scale3d(1.01, 1.01, 1.01); + } + + to { + transform: scale3d(1, 1, 1); + } +} \ No newline at end of file diff --git a/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss b/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss index fc615914e7dd8..fb8504985dbfe 100644 --- a/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss +++ b/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss @@ -61,5 +61,5 @@ $timesliderWidth: 580px; } .mapTimeslider--animation { - animation: headShake 1.2s ease-in-out; + animation: pulse .6s ease-in-out; } From 57915a450910eb9c2c4bf0b329cae3c7db40a890 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 28 Jun 2021 18:12:36 +0100 Subject: [PATCH 06/15] Adding isDraggable to timeslider --- .../maps/public/connected_components/timeslider/timeslider.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/x-pack/plugins/maps/public/connected_components/timeslider/timeslider.tsx b/x-pack/plugins/maps/public/connected_components/timeslider/timeslider.tsx index 43d0f620cb296..08d3af09b60a1 100644 --- a/x-pack/plugins/maps/public/connected_components/timeslider/timeslider.tsx +++ b/x-pack/plugins/maps/public/connected_components/timeslider/timeslider.tsx @@ -230,6 +230,7 @@ class KeyedTimeslider extends Component { max={this.state.max} step={1} ticks={this.state.ticks} + isDraggable />
From d2f0a877b42daaf65f7350a65b0b93580aa7d886 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 28 Jun 2021 18:40:20 +0100 Subject: [PATCH 07/15] More timeslider styles --- x-pack/plugins/maps/public/_animations.scss | 2 +- .../public/connected_components/timeslider/_index.scss | 8 ++++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/maps/public/_animations.scss b/x-pack/plugins/maps/public/_animations.scss index 49d8d1604443e..4ce441636d22a 100644 --- a/x-pack/plugins/maps/public/_animations.scss +++ b/x-pack/plugins/maps/public/_animations.scss @@ -30,7 +30,7 @@ } 50% { - transform: scale3d(1.01, 1.01, 1.01); + transform: scale3d(1.005, 1.005, 1.005); } to { diff --git a/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss b/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss index fb8504985dbfe..5b877f1eceaee 100644 --- a/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss +++ b/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss @@ -1,4 +1,4 @@ -$timesliderWidth: 580px; +$timesliderWidth: 585px; .mapTimeslider { @include euiBottomShadowLarge; @@ -10,7 +10,7 @@ $timesliderWidth: 580px; width: $timesliderWidth; z-index: 99999; background: $euiColorEmptyShade; - padding: $euiSizeL $euiSizeXL; + padding: $euiSizeL $euiSize; border-radius: $euiSize; } @@ -24,6 +24,10 @@ $timesliderWidth: 580px; > * { align-items: center; } + + &:first-child { + padding: 0 $euiSize; + } } .mapTimeslider__close { From 1e83d5d3d20bf249dfb58e37f6d9e944e7441c49 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 28 Jun 2021 19:19:02 +0100 Subject: [PATCH 08/15] Better positioning of the exit edit mode button --- .../layer_control/layer_toc/toc_entry/_toc_entry.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/_toc_entry.scss b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/_toc_entry.scss index d49ce3f0b7530..edbce8edc283f 100644 --- a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/_toc_entry.scss +++ b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/_toc_entry.scss @@ -32,6 +32,10 @@ .mapTocEntry-isInEditingMode { background-color: tintOrShade($euiColorPrimary, 90%, 70%) !important; + + &__row { + margin-left: $euiSizeL; + } } .mapTocEntry-isDragging { From 76d8b43065d27aee2425d5d2b2941fbda459fdb9 Mon Sep 17 00:00:00 2001 From: Aaron Caldwell Date: Mon, 28 Jun 2021 12:46:32 -0600 Subject: [PATCH 09/15] Enable edit mode when new vector layer added --- .../plugins/maps/public/actions/layer_actions.ts | 7 ++++--- x-pack/plugins/maps/public/actions/map_actions.ts | 15 ++++++++++++++- .../classes/layers/layer_wizard_registry.ts | 1 + .../layers/new_vector_layer_wizard/config.tsx | 1 + .../connected_components/add_layer_panel/index.ts | 7 +++++++ .../connected_components/add_layer_panel/view.tsx | 7 +++++++ 6 files changed, 34 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/maps/public/actions/layer_actions.ts b/x-pack/plugins/maps/public/actions/layer_actions.ts index 1d239a75d1499..0072fcceb0d2e 100644 --- a/x-pack/plugins/maps/public/actions/layer_actions.ts +++ b/x-pack/plugins/maps/public/actions/layer_actions.ts @@ -256,9 +256,10 @@ export function setSelectedLayer(layerId: string | null) { } if (layerId) { dispatch(trackCurrentLayerState(layerId)); - } - if (getDrawMode(getState()) !== DRAW_MODE.NONE) { - dispatch(setDrawMode(DRAW_MODE.NONE)); + // Reset draw mode only if setting a new selected layer + if (getDrawMode(getState()) !== DRAW_MODE.NONE) { + dispatch(setDrawMode(DRAW_MODE.NONE)); + } } dispatch({ type: SET_SELECTED_LAYER, diff --git a/x-pack/plugins/maps/public/actions/map_actions.ts b/x-pack/plugins/maps/public/actions/map_actions.ts index 464e4dbc6d5ae..c1376a10f5e8a 100644 --- a/x-pack/plugins/maps/public/actions/map_actions.ts +++ b/x-pack/plugins/maps/public/actions/map_actions.ts @@ -26,7 +26,7 @@ import { getSearchSessionId, getSearchSessionMapBuffer, getLayerById, - getEditState, + getEditState, getSelectedLayerId, } from '../selectors/map_selectors'; import { CLEAR_GOTO, @@ -342,6 +342,19 @@ export function updateEditShape(shapeToDraw: DRAW_SHAPE | null) { }; } +export function setSelectedLayerToEditLayer() { + return async ( + dispatch: ThunkDispatch, + getState: () => MapStoreState + ) => { + const layerId = getSelectedLayerId(getState()); + if (!layerId) { + return; + } + dispatch(updateEditLayer(layerId)); + }; +} + export function updateEditLayer(layerId: string | null) { return (dispatch: Dispatch) => { if (layerId !== null) { diff --git a/x-pack/plugins/maps/public/classes/layers/layer_wizard_registry.ts b/x-pack/plugins/maps/public/classes/layers/layer_wizard_registry.ts index 824d9835380ec..d074ab4be6ea7 100644 --- a/x-pack/plugins/maps/public/classes/layers/layer_wizard_registry.ts +++ b/x-pack/plugins/maps/public/classes/layers/layer_wizard_registry.ts @@ -37,6 +37,7 @@ export type LayerWizard = { prerequisiteSteps?: Array<{ id: string; label: string }>; renderWizard(renderWizardArguments: RenderWizardArguments): ReactElement; title: string; + showFeatureEditTools?: boolean; }; export type LayerWizardWithMeta = LayerWizard & { diff --git a/x-pack/plugins/maps/public/classes/layers/new_vector_layer_wizard/config.tsx b/x-pack/plugins/maps/public/classes/layers/new_vector_layer_wizard/config.tsx index 2a0400c3d6bee..dda2e19acc2dc 100644 --- a/x-pack/plugins/maps/public/classes/layers/new_vector_layer_wizard/config.tsx +++ b/x-pack/plugins/maps/public/classes/layers/new_vector_layer_wizard/config.tsx @@ -43,6 +43,7 @@ export const newVectorLayerWizardConfig: LayerWizard = { renderWizard: (renderWizardArguments: RenderWizardArguments) => { return ; }, + showFeatureEditTools: true, title: i18n.translate('xpack.maps.newVectorLayerWizard.title', { defaultMessage: 'Create new layer', }), diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/index.ts b/x-pack/plugins/maps/public/connected_components/add_layer_panel/index.ts index f91abc3856e05..36bd3360877f8 100644 --- a/x-pack/plugins/maps/public/connected_components/add_layer_panel/index.ts +++ b/x-pack/plugins/maps/public/connected_components/add_layer_panel/index.ts @@ -14,12 +14,15 @@ import { addPreviewLayers, promotePreviewLayers, removePreviewLayers, + setDrawMode, setFirstPreviewLayerToSelectedLayer, + setSelectedLayerToEditLayer, updateFlyout, } from '../../actions'; import { MapStoreState } from '../../reducers/store'; import { LayerDescriptor } from '../../../common/descriptor_types'; import { hasPreviewLayers, isLoadingPreviewLayers } from '../../selectors/map_selectors'; +import { DRAW_MODE } from '../../../common'; function mapStateToProps(state: MapStoreState) { return { @@ -42,6 +45,10 @@ function mapDispatchToProps(dispatch: ThunkDispatch { + dispatch(setSelectedLayerToEditLayer()); + dispatch(setDrawMode(DRAW_MODE.DRAW_SHAPES)); + }, }; } diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/view.tsx b/x-pack/plugins/maps/public/connected_components/add_layer_panel/view.tsx index 2b18d87f03c89..2cb15e6a21561 100644 --- a/x-pack/plugins/maps/public/connected_components/add_layer_panel/view.tsx +++ b/x-pack/plugins/maps/public/connected_components/add_layer_panel/view.tsx @@ -33,6 +33,7 @@ export interface Props { hasPreviewLayers: boolean; isLoadingPreviewLayers: boolean; promotePreviewLayers: () => void; + enableEditMode: () => void; } interface State { @@ -42,6 +43,7 @@ interface State { layerWizard: LayerWizard | null; isNextStepBtnEnabled: boolean; isStepLoading: boolean; + editModeEnabled: boolean; } const INITIAL_STATE: State = { @@ -51,6 +53,7 @@ const INITIAL_STATE: State = { layerWizard: null, isNextStepBtnEnabled: false, isStepLoading: false, + editModeEnabled: false, }; export class AddLayerPanel extends Component { @@ -80,6 +83,7 @@ export class AddLayerPanel extends Component { layerWizard, layerSteps, currentStep: layerSteps[0], + editModeEnabled: !!layerWizard.showFeatureEditTools, }); }; @@ -91,6 +95,9 @@ export class AddLayerPanel extends Component { if (this.state.layerSteps.length - 1 === this.state.currentStepIndex) { // last step this.props.promotePreviewLayers(); + if (this.state.editModeEnabled) { + this.props.enableEditMode(); + } } else { this.setState((prevState) => { const nextIndex = prevState.currentStepIndex + 1; From 21e4f26fb8cacd11cdb40db5515f59b7be4013a7 Mon Sep 17 00:00:00 2001 From: Aaron Caldwell Date: Mon, 28 Jun 2021 14:43:35 -0600 Subject: [PATCH 10/15] Review feedback. Update action name. Remove unneeded component state --- x-pack/plugins/maps/public/actions/map_actions.ts | 5 +++-- .../public/connected_components/add_layer_panel/index.ts | 4 ++-- .../public/connected_components/add_layer_panel/view.tsx | 5 +---- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/x-pack/plugins/maps/public/actions/map_actions.ts b/x-pack/plugins/maps/public/actions/map_actions.ts index c1376a10f5e8a..a1c7e2f7b453c 100644 --- a/x-pack/plugins/maps/public/actions/map_actions.ts +++ b/x-pack/plugins/maps/public/actions/map_actions.ts @@ -26,7 +26,8 @@ import { getSearchSessionId, getSearchSessionMapBuffer, getLayerById, - getEditState, getSelectedLayerId, + getEditState, + getSelectedLayerId, } from '../selectors/map_selectors'; import { CLEAR_GOTO, @@ -342,7 +343,7 @@ export function updateEditShape(shapeToDraw: DRAW_SHAPE | null) { }; } -export function setSelectedLayerToEditLayer() { +export function setEditLayerToSelectedLayer() { return async ( dispatch: ThunkDispatch, getState: () => MapStoreState diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/index.ts b/x-pack/plugins/maps/public/connected_components/add_layer_panel/index.ts index 36bd3360877f8..67f0c3664acda 100644 --- a/x-pack/plugins/maps/public/connected_components/add_layer_panel/index.ts +++ b/x-pack/plugins/maps/public/connected_components/add_layer_panel/index.ts @@ -16,7 +16,7 @@ import { removePreviewLayers, setDrawMode, setFirstPreviewLayerToSelectedLayer, - setSelectedLayerToEditLayer, + setEditLayerToSelectedLayer, updateFlyout, } from '../../actions'; import { MapStoreState } from '../../reducers/store'; @@ -46,7 +46,7 @@ function mapDispatchToProps(dispatch: ThunkDispatch { - dispatch(setSelectedLayerToEditLayer()); + dispatch(setEditLayerToSelectedLayer()); dispatch(setDrawMode(DRAW_MODE.DRAW_SHAPES)); }, }; diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/view.tsx b/x-pack/plugins/maps/public/connected_components/add_layer_panel/view.tsx index 2cb15e6a21561..4b3b10889790a 100644 --- a/x-pack/plugins/maps/public/connected_components/add_layer_panel/view.tsx +++ b/x-pack/plugins/maps/public/connected_components/add_layer_panel/view.tsx @@ -43,7 +43,6 @@ interface State { layerWizard: LayerWizard | null; isNextStepBtnEnabled: boolean; isStepLoading: boolean; - editModeEnabled: boolean; } const INITIAL_STATE: State = { @@ -53,7 +52,6 @@ const INITIAL_STATE: State = { layerWizard: null, isNextStepBtnEnabled: false, isStepLoading: false, - editModeEnabled: false, }; export class AddLayerPanel extends Component { @@ -83,7 +81,6 @@ export class AddLayerPanel extends Component { layerWizard, layerSteps, currentStep: layerSteps[0], - editModeEnabled: !!layerWizard.showFeatureEditTools, }); }; @@ -95,7 +92,7 @@ export class AddLayerPanel extends Component { if (this.state.layerSteps.length - 1 === this.state.currentStepIndex) { // last step this.props.promotePreviewLayers(); - if (this.state.editModeEnabled) { + if (this.state.layerWizard?.showFeatureEditTools) { this.props.enableEditMode(); } } else { From d2193e973e671f61451db500e3d053621361c4dd Mon Sep 17 00:00:00 2001 From: Aaron Caldwell Date: Mon, 28 Jun 2021 14:58:58 -0600 Subject: [PATCH 11/15] Minor updates. One more action for cancel. Type updates. Snapshot update --- .../layer_control/layer_toc/toc_entry/index.ts | 3 ++- .../layer_control/layer_toc/toc_entry/toc_entry.test.tsx | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/index.ts b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/index.ts index d7d6c7250e312..114387fdc86de 100644 --- a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/index.ts +++ b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/index.ts @@ -29,7 +29,7 @@ import { hideTOCDetails, showTOCDetails, toggleLayerVisible, - setDrawMode, + setDrawMode, updateDrawState, } from '../../../../../actions'; import { DRAW_MODE } from '../../../../../../common'; @@ -66,6 +66,7 @@ function mapDispatchToProps(dispatch: ThunkDispatch { + dispatch(updateDrawState(null)); dispatch(setDrawMode(DRAW_MODE.NONE)); }, }; diff --git a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.test.tsx b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.test.tsx index e6439f80411d1..21688b4631f00 100644 --- a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.test.tsx +++ b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.test.tsx @@ -63,6 +63,7 @@ const defaultProps = { hideTOCDetails: () => {}, showTOCDetails: () => {}, editModeActiveForLayer: false, + cancelEditing: () => {}, }; describe('TOCEntry', () => { From 1256b0c4b231198eb472e205a00ccc04f33dd172 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 29 Jun 2021 09:46:06 +0100 Subject: [PATCH 12/15] fixing tests and eslint error --- .../__snapshots__/add_tooltip_field_popover.test.tsx.snap | 8 ++++++-- .../layer_control/layer_toc/toc_entry/index.ts | 3 ++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/maps/public/components/tooltip_selector/__snapshots__/add_tooltip_field_popover.test.tsx.snap b/x-pack/plugins/maps/public/components/tooltip_selector/__snapshots__/add_tooltip_field_popover.test.tsx.snap index 84534515dfa57..875f5df72b1be 100644 --- a/x-pack/plugins/maps/public/components/tooltip_selector/__snapshots__/add_tooltip_field_popover.test.tsx.snap +++ b/x-pack/plugins/maps/public/components/tooltip_selector/__snapshots__/add_tooltip_field_popover.test.tsx.snap @@ -54,7 +54,9 @@ exports[`Should remove selected fields from selectable 1`] = ` - + @@ -143,7 +145,9 @@ exports[`Should render 1`] = ` - + diff --git a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/index.ts b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/index.ts index 114387fdc86de..7f879e8501629 100644 --- a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/index.ts +++ b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/index.ts @@ -29,7 +29,8 @@ import { hideTOCDetails, showTOCDetails, toggleLayerVisible, - setDrawMode, updateDrawState, + setDrawMode, + updateDrawState, } from '../../../../../actions'; import { DRAW_MODE } from '../../../../../../common'; From 913726434a55bc64544c1a75090cc77e779814b9 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 29 Jun 2021 14:46:55 +0100 Subject: [PATCH 13/15] Added new exit mode design. Renamed animations --- x-pack/plugins/maps/public/_animations.scss | 4 ++-- .../layer_toc/toc_entry/_toc_entry.scss | 13 +++++++++++++ .../layer_toc/toc_entry/toc_entry.tsx | 19 ++++++++++--------- .../timeslider/_index.scss | 2 +- .../toolbar_overlay/_toolbar_overlay.scss | 2 +- 5 files changed, 27 insertions(+), 13 deletions(-) diff --git a/x-pack/plugins/maps/public/_animations.scss b/x-pack/plugins/maps/public/_animations.scss index 4ce441636d22a..fde47a7da36e1 100644 --- a/x-pack/plugins/maps/public/_animations.scss +++ b/x-pack/plugins/maps/public/_animations.scss @@ -1,4 +1,4 @@ -@keyframes headShake { +@keyframes mapAnimationHeadShake { 0% { transform: translateX(0); } @@ -24,7 +24,7 @@ } } -@keyframes pulse { +@keyframes mapAnimationPulse { from { transform: scale3d(1, 1, 1); } diff --git a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/_toc_entry.scss b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/_toc_entry.scss index edbce8edc283f..094d116b78623 100644 --- a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/_toc_entry.scss +++ b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/_toc_entry.scss @@ -32,9 +32,22 @@ .mapTocEntry-isInEditingMode { background-color: tintOrShade($euiColorPrimary, 90%, 70%) !important; + font-size: $euiFontSizeXS; + font-weight: $euiFontWeightMedium; &__row { margin-left: $euiSizeL; + display: inline-flex; + align-items: center; + + > * { + margin-right: $euiSizeXS; + } + } + + &__editFeatureText { + line-height: 1; + padding-right: $euiSizeXS; } } diff --git a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx index 6d36e5731151d..72180cd72d3a8 100644 --- a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx +++ b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx @@ -9,7 +9,7 @@ import React, { Component } from 'react'; import classNames from 'classnames'; import type { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd'; import { FormattedMessage } from '@kbn/i18n/react'; -import { EuiIcon, EuiButtonIcon, EuiConfirmModal, EuiButtonEmpty } from '@elastic/eui'; +import { EuiIcon, EuiButtonIcon, EuiConfirmModal, EuiButtonEmpty, EuiText } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { TOCEntryActionsPopover } from './toc_entry_actions_popover'; import { @@ -336,16 +336,17 @@ export class TOCEntry extends Component { {this.props.editModeActiveForLayer && (
- + + + + +
diff --git a/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss b/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss index 5b877f1eceaee..cf000967eb23e 100644 --- a/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss +++ b/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss @@ -65,5 +65,5 @@ $timesliderWidth: 585px; } .mapTimeslider--animation { - animation: pulse .6s ease-in-out; + animation: mapAnimationPulse .6s ease-in-out; } diff --git a/x-pack/plugins/maps/public/connected_components/toolbar_overlay/_toolbar_overlay.scss b/x-pack/plugins/maps/public/connected_components/toolbar_overlay/_toolbar_overlay.scss index 2447e6021e0a3..511de91e964b9 100644 --- a/x-pack/plugins/maps/public/connected_components/toolbar_overlay/_toolbar_overlay.scss +++ b/x-pack/plugins/maps/public/connected_components/toolbar_overlay/_toolbar_overlay.scss @@ -53,7 +53,7 @@ } .mapToolbarOverlay__buttonGroupAnimated { - animation: headShake 1.2s ease-in-out; + animation: mapAnimationHeadShake 1.2s ease-in-out; } .mapToolbarOverlay__button__exit { From 08c47f4bd9b3e5de31e142911a44ae784b8e16c3 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 29 Jun 2021 14:49:50 +0100 Subject: [PATCH 14/15] Features instead of feature to be consistent with popover --- .../layer_control/layer_toc/toc_entry/toc_entry.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx index 72180cd72d3a8..574aad967cde6 100644 --- a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx +++ b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx @@ -339,8 +339,8 @@ export class TOCEntry extends Component { From 3abed0f0df6d1cff4cd93c4998507ab2f3840964 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 29 Jun 2021 15:16:15 +0100 Subject: [PATCH 15/15] fix type error --- .../layer_control/layer_toc/toc_entry/toc_entry.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx index 574aad967cde6..2a933aab6c098 100644 --- a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx +++ b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx @@ -9,7 +9,7 @@ import React, { Component } from 'react'; import classNames from 'classnames'; import type { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd'; import { FormattedMessage } from '@kbn/i18n/react'; -import { EuiIcon, EuiButtonIcon, EuiConfirmModal, EuiButtonEmpty, EuiText } from '@elastic/eui'; +import { EuiIcon, EuiButtonIcon, EuiConfirmModal, EuiButtonEmpty } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { TOCEntryActionsPopover } from './toc_entry_actions_popover'; import {