From f056cc62a87593c6fbd41154025cc78cd65b26fd Mon Sep 17 00:00:00 2001 From: Pax1601 Date: Sat, 6 Apr 2024 15:42:53 +0200 Subject: [PATCH] More work on flowbite components --- frontend/react/package.json | 1 + frontend/react/public/images/icon.png | Bin 4581 -> 16204 bytes frontend/react/src/eventscontext.tsx | 2 + frontend/react/src/main.tsx | 6 ++- frontend/react/src/olympusapp.ts | 2 +- frontend/react/src/ui.css | 10 ++++ frontend/react/src/ui.tsx | 10 +++- .../react/src/ui/components/olaccordion.tsx | 43 ++++++++++++++++++ .../react/src/ui/components/olsearchbar.tsx | 23 ++++++++++ .../react/src/ui/components/olstatebutton.tsx | 5 +- .../react/src/ui/panels/components/menu.tsx | 13 +++--- frontend/react/src/ui/panels/header.tsx | 3 +- frontend/react/src/ui/panels/mainmenu.tsx | 19 ++++++++ frontend/react/src/ui/panels/spawnmenu.tsx | 18 ++++++-- 14 files changed, 140 insertions(+), 15 deletions(-) create mode 100644 frontend/react/src/ui/components/olaccordion.tsx create mode 100644 frontend/react/src/ui/components/olsearchbar.tsx create mode 100644 frontend/react/src/ui/panels/mainmenu.tsx diff --git a/frontend/react/package.json b/frontend/react/package.json index 5985032f..8fbc7492 100644 --- a/frontend/react/package.json +++ b/frontend/react/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.5.1", + "@fortawesome/free-brands-svg-icons": "^6.5.2", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", "@tanem/svg-injector": "^10.1.68", diff --git a/frontend/react/public/images/icon.png b/frontend/react/public/images/icon.png index dc5c994e43011c8661934ffe6e7baa677c620ff2..9e11ba9c7a7e8f36b9409dd06f96b11cbd9f7ae7 100644 GIT binary patch literal 16204 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 {}, setSpawnMenuVisible: (e: boolean) => {}, setUnitControlMenuVisible: (e: boolean) => {}, setMeasureMenuVisible: (e: boolean) => {}, setDrawingMenuVisible: (e: boolean) => {}, + toggleMainMenuVisible: () => {}, toggleSpawnMenuVisible: () => {}, toggleUnitControlMenuVisible: () => {}, toggleMeasureMenuVisible: () => {}, diff --git a/frontend/react/src/main.tsx b/frontend/react/src/main.tsx index 166e25ef..0fc59e42 100644 --- a/frontend/react/src/main.tsx +++ b/frontend/react/src/main.tsx @@ -1,11 +1,13 @@ /***************** UI *******************/ import React from 'react' import ReactDOM from 'react-dom/client' -import './index.css' import { setupApp } from './olympusapp.js' -import 'flowbite'; import { UI } from './ui.js'; +import './index.css' + +import 'flowbite'; + ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( diff --git a/frontend/react/src/olympusapp.ts b/frontend/react/src/olympusapp.ts index 680af2cc..4019df51 100644 --- a/frontend/react/src/olympusapp.ts +++ b/frontend/react/src/olympusapp.ts @@ -38,7 +38,7 @@ import { navyUnitDatabase } from "./unit/databases/navyunitdatabase"; //import { UnitListPanel } from "./panels/unitlistpanel"; //import { ContextManager } from "./context/contextmanager"; //import { Context } from "./context/context"; -var VERSION = "{{OLYMPUS_VERSION_NUMBER}}"; +export var VERSION = "{{OLYMPUS_VERSION_NUMBER}}"; export class OlympusApp { /* Global data */ diff --git a/frontend/react/src/ui.css b/frontend/react/src/ui.css index 8b137891..e50bf918 100644 --- a/frontend/react/src/ui.css +++ b/frontend/react/src/ui.css @@ -1 +1,11 @@ +/* Hide scrollbar for Chrome, Safari and Opera */ +.no-scrollbar::-webkit-scrollbar { + display: none; +} + +/* Hide scrollbar for IE, Edge and Firefox */ +.no-scrollbar { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} \ No newline at end of file diff --git a/frontend/react/src/ui.tsx b/frontend/react/src/ui.tsx index d83a71b8..f0b1da6b 100644 --- a/frontend/react/src/ui.tsx +++ b/frontend/react/src/ui.tsx @@ -6,21 +6,25 @@ import { EventsProvider } from './eventscontext' import { StateProvider } from './statecontext' import { SpawnMenu } from './ui/panels/spawnmenu' import { UnitControlMenu } from './ui/panels/unitcontrolmenu' +import { MainMenu } from './ui/panels/mainmenu' export type OlympusState = { + mainMenuVisible: boolean, spawnMenuVisible: boolean, unitControlMenuVisible: boolean, measureMenuVisible: boolean, drawingMenuVisible: boolean } -1 + export function UI(props) { + var [mainMenuVisible, setMainMenuVisible] = useState(false); var [spawnMenuVisible, setSpawnMenuVisible] = useState(false); var [unitControlMenuVisible, setUnitControlMenuVisible] = useState(false); var [measureMenuVisible, setMeasureMenuVisible] = useState(false); var [drawingMenuVisible, setDrawingMenuVisible] = useState(false); function hideAllMenus() { + setMainMenuVisible(false); setSpawnMenuVisible(false); setUnitControlMenuVisible(false); setMeasureMenuVisible(false); @@ -30,6 +34,7 @@ export function UI(props) { return (
{hideAllMenus(); setMainMenuVisible(!mainMenuVisible)}, toggleSpawnMenuVisible: () => {hideAllMenus(); setSpawnMenuVisible(!spawnMenuVisible)}, toggleUnitControlMenuVisible: () => {hideAllMenus(); setUnitControlMenuVisible(!unitControlMenuVisible)}, toggleMeasureMenuVisible: () => {hideAllMenus(); setMeasureMenuVisible(!measureMenuVisible)}, @@ -50,6 +57,7 @@ export function UI(props) {
+ setMainMenuVisible(false)}/> setSpawnMenuVisible(false)}/> setUnitControlMenuVisible(false)}/>
diff --git a/frontend/react/src/ui/components/olaccordion.tsx b/frontend/react/src/ui/components/olaccordion.tsx new file mode 100644 index 00000000..2a976a31 --- /dev/null +++ b/frontend/react/src/ui/components/olaccordion.tsx @@ -0,0 +1,43 @@ +import React, { useId, useEffect, useRef, useState } from "react" + +import 'flowbite'; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faArrowCircleDown, faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons"; + +export function OlAccordion(props) { + var [scrolledUp, setScrolledUp] = useState(true); + var [scrolledDown, setScrolledDown] = useState(false); + + const bodyId = useId(); + const accordionId = useId(); + const headingId = useId(); + + var contentRef = useRef(null); + + useEffect(() => { + contentRef.current && (contentRef.current as HTMLElement).children[0]?.addEventListener('scroll', (e: any) => { + if (e.target.clientHeight < e.target.scrollHeight) { + setScrolledDown(e.target.scrollTop === (e.target.scrollHeight - e.target.offsetHeight)); + setScrolledUp(e.target.scrollTop === 0); + } + }) + }) + + return
+

