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

Various Small UI Tweaks

Browse Source 
- Adjustments to a number of UI components, including Label Toggle, Spawn menu, Dropdowns etc
This commit is contained in:
Dogma
2024-04-14 22:36:20 +10:00
parent 32f5f01f5c
commit e040ecfce2
5 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/react/src/ui/components/olcoalitiontoggle.tsx
View File

@@ -15,7 +15,7 @@ export function OlCoalitionToggle(props: {
"data-[coalition='red']:after:translate-x-full rtl:data-[coalition='red']:after:-translate-x-full data-[coalition='red']:after:border-white " +
" data-[coalition='blue']:bg-blue-600 data-[coalition='neutral']:bg-gray-400 data-[coalition='red']:bg-red-500"}>
</div>
<span className="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300 data-[flash='true']:after:animate-pulse">
<span className="ms-3 text-gray-900 dark:text-white data-[flash='true']:after:animate-pulse">
{props.coalition? `Coalition (${props.coalition[0].toLocaleUpperCase() + props.coalition.substring(1)})`: "Different values"}
</span>
</div>

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

@@ -74,7 +74,7 @@ export function OlDropdown(props: {
})
return <div className={(props.className ?? "") + " relative"}>
<button ref={buttonRef} onClick={() => { setOpen(!open) }} className={"w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-2 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center justify-between border dark:border-gray-600 dark:text-gray-100 dark:bg-gray-700 dark:hover:bg-gray-800 dark:focus:ring-blue-800"} type="button">
<button ref={buttonRef} onClick={() => { setOpen(!open) }} className={"w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-2 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center justify-between border dark:border-gray-600 dark:text-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-blue-800"} type="button">
{props.leftIcon && <FontAwesomeIcon icon={props.leftIcon} className="mr-3" />}
<span className="text-nowrap text-ellipsis overflow-hidden">
{props.label}

4
frontend/react/src/ui/components/ollabeltoggle.tsx
View File

@@ -6,9 +6,9 @@ export function OlLabelToggle(props: {
rightLabel: string,
onClick: () => void
}) {
return <button onClick={props.onClick} className=" relative flex flex-row flex-none my-auto contents-center justify-between w-32 h-10 border dark:border-transparent dark:bg-[#2A3949] rounded-lg py-[5px] px-1 select-none cursor-pointer focus:ring-2 focus:outline-none focus:ring-blue-300 dark:hover:bg-gray-800 dark:focus:ring-blue-800">
return <button onClick={props.onClick} className=" relative flex flex-row flex-none my-auto contents-center justify-between w-32 h-10 border dark:border-transparent dark:bg-gray-700 rounded-md py-[5px] px-1 select-none cursor-pointer focus:ring-2 focus:outline-none focus:ring-blue-300 dark:hover:bg-gray-600 dark:focus:ring-blue-800">
<span data-flash={props.toggled === undefined} data-toggled={props.toggled ?? false} className="data-[flash='true']:animate-pulse absolute my-auto h-[28px] w-[54px] bg-blue-500 rounded-md data-[toggled='true']:translate-x-16 transition-transform"></span>
<span data-active={!(props.toggled ?? false)} className="my-auto dark:data-[active='true']:text-white font-normal dark:data-[active='false']:text-gray-400 pl-3 z-ui-2 transition-colors">{props.leftLabel}</span>
<span data-active={!(props.toggled ?? false)} className="my-auto dark:data-[active='true']:text-white font-normal dark:data-[active='false']:text-gray-400 dark:data-[active='false']:text-gray-400 pl-3 z-ui-2 transition-colors">{props.leftLabel}</span>
<span data-active={props.toggled ?? false} className="my-auto dark:data-[active='true']:text-white font-normal dark:data-[active='false']:text-gray-400 pr-3 z-ui-2 transition-colors">{props.rightLabel}</span>
</button>
}

2
frontend/react/src/ui/components/olnumberinput.tsx
View File

@@ -15,7 +15,7 @@ export function OlNumberInput(props: {
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 1h16"/>
</svg>
</button>
<input type="text" onChange={props.onChange} min={props.min} max={props.max} className="bg-gray-50 border-x-0 border-gray-300 h-10 text-center text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 block w-full py-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" value={props.value} />
<input type="text" onChange={props.onChange} min={props.min} max={props.max} className="bg-gray-50 border border-gray-300 h-10 text-center text-gray-900 text-sm font-bold focus:ring-blue-500 focus:border-blue-500 block w-full py-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" value={props.value} />
<button type="button" onClick={props.onIncrease} className="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 border border-gray-300 rounded-e-lg p-3 h-10 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none">
<svg className="w-3 h-3 text-gray-900 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 1v16M1 9h16"/>

2
frontend/react/src/ui/panels/unitspawnmenu.tsx
View File

@@ -112,7 +112,7 @@ export function UnitSpawnMenu(props: {
<div className="dark:bg-[#243141] h-fit p-4 flex flex-col gap-1">
{spawnLoadout && spawnLoadout.items.map((item) => {
return <div className="flex gap-2 content-center">
<div className="my-auto text-sm rounded-full text-gray-500 dark:bg-[#17212D] px-1.5 py-0.5 text-center">{item.quantity}</div>
<div className="my-auto font-bold text-sm rounded-full text-gray-500 dark:bg-[#17212D] w-6 py-0.5 text-center">{item.quantity}</div>
<div className="my-auto text-sm dark:text-gray-300">{item.name}</div>
</div>
})}