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 UI Tweaks

Browse Source 
- Various UI Tweaks
- Added hover states to many components
This commit is contained in:
Dogma 2024-04-15 22:50:18 +10:00
parent 413285f03d
commit 4b431a7f90
9 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/react/src/ui/components/olaccordion.tsx
View File

@ -24,9 +24,9 @@ export function OlAccordion(props: {
return <div className="bg-white dark:bg-transparent text-gray-900 dark:text-white">
<h3>
<button type="button" onClick={() => setOpen(!open)} className="flex items-center justify-between w-full py-2 font-medium rtl:text-right text-gray-700 border-gray-200 dark:border-gray-700 dark:text-gray-300 gap-3">
<span>{props.title}</span>
<svg data-open={open} className="w-3 h-3 -rotate-180 data-[open='false']:-rotate-90 shrink-0 transition-transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<button type="button" onClick={() => setOpen(!open)} className="flex items-center justify-between w-full py-2 rtl:text-right text-gray-700 border-gray-200 dark:border-gray-700 dark:text-white gap-3 hover:dark:underline hover:dark:underline-offset-4 hover:dark:underline-gray-700">
<span className="font-normal">{props.title}</span>
<svg data-open={open} className="w-3 h-3 dark:text-olympus-50 -rotate-180 data-[open='false']:-rotate-90 shrink-0 transition-transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5 5 1 1 5" />
</svg>
</button>

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

@ -6,7 +6,7 @@ export function OlLabelToggle(props: {
rightLabel: string,
onClick: () => void
}) {
return <button onClick={props.onClick} className="border dark:border-gray-600 relative text-sm flex flex-row flex-none my-auto contents-center justify-between w-[120px] 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">
return <button onClick={props.onClick} className="border dark:border-gray-600 relative text-sm flex flex-row flex-none contents-center justify-between w-[120px] 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-14 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 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.5 z-ui-2 transition-colors">{props.rightLabel}</span>

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 h-10 text-center text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-700 block w-full py-2.5 border dark:border-gray-700 dark:bg-olympus-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-700 dark:focus:border-blue-700" value={"x" + props.value} />
<input type="text" onChange={props.onChange} min={props.min} max={props.max} className="bg-gray-50 h-10 text-center text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-700 block w-full py-2.5 border-[2px] dark:border-gray-700 dark:bg-olympus-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-700 dark:focus:border-blue-700" value={"x" + props.value} />
<button type="button" onClick={props.onIncrease} className="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 hover:bg-gray-200 rounded-e-lg p-3 h-10 focus:ring-gray-100 dark:focus:ring-blue-500 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"/>

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

@ -15,10 +15,10 @@ export function OlSearchBar(props: {
return <div>
<label htmlFor={searchId} className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
<div className="relative">
<div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<div className="absolute inset-y-0 start-0 flex items-center ps-4 pointer-events-none">
<FontAwesomeIcon icon={faSearch} className="dark:text-gray-400" />
</div>
<input type="search" ref={inputRef} id={searchId} onChange= {props.onChange} className="block w-full p-3 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 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" placeholder="Search" required />
<input type="search" ref={inputRef} id={searchId} onChange= {props.onChange} className="block w-full p-3 mb-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-full bg-gray-50 focus:ring-blue-500 focus:border-blue-500 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" placeholder="Search" required />
<FontAwesomeIcon icon={faMultiply} className="absolute cursor-pointer end-4 bottom-4 my-auto dark:text-gray-400 text-sm" onClick={resetSearch}/>
</div>
</div>

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

@ -22,7 +22,7 @@ export function OlRoundStateButton(props: {
icon: IconProp,
onClick: () => void
}) {
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 `;
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 dark:data-[checked='true']:hover:bg-gray-200 dark:data-[checked='true']:hover:border-gray-200 dark:hover:bg-gray-800`;
return <button onClick={props.onClick} data-checked={props.checked} type="button" className={className}>
<FontAwesomeIcon className="pt-[3px]" icon={props.icon} />
@ -34,7 +34,7 @@ export function OlLockStateButton(props: {
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`;
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 dark:data-[checked='true']:hover:bg-green-400 dark:hover:bg-red-400`;
return <button onClick={props.onClick} data-checked={props.checked} type="button" className={className}>
<FontAwesomeIcon className="pt-[3px]" icon={props.checked==true ? faUnlockAlt:faLock} />

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

@ -8,10 +8,10 @@ export function OlUnitEntryList(props: {
blueprint: UnitBlueprint,
onClick: () => void
}) {
return <div onClick={props.onClick} className="relative text-sm cursor-pointer select-none flex justify-between items-center dark:text-gray-300 dark:hover:bg-white dark:hover:bg-opacity-10 px-2 py-1 rounded-sm mr-2">
return <div onClick={props.onClick} className="relative text-sm cursor-pointer select-none flex justify-between items-center dark:text-gray-300 dark:hover:bg-white dark:hover:bg-opacity-10 px-2 py-1 rounded-md mr-2">
<FontAwesomeIcon icon={props.icon} className="text-sm"></FontAwesomeIcon>
<div className="font-normal text-left flex-1 px-2">{props.blueprint.label}</div>
<div className="bg-black bg-opacity-20 dark:text-gray-400 rounded-full px-2 py-0.5 text-xs">{props.blueprint.era === "WW2" ? "WW2" : props.blueprint.era.split(" ").map((word) => {
<div className="font-bold bg-olympus-800 dark:text-olympus-50 rounded-full px-2 py-0.5 text-xs">{props.blueprint.era === "WW2" ? "WW2" : props.blueprint.era.split(" ").map((word) => {
return word.charAt(0).toLocaleUpperCase();
})}</div>
</div>

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

@ -66,7 +66,7 @@ export function SpawnMenu(props: {
<>
{(blueprint === null) && <div className="p-5">
<OlSearchBar onChange={(ev) => setFilterString(ev.target.value)}/>
<OlAccordion title={`Aircrafts`}>
<OlAccordion title={`Aircraft`}>
<div className="flex flex-col gap-1 max-h-80 overflow-y-scroll">
{Object.keys(filteredAircraft).map((key) => {
const blueprint = getApp().getAircraftDatabase().blueprints[key];

4
frontend/react/src/ui/panels/unitcontrolmenu.tsx
View File

@ -134,7 +134,7 @@ export function UnitControlMenu() {
<div className="p-5 flex flex-col gap-5">
{/* Altitude selector */
selectedCategories.every((category) => { return ['Aircraft', 'Helicopter'].includes(category) }) && <div>
<div className="flex flex-row content-center justify-between">
<div className="flex flex-row content-center items-center justify-between">
<div className="flex flex-col">
<span className="font-normal dark:text-white">Altitude</span>
<span
@ -175,7 +175,7 @@ export function UnitControlMenu() {
}
{/* Airspeed selector */}
<div>
<div className="flex flex-row content-center justify-between">
<div className="flex flex-row content-center items-center justify-between">
<div className="flex flex-col">
<span className="font-normal dark:text-white">Speed</span>
<span

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

@ -69,7 +69,7 @@ export function UnitSpawnMenu(props: {
/>
</div>
<div>
<div className="flex flex-row content-center justify-between">
<div className="flex flex-row content-center items-center justify-between">
<div className="flex flex-col">
<span className="font-normal dark:text-white">Altitude</span>
<span className="font-bold dark:text-blue-500">{`${Intl.NumberFormat("en-US").format(spawnAltitude)} FT`}</span>