thi-sjsu-project/theia
0
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

style map threat info element

Browse Source
This commit is contained in:
thetek 2024-05-19 15:56:20 +02:00
parent 51b165e7e1
commit f632bf761c
4 changed files with 64 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -4,6 +4,9 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<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>
</head>
<body>

39
src/components/Element/Complex/MapThreatInfoElement.tsx
View File

@ -6,9 +6,12 @@ import { capitalizeFirstLetter as cfl } from 'src/utils/helpers';
type Props = {
element: InformationElement;
inGaze: boolean;
};
const MapThreatInfoElement = ({ element }: Props) => {
const M_HEIGHT = 60;
const MapThreatInfoElement = ({ element, inGaze }: Props) => {
const dispatch = useAppDispatch();
// could also fetch messages from redux
// provided there is a conversation number
@ -105,6 +108,40 @@ const MapThreatInfoElement = ({ element }: Props) => {
};
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;

17
src/components/Widget/MapWarningWidget.tsx
View File

@ -11,7 +11,6 @@ import {
import { useEffect, useState } from 'react';
import type {
IconElement as IconElementType,
TextElement as TextElementType,
InformationElement as InformationElementType,
} from 'src/types/element';
import IconElement from 'src/components/Element/Simple/IconElement';
@ -44,6 +43,22 @@ const MapWarningWidget = ({ widget }: MapWarningWidgetProps) => {
}
}, [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 (
<div
key={widget.id}

8
tailwind.config.js
View File

@ -1,5 +1,6 @@
/** @type {import('tailwindcss').Config} */
export default {
const config = {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
@ -8,6 +9,11 @@ export default {
// pointer: 'url(https://i.stack.imgur.com/UOvLJ.png), pointer',
// },
},
fontFamily: {
sans: ['Roboto Condensed', 'system-ui', 'sans-serif'],
},
},
plugins: [],
};
export default config;