weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(drawings): changed styles for visible / hidden drawing layers

Browse Source
This commit is contained in:
MarcoJayUsai
2025-03-26 14:01:48 +01:00
parent 4062e69661
commit d0f5be7269
1 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/react/src/ui/panels/drawingmenu.tsx
View File

@@ -16,7 +16,7 @@ import { DrawSubState, ERAS_ORDER, IADSTypes, NO_SUBSTATE, OlympusState, Olympus
import { AppStateChangedEvent, CoalitionAreasChangedEvent, CoalitionAreaSelectedEvent, DrawingsInitEvent, DrawingsUpdatedEvent } from "../../events"; import { AppStateChangedEvent, CoalitionAreasChangedEvent, CoalitionAreaSelectedEvent, DrawingsInitEvent, DrawingsUpdatedEvent } from "../../events";
import { FaXmark } from "react-icons/fa6"; import { FaXmark } from "react-icons/fa6";
import { deepCopyTable } from "../../other/utils"; import { deepCopyTable } from "../../other/utils";
import { DCSDrawingsContainer, DCSEmptyLayer } from "../../map/drawings/drawingsmanager"; import { DCSDrawing, DCSDrawingsContainer, DCSEmptyLayer } from "../../map/drawings/drawingsmanager";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { OlSearchBar } from "../components/olsearchbar"; import { OlSearchBar } from "../components/olsearchbar";
@@ -63,6 +63,10 @@ export function DrawingMenu(props: { open: boolean; onClose: () => void }) {
CoalitionAreasChangedEvent.on((coalitionAreas) => setCoalitionAreas([...coalitionAreas])); CoalitionAreasChangedEvent.on((coalitionAreas) => setCoalitionAreas([...coalitionAreas]));
}, []); }, []);
function getDrawingLabelColor(drawing: DCSDrawingsContainer | DCSDrawing) {
return drawing.getVisibility() ? `text-gray-200` : `text-gray-600`;
}
function renderDrawingsContainerControls(container: DCSDrawingsContainer) { function renderDrawingsContainerControls(container: DCSDrawingsContainer) {
if (container.hasSearchString(searchString)) { if (container.hasSearchString(searchString)) {
return ( return (
@@ -88,8 +92,10 @@ export function DrawingMenu(props: { open: boolean; onClose: () => void }) {
<FontAwesomeIcon <FontAwesomeIcon
icon={container.getVisibility() ? faEye : faEyeSlash} icon={container.getVisibility() ? faEye : faEyeSlash}
className={` className={`
my-auto w-6 cursor-pointer text-gray-400 transition-transform my-auto w-6 cursor-pointer
hover:scale-125 hover:text-gray-200 ${getDrawingLabelColor(container)}
transition-transform
hover:scale-125 hover:text-gray-50
`} `}
onClick={() => { onClick={() => {
if (container === mainDrawingsContainer.container) { if (container === mainDrawingsContainer.container) {
@@ -101,7 +107,9 @@ export function DrawingMenu(props: { open: boolean; onClose: () => void }) {
/> />
<div <div
className={` className={`
w-40 w-max-40 overflow-hidden text-ellipsis text-nowrap bg- w-40
${getDrawingLabelColor(container)}
w-max-40 overflow-hidden text-ellipsis text-nowrap bg-
`} `}
> >
{container.getName()} {container.getName()}
@@ -127,15 +135,20 @@ export function DrawingMenu(props: { open: boolean; onClose: () => void }) {
<FontAwesomeIcon <FontAwesomeIcon
icon={drawing.getVisibility() ? faEye : faEyeSlash} icon={drawing.getVisibility() ? faEye : faEyeSlash}
className={` className={`
my-auto w-6 cursor-pointer text-gray-400 my-auto w-6 cursor-pointer
${getDrawingLabelColor(drawing)}
transition-transform transition-transform
hover:scale-125 hover:text-gray-200 hover:scale-125 hover:text-gray-50
`} `}
onClick={() => { onClick={() => {
drawing.setVisibility(!drawing.getVisibility()); drawing.setVisibility(!drawing.getVisibility());
}} }}
/> />
<div className={`overflow-hidden text-ellipsis text-nowrap`}>{drawing.getName()}</div> <div className={`
overflow-hidden
${getDrawingLabelColor(drawing)}
text-ellipsis text-nowrap
`}>{drawing.getName()}</div>
</div> </div>
); );
})} })}