style map threat info element
This commit is contained in:
parent
51b165e7e1
commit
f632bf761c
@ -4,6 +4,9 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
||||||
<title>React Redux App</title>
|
<title>React Redux App</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -6,9 +6,12 @@ import { capitalizeFirstLetter as cfl } from 'src/utils/helpers';
|
|||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
element: InformationElement;
|
element: InformationElement;
|
||||||
|
inGaze: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
const MapThreatInfoElement = ({ element }: Props) => {
|
const M_HEIGHT = 60;
|
||||||
|
|
||||||
|
const MapThreatInfoElement = ({ element, inGaze }: Props) => {
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
// could also fetch messages from redux
|
// could also fetch messages from redux
|
||||||
// provided there is a conversation number
|
// provided there is a conversation number
|
||||||
@ -105,6 +108,40 @@ const MapThreatInfoElement = ({ element }: Props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return <>{renderElement()}</>;
|
return <>{renderElement()}</>;
|
||||||
|
// return (
|
||||||
|
// <div
|
||||||
|
// id={element.id}
|
||||||
|
// className="rounded-xl bg-[#282828] bg-opacity-80 text-[#f5f5f5] border-black border-2 text-[24px]"
|
||||||
|
// style={{
|
||||||
|
// height: M_HEIGHT,
|
||||||
|
// width: 'auto',
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <div className="px-5 py-2.5 font-medium" style={{ height: M_HEIGHT }}>
|
||||||
|
// {title}
|
||||||
|
// </div>
|
||||||
|
// {inGaze ? <GazeHighlight /> : <></>}
|
||||||
|
// </div>
|
||||||
|
// );
|
||||||
|
};
|
||||||
|
|
||||||
|
const GazeHighlight = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className="w-auto rounded-xl border-[#19DEBB] border-x-[5px]"
|
||||||
|
style={{ height: M_HEIGHT - 4, marginTop: -M_HEIGHT }}
|
||||||
|
></div>
|
||||||
|
<div className="mx-auto mt-1" style={{ width: 26, height: 13 }}>
|
||||||
|
<svg style={{ width: 26, height: 15 }}>
|
||||||
|
<polygon
|
||||||
|
points="1,1 26,1 14,14"
|
||||||
|
style={{ fill: '#19DEBB', stroke: '#3E3E42', strokeWidth: 2 }}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default MapThreatInfoElement;
|
export default MapThreatInfoElement;
|
||||||
|
@ -11,7 +11,6 @@ import {
|
|||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import type {
|
import type {
|
||||||
IconElement as IconElementType,
|
IconElement as IconElementType,
|
||||||
TextElement as TextElementType,
|
|
||||||
InformationElement as InformationElementType,
|
InformationElement as InformationElementType,
|
||||||
} from 'src/types/element';
|
} from 'src/types/element';
|
||||||
import IconElement from 'src/components/Element/Simple/IconElement';
|
import IconElement from 'src/components/Element/Simple/IconElement';
|
||||||
@ -44,6 +43,22 @@ const MapWarningWidget = ({ widget }: MapWarningWidgetProps) => {
|
|||||||
}
|
}
|
||||||
}, [inGaze, dispatch, iconElement, threatInfoElement, widget]);
|
}, [inGaze, dispatch, iconElement, threatInfoElement, widget]);
|
||||||
|
|
||||||
|
const handleInGaze = () => {
|
||||||
|
if (threatInfoElement) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div style={{ height: 2, width: 75, border: '2px dashed white' }} />
|
||||||
|
<MapThreatInfoElement
|
||||||
|
element={threatInfoElement as InformationElementType}
|
||||||
|
inGaze={inGaze}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={widget.id}
|
key={widget.id}
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
export default {
|
|
||||||
|
const config = {
|
||||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
@ -8,6 +9,11 @@ export default {
|
|||||||
// pointer: 'url(https://i.stack.imgur.com/UOvLJ.png), pointer',
|
// pointer: 'url(https://i.stack.imgur.com/UOvLJ.png), pointer',
|
||||||
// },
|
// },
|
||||||
},
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Roboto Condensed', 'system-ui', 'sans-serif'],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
|
Loading…
Reference in New Issue
Block a user