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

Merge pull request #1071 from Pax1601/1053-drawings-control-panel-make-shown-hidden-states-more-obvious

Browse Source 
refactor(drawings): changed styles for visible / hidden drawing layers
This commit is contained in:
Pax1601 2025-03-26 16:06:22 +01:00 committed by GitHub
commit c2489d638a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 20 additions and 7 deletions
Show Stats 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 { FaXmark } from "react-icons/fa6";
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 { OlSearchBar } from "../components/olsearchbar";
@ -63,6 +63,10 @@ export function DrawingMenu(props: { open: boolean; onClose: () => void }) {
CoalitionAreasChangedEvent.on((coalitionAreas) => setCoalitionAreas([...coalitionAreas]));
}, []);
function getDrawingLabelColor(drawing: DCSDrawingsContainer | DCSDrawing) {
return drawing.getVisibility() ? `text-gray-200` : `text-gray-600`;
}
function renderDrawingsContainerControls(container: DCSDrawingsContainer) {
if (container.hasSearchString(searchString)) {
return (
@ -88,8 +92,10 @@ export function DrawingMenu(props: { open: boolean; onClose: () => void }) {
<FontAwesomeIcon
icon={container.getVisibility() ? faEye : faEyeSlash}
className={`
my-auto w-6 cursor-pointer text-gray-400 transition-transform
hover:scale-125 hover:text-gray-200
my-auto w-6 cursor-pointer
${getDrawingLabelColor(container)}
transition-transform
hover:scale-125 hover:text-gray-50
`}
onClick={() => {
if (container === mainDrawingsContainer.container) {
@ -101,7 +107,9 @@ export function DrawingMenu(props: { open: boolean; onClose: () => void }) {
/>
<div
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()}
@ -127,15 +135,20 @@ export function DrawingMenu(props: { open: boolean; onClose: () => void }) {
<FontAwesomeIcon
icon={drawing.getVisibility() ? faEye : faEyeSlash}
className={`
my-auto w-6 cursor-pointer text-gray-400
my-auto w-6 cursor-pointer
${getDrawingLabelColor(drawing)}
transition-transform
hover:scale-125 hover:text-gray-200
hover:scale-125 hover:text-gray-50
`}
onClick={() => {
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>
);
})}