lee/wanderer
1
0
Fork 0
mirror of https://github.com/wanderer-industries/wanderer synced 2025-12-11 18:26:04 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat: autosize local character tooltip and increase hover target (#165)

Browse Source
This commit is contained in:
guarzo
2025-02-12 14:11:40 -07:00
committed by GitHub
parent b2198e469e
commit cf7069b3b2
3 changed files with 37 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemLocalCounter.module.scss
View File

@@ -4,6 +4,12 @@
z-index: 3; z-index: 3;
} }
.hoverTarget {
padding: 0.5rem;
margin: -0.5rem;
display: inline-block;
}
.localCounter { .localCounter {
mix-blend-mode: screen; mix-blend-mode: screen;
display: flex; display: flex;

32
assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemLocalCounter.tsx
View File

@@ -24,13 +24,12 @@ export const LocalCounter = ({ localCounterCharacters, hasUserCharacters, showIc
return ( return (
<div <div
style={{ style={{
width: '300px', width: '100%',
overflowX: 'hidden', minWidth: '300px',
overflowY: 'auto', overflow: 'hidden',
height: '300px',
}} }}
> >
<LocalCharactersList items={localCounterCharacters} itemTemplate={itemTemplate} itemSize={26} /> <LocalCharactersList items={localCounterCharacters} itemTemplate={itemTemplate} itemSize={26} autoSize={true} />
</div> </div>
); );
}, [localCounterCharacters, itemTemplate]); }, [localCounterCharacters, itemTemplate]);
@@ -45,19 +44,16 @@ export const LocalCounter = ({ localCounterCharacters, hasUserCharacters, showIc
[classes.Pathfinder]: theme === AvailableThemes.pathfinder, [classes.Pathfinder]: theme === AvailableThemes.pathfinder,
})} })}
> >
<WdTooltipWrapper <WdTooltipWrapper content={pilotTooltipContent} position={TooltipPosition.right} offset={0} interactive={true}>
// @ts-ignore <div className={clsx(classes.hoverTarget)}>
content={pilotTooltipContent} <div
position={TooltipPosition.right} className={clsx(classes.localCounter, {
offset={0} [classes.hasUserCharacters]: hasUserCharacters,
> })}
<div >
className={clsx(classes.localCounter, { {showIcon && <i className="pi pi-users" />}
[classes.hasUserCharacters]: hasUserCharacters, <span>{localCounterCharacters.length}</span>
})} </div>
>
{showIcon && <i className="pi pi-users" />}
<span>{localCounterCharacters.length}</span>
</div> </div>
</WdTooltipWrapper> </WdTooltipWrapper>
</div> </div>

18
assets/js/hooks/Mapper/components/mapInterface/widgets/LocalCharacters/components/LocalCharactersList.tsx
View File

@@ -3,11 +3,13 @@ import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virt
import clsx from 'clsx'; import clsx from 'clsx';
import { CharItemProps } from './types'; import { CharItemProps } from './types';
type LocalCharactersListProps = { export type LocalCharactersListProps = {
items: Array<CharItemProps>; items: Array<CharItemProps>;
itemSize: number; itemSize: number;
itemTemplate: (char: CharItemProps, options: VirtualScrollerTemplateOptions) => React.ReactNode; itemTemplate: (char: CharItemProps, options: VirtualScrollerTemplateOptions) => React.ReactNode;
containerClassName?: string; containerClassName?: string;
style?: React.CSSProperties;
autoSize?: boolean;
}; };
export const LocalCharactersList = ({ export const LocalCharactersList = ({
@@ -15,7 +17,19 @@ export const LocalCharactersList = ({
itemSize, itemSize,
itemTemplate, itemTemplate,
containerClassName, containerClassName,
style = {},
autoSize = false,
}: LocalCharactersListProps) => { }: LocalCharactersListProps) => {
const computedHeight = autoSize ? `${Math.max(items.length, 1) * itemSize}px` : style.height || '100%';
const localStyle: React.CSSProperties = {
...style,
height: computedHeight,
width: '100%',
boxSizing: 'border-box',
overflowX: 'hidden',
};
return ( return (
<VirtualScroller <VirtualScroller
items={items} items={items}
@@ -23,6 +37,8 @@ export const LocalCharactersList = ({
orientation="vertical" orientation="vertical"
className={clsx('w-full h-full', containerClassName)} className={clsx('w-full h-full', containerClassName)}
itemTemplate={itemTemplate} itemTemplate={itemTemplate}
autoSize={autoSize}
style={localStyle}
/> />
); );
}; };