seasharp/anvil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(striker-ui): make floating NIC more visible

Browse Source
This commit is contained in:
Tsu-ba-me 2022-07-20 19:39:38 -04:00
parent 34c7b09ea9
commit cf52423ead
2 changed files with 52 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
striker-ui/components/BriefNetworkInterface.tsx
View File

@ -7,12 +7,13 @@ import {
} from '@mui/material';
import { Close as MUICloseIcon } from '@mui/icons-material';
import { GREY } from '../lib/consts/DEFAULT_THEME';
import { BLACK, BORDER_RADIUS, GREY } from '../lib/consts/DEFAULT_THEME';
import Decorator from './Decorator';
import { BodyText } from './Text';
type BriefNetworkInterfaceOptionalProps = {
isFloating?: boolean;
onClose?: MUIIconButtonProps['onClick'];
};
@ -20,6 +21,7 @@ const BRIEF_NETWORK_INTERFACE_DEFAULT_PROPS: Required<
Omit<BriefNetworkInterfaceOptionalProps, 'onClose'>
> &
Pick<BriefNetworkInterfaceOptionalProps, 'onClose'> = {
isFloating: false,
onClose: undefined,
};
@ -29,40 +31,55 @@ const BriefNetworkInterface: FC<
networkInterface: NetworkInterfaceOverviewMetadata;
}
> = ({
isFloating,
networkInterface: { networkInterfaceName, networkInterfaceState },
onClose,
sx: rootSx,
...restRootProps
}) => (
<MUIBox
{...{
sx: {
display: 'flex',
flexDirection: 'row',
}) => {
const draggingSx: MUIBoxProps['sx'] = isFloating
? {
borderColor: GREY,
borderRadius: BORDER_RADIUS,
borderStyle: 'solid',
borderWidth: '1px',
backgroundColor: BLACK,
padding: '.6em 1.2em',
}
: {};
'& > :not(:first-child)': {
alignSelf: 'center',
marginLeft: '.5em',
return (
<MUIBox
{...{
sx: {
display: 'flex',
flexDirection: 'row',
'& > :not(:first-child)': {
alignSelf: 'center',
marginLeft: '.5em',
},
...draggingSx,
...rootSx,
},
...rootSx,
},
...restRootProps,
}}
>
<Decorator
colour={networkInterfaceState === 'up' ? 'ok' : 'off'}
sx={{ height: 'auto' }}
/>
<BodyText text={networkInterfaceName} />
{onClose && (
<MUIIconButton onClick={onClose} size="small" sx={{ color: GREY }}>
<MUICloseIcon />
</MUIIconButton>
)}
</MUIBox>
);
...restRootProps,
}}
>
<Decorator
colour={networkInterfaceState === 'up' ? 'ok' : 'off'}
sx={{ height: 'auto' }}
/>
<BodyText text={networkInterfaceName} />
{onClose && (
<MUIIconButton onClick={onClose} size="small" sx={{ color: GREY }}>
<MUICloseIcon />
</MUIIconButton>
)}
</MUIBox>
);
};
BriefNetworkInterface.defaultProps = BRIEF_NETWORK_INTERFACE_DEFAULT_PROPS;

10
striker-ui/components/NetworkInitForm.tsx
View File

@ -287,6 +287,7 @@ const NetworkInitForm: FC = () => {
interfaces: (NetworkInterfaceOverviewMetadata | undefined)[],
interfaceIndex: number,
) => MUIBoxProps['onMouseUp'];
let dragAreaDraggingSx: MUIBoxProps['sx'] = {};
let floatingNetworkInterface: JSX.Element = <></>;
let handleDragAreaMouseLeave: MUIBoxProps['onMouseLeave'];
let handleDragAreaMouseMove: MUIBoxProps['onMouseMove'];
@ -316,14 +317,17 @@ const NetworkInitForm: FC = () => {
networkInterfaceInputMap[networkInterfaceUUID].isApplied = true;
};
dragAreaDraggingSx = { cursor: 'grabbing' };
floatingNetworkInterface = (
<BriefNetworkInterface
isFloating
networkInterface={networkInterfaceHeld}
sx={{
left: `calc(${dragMousePosition.x}px + .4em)`,
position: 'absolute',
top: `calc(${dragMousePosition.y}px - 1em)`,
zIndex: 10,
top: `calc(${dragMousePosition.y}px - 1.6em)`,
zIndex: 20,
}}
/>
);
@ -382,7 +386,7 @@ const NetworkInitForm: FC = () => {
onMouseLeave={handleDragAreaMouseLeave}
onMouseMove={handleDragAreaMouseMove}
onMouseUp={handleDragAreaMouseUp}
sx={{ position: 'relative' }}
sx={{ position: 'relative', ...dragAreaDraggingSx }}
>
{floatingNetworkInterface}
<MUIBox