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

Updated Heading Round Buttons

Browse Source 
- Updated iconography on some Round Buttons (coalition toggle)
- Added new type: LockStateButton
- New LockStateButton is setup to automatically switch icon whether it's checked or not at the component level and no longer expects icon to be provided.
This commit is contained in:
Dogma 2024-04-15 21:13:26 +10:00
parent 58b5eacdb7
commit 15bec68fc4
2 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import { IconProp } from "@fortawesome/fontawesome-svg-core";
import { faLock, faLockOpen, faUnlock, faUnlockAlt } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import React from "react"
@ -21,9 +22,21 @@ export function OlRoundStateButton(props: {
icon: IconProp,
onClick: () => void
}) {
const className = (props.className ?? '') + ` h-8 w-8 flex-none m-auto border border-gray-900 font-medium rounded-full text-sm dark:bg-[transparent] dark:data-[checked='true']:bg-white dark:text-white dark:data-[checked='true']:text-gray-900 dark:border-gray-600 `;
const className = (props.className ?? '') + ` h-8 w-8 flex-none m-auto border-2 border-gray-900 font-medium rounded-full text-sm dark:bg-[transparent] dark:data-[checked='true']:bg-white dark:text-gray-400 dark:data-[checked='true']:text-gray-900 dark:data-[checked='true']:border-white dark:border-gray-400 `;
return <button onClick={props.onClick} data-checked={props.checked} type="button" className={className}>
<FontAwesomeIcon icon={props.icon} />
<FontAwesomeIcon className="pt-[3px]" icon={props.icon} />
</button>
}
export function OlLockStateButton(props: {
className?: string,
checked: boolean,
onClick: () => void
}) {
const className = (props.className ?? '') + ` h-8 w-8 flex-none m-auto border-gray-900 font-medium rounded-full text-sm dark:bg-red-500 dark:data-[checked='true']:bg-green-500 dark:text-olympus-900 dark:data-[checked='true']:text-green-900`;
return <button onClick={props.onClick} data-checked={props.checked} type="button" className={className}>
<FontAwesomeIcon className="pt-[3px]" icon={props.checked==true ? faUnlockAlt:faLock} />
</button>
}

12
frontend/react/src/ui/panels/header.tsx
View File

@ -1,6 +1,6 @@
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 { OlRoundStateButton, OlStateButton, OlLockStateButton } from '../components/olstatebutton';
import { faLock, faSkull, faCamera, faFlag } from '@fortawesome/free-solid-svg-icons';
import { EventsConsumer } from '../../eventscontext';
import { StateConsumer } from '../../statecontext';
import { OlDropdownItem, OlDropdown } from '../components/oldropdown';
@ -19,7 +19,7 @@ export function Header() {
<img src="images/icon.png" className='h-10 w-10 p-0 rounded-md mr-2 cursor-pointer'></img>
</div>
<div className="ml-auto">
<OlRoundStateButton icon={faLock} checked={false} onClick={() => {}}/>
<OlLockStateButton checked={true} onClick={() => {}}/>
</div>
<div className="flex flex-row h-fit items-center justify-start gap-1">
{
@ -56,15 +56,15 @@ export function Header() {
<OlRoundStateButton
onClick={() => getApp().getMap().setHiddenType( 'blue', !appState.mapHiddenTypes['blue'] )}
checked={!appState.mapHiddenTypes['blue']}
icon={faShield} className={"!text-blue-500"} />
icon={faFlag} className={"!text-blue-500"} />
<OlRoundStateButton
onClick={() => getApp().getMap().setHiddenType('red', !appState.mapHiddenTypes['red'] )}
checked={!appState.mapHiddenTypes['red']}
icon={faShield} className={"!text-red-500"} />
icon={faFlag} className={"!text-red-500"} />
<OlRoundStateButton
onClick={() => getApp().getMap().setHiddenType('neutral', !appState.mapHiddenTypes['neutral'] )}
checked={!appState.mapHiddenTypes['neutral']}
icon={faShield} className={"!text-gray-500"} />
icon={faFlag} className={"!text-gray-500"} />
</div>
<OlLabelToggle toggled={false} leftLabel={"Live"} rightLabel={"Map"} onClick={() => {}}></OlLabelToggle>
<OlStateButton checked={false} icon={faCamera} onClick={() => {}} />