[Maps] Design updates for draw shape mode and timeslider #103493

elizabetdev · 2021-06-28T14:46:21Z

Summary

This PR closes #102537.

Draw shape mode

It adds an exit button "Exit feature editing" to layer TOC. This way we don't need a badge indicating that we are in editing mode because the exit button is clear.
Once we enter in "feature editing" mode the feature edit tools animate to indicate that those tools were added.

Timeslider

Once we open the "timeslider" it animates
The new icons were added: "playFilled", "framePrevious" and "frameNext". For the next design iterations, we will need a new pause icon. The "timeslider" icon was also replaced with the new one.
Removed the styles overriding the EuiDualRange. Once Upgrade EUI to v34.5.1 #103297 is merged the new styles are going to be applied so we don't need the overrides.
Added active styles for the timeslider toolbar button.

Preview

Screen+Recording+2021-06-28+at+07.17+PM.mov

Missing

Following new layer addition, show edit tools

Checklist

This was checked for cross-browser compatibility

elasticmachine · 2021-06-28T14:46:53Z

Pinging @elastic/kibana-gis (Team:Geo)

nreese

LGTM - looks great
code review

kmartastic · 2021-06-28T16:11:48Z

@miukimiu
I believe the editing label should be changed from "Exit feature editing" to either:

Stop feature editing
Stop editing
@gchaps do you have an opinion?

Why does the timeslider "wobble" when it is first shown?

elizabetdev · 2021-06-28T16:19:55Z

@kmartastic

As per my description:

Once we open the "timeslider" it animates

It's an animation. I was thinking like "I'm here, in case you didn't notice!". But if it's too much I can remove it. 😛

@gchaps and @kmartastic for the labels I think we should be more in sync with this description:

In one place we call it "add shapes" and in other places "features". I think "features" is not a very descriptive name. So should it be "Stop shapes editing"? And inside the popover "Edit shapes" instead of "Edit features"?

elizabetdev · 2021-06-28T16:36:05Z

@elasticmachine merge upstream

nreese · 2021-06-28T16:38:04Z

@miukimiu
Looks like Upgrade EUI to v34.5.1 is merged. Would you mind setting isDraggable to true for the EuiDualRange control in Timeslider?

elizabetdev · 2021-06-28T16:38:51Z

@nreese yes. 👍🏽

nreese · 2021-06-28T16:41:50Z

I believe the editing label should be changed from "Exit feature editing" to either:
Stop feature editing
Stop editing
@gchaps do you have an opinion?
Why does the timeslider "wobble" when it is first shown?

I think its important to keep the word "feature". "Stop editing" is too vague. Are you stopping editing the layer settings or stopping editing the features of the layer.

I like prefer "Exit feature editing" over "Stop feature editing" for what its worth.

elizabetdev · 2021-06-28T17:48:51Z

@kmartastic the timeslider animation was updated.

@nreese the isDraggable prop is now set to true.

The video on top of the page was also updated with the new changes.

kindsun · 2021-06-28T18:50:19Z

@nreese Would you mind taking a look at the changes I introduced in the linked commit to show edit tools only for new vector layers?
@miukimiu With edit tools showing on new vector layer add, did you still want to show an indicator to the user to focus their attention on them after adding the new layer?

elizabetdev · 2021-06-28T19:29:29Z

@aaronjcaldwell I think for beta we can move without the indication.

nreese · 2021-06-28T20:16:31Z

sorry for closing. Not sure what happened.

kindsun · 2021-06-28T20:19:47Z

Your comment says "to show edit tools only for new vector layers" but it looks like the functionallity is to auto enable

Discussed offline, but for documentation purposes: In the flow of adding a new, empty vector layer, we want to show the edit tools automatically. To be clear, this only happens once when the layer is added initially. After this, showing edit tools functions as you would expect for any eligible layer.

nreese

I think this is a pretty clean way to auto opening edit menu for a newly created draw layer. LGTM with minor feedback on names and some duplicated state.

