mirror of
https://github.com/grafana/grafana.git
synced 2024-11-22 17:06:57 -06:00
chore: canvas cleanup betterer styles object notation edition (#76315)
Co-authored-by: drew08t <drew08@gmail.com>
This commit is contained in:
Nathan Marrs
GitHub
parent
a38c9d4f44
commit
124bf6bfa9
@ -2765,43 +2765,8 @@ exports[`better eslint`] = {
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "3"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "4"]
|
||||
],
|
||||
"public/app/features/canvas/elements/droneFront.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/features/canvas/elements/droneSide.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/features/canvas/elements/droneTop.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"]
|
||||
],
|
||||
"public/app/features/canvas/elements/ellipse.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"]
|
||||
],
|
||||
"public/app/features/canvas/elements/icon.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/features/canvas/elements/metricValue.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"]
|
||||
],
|
||||
"public/app/features/canvas/elements/server/server.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"]
|
||||
],
|
||||
"public/app/features/canvas/elements/text.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"]
|
||||
],
|
||||
"public/app/features/canvas/elements/windTurbine.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||
],
|
||||
"public/app/features/canvas/runtime/element.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
||||
@ -7005,77 +6970,24 @@ exports[`better eslint`] = {
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
|
||||
],
|
||||
"public/app/plugins/panel/canvas/components/CanvasContextMenu.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/plugins/panel/canvas/components/CanvasTooltip.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/plugins/panel/canvas/components/SetBackground.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/plugins/panel/canvas/components/connections/ConnectionAnchors.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/canvas/components/connections/ConnectionSVG.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/canvas/editor/connectionEditor.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||
],
|
||||
"public/app/plugins/panel/canvas/editor/element/APIEditor.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"]
|
||||
],
|
||||
"public/app/plugins/panel/canvas/editor/element/ConstraintSelectionBox.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, "Styles should be written using objects.", "6"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "7"]
|
||||
],
|
||||
"public/app/plugins/panel/canvas/editor/element/PlacementEditor.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||
],
|
||||
"public/app/plugins/panel/canvas/editor/element/QuickPositioning.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/canvas/editor/element/elementEditor.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
|
||||
],
|
||||
"public/app/plugins/panel/canvas/editor/inline/InlineEdit.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, "Styles should be written using objects.", "6"]
|
||||
],
|
||||
"public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "1"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "2"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "3"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "4"]
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "3"]
|
||||
],
|
||||
"public/app/plugins/panel/canvas/editor/layer/TreeNavigationEditor.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"]
|
||||
],
|
||||
"public/app/plugins/panel/canvas/editor/layer/TreeNodeTitle.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, "Unexpected any. Specify a different type.", "0"]
|
||||
],
|
||||
"public/app/plugins/panel/canvas/editor/layer/layerEditor.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"],
|
||||
|
||||
@ -118,7 +118,7 @@ export const droneFrontItem: CanvasElementItem = {
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
droneFront: css`
|
||||
transition: transform 0.4s;
|
||||
`,
|
||||
droneFront: css({
|
||||
transition: 'transform 0.4s',
|
||||
}),
|
||||
});
|
||||
|
||||
@ -117,7 +117,7 @@ export const droneSideItem: CanvasElementItem = {
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
droneSide: css`
|
||||
transition: transform 0.4s;
|
||||
`,
|
||||
droneSide: css({
|
||||
transition: 'transform 0.4s',
|
||||
}),
|
||||
});
|
||||
|
||||
@ -156,23 +156,23 @@ export const droneTopItem: CanvasElementItem = {
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
propeller: css`
|
||||
transform-origin: 50% 50%;
|
||||
transform-box: fill-box;
|
||||
display: block;
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
`,
|
||||
propellerCW: css`
|
||||
animation-direction: normal;
|
||||
`,
|
||||
propellerCCW: css`
|
||||
animation-direction: reverse;
|
||||
`,
|
||||
propeller: css({
|
||||
transformOrigin: '50% 50%',
|
||||
transformBox: 'fill-box',
|
||||
display: 'block',
|
||||
'@keyframes spin': {
|
||||
from: {
|
||||
transform: 'rotate(0deg)',
|
||||
},
|
||||
to: {
|
||||
transform: 'rotate(360deg)',
|
||||
},
|
||||
},
|
||||
}),
|
||||
propellerCW: css({
|
||||
animationDirection: 'normal',
|
||||
}),
|
||||
propellerCCW: css({
|
||||
animationDirection: 'reverse',
|
||||
}),
|
||||
});
|
||||
|
||||
@ -2,7 +2,6 @@ import { css } from '@emotion/css';
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
import { stylesFactory } from '@grafana/ui';
|
||||
import { config } from 'app/core/config';
|
||||
import { DimensionContext } from 'app/features/dimensions/context';
|
||||
import { ColorDimensionEditor } from 'app/features/dimensions/editors/ColorDimensionEditor';
|
||||
@ -23,26 +22,27 @@ class EllipseDisplay extends PureComponent<CanvasElementProps<EllipseConfig, Ell
|
||||
}
|
||||
}
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme2, data) => ({
|
||||
container: css`
|
||||
display: table;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: ${data?.backgroundColor};
|
||||
border: ${data?.width}px solid ${data?.borderColor};
|
||||
border-radius: 50%;
|
||||
`,
|
||||
span: css`
|
||||
display: table-cell;
|
||||
vertical-align: ${data?.valign};
|
||||
text-align: ${data?.align};
|
||||
font-size: ${data?.size}px;
|
||||
color: ${data?.color};
|
||||
`,
|
||||
}));
|
||||
const getStyles = (theme: GrafanaTheme2, data: any) => ({
|
||||
container: css({
|
||||
display: 'table',
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
backgroundColor: data?.backgroundColor,
|
||||
border: `${data?.width}px solid ${data?.borderColor}`,
|
||||
// eslint-disable-next-line @grafana/no-border-radius-literal
|
||||
borderRadius: '50%',
|
||||
}),
|
||||
span: css({
|
||||
display: 'table-cell',
|
||||
verticalAlign: data?.valign,
|
||||
textAlign: data?.align,
|
||||
fontSize: `${data?.size}px`,
|
||||
color: data?.color,
|
||||
}),
|
||||
});
|
||||
|
||||
export const ellipseItem: CanvasElementItem<EllipseConfig, EllipseData> = {
|
||||
id: 'ellipse',
|
||||
|
||||
@ -25,11 +25,11 @@ interface IconData {
|
||||
}
|
||||
|
||||
// When a stoke is defined, we want the path to be in page units
|
||||
const svgStrokePathClass = css`
|
||||
path {
|
||||
vector-effect: non-scaling-stroke;
|
||||
}
|
||||
`;
|
||||
const svgStrokePathClass = css({
|
||||
path: {
|
||||
vectorEffect: 'non-scaling-stroke',
|
||||
},
|
||||
});
|
||||
|
||||
export function IconDisplay(props: CanvasElementProps) {
|
||||
const { data } = props;
|
||||
|
||||
@ -111,26 +111,26 @@ const MetricValueEdit = (props: CanvasElementProps<TextConfig, TextData>) => {
|
||||
};
|
||||
|
||||
const getStyles = (data: TextData | undefined) => (theme: GrafanaTheme2) => ({
|
||||
container: css`
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: table;
|
||||
`,
|
||||
inlineEditorContainer: css`
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
`,
|
||||
span: css`
|
||||
display: table-cell;
|
||||
vertical-align: ${data?.valign};
|
||||
text-align: ${data?.align};
|
||||
font-size: ${data?.size}px;
|
||||
color: ${data?.color};
|
||||
`,
|
||||
container: css({
|
||||
position: 'absolute',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
display: 'table',
|
||||
}),
|
||||
inlineEditorContainer: css({
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: theme.spacing(1),
|
||||
}),
|
||||
span: css({
|
||||
display: 'table-cell',
|
||||
verticalAlign: data?.valign,
|
||||
textAlign: data?.align,
|
||||
fontSize: `${data?.size}px`,
|
||||
color: data?.color,
|
||||
}),
|
||||
});
|
||||
|
||||
export const metricValueItem: CanvasElementItem<TextConfig, TextData> = {
|
||||
|
||||
@ -147,36 +147,36 @@ export const serverItem: CanvasElementItem<ServerConfig, ServerData> = {
|
||||
};
|
||||
|
||||
export const getServerStyles = (data: ServerData | undefined) => (theme: GrafanaTheme2) => ({
|
||||
bulb: css`
|
||||
@keyframes blink {
|
||||
0% {
|
||||
fill-opacity: 0;
|
||||
}
|
||||
50% {
|
||||
fill-opacity: 1;
|
||||
}
|
||||
100% {
|
||||
fill-opacity: 0;
|
||||
}
|
||||
}
|
||||
`,
|
||||
server: css`
|
||||
fill: ${data?.statusColor ?? 'transparent'};
|
||||
`,
|
||||
circle: css`
|
||||
animation: blink ${data?.blinkRate ? 1 / data.blinkRate : 0}s infinite step-end;
|
||||
fill: ${data?.bulbColor};
|
||||
stroke: none;
|
||||
`,
|
||||
circleBack: css`
|
||||
fill: ${outlineColor};
|
||||
stroke: none;
|
||||
opacity: 1;
|
||||
`,
|
||||
outline: css`
|
||||
stroke: ${outlineColor};
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke-width: 4px;
|
||||
`,
|
||||
bulb: css({
|
||||
'@keyframes blink': {
|
||||
'0%': {
|
||||
fillOpacity: 0,
|
||||
},
|
||||
'50%': {
|
||||
fillOpacity: 1,
|
||||
},
|
||||
'100%': {
|
||||
fillOpacity: 0,
|
||||
},
|
||||
},
|
||||
}),
|
||||
server: css({
|
||||
fill: data?.statusColor ?? 'transparent',
|
||||
}),
|
||||
circle: css({
|
||||
animation: `blink ${data?.blinkRate ? 1 / data.blinkRate : 0}s infinite step-end`,
|
||||
fill: data?.bulbColor,
|
||||
stroke: 'none',
|
||||
}),
|
||||
circleBack: css({
|
||||
fill: outlineColor,
|
||||
stroke: 'none',
|
||||
opacity: 1,
|
||||
}),
|
||||
outline: css({
|
||||
stroke: outlineColor,
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
strokeWidth: '4px',
|
||||
}),
|
||||
});
|
||||
|
||||
@ -95,26 +95,26 @@ const TextEdit = (props: CanvasElementProps<TextConfig, TextData>) => {
|
||||
};
|
||||
|
||||
const getStyles = (data: TextData | undefined) => (theme: GrafanaTheme2) => ({
|
||||
container: css`
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: table;
|
||||
`,
|
||||
inlineEditorContainer: css`
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
`,
|
||||
span: css`
|
||||
display: table-cell;
|
||||
vertical-align: ${data?.valign};
|
||||
text-align: ${data?.align};
|
||||
font-size: ${data?.size}px;
|
||||
color: ${data?.color};
|
||||
`,
|
||||
container: css({
|
||||
position: 'absolute',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
display: 'table',
|
||||
}),
|
||||
inlineEditorContainer: css({
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: theme.spacing(1),
|
||||
}),
|
||||
span: css({
|
||||
display: 'table-cell',
|
||||
verticalAlign: data?.valign,
|
||||
textAlign: data?.align,
|
||||
fontSize: `${data?.size}px`,
|
||||
color: data?.color,
|
||||
}),
|
||||
});
|
||||
|
||||
export const textItem: CanvasElementItem<TextConfig, TextData> = {
|
||||
|
||||
@ -113,17 +113,16 @@ export const windTurbineItem: CanvasElementItem = {
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
blade: css`
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
transform-origin: 94.663px 94.663px;
|
||||
transform: rotate(15deg);
|
||||
`,
|
||||
blade: css({
|
||||
transformOrigin: '94.663px 94.663px',
|
||||
transform: 'rotate(15deg)',
|
||||
'@keyframes spin': {
|
||||
from: {
|
||||
transform: 'rotate(0deg)',
|
||||
},
|
||||
to: {
|
||||
transform: 'rotate(360deg)',
|
||||
},
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
@ -244,7 +244,7 @@ export const CanvasContextMenu = ({ scene, panel }: Props) => {
|
||||
};
|
||||
|
||||
const getStyles = () => ({
|
||||
menuItem: css`
|
||||
max-width: 200px;
|
||||
`,
|
||||
menuItem: css({
|
||||
maxWidth: '200px',
|
||||
}),
|
||||
});
|
||||
|
||||
@ -73,8 +73,8 @@ export const CanvasTooltip = ({ scene }: Props) => {
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
wrapper: css`
|
||||
margin-top: 20px;
|
||||
background: ${theme.colors.background.primary};
|
||||
`,
|
||||
wrapper: css({
|
||||
marginTop: '20px',
|
||||
background: theme.colors.background.primary,
|
||||
}),
|
||||
});
|
||||
|
||||
@ -59,9 +59,9 @@ export function SetBackground({ onClose, scene, anchorPoint }: Props) {
|
||||
}
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2, anchorPoint: AnchorPoint) => ({
|
||||
portalWrapper: css`
|
||||
width: 315px;
|
||||
height: 445px;
|
||||
transform: translate(${anchorPoint.x}px, ${anchorPoint.y - 200}px);
|
||||
`,
|
||||
portalWrapper: css({
|
||||
width: '315px',
|
||||
height: '445px',
|
||||
transform: `translate(${anchorPoint.x}px, ${anchorPoint.y - 200}px)`,
|
||||
}),
|
||||
});
|
||||
|
||||
@ -114,36 +114,35 @@ export const ConnectionAnchors = ({ setRef, handleMouseLeave }: Props) => {
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
root: css`
|
||||
position: absolute;
|
||||
display: none;
|
||||
`,
|
||||
mouseoutDiv: css`
|
||||
position: absolute;
|
||||
margin: -30px;
|
||||
width: calc(100% + 60px);
|
||||
height: calc(100% + 60px);
|
||||
`,
|
||||
anchor: css`
|
||||
padding: ${ANCHOR_PADDING}px;
|
||||
position: absolute;
|
||||
cursor: cursor;
|
||||
width: calc(5px + 2 * ${ANCHOR_PADDING}px);
|
||||
height: calc(5px + 2 * ${ANCHOR_PADDING}px);
|
||||
z-index: 100;
|
||||
pointer-events: auto !important;
|
||||
`,
|
||||
highlightElement: css`
|
||||
background-color: #00ff00;
|
||||
opacity: 0.3;
|
||||
position: absolute;
|
||||
cursor: cursor;
|
||||
position: absolute;
|
||||
pointer-events: auto;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: ${theme.shape.radius.circle};
|
||||
display: none;
|
||||
z-index: 110;
|
||||
`,
|
||||
root: css({
|
||||
position: 'absolute',
|
||||
display: 'none',
|
||||
}),
|
||||
mouseoutDiv: css({
|
||||
position: 'absolute',
|
||||
margin: '-30px',
|
||||
width: 'calc(100% + 60px)',
|
||||
height: 'calc(100% + 60px)',
|
||||
}),
|
||||
anchor: css({
|
||||
padding: `${ANCHOR_PADDING}px`,
|
||||
position: 'absolute',
|
||||
cursor: 'cursor',
|
||||
width: `calc(5px + 2 * ${ANCHOR_PADDING}px)`,
|
||||
height: `calc(5px + 2 * ${ANCHOR_PADDING}px)`,
|
||||
zIndex: 100,
|
||||
pointerEvents: 'auto',
|
||||
}),
|
||||
highlightElement: css({
|
||||
backgroundColor: '#00ff00',
|
||||
opacity: 0.3,
|
||||
position: 'absolute',
|
||||
cursor: 'cursor',
|
||||
pointerEvents: 'auto',
|
||||
width: '16px',
|
||||
height: '16px',
|
||||
borderRadius: theme.shape.radius.circle,
|
||||
display: 'none',
|
||||
zIndex: 110,
|
||||
}),
|
||||
});
|
||||
|
||||
@ -231,19 +231,19 @@ export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => {
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
editorSVG: css`
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
`,
|
||||
connection: css`
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
`,
|
||||
editorSVG: css({
|
||||
position: 'absolute',
|
||||
pointerEvents: 'none',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
zIndex: 1000,
|
||||
display: 'none',
|
||||
}),
|
||||
connection: css({
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
zIndex: 1000,
|
||||
pointerEvents: 'none',
|
||||
}),
|
||||
});
|
||||
|
||||
@ -24,9 +24,8 @@ export function getConnectionEditor(opts: CanvasConnectionEditorOptions): Nested
|
||||
getValue: (path: string) => {
|
||||
return lodashGet(opts.connection.info, path);
|
||||
},
|
||||
// TODO: Fix this any (maybe a dimension supplier?)
|
||||
onChange: (path: string, value: any) => {
|
||||
console.log(value, typeof value);
|
||||
// TODO: Fix this unknown (maybe a dimension supplier?)
|
||||
onChange: (path: string, value: unknown) => {
|
||||
let options = opts.connection.info;
|
||||
options = setOptionImmutably(options, path, value);
|
||||
opts.scene.connections.onChange(opts.connection, options);
|
||||
|
||||
@ -141,48 +141,84 @@ const getStyles = (currentConstraints: Constraint) => (theme: GrafanaTheme2) =>
|
||||
const selectionBoxColor = theme.isDark ? '#ffffff' : '#000000';
|
||||
|
||||
return {
|
||||
constraintHover: css`
|
||||
&:hover {
|
||||
fill: ${HOVER_COLOR};
|
||||
fill-opacity: ${HOVER_OPACITY};
|
||||
}
|
||||
`,
|
||||
topConstraint: css`
|
||||
${currentConstraints.vertical === VerticalConstraint.Top ||
|
||||
constraintHover: css({
|
||||
'&:hover': {
|
||||
fill: HOVER_COLOR,
|
||||
fillOpacity: HOVER_OPACITY,
|
||||
},
|
||||
}),
|
||||
topConstraint: css({
|
||||
...(currentConstraints.vertical === VerticalConstraint.Top ||
|
||||
currentConstraints.vertical === VerticalConstraint.TopBottom
|
||||
? `width: 92pt; x: 1085; fill: ${SELECTED_COLOR};`
|
||||
: `fill: ${selectionBoxColor};`}
|
||||
`,
|
||||
bottomConstraint: css`
|
||||
${currentConstraints.vertical === VerticalConstraint.Bottom ||
|
||||
? {
|
||||
width: '92pt',
|
||||
x: '1085',
|
||||
fill: SELECTED_COLOR,
|
||||
}
|
||||
: {
|
||||
fill: selectionBoxColor,
|
||||
}),
|
||||
}),
|
||||
bottomConstraint: css({
|
||||
...(currentConstraints.vertical === VerticalConstraint.Bottom ||
|
||||
currentConstraints.vertical === VerticalConstraint.TopBottom
|
||||
? `width: 92pt; x: 1085; fill: ${SELECTED_COLOR};`
|
||||
: `fill: ${selectionBoxColor};`}
|
||||
`,
|
||||
leftConstraint: css`
|
||||
${currentConstraints.horizontal === HorizontalConstraint.Left ||
|
||||
? {
|
||||
width: '92pt',
|
||||
x: '1085',
|
||||
fill: SELECTED_COLOR,
|
||||
}
|
||||
: {
|
||||
fill: selectionBoxColor,
|
||||
}),
|
||||
}),
|
||||
leftConstraint: css({
|
||||
...(currentConstraints.horizontal === HorizontalConstraint.Left ||
|
||||
currentConstraints.horizontal === HorizontalConstraint.LeftRight
|
||||
? `height: 92pt; y: 1014; fill: ${SELECTED_COLOR};`
|
||||
: `fill: ${selectionBoxColor};`}
|
||||
`,
|
||||
rightConstraint: css`
|
||||
${currentConstraints.horizontal === HorizontalConstraint.Right ||
|
||||
? {
|
||||
height: '92pt',
|
||||
y: '1014',
|
||||
fill: SELECTED_COLOR,
|
||||
}
|
||||
: {
|
||||
fill: selectionBoxColor,
|
||||
}),
|
||||
}),
|
||||
rightConstraint: css({
|
||||
...(currentConstraints.horizontal === HorizontalConstraint.Right ||
|
||||
currentConstraints.horizontal === HorizontalConstraint.LeftRight
|
||||
? `height: 92pt; y: 1014; fill: ${SELECTED_COLOR};`
|
||||
: `fill: ${selectionBoxColor};`}
|
||||
`,
|
||||
horizontalCenterConstraint: css`
|
||||
${currentConstraints.horizontal === HorizontalConstraint.Center
|
||||
? `height: 92pt; y: 1014; fill: ${SELECTED_COLOR};`
|
||||
: `fill: ${selectionBoxColor};`}
|
||||
`,
|
||||
verticalCenterConstraint: css`
|
||||
${currentConstraints.vertical === VerticalConstraint.Center
|
||||
? `width: 92pt; x: 1085; fill: ${SELECTED_COLOR};`
|
||||
: `fill: ${selectionBoxColor};`}
|
||||
`,
|
||||
box: css`
|
||||
fill: ${selectionBoxColor};
|
||||
`,
|
||||
? {
|
||||
height: '92pt',
|
||||
y: '1014',
|
||||
fill: SELECTED_COLOR,
|
||||
}
|
||||
: {
|
||||
fill: selectionBoxColor,
|
||||
}),
|
||||
}),
|
||||
horizontalCenterConstraint: css({
|
||||
...(currentConstraints.horizontal === HorizontalConstraint.Center
|
||||
? {
|
||||
height: '92pt',
|
||||
y: '1014',
|
||||
fill: SELECTED_COLOR,
|
||||
}
|
||||
: {
|
||||
fill: selectionBoxColor,
|
||||
}),
|
||||
}),
|
||||
verticalCenterConstraint: css({
|
||||
...(currentConstraints.vertical === VerticalConstraint.Center
|
||||
? {
|
||||
width: '92pt',
|
||||
x: '1085',
|
||||
fill: SELECTED_COLOR,
|
||||
}
|
||||
: {
|
||||
fill: selectionBoxColor,
|
||||
}),
|
||||
}),
|
||||
box: css({
|
||||
fill: selectionBoxColor,
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -110,13 +110,13 @@ export const QuickPositioning = ({ onPositionChange, element, settings }: Props)
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
buttonGroup: css`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 12px 0 12px 0;
|
||||
`,
|
||||
button: css`
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
`,
|
||||
buttonGroup: css({
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
padding: '12px 0 12px 0',
|
||||
}),
|
||||
button: css({
|
||||
marginLeft: '5px',
|
||||
marginRight: '5px',
|
||||
}),
|
||||
});
|
||||
|
||||
@ -106,43 +106,43 @@ export function InlineEdit({ onClose, id, scene }: Props) {
|
||||
}
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
inlineEditorContainer: css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: ${theme.components.panel.background};
|
||||
border: 1px solid ${theme.colors.border.weak};
|
||||
box-shadow: ${theme.shadows.z3};
|
||||
z-index: 1000;
|
||||
opacity: 1;
|
||||
min-width: 400px;
|
||||
`,
|
||||
draggableWrapper: css`
|
||||
width: 0;
|
||||
height: 0;
|
||||
`,
|
||||
inlineEditorHeader: css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: ${theme.colors.background.canvas};
|
||||
border-bottom: 1px solid ${theme.colors.border.weak};
|
||||
height: 40px;
|
||||
cursor: move;
|
||||
`,
|
||||
inlineEditorContent: css`
|
||||
white-space: pre-wrap;
|
||||
padding: 10px;
|
||||
`,
|
||||
inlineEditorClose: css`
|
||||
margin-left: auto;
|
||||
`,
|
||||
placeholder: css`
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
visibility: hidden;
|
||||
margin-right: auto;
|
||||
`,
|
||||
inlineEditorContentWrapper: css`
|
||||
overflow: scroll;
|
||||
`,
|
||||
inlineEditorContainer: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
background: theme.components.panel.background,
|
||||
border: `1px solid ${theme.colors.border.weak}`,
|
||||
boxShadow: theme.shadows.z3,
|
||||
zIndex: 1000,
|
||||
opacity: 1,
|
||||
minWidth: '400px',
|
||||
}),
|
||||
draggableWrapper: css({
|
||||
width: 0,
|
||||
height: 0,
|
||||
}),
|
||||
inlineEditorHeader: css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: theme.colors.background.canvas,
|
||||
borderBottom: `1px solid ${theme.colors.border.weak}`,
|
||||
height: '40px',
|
||||
cursor: 'move',
|
||||
}),
|
||||
inlineEditorContent: css({
|
||||
whiteSpace: 'pre-wrap',
|
||||
padding: '10px',
|
||||
}),
|
||||
inlineEditorClose: css({
|
||||
marginLeft: 'auto',
|
||||
}),
|
||||
placeholder: css({
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
visibility: 'hidden',
|
||||
marginRight: 'auto',
|
||||
}),
|
||||
inlineEditorContentWrapper: css({
|
||||
overflow: 'scroll',
|
||||
}),
|
||||
});
|
||||
|
||||
@ -151,8 +151,8 @@ function getOptionsPaneCategoryDescriptor<T = any>(
|
||||
}
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
selectElement: css`
|
||||
color: ${theme.colors.text.secondary};
|
||||
padding: ${theme.spacing(2)};
|
||||
`,
|
||||
selectElement: css({
|
||||
color: theme.colors.text.secondary,
|
||||
padding: theme.spacing(2),
|
||||
}),
|
||||
});
|
||||
|
||||
@ -167,8 +167,8 @@ export const TreeNavigationEditor = ({ item }: StandardEditorProps<any, TreeView
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
addLayerButton: css`
|
||||
margin-left: 18px;
|
||||
min-width: 150px;
|
||||
`,
|
||||
addLayerButton: css({
|
||||
marginLeft: '18px',
|
||||
minWidth: '150px',
|
||||
}),
|
||||
});
|
||||
|
||||
@ -92,29 +92,29 @@ export const TreeNodeTitle = ({ settings, nodeData, setAllowSelection }: Props)
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
actionButtonsWrapper: css`
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
`,
|
||||
actionIcon: css`
|
||||
color: ${theme.colors.text.secondary};
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: ${theme.colors.text.primary};
|
||||
}
|
||||
`,
|
||||
textWrapper: css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
margin-right: ${theme.spacing(1)};
|
||||
`,
|
||||
layerName: css`
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
color: ${theme.colors.primary.text};
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
margin-left: ${theme.spacing(0.5)};
|
||||
`,
|
||||
actionButtonsWrapper: css({
|
||||
display: 'flex',
|
||||
alignItems: 'flex-end',
|
||||
}),
|
||||
actionIcon: css({
|
||||
color: theme.colors.text.secondary,
|
||||
cursor: 'pointer',
|
||||
'&:hover': {
|
||||
color: theme.colors.text.primary,
|
||||
},
|
||||
}),
|
||||
textWrapper: css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexGrow: 1,
|
||||
overflow: 'hidden',
|
||||
marginRight: theme.spacing(1),
|
||||
}),
|
||||
layerName: css({
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
color: theme.colors.primary.text,
|
||||
cursor: 'pointer',
|
||||
overflow: 'hidden',
|
||||
marginLeft: theme.spacing(0.5),
|
||||
}),
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user