diff --git a/frontend/react/src/index.css b/frontend/react/src/index.css index 081d8dcf..7d267d2e 100644 --- a/frontend/react/src/index.css +++ b/frontend/react/src/index.css @@ -4,6 +4,10 @@ @tailwind components; @tailwind utilities; +* { + font-weight: 400; +} + .z-ui-0 { z-index: 2000; } diff --git a/frontend/react/src/ui/components/olaccordion.tsx b/frontend/react/src/ui/components/olaccordion.tsx index 55326490..9ab4aea2 100644 --- a/frontend/react/src/ui/components/olaccordion.tsx +++ b/frontend/react/src/ui/components/olaccordion.tsx @@ -22,7 +22,7 @@ export function OlAccordion(props) {

diff --git a/frontend/react/src/ui/components/olcheckbox.tsx b/frontend/react/src/ui/components/olcheckbox.tsx index 2542aaf2..64fe7d24 100644 --- a/frontend/react/src/ui/components/olcheckbox.tsx +++ b/frontend/react/src/ui/components/olcheckbox.tsx @@ -1,7 +1,10 @@ -import React, { useState, useId } from "react"; +import React from "react"; export function OlCheckbox(props) { - const id = useId(); - - return + return } \ No newline at end of file diff --git a/frontend/react/src/ui/components/olcoalitiontoggle.tsx b/frontend/react/src/ui/components/olcoalitiontoggle.tsx index fd051770..dcaa7952 100644 --- a/frontend/react/src/ui/components/olcoalitiontoggle.tsx +++ b/frontend/react/src/ui/components/olcoalitiontoggle.tsx @@ -3,7 +3,7 @@ import React from "react"; export function OlCoalitionToggle() { return
-
+
Large toggle
} \ No newline at end of file diff --git a/frontend/react/src/ui/components/oldropdown.tsx b/frontend/react/src/ui/components/oldropdown.tsx index 9b2810a2..6582c822 100644 --- a/frontend/react/src/ui/components/oldropdown.tsx +++ b/frontend/react/src/ui/components/oldropdown.tsx @@ -1,62 +1,52 @@ -import React, { useId, useState, useEffect, useRef } from "react"; -import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'; -import { library } from '@fortawesome/fontawesome-svg-core' +import React, { useState, useEffect, useRef } from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -library.add(faChevronDown, faChevronUp); - -export function OlTextDropdown(props) { - var [value, setValue] = useState(props.items[0] ?? "N/A") - const buttonId = useId(); - const dropdownId = useId() - - return
- - -
-
- {props.items.map((item) => { - return setValue(item)}> - {item} - - })} -
-
-
-} - -export function OlElementDropdown(props) { +export function OlDropdown(props) { var [open, setOpen] = useState(false); var contentRef = useRef(null); var buttonRef = useRef(null); function setPosition(content: HTMLDivElement, button: HTMLButtonElement) { - content.style.left = `0px`; - content.style.top = `0px`; + /* Reset the position of the content */ + content.style.left = "0px"; + content.style.top = "0px"; + content.style.height = ""; + /* Get the position and size of the button and the content elements */ var [cxl, cyt, cxr, cyb, cw, ch] = [content.getBoundingClientRect().x, content.getBoundingClientRect().y, content.getBoundingClientRect().x + content.clientWidth, content.getBoundingClientRect().y + content.clientHeight, content.clientWidth, content.clientHeight]; var [bxl, byt, bxr, byb, bbw, bh] = [button.getBoundingClientRect().x, button.getBoundingClientRect().y, button.getBoundingClientRect().x + button.clientWidth, button.getBoundingClientRect().y + button.clientHeight, button.clientWidth, button.clientHeight]; - + + /* Limit the maximum height */ + if (ch > 400) { + ch = 400; + content.style.height = `${ch}px`; + } + + /* Compute the horizontal position of the center of the button and the content */ var cxc = (cxl + cxr) / 2; var bxc = (bxl + bxr) / 2; - - var offsetX = bxc - cxc; - var offsetY = byb - cyt; + /* Compute the x and y offsets needed to align the button and element horizontally, and to put the content below the button */ + var offsetX = bxc - cxc; + var offsetY = byb - cyt + 8; + + /* Compute the new position of the left and right margins of the content */ cxl += offsetX; cxr += offsetX; + cyb += offsetY; + /* Try and move the content so it is inside the screen */ if (cxl < 0) offsetX -= cxl; if (cxr > window.innerWidth) - offsetX -= (cxr - window.innerWidth) + offsetX -= (cxr - window.innerWidth) + if (cyb > window.innerHeight) + offsetY = -ch - 8; + /* Apply the offset */ content.style.left = `${offsetX}px` - content.style.top = `${offsetY + 5}px` + content.style.top = `${offsetY}px` } useEffect(() => { @@ -65,25 +55,39 @@ export function OlElementDropdown(props) { const button = buttonRef.current as HTMLButtonElement; setPosition(content, button); + + /* Register click events to automatically close the dropdown when clicked anywhere outside of it */ + document.addEventListener('click', function (event) { + const target = event.target; + if (target && /*!content.contains(target as HTMLElement) &&*/ !button.contains(target as HTMLElement)) { + setOpen(false); + } + }); } }) - - return
- -
-
+
+
{props.children}
} +/* Conveniency Component for dropdown elements */ export function OlDropdownItem(props) { - return
{ })} className="px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white flex flex-row content-center gap-2"> + return
+ } \ No newline at end of file diff --git a/frontend/react/src/ui/components/ollabeltoggle.tsx b/frontend/react/src/ui/components/ollabeltoggle.tsx index 22a6a09c..f461e4fa 100644 --- a/frontend/react/src/ui/components/ollabeltoggle.tsx +++ b/frontend/react/src/ui/components/ollabeltoggle.tsx @@ -3,9 +3,9 @@ import React, { useState } from "react"; export function OlLabelToggle(props) { var [toggled, setToggled] = useState(false); - return
{setToggled(!toggled)}} className="relative flex flex-row contents-center justify-between w-32 h-10 dark:bg-gray-700 rounded-md py-1 px-1 select-none cursor-pointer"> - - MSL - AGL -
+ return } \ No newline at end of file diff --git a/frontend/react/src/ui/components/olnumberinput.tsx b/frontend/react/src/ui/components/olnumberinput.tsx index 4fd8fdfd..0ed2e4cb 100644 --- a/frontend/react/src/ui/components/olnumberinput.tsx +++ b/frontend/react/src/ui/components/olnumberinput.tsx @@ -3,13 +3,13 @@ import React, {useEffect, useId} from "react"; export function OlNumberInput(props) { return
- - - +

{props.children} - } \ No newline at end of file diff --git a/frontend/react/src/ui/panels/header.tsx b/frontend/react/src/ui/panels/header.tsx index 144ba2d1..05155f98 100644 --- a/frontend/react/src/ui/panels/header.tsx +++ b/frontend/react/src/ui/panels/header.tsx @@ -1,30 +1,26 @@ -import React, { useEffect } from 'react' -import { OlRoundStateButton } from '../components/olstatebutton'; -import { faPlus, faGamepad, faRuler, faPencil, faMap, faLock, faPerson, faBrain, faRobot, faJetFighter, faHelicopter, faShield, faTruck, faShip, faPlaneDeparture, faSkull, faShieldAlt, faGears } from '@fortawesome/free-solid-svg-icons'; -import { library } from '@fortawesome/fontawesome-svg-core' +import React from 'react' +import { OlRoundStateButton, OlStateButton } from '../components/olstatebutton'; +import { faLock, faPerson, faBrain, faRobot, faJetFighter, faHelicopter, faShield, faTruck, faShip, faPlaneDeparture, faSkull, faShieldAlt, faCamera } from '@fortawesome/free-solid-svg-icons'; import { EventsConsumer } from '../../eventscontext'; import { StateConsumer } from '../../statecontext'; -import { OlDropdownItem, OlElementDropdown, OlTextDropdown } from '../components/oldropdown'; -import { OlCheckbox } from '../components/olcheckbox'; -import { MAP_OPTIONS_DEFAULTS, MAP_OPTIONS_TOOLTIPS } from '../../constants/constants'; +import { OlDropdownItem, OlDropdown } from '../components/oldropdown'; +import { OlLabelToggle } from '../components/ollabeltoggle'; import { getApp } from '../../olympusapp'; -library.add(faPlus, faGamepad, faRuler, faPencil, faMap); - export function Header(props) { return {(appState) => {(events) => -