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

fix: Toolbar button color different when hovering and selected

Browse Source
This commit is contained in:
Davide Passoni
2025-01-23 10:58:11 +01:00
parent d31aa30da8
commit 20db9647bd
17 changed files with 304 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/react/src/ui/components/oldropdown.tsx
View File

@@ -104,9 +104,12 @@ export function OlDropdown(props: {
`}
type="button"
>
{props.leftIcon && <FontAwesomeIcon icon={props.leftIcon} className={`
mr-3
`} />}
{props.leftIcon && (
<FontAwesomeIcon
icon={props.leftIcon}
className={`mr-3`}
/>
)}
<span className="overflow-hidden text-ellipsis text-nowrap">{props.label ?? ""}</span>
<svg
className={`
@@ -150,7 +153,7 @@ export function OlDropdown(props: {
}
/* Conveniency Component for dropdown elements */
export function OlDropdownItem(props: { onClick?: () => void; className?: string; children?: string | JSX.Element | JSX.Element[] }) {
export function OlDropdownItem(props: { onClick?: () => void; className?: string; borderColor?: string; children?: string | JSX.Element | JSX.Element[] }) {
return (
<button
onClick={props.onClick ?? (() => {})}
@@ -161,6 +164,9 @@ export function OlDropdownItem(props: { onClick?: () => void; className?: string
dark:hover:bg-gray-600 dark:hover:text-white
hover:bg-gray-100
`}
style={{
border: props.borderColor ? `2px solid ${props.borderColor}` : "2px solid transparent",
}}
>
{props.children}
</button>

20
frontend/react/src/ui/components/olstatebutton.tsx
View File

@@ -1,12 +1,14 @@
import { IconProp } from "@fortawesome/fontawesome-svg-core";
import { faExternalLink, faLock, faLockOpen, faUnlock, faUnlockAlt } from "@fortawesome/free-solid-svg-icons";
import { faLock, faUnlockAlt } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React, { useRef, useState } from "react";
import { OlTooltip } from "./oltooltip";
import { computeBrightness, setOpacity } from "../../other/utils";
import { colors } from "../../constants/constants";
export function OlStateButton(props: {
className?: string;
buttonColor?: string | null;
buttonColor?: string;
checked: boolean;
icon?: IconProp;
tooltip?: string | (() => JSX.Element | JSX.Element[]);
@@ -27,13 +29,6 @@ export function OlStateButton(props: {
dark:bg-olympus-600 dark:text-gray-300
`;
let textColor = "white";
if ((props.checked || hover) && props.buttonColor == "white") {
textColor = "#243141";
}
const opacity = hover && !props.checked ? "AA" : "FF";
return (
<>
<button
@@ -50,7 +45,7 @@ export function OlStateButton(props: {
className={className}
style={{
border: props.buttonColor ? "2px solid " + props.buttonColor : "0px solid transparent",
background: props.checked || hover ? (props.buttonColor ? props.buttonColor : "#3b82f6" + opacity) : "#243141" + opacity,
background: setOpacity(props.checked || hover ? (props.buttonColor ? props.buttonColor : colors.OLYMPUS_LIGHT_BLUE) : colors.OLYMPUS_BLUE, (!props.checked && hover)? 0.3: 1),
}}
onMouseEnter={() => {
setHover(true);
@@ -60,7 +55,10 @@ export function OlStateButton(props: {
}}
>
<div className={`m-auto flex w-fit content-center justify-center gap-2`}>
{props.icon && <FontAwesomeIcon icon={props.icon} className="m-auto" style={{ color: textColor }} />}
{props.icon && <FontAwesomeIcon icon={props.icon} data-bright={props.buttonColor && props.checked && computeBrightness(props.buttonColor) > 200} className={`
m-auto text-gray-200
data-[bright='true']:text-gray-800
`} />}
{props.children}
</div>
</button>

10
frontend/react/src/ui/contextmenus/mapcontextmenu.tsx
View File

@@ -110,17 +110,13 @@ export function MapContextMenu(props: {}) {
>
{contextActionSet &&
reorderedActions.map((contextActionIt) => {
const colorString = `
border-2
border-${CONTEXT_ACTION_COLORS[contextActionIt.getOptions().type]}-500
`;
return (
<OlDropdownItem
className={`
flex w-full content-center gap-2 text-white
${colorString}
flex w-full content-center gap-2 border-2 text-white
`}
key={contextActionIt.getLabel()}
borderColor={CONTEXT_ACTION_COLORS[contextActionIt.getOptions().type] as string}
onClick={() => {
if (contextActionIt.getTarget() === ContextActionTarget.NONE) {
contextActionIt.executeCallback(null, null);

12
frontend/react/src/ui/contextmenus/spawncontextmenu.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useRef, useState } from "react";
import { BLUE_COMMANDER, COMMAND_MODE_OPTIONS_DEFAULTS, GAME_MASTER, NO_SUBSTATE, OlympusState, OlympusSubState } from "../../constants/constants";
import { BLUE_COMMANDER, colors, COMMAND_MODE_OPTIONS_DEFAULTS, GAME_MASTER, NO_SUBSTATE, OlympusState, OlympusSubState } from "../../constants/constants";
import { LatLng } from "leaflet";
import {
AppStateChangedEvent,
@@ -187,35 +187,35 @@ export function SpawnContextMenu(props: {}) {
onClick={() => (openAccordion !== CategoryGroup.AIRCRAFT ? setOpenAccordion(CategoryGroup.AIRCRAFT) : setOpenAccordion(CategoryGroup.NONE))}
icon={olButtonsVisibilityAircraft}
tooltip="Show aircraft units"
buttonColor={spawnCoalition === "blue" ? "#2563eb" : spawnCoalition === "neutral" ? "#9ca3af" : "#ef4444"}
buttonColor={spawnCoalition === "blue" ? colors.BLUE_COALITION : spawnCoalition === "neutral" ? colors.NEUTRAL_COALITION : colors.RED_COALITION}
/>
<OlStateButton
checked={openAccordion === CategoryGroup.HELICOPTER}
onClick={() => (openAccordion !== CategoryGroup.HELICOPTER ? setOpenAccordion(CategoryGroup.HELICOPTER) : setOpenAccordion(CategoryGroup.NONE))}
icon={olButtonsVisibilityHelicopter}
tooltip="Show helicopter units"
buttonColor={spawnCoalition === "blue" ? "#2563eb" : spawnCoalition === "neutral" ? "#9ca3af" : "#ef4444"}
buttonColor={spawnCoalition === "blue" ? colors.BLUE_COALITION : spawnCoalition === "neutral" ? colors.NEUTRAL_COALITION : colors.RED_COALITION}
/>
<OlStateButton
checked={openAccordion === CategoryGroup.AIR_DEFENCE}
onClick={() => (openAccordion !== CategoryGroup.AIR_DEFENCE ? setOpenAccordion(CategoryGroup.AIR_DEFENCE) : setOpenAccordion(CategoryGroup.NONE))}
icon={olButtonsVisibilityGroundunitSam}
tooltip="Show air defence units"
buttonColor={spawnCoalition === "blue" ? "#2563eb" : spawnCoalition === "neutral" ? "#9ca3af" : "#ef4444"}
buttonColor={spawnCoalition === "blue" ? colors.BLUE_COALITION : spawnCoalition === "neutral" ? colors.NEUTRAL_COALITION : colors.RED_COALITION}
/>
<OlStateButton
checked={openAccordion === CategoryGroup.GROUND_UNIT}
onClick={() => (openAccordion !== CategoryGroup.GROUND_UNIT ? setOpenAccordion(CategoryGroup.GROUND_UNIT) : setOpenAccordion(CategoryGroup.NONE))}
icon={olButtonsVisibilityGroundunit}
tooltip="Show ground units"
buttonColor={spawnCoalition === "blue" ? "#2563eb" : spawnCoalition === "neutral" ? "#9ca3af" : "#ef4444"}
buttonColor={spawnCoalition === "blue" ? colors.BLUE_COALITION : spawnCoalition === "neutral" ? colors.NEUTRAL_COALITION : colors.RED_COALITION}
/>
<OlStateButton
checked={openAccordion === CategoryGroup.NAVY_UNIT}
onClick={() => (openAccordion !== CategoryGroup.NAVY_UNIT ? setOpenAccordion(CategoryGroup.NAVY_UNIT) : setOpenAccordion(CategoryGroup.NONE))}
icon={olButtonsVisibilityNavyunit}
tooltip="Show navy units"
buttonColor={spawnCoalition === "blue" ? "#2563eb" : spawnCoalition === "neutral" ? "#9ca3af" : "#ef4444"}
buttonColor={spawnCoalition === "blue" ? colors.BLUE_COALITION : spawnCoalition === "neutral" ? colors.NEUTRAL_COALITION : colors.RED_COALITION}
/>
<OlStateButton checked={showMore} onClick={() => setShowMore(!showMore)} icon={faEllipsisVertical} tooltip="Show more options" />
{showMore && (

7
frontend/react/src/ui/panels/maptoolbar.tsx
View File

@@ -244,11 +244,8 @@ export function MapToolBar(props: {}) {
tooltipPosition="side"
buttonColor={CONTEXT_ACTION_COLORS[contextActionIt.getOptions().type ?? 0]}
onClick={() => {
if (contextActionIt.getTarget() === ContextActionTarget.NONE) {
contextActionIt.executeCallback(null, null);
} else {
contextActionIt !== contextAction ? getApp().getMap().setContextAction(contextActionIt) : getApp().getMap().setContextAction(null);
}
if (contextActionIt.getTarget() === ContextActionTarget.NONE) contextActionIt.executeCallback(null, null);
else contextActionIt !== contextAction ? getApp().getMap().setContextAction(contextActionIt) : getApp().getMap().setContextAction(null);
}}
/>
</div>

16
frontend/react/src/ui/panels/minimappanel.tsx
View File

@@ -4,7 +4,7 @@ import { DateAndTime, ServerStatus } from "../../interfaces";
import { getApp } from "../../olympusapp";
import { FaChevronDown, FaChevronUp } from "react-icons/fa6";
import { MapOptionsChangedEvent, ServerStatusUpdatedEvent } from "../../events";
import { MAP_OPTIONS_DEFAULTS } from "../../constants/constants";
import { colors, MAP_OPTIONS_DEFAULTS } from "../../constants/constants";
export function MiniMapPanel(props: {}) {
const [serverStatus, setServerStatus] = useState({} as ServerStatus);
@@ -41,15 +41,13 @@ export function MiniMapPanel(props: {}) {
let timeString = `${zeroAppend(hours, 2)}:${zeroAppend(minutes, 2)}:${zeroAppend(seconds, 2)}`;
// Choose frame rate string color
let frameRateColor = "#8BFF63";
if (serverStatus.frameRate < 30) frameRateColor = "#F05252";
else if (serverStatus.frameRate >= 30 && serverStatus.frameRate < 60) frameRateColor = "#FF9900";
let loadColor = colors.OLYMPUS_GREEN;
if (serverStatus.load > 1000) loadColor = colors.OLYMPUS_RED;
else if (serverStatus.load >= 100 && serverStatus.load < 1000) loadColor = colors.OLYMPUS_ORANGE;
// Choose load string color
let loadColor = "#8BFF63";
if (serverStatus.load > 1000) loadColor = "#F05252";
else if (serverStatus.load >= 100 && serverStatus.load < 1000) loadColor = "#FF9900";
let frameRateColor = colors.OLYMPUS_GREEN;
if (serverStatus.frameRate < 30) frameRateColor = colors.OLYMPUS_RED;
else if (serverStatus.frameRate >= 30 && serverStatus.frameRate < 60) frameRateColor = colors.OLYMPUS_ORANGE;
return (
<div

14
frontend/react/src/ui/serveroverlay.tsx
View File

@@ -3,6 +3,7 @@ import { ServerStatusUpdatedEvent } from "../events";
import { ServerStatus } from "../interfaces";
import { FaCheck, FaXmark } from "react-icons/fa6";
import { zeroAppend } from "../other/utils";
import { colors } from "../constants/constants";
export function ServerOverlay() {
const [serverStatus, setServerStatus] = useState({} as ServerStatus);
@@ -11,14 +12,13 @@ export function ServerOverlay() {
ServerStatusUpdatedEvent.on((status) => setServerStatus(status));
}, []);
let loadColor = "#8BFF63";
if (serverStatus.load > 1000) loadColor = "#F05252";
else if (serverStatus.load >= 100 && serverStatus.load < 1000) loadColor = "#FF9900";
let frameRateColor = "#8BFF63";
if (serverStatus.frameRate < 30) frameRateColor = "#F05252";
else if (serverStatus.frameRate >= 30 && serverStatus.frameRate < 60) frameRateColor = "#FF9900";
let loadColor = colors.OLYMPUS_GREEN;
if (serverStatus.load > 1000) loadColor = colors.OLYMPUS_RED;
else if (serverStatus.load >= 100 && serverStatus.load < 1000) loadColor = colors.OLYMPUS_ORANGE;
let frameRateColor = colors.OLYMPUS_GREEN;
if (serverStatus.frameRate < 30) frameRateColor = colors.OLYMPUS_RED;
else if (serverStatus.frameRate >= 30 && serverStatus.frameRate < 60) frameRateColor = colors.OLYMPUS_ORANGE;
const MThours = serverStatus.missionTime? serverStatus.missionTime.h: 0;
const MTminutes = serverStatus.missionTime? serverStatus.missionTime.m: 0;