x-pack/plugins/maps/public/actions/map_actions.ts

x-pack/plugins/maps/public/connected_components/add_layer_panel/view.tsx

kindsun

lgtm w/ green CI! Thanks for the polish! 🎆 A few notes:

Pushed up the changes we discussed: show edit tools when adding a new vector layer. Also made some additional follow-on changes requested in feedback
Regenerated a jest test snapshot that had changed with the addition of a react property
Added one more dispatched function to cancelEditing for consistency with similar functions

Review:

tested locally in chrome
code review

elizabetdev · 2021-06-29T09:18:51Z

@elasticmachine merge upstream

snide

Code review. LGTM. Small comment on the sass.

snide · 2021-06-29T12:06:34Z

x-pack/plugins/maps/public/_animations.scss

+  }
+}
+
+@keyframes pulse {


Nit. Might want to prefix these similar to the rest of the sass?

kibanamachine · 2021-06-29T16:22:19Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`maps`	741	740	-1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`maps`	3.1MB	3.1MB	+1.4KB

History

💔 Build #135104 failed 08c47f4
💚 Build #134993 succeeded c6c6e78
💚 Build #134978 succeeded 1256b0c
💔 Build #134833 failed d2193e9
💔 Build #134821 failed 21e4f26

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

elizabetdev · 2021-06-29T16:35:00Z

FYI I changed the "Exit feature editing". Now we're showing an "Edit features" label (same from the popover) and then an "Exit" after it. This solution was suggested by @mdefazio and I think it's more consistent with what we're showing inside the popover.

) * Timeslider icons and styles * Exit feature editing. Animations for toolbar and timeslider * Removing unnecessary line * Adding padding to tooltip field popover * Adding pulse animation on open timeslider * Adding isDraggable to timeslider * More timeslider styles * Better positioning of the exit edit mode button * Enable edit mode when new vector layer added * Review feedback. Update action name. Remove unneeded component state * Minor updates. One more action for cancel. Type updates. Snapshot update * fixing tests and eslint error * Added new exit mode design. Renamed animations * Features instead of feature to be consistent with popover * fix type error Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Aaron Caldwell <aaron.caldwell@elastic.co>

…103716) * Timeslider icons and styles * Exit feature editing. Animations for toolbar and timeslider * Removing unnecessary line * Adding padding to tooltip field popover * Adding pulse animation on open timeslider * Adding isDraggable to timeslider * More timeslider styles * Better positioning of the exit edit mode button * Enable edit mode when new vector layer added * Review feedback. Update action name. Remove unneeded component state * Minor updates. One more action for cancel. Type updates. Snapshot update * fixing tests and eslint error * Added new exit mode design. Renamed animations * Features instead of feature to be consistent with popover * fix type error Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Aaron Caldwell <aaron.caldwell@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Aaron Caldwell <aaron.caldwell@elastic.co>

elizabetdev added 2 commits June 28, 2021 12:38

Timeslider icons and styles

fdbe3c5

Exit feature editing. Animations for toolbar and timeslider

7df8d62

elizabetdev requested a review from a team as a code owner June 28, 2021 14:46

elizabetdev added enhancement New value added to drive a business result [Deprecated-Use Team:Presentation]Team:Geo Former Team Label for Geo Team. Now use Team:Presentation labels Jun 28, 2021

elizabetdev added release_note:skip Skip the PR/issue when compiling release notes v7.14.0 labels Jun 28, 2021

elizabetdev requested a review from kindsun June 28, 2021 14:50

elizabetdev added 2 commits June 28, 2021 15:53

Removing unnecessary line

77c86ba

Adding padding to tooltip field popover

d7d5047

nreese approved these changes Jun 28, 2021

View reviewed changes

Adding pulse animation on open timeslider

eb2a5fe

Merge branch 'master' into maps-design-updates

7908ad2

elizabetdev added 2 commits June 28, 2021 18:14

Adding isDraggable to timeslider

57915a4

More timeslider styles

d2f0a87

elizabetdev and others added 2 commits June 28, 2021 19:19

