[Refactor]: css fixes (#4248)

This commit is contained in:
Rajat Dabade 2023-12-29 16:05:46 +05:30 committed by GitHub
parent 8ee92516ca
commit e792c48f6d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -27,6 +27,10 @@ import CustomColor from './CustomColor';
import ShowCaseValue from './ShowCaseValue'; import ShowCaseValue from './ShowCaseValue';
import { ThresholdProps } from './types'; import { ThresholdProps } from './types';
const wrapStyle = {
flexWrap: 'wrap',
} as React.CSSProperties;
function Threshold({ function Threshold({
index, index,
thresholdOperator = '>', thresholdOperator = '>',
@ -220,7 +224,7 @@ function Threshold({
} }
> >
{selectedGraph === PANEL_TYPES.TIME_SERIES && ( {selectedGraph === PANEL_TYPES.TIME_SERIES && (
<> <Space style={wrapStyle}>
<Typography.Text>Label</Typography.Text> <Typography.Text>Label</Typography.Text>
{isEditMode ? ( {isEditMode ? (
<Input <Input
@ -232,7 +236,7 @@ function Threshold({
) : ( ) : (
<ShowCaseValue width="180px" value={label || 'none'} /> <ShowCaseValue width="180px" value={label || 'none'} />
)} )}
</> </Space>
)} )}
{(selectedGraph === PANEL_TYPES.VALUE || {(selectedGraph === PANEL_TYPES.VALUE ||
selectedGraph === PANEL_TYPES.TABLE) && ( selectedGraph === PANEL_TYPES.TABLE) && (
@ -243,7 +247,7 @@ function Threshold({
{isEditMode ? ( {isEditMode ? (
<> <>
{selectedGraph === PANEL_TYPES.TABLE && ( {selectedGraph === PANEL_TYPES.TABLE && (
<Space> <Space style={wrapStyle}>
<Select <Select
style={{ style={{
minWidth: '150px', minWidth: '150px',
@ -270,7 +274,7 @@ function Threshold({
) : ( ) : (
<> <>
{selectedGraph === PANEL_TYPES.TABLE && ( {selectedGraph === PANEL_TYPES.TABLE && (
<Space> <Space style={wrapStyle}>
<ShowCaseValue width="150px" value={tableSelectedOption} /> <ShowCaseValue width="150px" value={tableSelectedOption} />
<Typography.Text>is</Typography.Text> <Typography.Text>is</Typography.Text>
</Space> </Space>
@ -283,7 +287,7 @@ function Threshold({
</Space> </Space>
</div> </div>
<div className="threshold-units-selector"> <div className="threshold-units-selector">
<Space> <Space style={wrapStyle}>
{isEditMode ? ( {isEditMode ? (
<InputNumber <InputNumber
style={{ backgroundColor }} style={{ backgroundColor }}
@ -311,7 +315,7 @@ function Threshold({
<div> <div>
<Space direction="vertical"> <Space direction="vertical">
<Typography.Text>Show with</Typography.Text> <Typography.Text>Show with</Typography.Text>
<Space> <Space style={wrapStyle}>
{isEditMode ? ( {isEditMode ? (
<> <>
<ColorSelector setColor={setColor} thresholdColor={color} /> <ColorSelector setColor={setColor} thresholdColor={color} />