github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Maps] Fix text readability on map scale, attribution, and coordinate controls (#189639)

Browse source 
## Summary

Fixes #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
7f2a698f44)

<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)
This commit is contained in:
Jorge Sanz 2024-08-27 11:06:15 +02:00 • committed by GitHub
parent 9293bc1917
commit 32dd3730fa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 7 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

5
x-pack/plugins/maps/public/connected_components/mb_map/scale_control/_index.scss
View file

@ -5,9 +5,10 @@
bottom: $euiSizeM;
pointer-events: none;
color: $euiTextColor;
border-left: 2px solid $euiTextColor;
border-bottom: 2px solid $euiTextColor;
border-left: 2px solid rgba($euiTextColor, .6);
border-bottom: 2px solid rgba($euiTextColor, .6);
text-align: right;
@include mapOverlayIsTextOnly;
}
.mapScaleControlFullScreen {

10
x-pack/plugins/maps/public/connected_components/right_side_controls/_mixins.scss
View file

@ -1,8 +1,6 @@
@mixin mapOverlayIsTextOnly {
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;
background-color: $euiPageBackgroundColor;
padding-left: $euiSizeXS;
padding-right: $euiSizeXS;
}

1
x-pack/plugins/maps/public/connected_components/right_side_controls/attribution_control/_attribution_control.scss
View file

@ -2,7 +2,6 @@
@include mapOverlayIsTextOnly;
@include euiTextBreakWord;
pointer-events: all;
padding-left: $euiSizeM;
}
.mapAttributionControl__fullScreen {