IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

chore: geomap cleanup betterer styles object notation edition (#76400)

Browse Source
This commit is contained in:
Nathan Marrs 2023-10-13 03:41:27 +02:00 committed by GitHub
parent a6d928e50e
commit 18128c2666
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 180 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
.betterer.results
View File

@ -7274,39 +7274,10 @@ exports[`better eslint`] = {
"public/app/plugins/panel/gauge/GaugeMigrations.ts:5381": [ "public/app/plugins/panel/gauge/GaugeMigrations.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"] [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
], ],
"public/app/plugins/panel/geomap/GeomapOverlay.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"]
],
"public/app/plugins/panel/geomap/GeomapPanel.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/plugins/panel/geomap/components/DebugOverlay.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/plugins/panel/geomap/components/MarkersLegend.tsx:5381": [ "public/app/plugins/panel/geomap/components/MarkersLegend.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Do not use any type assertions.", "1"], [0, 0, 0, "Do not use any type assertions.", "1"],
[0, 0, 0, "Unexpected any. Specify a different type.", "2"], [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"],
[0, 0, 0, "Styles should be written using objects.", "7"],
[0, 0, 0, "Styles should be written using objects.", "8"],
[0, 0, 0, "Styles should be written using objects.", "9"],
[0, 0, 0, "Styles should be written using objects.", "10"]
],
"public/app/plugins/panel/geomap/components/MeasureOverlay.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"]
], ],
"public/app/plugins/panel/geomap/editor/GeomapStyleRulesEditor.tsx:5381": [ "public/app/plugins/panel/geomap/editor/GeomapStyleRulesEditor.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@ -7328,15 +7299,7 @@ exports[`better eslint`] = {
], ],
"public/app/plugins/panel/geomap/editor/StyleRuleEditor.tsx:5381": [ "public/app/plugins/panel/geomap/editor/StyleRuleEditor.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Do not use any type assertions.", "1"], [0, 0, 0, "Do not use any type assertions.", "1"]
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"]
],
"public/app/plugins/panel/geomap/globalStyles.ts:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
], ],
"public/app/plugins/panel/geomap/layers/basemaps/esri.ts:5381": [ "public/app/plugins/panel/geomap/layers/basemaps/esri.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"] [0, 0, 0, "Do not use any type assertions.", "0"]

50
public/app/plugins/panel/geomap/GeomapOverlay.tsx
View File

@ -28,29 +28,29 @@ export const GeomapOverlay = ({ topRight1, topRight2, bottomLeft, blStyle }: Ove
}; };
const getStyles = (topRight1Exists: boolean) => (theme: GrafanaTheme2) => ({ const getStyles = (topRight1Exists: boolean) => (theme: GrafanaTheme2) => ({
overlay: css` overlay: css({
position: absolute; position: 'absolute',
width: 100%; width: '100%',
height: 100%; height: '100%',
z-index: 500; zIndex: 500,
pointer-events: none; pointerEvents: 'none',
`, }),
TR1: css` TR1: css({
right: 0.5em; right: '0.5em',
pointer-events: auto; pointerEvents: 'auto',
position: absolute; position: 'absolute',
top: 0.5em; top: '0.5em',
`, }),
TR2: css` TR2: css({
position: absolute; position: 'absolute',
top: ${topRight1Exists ? '80' : '8'}px; top: topRight1Exists ? '80px' : '8px',
right: 8px; right: '8px',
pointer-events: auto; pointerEvents: 'auto',
`, }),
BL: css` BL: css({
position: absolute; position: 'absolute',
bottom: 8px; bottom: '8px',
left: 8px; left: '8px',
pointer-events: auto; pointerEvents: 'auto',
`, }),
}); });

22
public/app/plugins/panel/geomap/GeomapPanel.tsx
View File

@ -400,15 +400,15 @@ export class GeomapPanel extends Component<Props, State> {
} }
const styles = { const styles = {
wrap: css` wrap: css({
position: relative; position: 'relative',
width: 100%; width: '100%',
height: 100%; height: '100%',
`, }),
map: css` map: css({
position: absolute; position: 'absolute',
z-index: 0; zIndex: 0,
width: 100%; width: '100%',
height: 100%; height: '100%',
`, }),
}; };

17
public/app/plugins/panel/geomap/components/DebugOverlay.tsx
View File

