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

fix(striker-ui): consolidate InnerPanel styles

Browse Source
main
Tsu-ba-me 3 years ago
parent 0e720527bd
commit f4d256323a
5 changed files with 69 additions and 92 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 36
      striker-ui/components/Hosts/AnvilHost.tsx
  2. 39
      striker-ui/components/Panels/InnerPanel.tsx
  3. 68
      striker-ui/components/Panels/InnerPanelHeader.tsx
  4. 16
      striker-ui/components/SharedStorage/SharedStorage.tsx
  5. 2
      striker-ui/components/SharedStorage/SharedStorageHost.tsx

36
striker-ui/components/Hosts/AnvilHost.tsx
Unescape View File

@ -14,7 +14,6 @@ const PREFIX = 'AnvilHost';
const classes = {
state: `${PREFIX}-state`,
bar: `${PREFIX}-bar`,
header: `${PREFIX}-header`,
label: `${PREFIX}-label`,
decoratorBox: `${PREFIX}-decoratorBox`,
};
@ -40,11 +39,6 @@ const StyledBox = styled(Box)(({ theme }) => ({
paddingRight: '.7em',
},
[`& .${classes.header}`]: {
paddingTop: '.3em',
paddingRight: '.7em',
},
[`& .${classes.label}`]: {
paddingTop: '.3em',
},
@ -92,22 +86,20 @@ const AnvilHost = ({
host ? (
<InnerPanel key={host.host_uuid}>
<InnerPanelHeader>
<Box display="flex" width="100%" className={classes.header}>
<Box flexGrow={1}>
<BodyText text={host.host_name} />
</Box>
<Box className={classes.decoratorBox}>
<Decorator colour={selectDecorator(host.state)} />
</Box>
<Box>
<BodyText
text={
host?.state?.replace(stateRegex, (c) =>
c.toUpperCase(),
) || 'Not Available'
}
/>
</Box>
<Box flexGrow={1}>
<BodyText text={host.host_name} />
</Box>
<Box className={classes.decoratorBox}>
<Decorator colour={selectDecorator(host.state)} />
</Box>
<Box>
<BodyText
text={
host?.state?.replace(stateRegex, (c) =>
c.toUpperCase(),
) || 'Not Available'
}
/>
</Box>
</InnerPanelHeader>
<Box display="flex" className={classes.state}>

39
striker-ui/components/Panels/InnerPanel.tsx
Unescape View File

@ -1,25 +1,28 @@
import { ReactNode } from 'react';
import { Box } from '@mui/material';
import { styled } from '@mui/material/styles';
import { FC } from 'react';
import { Box as MUIBox, BoxProps as MUIBoxProps } from '@mui/material';
import { BORDER_RADIUS, DIVIDER } from '../../lib/consts/DEFAULT_THEME';
const StyledBox = styled(Box)({
borderWidth: '1px',
borderRadius: BORDER_RADIUS,
borderStyle: 'solid',
borderColor: DIVIDER,
marginTop: '1.4em',
marginBottom: '1.4em',
paddingBottom: 0,
position: 'relative',
});
type InnerPanelProps = MUIBoxProps;
type Props = {
children: ReactNode;
};
const InnerPanel: FC<InnerPanelProps> = ({ sx, ...muiBoxRestProps }) => (
<MUIBox
{...{
sx: {
borderWidth: '1px',
borderRadius: BORDER_RADIUS,
borderStyle: 'solid',
borderColor: DIVIDER,
marginTop: '1.4em',
marginBottom: '1.4em',
paddingBottom: 0,
position: 'relative',
const InnerPanel = ({ children }: Props): JSX.Element => (
<StyledBox>{children}</StyledBox>
...sx,
},
...muiBoxRestProps,
}}
/>
);
export default InnerPanel;

68
striker-ui/components/Panels/InnerPanelHeader.tsx
Unescape View File

@ -1,42 +1,38 @@
import { ReactNode } from 'react';
import { Box, styled } from '@mui/material';
import { FC } from 'react';
import { Box } from '@mui/material';
import { BORDER_RADIUS, DIVIDER } from '../../lib/consts/DEFAULT_THEME';
const PREFIX = 'InnerPanelHeader';
const classes = {
header: `${PREFIX}-header`,
};
const StyledBox = styled(Box)(() => ({
position: 'relative',
padding: '0 .7em',
whiteSpace: 'pre-wrap',
[`& .${classes.header}`]: {
top: '-.3em',
left: '-.3em',
padding: '1.4em 0',
position: 'absolute',
content: '""',
borderColor: DIVIDER,
borderWidth: '1px',
borderRadius: BORDER_RADIUS,
borderStyle: 'solid',
width: '100%',
},
}));
type Props = {
children: ReactNode;
};
const InnerPanelHeader = ({ children }: Props): JSX.Element => (
<StyledBox>
<div className={classes.header} />
{children}
</StyledBox>
const InnerPanelHeader: FC = ({ children }) => (
<Box sx={{ position: 'relative', whiteSpace: 'pre-wrap' }}>
<Box
sx={{
borderColor: DIVIDER,
borderRadius: BORDER_RADIUS,
borderStyle: 'solid',
borderWidth: '1px',
display: 'flex',
left: '-.3em',
paddingBottom: '.2em',
paddingLeft: '1em',
paddingRight: '.7em',
paddingTop: '.4em',
position: 'absolute',
top: '-.3em',
width: '100%',
zIndex: '10',
'& > :first-child': {
flexGrow: 1,
},
}}
>
{children}
</Box>
<Box sx={{ paddingBottom: '.4em', width: '100%', visibility: 'hidden' }}>
{children instanceof Array ? children[0] : children}
</Box>
</Box>
);
export default InnerPanelHeader;

16
striker-ui/components/SharedStorage/SharedStorage.tsx
Unescape View File

@ -13,16 +13,10 @@ import { LARGE_MOBILE_BREAKPOINT } from '../../lib/consts/DEFAULT_THEME';
const PREFIX = 'SharedStorage';
const classes = {
header: `${PREFIX}-header`,
root: `${PREFIX}-root`,
};
const StyledDiv = styled('div')(({ theme }) => ({
[`& .${classes.header}`]: {
paddingTop: '.1em',
paddingRight: '.7em',
},
[`& .${classes.root}`]: {
overflow: 'auto',
height: '78vh',
@ -50,15 +44,7 @@ const SharedStorage = (): JSX.Element => {
(storageGroup: AnvilSharedStorageGroup): JSX.Element => (
<InnerPanel key={storageGroup.storage_group_uuid}>
<InnerPanelHeader>
<Box
display="flex"
width="100%"
className={classes.header}
>
<Box>
<BodyText text={storageGroup.storage_group_name} />
</Box>
</Box>
<BodyText text={storageGroup.storage_group_name} />
</InnerPanelHeader>
<SharedStorageHost
group={storageGroup}

2
striker-ui/components/SharedStorage/SharedStorageHost.tsx
Unescape View File

@ -16,7 +16,7 @@ const StyledDiv = styled('div')(() => ({
[`& .${classes.fs}`]: {
paddingLeft: '.7em',
paddingRight: '.7em',
paddingTop: '1.2em',
paddingTop: '1em',
},
[`& .${classes.bar}`]: {

Write Preview
Loading…
Cancel
Save