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

Jump to bottom

User configurable scale color for Kibana maps #128783

Closed
A-Hall opened this issue Mar 29, 2022 · 6 comments · Fixed by #189639
Closed

User configurable scale color for Kibana maps #128783

A-Hall opened this issue Mar 29, 2022 · 6 comments · Fixed by #189639
Labels
enhancement New value added to drive a business result Feature:Maps impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. loe:small Small Level of Effort Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas usability

Comments

@A-Hall
Copy link
Member

A-Hall commented Mar 29, 2022

Describe the feature:

Allow the maps scale color to be user configurable.

Describe a specific use case for the feature:

In certain situations it is very hard to see the scale graphic in the lower left side of a map, such as when the scale appears over a wooded area:

image
@botelastic botelastic bot added the needs-team Issues missing a team label label Mar 29, 2022
@nreese nreese added [Deprecated-Use Team:Presentation]Team:Geo Former Team Label for Geo Team. Now use Team:Presentation enhancement New value added to drive a business result labels Mar 31, 2022
@elasticmachine
Copy link
Contributor

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

@botelastic botelastic bot removed the needs-team Issues missing a team label label Mar 31, 2022
@teresaalvarezsoler teresaalvarezsoler added loe:small Small Level of Effort impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. labels Jul 19, 2022
@nickpeihl
Copy link
Member

I wonder if this should include changing the color for the mouse coordinates and attribution overlays as well? We should probably make it consistent.

@nreese
Copy link
Contributor

nreese commented Sep 21, 2022

I wonder if this should include changing the color for the mouse coordinates and attribution overlays as well? We should probably make it consistent.

And attribution as well

@jb1b84 jb1b84 added Feature:Maps Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas and removed [Deprecated-Use Team:Presentation]Team:Geo Former Team Label for Geo Team. Now use Team:Presentation labels Nov 3, 2022
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-presentation (Team:Presentation)

@nreese
Copy link
Contributor

nreese commented May 4, 2023

@jsanz suggested adding a halo or colored background to avoid another setting/difficulties with dark/light mode.

@jsanz
Copy link
Member

jsanz commented Jul 30, 2024

I believe the halo was intended on this code but it is broken

kibana/x-pack/plugins/maps/public/connected_components/right_side_controls/_mixins.scss

Lines 2 to 7 in 82c87a7

text-shadow:
0 0 2px $euiColorEmptyShade,
0 0 1px $euiColorEmptyShade,
0 0 1px $euiColorEmptyShade,
0 0 1px $euiColorEmptyShade,
0 0 1px $euiColorEmptyShade 0 0 1px $euiColorEmptyShade 0 0 1px $euiColorEmptyShade;

Just fixing that text-shadow and adding that sass mixin to the scale control style should help with this issue

I'll open a small PR tomorrow