@ -7,7 +7,6 @@ import tinycolor from 'tinycolor2';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors/src'; import { selectors } from '@grafana/e2e-selectors/src';
import { stylesFactory } from '@grafana/ui';
import { config } from 'app/core/config'; import { config } from 'app/core/config';
interface Props { interface Props {
@ -64,11 +63,11 @@ export class DebugOverlay extends PureComponent<Props, State> {
} }
} }
const getStyles = stylesFactory((theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
infoWrap: css` infoWrap: css({
color: ${theme.colors.text.primary}; color: theme.colors.text.primary,
background: ${tinycolor(theme.components.panel.background).setAlpha(0.7).toString()}; background: tinycolor(theme.components.panel.background).setAlpha(0.7).toString(),
border-radius: 2px; borderRadius: theme.shape.radius.default,
padding: 8px; padding: theme.spacing(1),
`, }),
})); });

97
public/app/plugins/panel/geomap/components/MarkersLegend.tsx
View File

@ -131,53 +131,54 @@ export function MarkersLegend(props: MarkersLegendProps) {
} }
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
infoWrap: css` infoWrap: css({
display: flex; display: 'flex',
flex-direction: column; flexDirection: 'column',
background: ${theme.colors.background.secondary}; background: theme.colors.background.secondary,
border-radius: 1px; // eslint-disable-next-line @grafana/no-border-radius-literal
padding: ${theme.spacing(1)}; borderRadius: '1px',
border-bottom: 2px solid ${theme.colors.border.strong}; padding: theme.spacing(1),
min-width: 150px; borderBottom: `2px solid ${theme.colors.border.strong}`,
`, minWidth: '150px',
layerName: css` }),
font-size: ${theme.typography.body.fontSize}; layerName: css({
`, fontSize: theme.typography.body.fontSize,
layerBody: css` }),
padding-left: 10px; layerBody: css({
`, paddingLeft: '10px',
legend: css` }),
line-height: 18px; legend: css({
display: flex; lineHeight: '18px',
flex-direction: column; display: 'flex',
font-size: ${theme.typography.bodySmall.fontSize}; flexDirection: 'column',
padding: 5px 10px 0; fontSize: theme.typography.bodySmall.fontSize,
padding: '5px 10px 0',
i { i: {
width: 15px; width: '15px',
height: 15px; height: '15px',
float: left; float: 'left',
margin-right: 8px; marginRight: '8px',
opacity: 0.7; opacity: 0.7,
border-radius: ${theme.shape.radius.circle}; borderRadius: theme.shape.radius.circle,
} },
`, }),
legendItem: css` legendItem: css({
white-space: nowrap; whiteSpace: 'nowrap',
`, }),
fixedColorContainer: css` fixedColorContainer: css({
min-width: 80px; minWidth: '80px',
font-size: ${theme.typography.bodySmall.fontSize}; fontSize: theme.typography.bodySmall.fontSize,
padding-top: 5px; paddingTop: '5px',
`, }),
legendSymbol: css` legendSymbol: css({
height: 18px; height: '18px',
width: 18px; width: '18px',
margin: auto; margin: 'auto',
`, }),
colorScaleWrapper: css` colorScaleWrapper: css({
min-width: 200px; minWidth: '200px',
font-size: ${theme.typography.bodySmall.fontSize}; fontSize: theme.typography.bodySmall.fontSize,
padding-top: 10px; paddingTop: '10px',
`, }),
}); });

61
public/app/plugins/panel/geomap/components/MeasureOverlay.tsx
View File

@ -3,7 +3,7 @@ import Map from 'ol/Map';
import React, { useMemo, useRef, useState } from 'react'; import React, { useMemo, useRef, useState } from 'react';
import { GrafanaTheme2, SelectableValue } from '@grafana/data'; import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Button, IconButton, RadioButtonGroup, Select, stylesFactory } from '@grafana/ui'; import { Button, IconButton, RadioButtonGroup, Select } from '@grafana/ui';
import { config } from 'app/core/config'; import { config } from 'app/core/config';
import { MapMeasure, MapMeasureOptions, measures } from '../utils/measure'; import { MapMeasure, MapMeasureOptions, measures } from '../utils/measure';
@ -109,32 +109,33 @@ export const MeasureOverlay = ({ map, menuActiveState }: Props) => {
); );
}; };
const getStyles = stylesFactory((theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
button: css` button: css({
margin-left: auto; marginLeft: 'auto',
`, }),
icon: css` icon: css({
background-color: ${theme.colors.secondary.main}; backgroundColor: theme.colors.secondary.main,
display: inline-block; display: 'inline-block',
height: 19.25px; height: '19.25px',
margin: 1px; margin: '1px',
width: 19.25px; width: '19.25px',
`, }),
infoWrap: css` infoWrap: css({
color: ${theme.colors.text}; color: `${theme.colors.text}`,
background-color: ${theme.colors.background.secondary}; backgroundColor: theme.colors.background.secondary,
border-radius: 4px; // eslint-disable-next-line @grafana/no-border-radius-literal
padding: 2px; borderRadius: '4px',
`, padding: '2px',
infoWrapClosed: css` }),
height: 25.25px; infoWrapClosed: css({
width: 25.25px; height: '25.25px',
`, width: '25.25px',
rowGroup: css` }),
display: flex; rowGroup: css({
justify-content: flex-end; display: 'flex',
`, justifyContent: 'flex-end',
unitSelect: css` }),
min-width: 200px; unitSelect: css({
`, minWidth: '200px',
})); }),
});

