[Maps] Fix some overlays designs #36837
Conversation
What do you think about putting the action in the toolbar menu? We can always show the toolbar menu in the maps application |
cchaos
added
Team:Platform-Design
|
Pinging @elastic/kibana-design |
|
Are the zoom in/out buttons supposed to be so dark when kibana is in light mode? They really stand out more then they should
|
|
Yes, they are supposed to be the same color as the text color. |
I don't think it's necessary to hide under the toolbar. Especially if we're thinking that the button might also be able to "find current location" or "fit all data" eventually. |
cchaos
added
release_note:fix
release_note:skip
I don't think we could move the button within the next few hours. The ToolbarOverlay is positioned absolutely. We would need to put the action buttons into a container and then position that container absolutely. I can move the button in a follow on PR. |
|
Ok, that'll be fine, thx |
| // 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"); |
There was a problem hiding this comment.
15px i assume so it centers? Surprised this worked in ie11.
There was a problem hiding this comment.
15px is the actual size of the icon
Why is it surprising to have worked in IE?
💚 Build Succeeded |
💔 Build Failed |
💚 Build Succeeded |
💚 Build Succeeded |
* 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
* 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
nreese
added
the
[Deprecated-Use Team:Presentation]Team:Geo
|
Pinging @elastic/kibana-gis |
1. Better text as overlay
Uses font-shadows to decrease the attention but still provide some contrast
2. Changed Mapbox zoom icons to be the same as EUI icons
Also fixes it in dark mode
Before
After
3. Made “Go to” button an icon button
@nreese Is it possible/easy to move this button to the left side?
Then in embed mode it would need to be between the zoom controls and the toolbar button
4. Fixed layout with scrolling and overflow shadow of right side
The shadow was cut off on the sides
Before
After
5. Fix the border size legend to show the full border
Before
After
Checklist
Use
strikethroughsto remove checklist items you don't feel are applicable to this PR.[ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support[ ] Documentation was added for features that require explanation or tutorials[ ] This was checked for keyboard-only and screenreader accessibilityFor maintainers