Better positioning of the exit edit mode button

1e83d5d

Enable edit mode when new vector layer added

76d8b43

kindsun requested a review from nreese June 28, 2021 18:50

nreese closed this Jun 28, 2021

nreese reopened this Jun 28, 2021

nreese approved these changes Jun 28, 2021

View reviewed changes

x-pack/plugins/maps/public/actions/map_actions.ts Outdated Show resolved Hide resolved

x-pack/plugins/maps/public/connected_components/add_layer_panel/view.tsx Outdated Show resolved Hide resolved

Aaron Caldwell added 2 commits June 28, 2021 14:43

Review feedback. Update action name. Remove unneeded component state

21e4f26

Minor updates. One more action for cancel. Type updates. Snapshot update

d2193e9

kindsun approved these changes Jun 28, 2021

View reviewed changes

fixing tests and eslint error

1256b0c

elizabetdev added the v8.0.0 label Jun 29, 2021

Merge branch 'master' into maps-design-updates

c6c6e78

snide approved these changes Jun 29, 2021

View reviewed changes

elizabetdev added 3 commits June 29, 2021 14:46

Added new exit mode design. Renamed animations

9137264

Features instead of feature to be consistent with popover

08c47f4

fix type error

3abed0f

elizabetdev merged commit 8c0407a into elastic:master Jun 29, 2021

elizabetdev mentioned this pull request Jun 29, 2021

[7.x] [Maps] Design updates for draw shape mode and timeslider (#103493) #103716

Merged

kindsun mentioned this pull request Jul 6, 2021

[Maps] Add vector drawing & persisting functionality to Maps app #96836

Closed

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Maps] Design updates for draw shape mode and timeslider #103493

[Maps] Design updates for draw shape mode and timeslider #103493

elizabetdev commented Jun 28, 2021 •

edited

Loading

elasticmachine commented Jun 28, 2021

nreese left a comment

kmartastic commented Jun 28, 2021

elizabetdev commented Jun 28, 2021

elizabetdev commented Jun 28, 2021

nreese commented Jun 28, 2021 •

edited

Loading

elizabetdev commented Jun 28, 2021

nreese commented Jun 28, 2021

elizabetdev commented Jun 28, 2021

kindsun commented Jun 28, 2021

elizabetdev commented Jun 28, 2021

nreese commented Jun 28, 2021

kindsun commented Jun 28, 2021

nreese left a comment

kindsun left a comment

elizabetdev commented Jun 29, 2021

snide left a comment

snide Jun 29, 2021

kibanamachine commented Jun 29, 2021

elizabetdev commented Jun 29, 2021

[Maps] Design updates for draw shape mode and timeslider #103493

[Maps] Design updates for draw shape mode and timeslider #103493

Conversation

elizabetdev commented Jun 28, 2021 • edited Loading

Summary

Draw shape mode

Timeslider

Preview

Missing

Checklist

elasticmachine commented Jun 28, 2021

nreese left a comment

Choose a reason for hiding this comment

kmartastic commented Jun 28, 2021

elizabetdev commented Jun 28, 2021

elizabetdev commented Jun 28, 2021

nreese commented Jun 28, 2021 • edited Loading

elizabetdev commented Jun 28, 2021

nreese commented Jun 28, 2021

elizabetdev commented Jun 28, 2021

kindsun commented Jun 28, 2021

elizabetdev commented Jun 28, 2021

nreese commented Jun 28, 2021

kindsun commented Jun 28, 2021

nreese left a comment

Choose a reason for hiding this comment

kindsun left a comment

Choose a reason for hiding this comment

elizabetdev commented Jun 29, 2021

snide left a comment

Choose a reason for hiding this comment

snide Jun 29, 2021

Choose a reason for hiding this comment

kibanamachine commented Jun 29, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

elizabetdev commented Jun 29, 2021

elizabetdev commented Jun 28, 2021 •

edited

Loading

nreese commented Jun 28, 2021 •

edited

Loading