Skip to content

Commit 5d09058

Browse files
felix-mufelix-mu
committed
refactor: remove global style and use css object on a wrapper div
1 parent 3e19ac2 commit 5d09058

File tree

2 files changed

+162
-133
lines changed

2 files changed

+162
-133
lines changed

‎src/GeomapPanel.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ import { DataHoverView } from './components/DataHoverView';
5252
import { ExtendMapLayerOptions } from './extension';
5353
import SpatialFilterControl from './mapcontrols/SpatialFilter';
5454
import { testIds } from 'e2eTestIds';
55-
import { Global } from '@emotion/react';
55+
// import { Global } from '@emotion/react';
5656
import { Subscription } from 'rxjs';
5757
import { DataExtentZoom } from 'mapcontrols/DataExtentZoom';
5858
import { CustomLayerSwitcher } from 'mapcontrols/CustomLayerSwitcher';
@@ -768,10 +768,14 @@ export class GeomapPanel extends Component<Props, State> {
768768

769769
return (
770770
<>
771-
<Global styles={this.globalCSS} />
772-
<div className={styles.wrap} data-testid={testIds.geomapPanel.container} onMouseLeave={this.clearTooltip}>
773-
<div className={styles.map} ref={this.initMapRef}></div>
774-
<GeomapOverlay bottomLeft={bottomLeft} topRight2={topRight2} />
771+
<div className={this.globalCSS} style={{height: "100%"}}>
772+
{
773+
// <Global styles={this.globalCSS} />
774+
}
775+
<div className={styles.wrap} data-testid={testIds.geomapPanel.container} onMouseLeave={this.clearTooltip}>
776+
<div className={styles.map} ref={this.initMapRef}></div>
777+
<GeomapOverlay bottomLeft={bottomLeft} topRight2={topRight2} />
778+
</div>
775779
</div>
776780
{ttip && ttip.data && (
777781
<Portal>
@@ -785,7 +789,6 @@ export class GeomapPanel extends Component<Props, State> {
785789
</VizTooltipContainer>
786790
</Portal>
787791
)}
788-
789792
</>
790793
);
791794
}

‎src/globalStyles.ts‎

Lines changed: 153 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { css } from '@emotion/react';
1+
import { css } from '@emotion/css';
22
import { GrafanaTheme2 } from '@grafana/data';
33

44
import 'ol/ol.css';
@@ -49,130 +49,156 @@ export function getGlobalStyles(theme: GrafanaTheme2) {
4949
// border: 2px dotted rgba(0,60,136,0.7);
5050
// }
5151

52-
return css({
53-
'.ol-scale-line': {
54-
background: theme.colors.border.weak, // rgba(0,60,136,0.3);
55-
},
56-
'.ol-scale-line-inner': {
57-
border: `1px solid ${theme.colors.text.primary}`, // #eee;
58-
borderTop: 0, // 0px;
59-
color: theme.colors.text.primary, // #eee;
60-
},
61-
'.ol-control': {
62-
backgroundColor: theme.colors.background.primary, // rgba(255,255,255,0.4);
63-
},
64-
'.ol-control:hover': {
65-
backgroundColor: theme.colors.background.secondary, // rgba(255,255,255,0.6);
66-
},
67-
'.ol-control button': {
68-
color: theme.colors.secondary.text, // white;
69-
backgroundColor: theme.colors.secondary.main, // rgba(0,60,136,0.5);
70-
},
71-
'.ol-control button:hover': {
72-
color: theme.colors.secondary.text,
73-
backgroundColor: theme.colors.secondary.shade, // rgba(0,60,136,0.5);
74-
},
75-
'.ol-control button:focus': {
76-
color: theme.colors.secondary.text,
77-
backgroundColor: theme.colors.secondary.main, // rgba(0,60,136,0.5);
78-
},
79-
'.ol-attribution ul': {
80-
color: theme.colors.text.primary, // #000;
81-
textShadow: 'none',
82-
},
83-
'.ol-attribution:not(.ol-collapsed)': {
84-
backgroundColor: theme.colors.background.secondary, // rgba(255,255,255,0.8);
85-
},
86-
'.ol-control.layer-switcher': {
87-
top: "0.5em",
88-
right: "0.5em",
89-
// textAlign: "right"
90-
textAlign: "left"
91-
},
92-
'.ol-control.layer-switcher.shown.layer-switcher-activation-mode-click': {
93-
paddingRight: "0.5em"
94-
},
95-
'.ol-control.layer-switcher.shown.layer-switcher-activation-mode-click > button': {
96-
right: 0,
97-
borderLeft: 0,
98-
},
99-
'.ol-control.layer-switcher.shown.layer-switcher-activation-mode-click > .panel': {
100-
display: 'block',
101-
},
102-
'.ol-control.layer-switcher.layer-switcher-activation-mode-click > .panel': {
103-
display: 'none',
104-
},
105-
'.ol-control.layer-switcher button': {
106-
right: 0,
107-
borderLeft: 0,
108-
/* content: url('./img/icons/layers.svg'); */
109-
/* background-image: url('./img/icons/layers.svg');
110-
background-repeat: no-repeat; */
111-
/* https://icons.getbootstrap.com/#usage */
112-
},
113-
'.ol-control.layer-switcher li.layer': {
114-
listStyle: 'none',
115-
},
116-
'.layer-switcher li label': {
117-
paddingLeft: "0.5em",
118-
/* padding-right: 1.2em; */
119-
display: "inline-block",
120-
marginTop: "1px",
121-
},
122-
'.data-layer-add': {
123-
display: 'flex',
124-
justifyContent: 'flex-end',
125-
marginBottom: 10,
126-
},
127-
'.data-layer-remove': {
128-
display: 'flex',
129-
justifyContent: 'flex-end',
130-
marginBottom: 10,
131-
marginTop: 10,
132-
},
133-
'.ol-custom-overviewmap': {
134-
/* left: 0.5em; */
135-
/* bottom: 0.5em; */
136-
right: "0.5em",
137-
bottom: "20%",
138-
padding: "1px"
139-
},
140-
'.ol-custom-overviewmap.ol-uncollapsible': {
141-
bottom: 0,
142-
left: 0,
143-
borderRadius: "0 2px 0 0"
144-
},
145-
'.ol-custom-overviewmap .ol-overviewmap-map, .ol-custom-overviewmap button': {
146-
display: "block",
147-
borderRadius: "4px"
148-
},
149-
'.ol-custom-overviewmap .ol-overviewmap-map': {
150-
border: "1px solid #7b98bc",
151-
height: "150px",
152-
margin: "1px",
153-
width: "150px"
154-
},
155-
'.ol-custom-overviewmap:not(.ol-collapsed) button': {
156-
bottom: "6px",
157-
left: "6px",
158-
position: "absolute",
159-
background: theme.colors.background.secondary
160-
},
161-
'.ol-custom-overviewmap:not(.ol-collapsed) button:hover div': {
162-
color: theme.colors.secondary.text,
163-
backgroundColor: theme.colors.secondary.shade, // rgba(0,60,136,0.5);
164-
},
165-
'.ol-custom-overviewmap.ol-collapsed .ol-overviewmap-map, .ol-custom-overviewmap.ol-uncollapsible button': {
166-
display: "none"
167-
},
168-
'.ol-custom-overviewmap:not(.ol-collapsed)': {
169-
background: theme.colors.background.secondary
170-
},
171-
'.ol-custom-overviewmap .ol-overviewmap-box': {
172-
border: "2px solid red"
173-
},
174-
'.ol-custom-overviewmap .ol-overviewmap-box:hover': {
175-
cursor: "move"
176-
}
177-
});
52+
return css`
53+
.ol-scale-line {
54+
background: ${theme.colors.border.weak}; /* rgba(0,60,136,0.3); */
55+
}
56+
57+
.ol-scale-line-inner {
58+
border: 1px solid ${theme.colors.text.primary}; /* #eee; */
59+
border-top: 0;
60+
color: ${theme.colors.text.primary}; /* #eee; */
61+
}
62+
63+
.ol-control {
64+
background-color: ${theme.colors.background.primary}; /* rgba(255,255,255,0.4); */
65+
}
66+
67+
.ol-control:hover {
68+
background-color: ${theme.colors.background.secondary}; /* rgba(255,255,255,0.6); */
69+
}
70+
71+
.ol-control button {
72+
color: ${theme.colors.secondary.text}; /* white; */
73+
background-color: ${theme.colors.secondary.main}; /* rgba(0,60,136,0.5); */
74+
}
75+
76+
.ol-control button:hover {
77+
color: ${theme.colors.secondary.text};
78+
background-color: ${theme.colors.secondary.shade}; /* rgba(0,60,136,0.5); */
79+
}
80+
81+
.ol-control button:focus {
82+
color: ${theme.colors.secondary.text};
83+
background-color: ${theme.colors.secondary.main}; /* rgba(0,60,136,0.5); */
84+
}
85+
86+
.ol-attribution ul {
87+
color: ${theme.colors.text.primary}; /* #000; */
88+
text-shadow: none;
89+
}
90+
91+
.ol-attribution:not(.ol-collapsed) {
92+
background-color: ${theme.colors.background.secondary}; /* rgba(255,255,255,0.8); */
93+
}
94+
95+
.ol-control.layer-switcher {
96+
top: 0.5em;
97+
right: 0.5em;
98+
text-align: left;
99+
}
100+
101+
.ol-control.layer-switcher.shown.layer-switcher-activation-mode-click {
102+
padding-right: 0.5em;
103+
}
104+
105+
.ol-control.layer-switcher.shown.layer-switcher-activation-mode-click > button {
106+
right: 0;
107+
border-left: 0;
108+
}
109+
110+
.ol-control.layer-switcher.shown.layer-switcher-activation-mode-click > .panel {
111+
display: block;
112+
}
113+
114+
.ol-control.layer-switcher.layer-switcher-activation-mode-click > .panel {
115+
display: none;
116+
}
117+
118+
.ol-control.layer-switcher button {
119+
right: 0;
120+
border-left: 0;
121+
/* content: url('./img/icons/layers.svg'); */
122+
/* background-image: url('./img/icons/layers.svg');
123+
background-repeat: no-repeat; */
124+
/* https://icons.getbootstrap.com/#usage */
125+
}
126+
127+
.ol-control.layer-switcher li.layer {
128+
list-style: none;
129+
}
130+
131+
.layer-switcher li label {
132+
padding-left: 0.5em;
133+
display: inline-block;
134+
margin-top: 1px;
135+
}
136+
137+
.data-layer-add {
138+
display: flex;
139+
justify-content: flex-end;
140+
margin-bottom: 10px;
141+
}
142+
143+
.data-layer-remove {
144+
display: flex;
145+
justify-content: flex-end;
146+
margin-bottom: 10px;
147+
margin-top: 10px;
148+
}
149+
150+
.ol-custom-overviewmap {
151+
right: 0.5em;
152+
bottom: 20%;
153+
padding: 1px;
154+
}
155+
156+
.ol-custom-overviewmap.ol-uncollapsible {
157+
bottom: 0;
158+
left: 0;
159+
border-radius: 0 2px 0 0;
160+
}
161+
162+
.ol-custom-overviewmap .ol-overviewmap-map,
163+
.ol-custom-overviewmap button {
164+
display: block;
165+
border-radius: 4px;
166+
}
167+
168+
.ol-custom-overviewmap .ol-overviewmap-map {
169+
border: 1px solid #7b98bc;
170+
height: 150px;
171+
margin: 1px;
172+
width: 150px;
173+
}
174+
175+
.ol-custom-overviewmap:not(.ol-collapsed) button {
176+
bottom: 6px;
177+
left: 6px;
178+
position: absolute;
179+
background: ${theme.colors.background.secondary};
180+
}
181+
182+
.ol-custom-overviewmap:not(.ol-collapsed) button:hover div {
183+
color: ${theme.colors.secondary.text};
184+
background-color: ${theme.colors.secondary.shade}; /* rgba(0,60,136,0.5); */
185+
}
186+
187+
.ol-custom-overviewmap.ol-collapsed .ol-overviewmap-map,
188+
.ol-custom-overviewmap.ol-uncollapsible button {
189+
display: none;
190+
}
191+
192+
.ol-custom-overviewmap:not(.ol-collapsed) {
193+
background: ${theme.colors.background.secondary};
194+
}
195+
196+
.ol-custom-overviewmap .ol-overviewmap-box {
197+
border: 2px solid red;
198+
}
199+
200+
.ol-custom-overviewmap .ol-overviewmap-box:hover {
201+
cursor: move;
202+
}
203+
`
178204
}

0 commit comments

Comments
 (0)