mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
chore: geomap cleanup betterer styles object notation edition (#76400)
This commit is contained in:
Nathan Marrs
GitHub
parent
a6d928e50e
commit
18128c2666
@ -7274,39 +7274,10 @@ exports[`better eslint`] = {
|
||||
"public/app/plugins/panel/gauge/GaugeMigrations.ts:5381": [
|
||||
[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": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "1"],
|
||||
[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"]
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "2"]
|
||||
],
|
||||
"public/app/plugins/panel/geomap/editor/GeomapStyleRulesEditor.tsx:5381": [
|
||||
[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": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
||||
[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"]
|
||||
[0, 0, 0, "Do not use any type assertions.", "1"]
|
||||
],
|
||||
"public/app/plugins/panel/geomap/layers/basemaps/esri.ts:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"]
|
||||
|
||||
@ -28,29 +28,29 @@ export const GeomapOverlay = ({ topRight1, topRight2, bottomLeft, blStyle }: Ove
|
||||
};
|
||||
|
||||
const getStyles = (topRight1Exists: boolean) => (theme: GrafanaTheme2) => ({
|
||||
overlay: css`
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 500;
|
||||
pointer-events: none;
|
||||
`,
|
||||
TR1: css`
|
||||
right: 0.5em;
|
||||
pointer-events: auto;
|
||||
position: absolute;
|
||||
top: 0.5em;
|
||||
`,
|
||||
TR2: css`
|
||||
position: absolute;
|
||||
top: ${topRight1Exists ? '80' : '8'}px;
|
||||
right: 8px;
|
||||
pointer-events: auto;
|
||||
`,
|
||||
BL: css`
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 8px;
|
||||
pointer-events: auto;
|
||||
`,
|
||||
overlay: css({
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
zIndex: 500,
|
||||
pointerEvents: 'none',
|
||||
}),
|
||||
TR1: css({
|
||||
right: '0.5em',
|
||||
pointerEvents: 'auto',
|
||||
position: 'absolute',
|
||||
top: '0.5em',
|
||||
}),
|
||||
TR2: css({
|
||||
position: 'absolute',
|
||||
top: topRight1Exists ? '80px' : '8px',
|
||||
right: '8px',
|
||||
pointerEvents: 'auto',
|
||||
}),
|
||||
BL: css({
|
||||
position: 'absolute',
|
||||
bottom: '8px',
|
||||
left: '8px',
|
||||
pointerEvents: 'auto',
|
||||
}),
|
||||
});
|
||||
|
||||
@ -400,15 +400,15 @@ export class GeomapPanel extends Component<Props, State> {
|
||||
}
|
||||
|
||||
const styles = {
|
||||
wrap: css`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
`,
|
||||
map: css`
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
`,
|
||||
wrap: css({
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}),
|
||||
map: css({
|
||||
position: 'absolute',
|
||||
zIndex: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}),
|
||||
};
|
||||
|
||||
@ -7,7 +7,6 @@ import tinycolor from 'tinycolor2';
|
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
import { selectors } from '@grafana/e2e-selectors/src';
|
||||
import { stylesFactory } from '@grafana/ui';
|
||||
import { config } from 'app/core/config';
|
||||
|
||||
interface Props {
|
||||
@ -64,11 +63,11 @@ export class DebugOverlay extends PureComponent<Props, State> {
|
||||
}
|
||||
}
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
|
||||
infoWrap: css`
|
||||
color: ${theme.colors.text.primary};
|
||||
background: ${tinycolor(theme.components.panel.background).setAlpha(0.7).toString()};
|
||||
border-radius: 2px;
|
||||
padding: 8px;
|
||||
`,
|
||||
}));
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
infoWrap: css({
|
||||
color: theme.colors.text.primary,
|
||||
background: tinycolor(theme.components.panel.background).setAlpha(0.7).toString(),
|
||||
borderRadius: theme.shape.radius.default,
|
||||
padding: theme.spacing(1),
|
||||
}),
|
||||
});
|
||||
|
||||
@ -131,53 +131,54 @@ export function MarkersLegend(props: MarkersLegendProps) {
|
||||
}
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
infoWrap: css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: ${theme.colors.background.secondary};
|
||||
border-radius: 1px;
|
||||
padding: ${theme.spacing(1)};
|
||||
border-bottom: 2px solid ${theme.colors.border.strong};
|
||||
min-width: 150px;
|
||||
`,
|
||||
layerName: css`
|
||||
font-size: ${theme.typography.body.fontSize};
|
||||
`,
|
||||
layerBody: css`
|
||||
padding-left: 10px;
|
||||
`,
|
||||
legend: css`
|
||||
line-height: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: ${theme.typography.bodySmall.fontSize};
|
||||
padding: 5px 10px 0;
|
||||
infoWrap: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
background: theme.colors.background.secondary,
|
||||
// eslint-disable-next-line @grafana/no-border-radius-literal
|
||||
borderRadius: '1px',
|
||||
padding: theme.spacing(1),
|
||||
borderBottom: `2px solid ${theme.colors.border.strong}`,
|
||||
minWidth: '150px',
|
||||
}),
|
||||
layerName: css({
|
||||
fontSize: theme.typography.body.fontSize,
|
||||
}),
|
||||
layerBody: css({
|
||||
paddingLeft: '10px',
|
||||
}),
|
||||
legend: css({
|
||||
lineHeight: '18px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
fontSize: theme.typography.bodySmall.fontSize,
|
||||
padding: '5px 10px 0',
|
||||
|
||||
i {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
opacity: 0.7;
|
||||
border-radius: ${theme.shape.radius.circle};
|
||||
}
|
||||
`,
|
||||
legendItem: css`
|
||||
white-space: nowrap;
|
||||
`,
|
||||
fixedColorContainer: css`
|
||||
min-width: 80px;
|
||||
font-size: ${theme.typography.bodySmall.fontSize};
|
||||
padding-top: 5px;
|
||||
`,
|
||||
legendSymbol: css`
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
margin: auto;
|
||||
`,
|
||||
colorScaleWrapper: css`
|
||||
min-width: 200px;
|
||||
font-size: ${theme.typography.bodySmall.fontSize};
|
||||
padding-top: 10px;
|
||||
`,
|
||||
i: {
|
||||
width: '15px',
|
||||
height: '15px',
|
||||
float: 'left',
|
||||
marginRight: '8px',
|
||||
opacity: 0.7,
|
||||
borderRadius: theme.shape.radius.circle,
|
||||
},
|
||||
}),
|
||||
legendItem: css({
|
||||
whiteSpace: 'nowrap',
|
||||
}),
|
||||
fixedColorContainer: css({
|
||||
minWidth: '80px',
|
||||
fontSize: theme.typography.bodySmall.fontSize,
|
||||
paddingTop: '5px',
|
||||
}),
|
||||
legendSymbol: css({
|
||||
height: '18px',
|
||||
width: '18px',
|
||||
margin: 'auto',
|
||||
}),
|
||||
colorScaleWrapper: css({
|
||||
minWidth: '200px',
|
||||
fontSize: theme.typography.bodySmall.fontSize,
|
||||
paddingTop: '10px',
|
||||
}),
|
||||
});
|
||||
|
||||
@ -3,7 +3,7 @@ import Map from 'ol/Map';
|
||||
import React, { useMemo, useRef, useState } from 'react';
|
||||
|
||||
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 { MapMeasure, MapMeasureOptions, measures } from '../utils/measure';
|
||||
@ -109,32 +109,33 @@ export const MeasureOverlay = ({ map, menuActiveState }: Props) => {
|
||||
);
|
||||
};
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
|
||||
button: css`
|
||||
margin-left: auto;
|
||||
`,
|
||||
icon: css`
|
||||
background-color: ${theme.colors.secondary.main};
|
||||
display: inline-block;
|
||||
height: 19.25px;
|
||||
margin: 1px;
|
||||
width: 19.25px;
|
||||
`,
|
||||
infoWrap: css`
|
||||
color: ${theme.colors.text};
|
||||
background-color: ${theme.colors.background.secondary};
|
||||
border-radius: 4px;
|
||||
padding: 2px;
|
||||
`,
|
||||
infoWrapClosed: css`
|
||||
height: 25.25px;
|
||||
width: 25.25px;
|
||||
`,
|
||||
rowGroup: css`
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
`,
|
||||
unitSelect: css`
|
||||
min-width: 200px;
|
||||
`,
|
||||
}));
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
button: css({
|
||||
marginLeft: 'auto',
|
||||
}),
|
||||
icon: css({
|
||||
backgroundColor: theme.colors.secondary.main,
|
||||
display: 'inline-block',
|
||||
height: '19.25px',
|
||||
margin: '1px',
|
||||
width: '19.25px',
|
||||
}),
|
||||
infoWrap: css({
|
||||
color: `${theme.colors.text}`,
|
||||
backgroundColor: theme.colors.background.secondary,
|
||||
// eslint-disable-next-line @grafana/no-border-radius-literal
|
||||
borderRadius: '4px',
|
||||
padding: '2px',
|
||||
}),
|
||||
infoWrapClosed: css({
|
||||
height: '25.25px',
|
||||
width: '25.25px',
|
||||
}),
|
||||
rowGroup: css({
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
}),
|
||||
unitSelect: css({
|
||||
minWidth: '200px',
|
||||
}),
|
||||
});
|
||||
|
||||
@ -200,23 +200,23 @@ export const StyleRuleEditor = ({ value, onChange, item, context }: Props) => {
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
rule: css`
|
||||
margin-bottom: ${theme.spacing(1)};
|
||||
`,
|
||||
row: css`
|
||||
display: flex;
|
||||
margin-bottom: 4px;
|
||||
`,
|
||||
inline: css`
|
||||
margin-bottom: 0;
|
||||
margin-left: 4px;
|
||||
`,
|
||||
button: css`
|
||||
margin-left: 4px;
|
||||
`,
|
||||
flexRow: css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
`,
|
||||
rule: css({
|
||||
marginBottom: theme.spacing(1),
|
||||
}),
|
||||
row: css({
|
||||
display: 'flex',
|
||||
marginBottom: '4px',
|
||||
}),
|
||||
inline: css({
|
||||
marginBottom: 0,
|
||||
marginLeft: '4px',
|
||||
}),
|
||||
button: css({
|
||||
marginLeft: '4px',
|
||||
}),
|
||||
flexRow: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
}),
|
||||
});
|
||||
|
||||
@ -46,39 +46,39 @@ export function getGlobalStyles(theme: GrafanaTheme2) {
|
||||
// border: 2px dotted rgba(0,60,136,0.7);
|
||||
// }
|
||||
|
||||
return css`
|
||||
.ol-scale-line {
|
||||
background: ${theme.colors.border.weak}; // rgba(0,60,136,0.3);
|
||||
}
|
||||
.ol-scale-line-inner {
|
||||
border: 1px solid ${theme.colors.text.primary}; // #eee;
|
||||
border-top: 0px;
|
||||
color: ${theme.colors.text.primary}; // #eee;
|
||||
}
|
||||
.ol-control {
|
||||
background-color: ${theme.colors.background.primary}; //rgba(255,255,255,0.4);
|
||||
}
|
||||
.ol-control:hover {
|
||||
background-color: ${theme.colors.background.secondary}; // rgba(255,255,255,0.6);
|
||||
}
|
||||
.ol-control button {
|
||||
color: ${theme.colors.secondary.text}; // white;
|
||||
background-color: ${theme.colors.secondary.main}; // rgba(0,60,136,0.5);
|
||||
}
|
||||
.ol-control button:hover {
|
||||
color: ${theme.colors.secondary.text};
|
||||
background-color: ${theme.colors.secondary.shade}; // rgba(0,60,136,0.5);
|
||||
}
|
||||
.ol-control button:focus {
|
||||
color: ${theme.colors.secondary.text};
|
||||
background-color: ${theme.colors.secondary.main}; // rgba(0,60,136,0.5);
|
||||
}
|
||||
.ol-attribution ul {
|
||||
color: ${theme.colors.text.primary}; // #000;
|
||||
text-shadow: none;
|
||||
}
|
||||
.ol-attribution:not(.ol-collapsed) {
|
||||
background-color: ${theme.colors.background.secondary}; // rgba(255,255,255,0.8);
|
||||
}
|
||||
`;
|
||||
return css({
|
||||
'.ol-scale-line': {
|
||||
background: theme.colors.border.weak, // rgba(0,60,136,0.3);
|
||||
},
|
||||
'.ol-scale-line-inner': {
|
||||
border: `1px solid ${theme.colors.text.primary}`, // #eee;
|
||||
borderTop: 0, // 0px;
|
||||
color: theme.colors.text.primary, // #eee;
|
||||
},
|
||||
'.ol-control': {
|
||||
backgroundColor: theme.colors.background.primary, // rgba(255,255,255,0.4);
|
||||
},
|
||||
'.ol-control:hover': {
|
||||
backgroundColor: theme.colors.background.secondary, // rgba(255,255,255,0.6);
|
||||
},
|
||||
'.ol-control button': {
|
||||
color: theme.colors.secondary.text, // white;
|
||||
backgroundColor: theme.colors.secondary.main, // rgba(0,60,136,0.5);
|
||||
},
|
||||
'.ol-control button:hover': {
|
||||
color: theme.colors.secondary.text,
|
||||
backgroundColor: theme.colors.secondary.shade, // rgba(0,60,136,0.5);
|
||||
},
|
||||
'.ol-control button:focus': {
|
||||
color: theme.colors.secondary.text,
|
||||
backgroundColor: theme.colors.secondary.main, // rgba(0,60,136,0.5);
|
||||
},
|
||||
'.ol-attribution ul': {
|
||||
color: theme.colors.text.primary, // #000;
|
||||
textShadow: 'none',
|
||||
},
|
||||
'.ol-attribution:not(.ol-collapsed)': {
|
||||
backgroundColor: theme.colors.background.secondary, // rgba(255,255,255,0.8);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user