Skip to content

Commit 3e19ac2

Browse files
felix-mufelix-mu
committed
refactor: rewrite styles for overviewmap and move css styles to global element
1 parent 0967885 commit 3e19ac2

File tree

10 files changed

+120
-117
lines changed

10 files changed

+120
-117
lines changed

‎src/GeomapPanel.css‎

Lines changed: 0 additions & 55 deletions
This file was deleted.

‎src/GeomapPanel.tsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,6 @@ import VectorLayer from 'ol/layer/Vector';
1212
import { Vector } from 'ol/source';
1313
// import LayerSwitcher from 'ol-layerswitcher';
1414
import { isArray, isEqual } from 'lodash';
15-
import './GeomapPanel.css';
16-
import "bootstrap-icons/font/bootstrap-icons.css";
17-
18-
// Load directly when plugin
19-
import 'static/css/fontmaki2.css';
20-
import 'static/css/fontmaki.css';
2115

2216
// import 'ol-layerswitcher/dist/ol-layerswitcher.css';
2317

‎src/globalStyles.ts‎

Lines changed: 97 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1-
import { css } from '@emotion/css';
1+
import { css } from '@emotion/react';
22
import { GrafanaTheme2 } from '@grafana/data';
33

44
import 'ol/ol.css';
5+
import 'ol-ext/dist/ol-ext.css';
6+
import "bootstrap-icons/font/bootstrap-icons.css";
7+
// Load directly when plugin
8+
import 'static/css/fontmaki2.css';
9+
import 'static/css/fontmaki.css';
510

611
/**
712
* Will be loaded *after* the css above
@@ -78,5 +83,96 @@ export function getGlobalStyles(theme: GrafanaTheme2) {
7883
'.ol-attribution:not(.ol-collapsed)': {
7984
backgroundColor: theme.colors.background.secondary, // rgba(255,255,255,0.8);
8085
},
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+
}
81177
});
82178
}

‎src/layers/data/markersLayer.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,6 @@ import { circleMarker, markerMakers } from '../../utils/regularShapes';
3838
import { ReplaySubject } from 'rxjs';
3939
import { Fill, Image, Stroke, Style, Text } from 'ol/style';
4040
import RenderFeature from 'ol/render/Feature';
41-
import 'static/css/fontmaki2.css';
42-
import 'static/css/fontmaki.css';
4341

4442
// Configuration options for Circle overlays
4543
export interface MarkersConfig {

‎src/mapcontrols/CustomLayerSwitcher.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@ export class CustomLayerSwitcher extends LayerSwitcher {
1515

1616
this.icon = document.createElement('i');
1717
this.icon.setAttribute("class", hiddenClassNameButton!);
18+
this.icon.style.cursor = "pointer";
1819
this.button.appendChild(this.icon);
19-
this.button.style.pointerEvents = "auto";
20+
// this.button.style.pointerEvents = "auto";
2021

2122
this.text = document.createTextNode("");
2223
this.button.appendChild(this.text);

‎src/mapcontrols/CustomOverviewMapWrapper.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
// import { css } from "@emotion/css";
22
import OverviewMap, { Options } from "ol/control/OverviewMap";
3-
import "./customOverviewMap.css";
4-
import "bootstrap-icons/font/bootstrap-icons.css";
53

64
interface CustomOverviewMapOptions extends Options {
75

@@ -13,10 +11,20 @@ class CustomOverviewMapWrapper {
1311
constructor(options: CustomOverviewMapOptions) {
1412
const icon = document.createElement("i");
1513
icon.setAttribute("class", "bi bi-map");
14+
icon.style.cursor = "pointer";
15+
16+
const collapseLabelParent = document.createElement("div");
17+
collapseLabelParent.setAttribute("style", "height: 100%; display: flex;");
18+
19+
const collapseLabel = document.createElement("span");
20+
collapseLabel.style.margin = "auto";
21+
collapseLabel.innerText = "›";
22+
23+
collapseLabelParent.appendChild(collapseLabel)
1624

1725
this.overviewMap = new OverviewMap({
1826
className: "ol-custom-overviewmap",
19-
collapseLabel: "›",
27+
collapseLabel: collapseLabelParent,
2028
label: icon,
2129
...options
2230
});

‎src/mapcontrols/DataExtentZoom.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import "bootstrap-icons/font/bootstrap-icons.css";
21
// import { BusEventBase } from "@grafana/data";
32
import Control from "ol/control/Control";
43
// import BaseLayer from "ol/layer/Base";
@@ -28,18 +27,20 @@ export class DataExtentZoom extends Control {
2827
button.setAttribute("data-testid", DATA_EXTENT_ZOOM_TEST_ID);
2928
button.title = options.tooltipTitle || "Zoom to data extent";
3029
const icon = document.createElement('i');
30+
icon.style.cursor = "pointer";
3131
icon.className = "bi bi-bounding-box-circles";
3232
// icon.className = "bi bi-aspect-ratio";
3333
// icon.className = "bi bi-arrows-fullscreen";
3434
button.appendChild(icon);
35-
button.style.pointerEvents = "auto";
35+
// button.style.pointerEvents = "auto";
36+
button.style.cursor = "pointer";
3637

3738
const element = document.createElement('div');
3839
// element.className = `ol-zoom ol-touch ${olCss.CLASS_UNSELECTABLE}`;
3940
element.className = `${olCss.CLASS_CONTROL} ol-zoom ol-touch ${olCss.CLASS_UNSELECTABLE}`;
4041
element.style.bottom = "20%";
4142
element.style.top = "unset";
42-
element.style.pointerEvents = "auto";
43+
// element.style.pointerEvents = "auto";
4344

4445
element.appendChild(button);
4546

‎src/mapcontrols/SpatialFilter.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import Control from "ol/control/Control";
22
import * as olCss from "ol/css";
3-
import "bootstrap-icons/font/bootstrap-icons.css";
4-
import "ol/ol.css";
53
import { Vector as VectorSource } from 'ol/source.js';
64
import { Vector as VectorLayer } from 'ol/layer.js';
75
import Draw, { DrawEvent } from 'ol/interaction/Draw.js';
@@ -44,8 +42,10 @@ class SpatialFilterControl extends Control {
4442
// button.innerHTML = 'D';
4543
const icon = document.createElement('i');
4644
icon.className = "bi bi-funnel";
45+
icon.style.cursor = "pointer";
4746
button.appendChild(icon);
48-
button.style.pointerEvents = "auto";
47+
// button.style.pointerEvents = "auto";
48+
button.style.cursor= "pointer";
4949

5050
const element = document.createElement('div');
5151
element.className = `ol-zoom ol-touch ${olCss.CLASS_UNSELECTABLE} ${olCss.CLASS_CONTROL}`;

‎src/mapcontrols/WMSLegend.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,10 @@ export class WMSLegend extends Control {
5353
button.title = options.tooltipTitle || "WMS layer legend";
5454
const icon = document.createElement('i');
5555
icon.className = "bi bi-list-task";
56+
icon.style.cursor = "pointer";
5657
button.appendChild(icon);
57-
button.style.pointerEvents = "auto";
58+
// button.style.pointerEvents = "auto";
59+
button.style.cursor= "pointer";
5860

5961
const legendContainer = document.createElement("div");
6062
legendContainer.style.display = "block";

‎src/mapcontrols/customOverviewMap.css‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

0 commit comments

Comments
 (0)