mirror of
https://github.com/wanderer-industries/wanderer
synced 2025-12-12 02:35:42 +00:00
System comments & refactoring (#253)
* feat(Map): Add widget for comments. Refactor design of Signatures widget. Refactor a lot of code. Add Transition component in ui-kit. Sync versions of react. --------- Co-authored-by: Dmitry Popov <dmitriypopovsamara@gmail.com> Co-authored-by: achichenkov <aleksei.chichenkov@telleqt.ai>
This commit is contained in:
Aleksei Chichenkov
committed by
GitHub
GitHub
parent
aec0a75e87
commit
b2ae5a33ae
@@ -1,15 +1,21 @@
|
||||
import React from 'react';
|
||||
import { SystemView, WdCheckbox, WdImgButton, TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
|
||||
import { useRef } from 'react';
|
||||
import {
|
||||
InfoDrawer,
|
||||
LayoutEventBlocker,
|
||||
SystemView,
|
||||
TooltipPosition,
|
||||
WdCheckbox,
|
||||
WdImgButton,
|
||||
} from '@/hooks/Mapper/components/ui-kit';
|
||||
import { PrimeIcons } from 'primereact/api';
|
||||
import { CheckboxChangeEvent } from 'primereact/checkbox';
|
||||
import { InfoDrawer, LayoutEventBlocker } from '@/hooks/Mapper/components/ui-kit';
|
||||
import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
|
||||
import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
|
||||
import { COMPACT_MAX_WIDTH } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
|
||||
import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
|
||||
|
||||
export type HeaderProps = {
|
||||
systemId: string;
|
||||
isNotSelectedSystem: boolean;
|
||||
sigCount: number;
|
||||
isCompact: boolean;
|
||||
lazyDeleteValue: boolean;
|
||||
onLazyDeleteChange: (checked: boolean) => void;
|
||||
pendingCount: number;
|
||||
@@ -18,18 +24,25 @@ export type HeaderProps = {
|
||||
onSettingsClick: () => void;
|
||||
};
|
||||
|
||||
function HeaderImpl({
|
||||
systemId,
|
||||
isNotSelectedSystem,
|
||||
export const SystemSignaturesHeader = ({
|
||||
sigCount,
|
||||
isCompact,
|
||||
lazyDeleteValue,
|
||||
onLazyDeleteChange,
|
||||
pendingCount,
|
||||
pendingTimeRemaining,
|
||||
onUndoClick,
|
||||
onSettingsClick,
|
||||
}: HeaderProps) {
|
||||
}: HeaderProps) => {
|
||||
const {
|
||||
data: { selectedSystems },
|
||||
} = useMapRootState();
|
||||
|
||||
const [systemId] = selectedSystems;
|
||||
const isNotSelectedSystem = selectedSystems.length !== 1;
|
||||
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const isCompact = useMaxWidth(containerRef, COMPACT_MAX_WIDTH);
|
||||
|
||||
// Format time remaining as seconds
|
||||
const formatTimeRemaining = () => {
|
||||
if (!pendingTimeRemaining) return '';
|
||||
@@ -38,71 +51,68 @@ function HeaderImpl({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex justify-between items-center text-xs w-full h-full">
|
||||
<div className="flex justify-between items-center gap-1">
|
||||
{!isCompact && (
|
||||
<div className="flex whitespace-nowrap text-ellipsis overflow-hidden text-stone-400">
|
||||
{sigCount ? `[${sigCount}] ` : ''}Signatures {isNotSelectedSystem ? '' : 'in'}
|
||||
</div>
|
||||
)}
|
||||
{!isNotSelectedSystem && <SystemView systemId={systemId} className="select-none text-center" hideRegion />}
|
||||
</div>
|
||||
<div ref={containerRef} className="w-full">
|
||||
<div className="flex justify-between items-center text-xs w-full h-full">
|
||||
<div className="flex justify-between items-center gap-1">
|
||||
{!isCompact && (
|
||||
<div className="flex whitespace-nowrap text-ellipsis overflow-hidden text-stone-400">
|
||||
{sigCount ? `[${sigCount}] ` : ''}Signatures {isNotSelectedSystem ? '' : 'in'}
|
||||
</div>
|
||||
)}
|
||||
{!isNotSelectedSystem && <SystemView systemId={systemId} className="select-none text-center" hideRegion />}
|
||||
</div>
|
||||
|
||||
<LayoutEventBlocker className="flex gap-2.5">
|
||||
<WdTooltipWrapper content="Enable Lazy delete">
|
||||
<WdCheckbox
|
||||
size="xs"
|
||||
labelSide="left"
|
||||
label={isCompact ? '' : 'Lazy delete'}
|
||||
value={lazyDeleteValue}
|
||||
classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300 whitespace-nowrap text-ellipsis overflow-hidden"
|
||||
onChange={(event: CheckboxChangeEvent) => onLazyDeleteChange(!!event.checked)}
|
||||
/>
|
||||
</WdTooltipWrapper>
|
||||
<LayoutEventBlocker className="flex gap-2.5">
|
||||
<WdTooltipWrapper content="Enable Lazy delete">
|
||||
<WdCheckbox
|
||||
size="xs"
|
||||
labelSide="left"
|
||||
label={isCompact ? '' : 'Lazy delete'}
|
||||
value={lazyDeleteValue}
|
||||
classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300 whitespace-nowrap text-ellipsis overflow-hidden"
|
||||
onChange={(event: CheckboxChangeEvent) => onLazyDeleteChange(!!event.checked)}
|
||||
/>
|
||||
</WdTooltipWrapper>
|
||||
|
||||
{pendingCount > 0 && (
|
||||
<WdImgButton
|
||||
className={PrimeIcons.UNDO}
|
||||
style={{ color: 'red' }}
|
||||
tooltip={{ content: `Undo pending changes (${pendingCount})${formatTimeRemaining()}` }}
|
||||
onClick={onUndoClick}
|
||||
/>
|
||||
)}
|
||||
|
||||
{pendingCount > 0 && (
|
||||
<WdImgButton
|
||||
className={PrimeIcons.UNDO}
|
||||
style={{ color: 'red' }}
|
||||
className={PrimeIcons.QUESTION_CIRCLE}
|
||||
tooltip={{
|
||||
content: `Undo pending changes (${pendingCount})${formatTimeRemaining()}`,
|
||||
position: TooltipPosition.top,
|
||||
position: TooltipPosition.left,
|
||||
content: (
|
||||
<div className="flex flex-col gap-1">
|
||||
<InfoDrawer title={<b className="text-slate-50">How to add/update signature?</b>}>
|
||||
In game you need to select one or more signatures <br /> in the list in{' '}
|
||||
<b className="text-sky-500">Probe scanner</b>. <br /> Use next hotkeys:
|
||||
<br />
|
||||
<b className="text-sky-500">Shift + LMB</b> or <b className="text-sky-500">Ctrl + LMB</b>
|
||||
<br /> or <b className="text-sky-500">Ctrl + A</b> for select all
|
||||
<br /> and then use <b className="text-sky-500">Ctrl + C</b>, after you need to go <br />
|
||||
here, select Solar system and paste it with <b className="text-sky-500">Ctrl + V</b>
|
||||
</InfoDrawer>
|
||||
<InfoDrawer title={<b className="text-slate-50">How to select?</b>}>
|
||||
For selecting any signature, click on it <br /> with hotkeys{' '}
|
||||
<b className="text-sky-500">Shift + LMB</b> or <b className="text-sky-500">Ctrl + LMB</b>
|
||||
</InfoDrawer>
|
||||
<InfoDrawer title={<b className="text-slate-50">How to delete?</b>}>
|
||||
To delete any signature, first select it <br /> and then press <b className="text-sky-500">Del</b>
|
||||
</InfoDrawer>
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
onClick={onUndoClick}
|
||||
/>
|
||||
)}
|
||||
|
||||
<WdImgButton
|
||||
className={PrimeIcons.QUESTION_CIRCLE}
|
||||
tooltip={{
|
||||
position: TooltipPosition.left,
|
||||
content: (
|
||||
<div className="flex flex-col gap-1">
|
||||
<InfoDrawer title={<b className="text-slate-50">How to add/update signature?</b>}>
|
||||
In game you need to select one or more signatures <br /> in the list in{' '}
|
||||
<b className="text-sky-500">Probe scanner</b>. <br /> Use next hotkeys:
|
||||
<br />
|
||||
<b className="text-sky-500">Shift + LMB</b> or <b className="text-sky-500">Ctrl + LMB</b>
|
||||
<br /> or <b className="text-sky-500">Ctrl + A</b> for select all
|
||||
<br /> and then use <b className="text-sky-500">Ctrl + C</b>, after you need to go <br />
|
||||
here, select Solar system and paste it with <b className="text-sky-500">Ctrl + V</b>
|
||||
</InfoDrawer>
|
||||
<InfoDrawer title={<b className="text-slate-50">How to select?</b>}>
|
||||
For selecting any signature, click on it <br /> with hotkeys{' '}
|
||||
<b className="text-sky-500">Shift + LMB</b> or <b className="text-sky-500">Ctrl + LMB</b>
|
||||
</InfoDrawer>
|
||||
<InfoDrawer title={<b className="text-slate-50">How to delete?</b>}>
|
||||
To delete any signature, first select it <br /> and then press <b className="text-sky-500">Del</b>
|
||||
</InfoDrawer>
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
<WdImgButton className={PrimeIcons.SLIDERS_H} onClick={onSettingsClick} />
|
||||
</LayoutEventBlocker>
|
||||
<WdImgButton className={PrimeIcons.SLIDERS_H} onClick={onSettingsClick} />
|
||||
</LayoutEventBlocker>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const SystemSignaturesHeader = React.memo(HeaderImpl);
|
||||
};
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export * from './SystemSignatureHeader';
|
||||
Reference in New Issue
Block a user