@jsanz jsanz mentioned this issue Jul 31, 2024
Merged
@jsanz jsanz closed this as completed in 32dd373 Aug 27, 2024
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Aug 27, 2024
@jsanz
[Maps] Fix text readability on map scale, attribution, and coordinate…
e5325fd 
… controls (elastic#189639)

## Summary

Fixes elastic#128783

This PR fixes the visualization of the texts in Maps scale bar,
attribution, and coordinate controls with a dark background.

## Context

While checking on the scale bar component of the map I saw this SCSS
mixin that seemed to be broken.

Originally I thought on fixing the shadow but the readability of the
text is not great for dark background (see
7f2a698)

<details><summary>Adding a shadow</summary>

| before | after |
| :--:| :--:|

|![2024-07-31_16-17](https://github.com/user-attachments/assets/23239b0d-826e-482e-ac67-fe7faa50d696)
|
![2024-07-31_16-18](https://github.com/user-attachments/assets/dffe0873-86dd-46b3-877e-ff4f5ef92c32)
|
</details>

So I decided to propose to fix this by adding a background as is usual
in other platforms.

![image](https://github.com/user-attachments/assets/7a7d0d11-1cf6-4961-b872-a5247c930363)

![image](https://github.com/user-attachments/assets/2c3d893b-f380-4724-9ad5-93adb6ec9fb6)

![image](https://github.com/user-attachments/assets/1a9becbc-40b1-4631-8360-f2a1bfafc9c2)

(cherry picked from commit 32dd373)
kibanamachine added a commit that referenced this issue Aug 27, 2024
@kibanamachine @jsanz
[8.15] [Maps] Fix text readability on map scale, attribution, and coo…
1dbefdf 
…rdinate controls (#189639) (#191408)

# Backport

This will backport the following commits from `main` to `8.15`:
- [[Maps] Fix text readability on map scale, attribution, and coordinate
controls (#189639)](#189639)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Jorge
Sanz","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-08-27T09:06:15Z","message":"[Maps]
Fix text readability on map scale, attribution, and coordinate controls
(#189639)\n\n## Summary\r\n\r\nFixes #128783\r\n\r\nThis PR fixes the
visualization of the texts in Maps scale bar,\r\nattribution, and
coordinate controls with a dark background.\r\n\r\n##
Context\r\n\r\nWhile checking on the scale bar component of the map I
saw this SCSS\r\nmixin that seemed to be broken.\r\n\r\nOriginally I
thought on fixing the shadow but the readability of the\r\ntext is not
great for dark background
(see\r\n7f2a698f4401c9b22f5c526ad8cfaa7839e30282)\r\n\r\n<details><summary>Adding
a shadow</summary>\r\n\r\n| before | after |\r\n| :--:| :--:|
\r\n\r\n|![2024-07-31_16-17](https://github.com/user-attachments/assets/23239b0d-826e-482e-ac67-fe7faa50d696)\r\n|\r\n![2024-07-31_16-18](https://github.com/user-attachments/assets/dffe0873-86dd-46b3-877e-ff4f5ef92c32)\r\n|\r\n</details>\r\n\r\nSo
I decided to propose to fix this by adding a background as is
usual\r\nin other
platforms.\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/7a7d0d11-1cf6-4961-b872-a5247c930363)\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/2c3d893b-f380-4724-9ad5-93adb6ec9fb6)\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/1a9becbc-40b1-4631-8360-f2a1bfafc9c2)","sha":"32dd3730fa70acdb2e37918861c32537ffd2fc7e","branchLabelMapping":{"^v8.16.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Presentation","backport:prev-minor","Feature:Maps","v8.16.0"],"title":"[Maps]
Fix text readability on map scale, attribution, and coordinate
controls","number":189639,"url":"https://github.com/elastic/kibana/pull/189639","mergeCommit":{"message":"[Maps]
Fix text readability on map scale, attribution, and coordinate controls
(#189639)\n\n## Summary\r\n\r\nFixes #128783\r\n\r\nThis PR fixes the
visualization of the texts in Maps scale bar,\r\nattribution, and
coordinate controls with a dark background.\r\n\r\n##
Context\r\n\r\nWhile checking on the scale bar component of the map I
saw this SCSS\r\nmixin that seemed to be broken.\r\n\r\nOriginally I
thought on fixing the shadow but the readability of the\r\ntext is not
great for dark background
(see\r\n7f2a698f4401c9b22f5c526ad8cfaa7839e30282)\r\n\r\n<details><summary>Adding
a shadow</summary>\r\n\r\n| before | after |\r\n| :--:| :--:|
\r\n\r\n|![2024-07-31_16-17](https://github.com/user-attachments/assets/23239b0d-826e-482e-ac67-fe7faa50d696)\r\n|\r\n![2024-07-31_16-18](https://github.com/user-attachments/assets/dffe0873-86dd-46b3-877e-ff4f5ef92c32)\r\n|\r\n</details>\r\n\r\nSo
I decided to propose to fix this by adding a background as is
usual\r\nin other
platforms.\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/7a7d0d11-1cf6-4961-b872-a5247c930363)\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/2c3d893b-f380-4724-9ad5-93adb6ec9fb6)\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/1a9becbc-40b1-4631-8360-f2a1bfafc9c2)","sha":"32dd3730fa70acdb2e37918861c32537ffd2fc7e"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/189639","number":189639,"mergeCommit":{"message":"[Maps]
Fix text readability on map scale, attribution, and coordinate controls
(#189639)\n\n## Summary\r\n\r\nFixes #128783\r\n\r\nThis PR fixes the
visualization of the texts in Maps scale bar,\r\nattribution, and
coordinate controls with a dark background.\r\n\r\n##
Context\r\n\r\nWhile checking on the scale bar component of the map I
saw this SCSS\r\nmixin that seemed to be broken.\r\n\r\nOriginally I
thought on fixing the shadow but the readability of the\r\ntext is not
great for dark background
(see\r\n7f2a698f4401c9b22f5c526ad8cfaa7839e30282)\r\n\r\n<details><summary>Adding
a shadow</summary>\r\n\r\n| before | after |\r\n| :--:| :--:|
\r\n\r\n|![2024-07-31_16-17](https://github.com/user-attachments/assets/23239b0d-826e-482e-ac67-fe7faa50d696)\r\n|\r\n![2024-07-31_16-18](https://github.com/user-attachments/assets/dffe0873-86dd-46b3-877e-ff4f5ef92c32)\r\n|\r\n</details>\r\n\r\nSo
I decided to propose to fix this by adding a background as is
usual\r\nin other
platforms.\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/7a7d0d11-1cf6-4961-b872-a5247c930363)\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/2c3d893b-f380-4724-9ad5-93adb6ec9fb6)\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/1a9becbc-40b1-4631-8360-f2a1bfafc9c2)","sha":"32dd3730fa70acdb2e37918861c32537ffd2fc7e"}}]}]
BACKPORT-->

Co-authored-by: Jorge Sanz <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New value added to drive a business result Feature:Maps impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. loe:small Small Level of Effort Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas usability
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Maps] Fix text readability on map scale, attribution, and coordinate controls jsanz/kibana
7 participants
@jsanz @nreese @nickpeihl @jb1b84 @elasticmachine @A-Hall @teresaalvarezsoler