Skip to content

Commit d4ffcc2

Browse files
github-actions[bot]github-actions[bot]
committed
Fix (Legacy Maps): Add necessary specificity for dark mode style over… (#4658)
* Fix (Legacy Maps): Add necessary specificity for dark mode style overrides - wrap override styles in visualization selector - remove temp SASS var - update attribution background to be opaque for consistency with other controls - add raster tile filter to map tiles in dark mode, since OpenSearch doesn't serve dark mode raster tilesets - Fix tooltip behavior so that tooltip only appears when there's content to render fixes opensearch-project/dashboards-maps#449, fixes opensearch-project/dashboards-maps#450 Signed-off-by: Josh Romero <rmerqg@amazon.com> * update changelog Signed-off-by: Josh Romero <rmerqg@amazon.com> * Fix spacing linter issues Signed-off-by: Josh Romero <rmerqg@amazon.com> * Update font-family overrides to use CSS var definitions Signed-off-by: Josh Romero <rmerqg@amazon.com> --------- Signed-off-by: Josh Romero <rmerqg@amazon.com> (cherry picked from commit fc238b0) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md
1 parent e8949b7 commit d4ffcc2

File tree

3 files changed

+120
-118
lines changed

3 files changed

+120
-118
lines changed

‎src/plugins/maps_legacy/public/map/_leaflet_overrides.scss

+118-116
Original file line numberDiff line numberDiff line change
@@ -1,164 +1,166 @@
11
// SASSTODO: Create these tooltip variables in EUI
22
// And/Or create a tooltip mixin
3-
$temp-euiTooltipBackground: tintOrShade($euiColorFullShade, 25%, 90%);
43
$temp-euiTooltipText: $euiColorGhost;
54

65
// Converted leaflet icon sprite into background svg for custom coloring (dark mode)
76
/* stylelint-disable-next-line max-line-length */
87
$visMapLeafletSprite: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60' height='60' width='600'%3E%3Cg fill='#{hexToRGB($euiTextColor)}'%3E%3Cg%3E%3Cpath d='M18 36v6h6v-6h-6zm4 4h-2v-2h2v2z'/%3E%3Cpath d='M36 18v6h6v-6h-6zm4 4h-2v-2h2v2z'/%3E%3Cpath d='M23.142 39.145l-2.285-2.29 16-15.998 2.285 2.285z'/%3E%3C/g%3E%3Cpath d='M100 24.565l-2.096 14.83L83.07 42 76 28.773 86.463 18z'/%3E%3Cpath d='M140 20h20v20h-20z'/%3E%3Cpath d='M221 30c0 6.078-4.926 11-11 11s-11-4.922-11-11c0-6.074 4.926-11 11-11s11 4.926 11 11z'/%3E%3Cpath d='M270,19c-4.971,0-9,4.029-9,9c0,4.971,5.001,12,9,14c4.001-2,9-9.029,9-14C279,23.029,274.971,19,270,19z M270,31.5c-2.484,0-4.5-2.014-4.5-4.5c0-2.484,2.016-4.5,4.5-4.5c2.485,0,4.5,2.016,4.5,4.5C274.5,29.486,272.485,31.5,270,31.5z'/%3E%3Cg%3E%3Cpath d='M337,30.156v0.407v5.604c0,1.658-1.344,3-3,3h-10c-1.655,0-3-1.342-3-3v-10c0-1.657,1.345-3,3-3h6.345 l3.19-3.17H324c-3.313,0-6,2.687-6,6v10c0,3.313,2.687,6,6,6h10c3.314,0,6-2.687,6-6v-8.809L337,30.156'/%3E%3Cpath d='M338.72 24.637l-8.892 8.892H327V30.7l8.89-8.89z'/%3E%3Cpath d='M338.697 17.826h4v4h-4z' transform='rotate(-134.99 340.703 19.817)'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M381 42h18V24h-18v18zm14-16h2v14h-2V26zm-4 0h2v14h-2V26zm-4 0h2v14h-2V26zm-4 0h2v14h-2V26z'/%3E%3Cpath d='M395 20v-4h-10v4h-6v2h22v-2h-6zm-2 0h-6v-2h6v2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A";
98

10-
.leaflet-touch .leaflet-bar,
11-
.leaflet-draw-actions {
12-
@include euiBottomShadowMedium($color: $euiShadowColorLarge, $opacity: 0.2);
9+
// wrap in additional selector for enough specificity to override defaults
10+
.visualization {
11+
.leaflet-touch .leaflet-bar,
12+
.leaflet-draw-actions {
13+
@include euiBottomShadowMedium($color: $euiShadowColorLarge, $opacity: 0.2);
1314

14-
border: none;
15-
}
16-
17-
.leaflet-container {
18-
background: $euiColorEmptyShade;
19-
20-
// the heatmap layer plugin logs an error to the console when the map is in a 0-sized container
21-
min-width: 1px !important;
22-
min-height: 1px !important;
23-
}
24-
25-
.leaflet-clickable {
26-
&:hover {
27-
stroke-width: $euiSizeS;
28-
stroke-opacity: 0.8;
15+
border: none;
2916
}
30-
}
3117

32-
/**
33-
* 1. Since Leaflet is an external library, we also have to provide EUI variables
34-
* to non-override colors for darkmode.
35-
*/
18+
.leaflet-container {
19+
background: $euiColorEmptyShade;
3620

37-
.leaflet-draw-actions,
38-
.leaflet-control {
39-
a {
40-
background-color: lightOrDarkTheme($euiColorEmptyShade, $euiColorLightShade); /* 1 */
41-
border-color: lightOrDarkTheme($euiColorLightShade, $euiColorMediumShade) !important; /* 1 */
42-
color: $euiTextColor !important; /* 1 */
21+
// the heatmap layer plugin logs an error to the console when the map is in a 0-sized container
22+
min-width: 1px !important;
23+
min-height: 1px !important;
24+
}
4325

26+
.leaflet-clickable {
4427
&:hover {
45-
background-color: $euiColorLightestShade;
28+
stroke-width: $euiSizeS;
29+
stroke-opacity: 0.8;
4630
}
4731
}
48-
}
4932

50-
.leaflet-touch .leaflet-bar a:first-child {
51-
border-top-left-radius: $euiBorderRadius;
52-
border-top-right-radius: $euiBorderRadius;
53-
}
33+
/**
34+
* 1. Since Leaflet is an external library, we also have to provide EUI variables
35+
* to non-override colors for darkmode.
36+
*/
37+
38+
.leaflet-draw-actions,
39+
.leaflet-control {
40+
a {
41+
background-color: lightOrDarkTheme($euiColorEmptyShade, $euiColorLightShade); /* 1 */
42+
border-color: lightOrDarkTheme($euiColorLightShade, $euiColorMediumShade) !important; /* 1 */
43+
color: $euiTextColor !important; /* 1 */
44+
45+
&:hover {
46+
background-color: $euiColorLightestShade;
47+
}
48+
}
49+
}
5450

55-
.leaflet-touch .leaflet-bar a:last-child {
56-
border-bottom-left-radius: $euiBorderRadius;
57-
border-bottom-right-radius: $euiBorderRadius;
58-
}
51+
.leaflet-touch .leaflet-bar a:first-child {
52+
border-top-left-radius: $euiBorderRadius;
53+
border-top-right-radius: $euiBorderRadius;
54+
}
5955

60-
.leaflet-retina .leaflet-draw-toolbar a {
61-
background-image: url($visMapLeafletSprite); /* 1 */
62-
}
56+
.leaflet-touch .leaflet-bar a:last-child {
57+
border-bottom-left-radius: $euiBorderRadius;
58+
border-bottom-right-radius: $euiBorderRadius;
59+
}
6360

64-
.leaflet-control-layers-expanded {
65-
padding: 0;
66-
margin: 0;
61+
.leaflet-retina .leaflet-draw-toolbar a {
62+
background-image: url($visMapLeafletSprite); /* 1 */
63+
}
6764

68-
@include fontSize(11px);
65+
.leaflet-control-layers-expanded {
66+
padding: 0;
67+
margin: 0;
6968

70-
font-family: $euiFontFamily;
71-
font-weight: $euiFontWeightMedium;
72-
line-height: $euiLineHeight;
69+
@include fontSize(11px);
7370

74-
label {
71+
font-family: var(--font-text);
7572
font-weight: $euiFontWeightMedium;
73+
line-height: $euiLineHeight;
74+
75+
label {
76+
font-weight: $euiFontWeightMedium;
77+
margin: 0;
78+
padding: 0;
79+
}
80+
}
81+
82+
/* over-rides leaflet popup styles to look like OpenSearch Dashboards tooltip */
83+
.leaflet-popup-content-wrapper {
7684
margin: 0;
7785
padding: 0;
86+
background: $euiTooltipBackgroundColor;
87+
color: $temp-euiTooltipText;
88+
border-radius: $euiBorderRadius !important; // Override all positions the popup might be at
7889
}
79-
}
8090

81-
/* over-rides leaflet popup styles to look like OpenSearch Dashboards tooltip */
82-
.leaflet-popup-content-wrapper {
83-
margin: 0;
84-
padding: 0;
85-
background: $temp-euiTooltipBackground;
86-
color: $temp-euiTooltipText;
87-
border-radius: $euiBorderRadius !important; // Override all positions the popup might be at
88-
}
89-
90-
.leaflet-popup {
91-
pointer-events: none;
92-
}
91+
.leaflet-popup {
92+
pointer-events: none;
93+
}
9394

94-
.leaflet-popup-content {
95-
margin: 0;
95+
.leaflet-popup-content {
96+
margin: 0;
9697

97-
@include euiFontSizeS;
98+
@include euiFontSizeS;
9899

99-
font-weight: $euiFontWeightRegular;
100-
word-wrap: break-word;
101-
overflow: hidden;
102-
pointer-events: none;
100+
font-weight: $euiFontWeightRegular;
101+
word-wrap: break-word;
102+
overflow: hidden;
103+
pointer-events: none;
103104

104-
> * {
105-
margin: $euiSizeS $euiSizeS 0;
106-
}
105+
> * {
106+
margin: $euiSizeS $euiSizeS 0;
107+
}
107108

108-
> :last-child {
109-
margin-bottom: $euiSizeS;
110-
}
109+
> :last-child {
110+
margin-bottom: $euiSizeS;
111+
}
111112

112-
table {
113-
td,
114-
th {
115-
padding: $euiSizeXS;
113+
table {
114+
td,
115+
th {
116+
padding: $euiSizeXS;
117+
}
116118
}
117119
}
118-
}
119120

120-
.leaflet-popup-tip-container,
121-
.leaflet-popup-close-button,
122-
.leaflet-draw-tooltip {
123-
display: none !important;
124-
}
121+
.leaflet-popup-tip-container,
122+
.leaflet-popup-close-button,
123+
.leaflet-draw-tooltip {
124+
display: none !important;
125+
}
125126

126-
.leaflet-container .leaflet-control-attribution {
127-
background-color: transparentize($euiColorEmptyShade, 0.7);
128-
color: $euiColorDarkShade;
127+
.leaflet-container .leaflet-control-attribution {
128+
background-color: lightOrDarkTheme($euiColorEmptyShade, $euiColorLightShade);
129+
color: $euiColorDarkShade;
129130

130-
// attributions are appended in blocks of <p> tags, this will allow them to display in one line
131-
p {
132-
display: inline;
131+
// attributions are appended in blocks of <p> tags, this will allow them to display in one line
132+
p {
133+
display: inline;
134+
}
133135
}
134-
}
135136

136-
.leaflet-touch .leaflet-control-zoom-in,
137-
.leaflet-touch .leaflet-control-zoom-out {
138-
text-indent: -10000px;
139-
background-repeat: no-repeat;
140-
background-position: center;
141-
}
137+
.leaflet-touch .leaflet-control-zoom-in,
138+
.leaflet-touch .leaflet-control-zoom-out {
139+
text-indent: -10000px;
140+
background-repeat: no-repeat;
141+
background-position: center;
142+
}
142143

143-
// Custom SVG as background for zoom controls based off of EUI glyphs plusInCircleFilled and minusInCircleFilled
144-
.leaflet-touch .leaflet-control-zoom-in {
145-
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");
146-
}
144+
// Custom SVG as background for zoom controls based off of EUI glyphs plusInCircleFilled and minusInCircleFilled
145+
.leaflet-touch .leaflet-control-zoom-in {
146+
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");
147+
}
147148

148-
.leaflet-touch .leaflet-control-zoom-out {
149-
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='M7.5,0 C11.6355882,0 15,3.36441176 15,7.5 C15,11.6355882 11.6355882,15 7.5,15 C3.36441176,15 0,11.6355882 0,7.5 C0,3.36441176 3.36441176,0 7.5,0 Z M3.5,7 C3.22385763,7 3,7.22385763 3,7.5 C3,7.77614237 3.22385763,8 3.5,8 L11.5,8 C11.7761424,8 12,7.77614237 12,7.5 C12,7.22385763 11.7761424,7 11.5,7 L3.5,7 Z' /%3E%3C/svg%3E");
150-
}
149+
.leaflet-touch .leaflet-control-zoom-out {
150+
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='M7.5,0 C11.6355882,0 15,3.36441176 15,7.5 C15,11.6355882 11.6355882,15 7.5,15 C3.36441176,15 0,11.6355882 0,7.5 C0,3.36441176 3.36441176,0 7.5,0 Z M3.5,7 C3.22385763,7 3,7.22385763 3,7.5 C3,7.77614237 3.22385763,8 3.5,8 L11.5,8 C11.7761424,8 12,7.77614237 12,7.5 C12,7.22385763 11.7761424,7 11.5,7 L3.5,7 Z' /%3E%3C/svg%3E");
151+
}
151152

152-
// Filter to desaturate mapquest tiles
153+
// Filter to desaturate mapquest tiles
153154

154-
img.leaflet-tile {
155-
@if lightness($euiTextColor) < 50 {
156-
filter: brightness(1.03) grayscale(0.73);
157-
} @else {
158-
filter: invert(1) brightness(1.75) grayscale(1);
155+
img.leaflet-tile {
156+
@if lightness($euiTextColor) < 50 {
157+
filter: brightness(1.03) grayscale(0.73);
158+
} @else {
159+
filter: invert(1) brightness(1.75) grayscale(1);
160+
}
159161
}
160-
}
161162

162-
img.leaflet-tile.filters-off {
163-
filter: none;
163+
img.leaflet-tile.filters-off {
164+
filter: lightOrDarkTheme(none, null);
165+
}
164166
}

‎src/plugins/maps_legacy/public/map/_legend.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@include fontSize(11px);
33
@include euiBottomShadowMedium($color: $euiShadowColorLarge, $opacity: 0.1);
44

5-
font-family: $euiFontFamily;
5+
font-family: var(--font-text);
66
font-weight: $euiFontWeightMedium;
77
line-height: $euiLineHeight;
88
color: $euiColorDarkShade;

‎src/plugins/maps_legacy/public/map/opensearch_dashboards_map.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -243,7 +243,7 @@ export class OpenSearchDashboardsMap extends EventEmitter {
243243

244244
addLayer(opensearchDashboardsLayer) {
245245
const onshowTooltip = (event) => {
246-
if (!this._showTooltip) {
246+
if (!this._showTooltip || !event.content) {
247247
return;
248248
}
249249

0 commit comments

Comments
 (0)