38
public/app/plugins/panel/geomap/editor/StyleRuleEditor.tsx
View File

@ -200,23 +200,23 @@ export const StyleRuleEditor = ({ value, onChange, item, context }: Props) => {
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
rule: css` rule: css({
margin-bottom: ${theme.spacing(1)}; marginBottom: theme.spacing(1),
`, }),
row: css` row: css({
display: flex; display: 'flex',
margin-bottom: 4px; marginBottom: '4px',
`, }),
inline: css` inline: css({
margin-bottom: 0; marginBottom: 0,
margin-left: 4px; marginLeft: '4px',
`, }),
button: css` button: css({
margin-left: 4px; marginLeft: '4px',
`, }),
flexRow: css` flexRow: css({
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
align-items: flex-start; alignItems: 'flex-start',
`, }),
}); });

70
public/app/plugins/panel/geomap/globalStyles.ts
View File

@ -46,39 +46,39 @@ export function getGlobalStyles(theme: GrafanaTheme2) {
// border: 2px dotted rgba(0,60,136,0.7); // border: 2px dotted rgba(0,60,136,0.7);
// } // }
return css` return css({
.ol-scale-line { '.ol-scale-line': {
background: ${theme.colors.border.weak}; // rgba(0,60,136,0.3); background: theme.colors.border.weak, // rgba(0,60,136,0.3);
} },
.ol-scale-line-inner { '.ol-scale-line-inner': {
border: 1px solid ${theme.colors.text.primary}; // #eee; border: `1px solid ${theme.colors.text.primary}`, // #eee;
border-top: 0px; borderTop: 0, // 0px;
color: ${theme.colors.text.primary}; // #eee; color: theme.colors.text.primary, // #eee;
} },
.ol-control { '.ol-control': {
background-color: ${theme.colors.background.primary}; //rgba(255,255,255,0.4); backgroundColor: theme.colors.background.primary, // rgba(255,255,255,0.4);
} },
.ol-control:hover { '.ol-control:hover': {
background-color: ${theme.colors.background.secondary}; // rgba(255,255,255,0.6); backgroundColor: theme.colors.background.secondary, // rgba(255,255,255,0.6);
} },
.ol-control button { '.ol-control button': {
color: ${theme.colors.secondary.text}; // white; color: theme.colors.secondary.text, // white;
background-color: ${theme.colors.secondary.main}; // rgba(0,60,136,0.5); backgroundColor: theme.colors.secondary.main, // rgba(0,60,136,0.5);
} },
.ol-control button:hover { '.ol-control button:hover': {
color: ${theme.colors.secondary.text}; color: theme.colors.secondary.text,
background-color: ${theme.colors.secondary.shade}; // rgba(0,60,136,0.5); backgroundColor: theme.colors.secondary.shade, // rgba(0,60,136,0.5);
} },
.ol-control button:focus { '.ol-control button:focus': {
color: ${theme.colors.secondary.text}; color: theme.colors.secondary.text,
background-color: ${theme.colors.secondary.main}; // rgba(0,60,136,0.5); backgroundColor: theme.colors.secondary.main, // rgba(0,60,136,0.5);
} },
.ol-attribution ul { '.ol-attribution ul': {
color: ${theme.colors.text.primary}; // #000; color: theme.colors.text.primary, // #000;
text-shadow: none; textShadow: 'none',
} },
.ol-attribution:not(.ol-collapsed) { '.ol-attribution:not(.ol-collapsed)': {
background-color: ${theme.colors.background.secondary}; // rgba(255,255,255,0.8); backgroundColor: theme.colors.background.secondary, // rgba(255,255,255,0.8);
} },
`; });
} }