+ +

+
+
{!scrolledUp && }
+
+ {props.children} +
+
{!scrolledDown && }
+
+
+} \ No newline at end of file diff --git a/frontend/react/src/ui/components/olsearchbar.tsx b/frontend/react/src/ui/components/olsearchbar.tsx new file mode 100644 index 00000000..7eb83366 --- /dev/null +++ b/frontend/react/src/ui/components/olsearchbar.tsx @@ -0,0 +1,23 @@ +import { faMultiply, faSearch } from "@fortawesome/free-solid-svg-icons" +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" +import React, {useId, useRef} from "react" + +export function OlSearchBar(props) { + const searchId = useId(); + const inputRef = useRef(null); + + function resetSearch() { + inputRef.current && ((inputRef.current as HTMLInputElement).value = ''); + } + + return
+ +
+
+ +
+ + +
+
+} \ No newline at end of file diff --git a/frontend/react/src/ui/components/olstatebutton.tsx b/frontend/react/src/ui/components/olstatebutton.tsx index d5056474..e7980a58 100644 --- a/frontend/react/src/ui/components/olstatebutton.tsx +++ b/frontend/react/src/ui/components/olstatebutton.tsx @@ -2,7 +2,10 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import React from "react" export function OlStateButton(props) { - return } \ No newline at end of file diff --git a/frontend/react/src/ui/panels/components/menu.tsx b/frontend/react/src/ui/panels/components/menu.tsx index 940bf6ac..d383ce8c 100644 --- a/frontend/react/src/ui/panels/components/menu.tsx +++ b/frontend/react/src/ui/panels/components/menu.tsx @@ -11,16 +11,17 @@ export function Menu(props) { props.open ? drawer.show() : drawer.hide(); }) - return
-
- - {props.title} -
+ return
+
+ {props.title} +
+ {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 e1888a0d..72e6f286 100644 --- a/frontend/react/src/ui/panels/header.tsx +++ b/frontend/react/src/ui/panels/header.tsx @@ -13,9 +13,10 @@ export function Header(props) { {(appState) => {(events) => -