Separate repeating content into component
This commit is contained in:
Ingo Oppermann
parent
b9c7bda69e
commit
23a274455d
@ -10,10 +10,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
|
||||
import Backdrop from '@mui/material/Backdrop';
|
||||
import Button from '@mui/material/Button';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Link from '@mui/material/Link';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Tab from '@mui/material/Tab';
|
||||
import Tabs from '@mui/material/Tabs';
|
||||
import TextField from '@mui/material/TextField';
|
||||
@ -33,6 +30,7 @@ import PaperFooter from '../../misc/PaperFooter';
|
||||
import ProcessControl from '../../misc/controls/Process';
|
||||
import SourceControl from '../../misc/controls/Source';
|
||||
import Services from './Services';
|
||||
import TabContent from './TabContent';
|
||||
import TabPanel from '../../misc/TabPanel';
|
||||
import TabsVerticalGrid from '../../misc/TabsVerticalGrid';
|
||||
|
||||
@ -43,17 +41,6 @@ const useStyles = makeStyles((theme) => ({
|
||||
gridContainer: {
|
||||
marginTop: '0.5em',
|
||||
},
|
||||
serviceDescription: {
|
||||
margin: '1em 0em 1em 0em',
|
||||
},
|
||||
serviceIcon: {
|
||||
fontSize: '4rem!important',
|
||||
maxHeight: 64,
|
||||
marginTop: '-0.065em',
|
||||
},
|
||||
serviceName: {
|
||||
marginTop: '-.2rem',
|
||||
},
|
||||
buttonGroup: {
|
||||
marginTop: '0.5em',
|
||||
marginBottom: '-0.5em',
|
||||
@ -261,7 +248,6 @@ export default function Add(props) {
|
||||
let serviceList = [];
|
||||
|
||||
let ServiceControl = null;
|
||||
let ServiceIcon = null;
|
||||
let serviceSkills = null;
|
||||
|
||||
let service = {};
|
||||
@ -325,8 +311,6 @@ export default function Add(props) {
|
||||
}
|
||||
|
||||
ServiceControl = service.component;
|
||||
ServiceIcon = service.icon;
|
||||
|
||||
serviceSkills = helper.conflateServiceSkills(service.requires, $skills);
|
||||
}
|
||||
|
||||
@ -393,19 +377,8 @@ export default function Add(props) {
|
||||
<Tab className="tab" label={<Trans>Encoding</Trans>} value="encoding" />
|
||||
</Tabs>
|
||||
<TabPanel value={$tab} index="general" className="panel">
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
|
||||
<ServiceIcon className={classes.serviceIcon} />
|
||||
<Stack direction="column" justifyContent="center" alignItems="flex-start" spacing={0}>
|
||||
<Typography variant="h1" className={classes.serviceName}>
|
||||
{service.name}
|
||||
</Typography>
|
||||
<Typography>v{service.version}</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={12} className={classes.serviceDescription}>
|
||||
<TabContent service={service}>
|
||||
<Grid item xs={12} sx={{ margin: '1em 0em 1em 0em' }}>
|
||||
<Typography>{service.description}</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
@ -426,35 +399,10 @@ export default function Add(props) {
|
||||
onChange={handleServiceChange}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography>
|
||||
<Trans>Maintainer:</Trans>{' '}
|
||||
<Link color="secondary" target="_blank" href={service.author.creator.link}>
|
||||
{service.author.maintainer.name}
|
||||
</Link>
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</TabContent>
|
||||
</TabPanel>
|
||||
<TabPanel value={$tab} index="process" className="panel">
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
|
||||
<ServiceIcon className={classes.serviceIcon} />
|
||||
<Stack direction="column" justifyContent="center" alignItems="flex-start" spacing={0}>
|
||||
<Typography variant="h1" className={classes.serviceName}>
|
||||
{service.name}
|
||||
</Typography>
|
||||
<Typography>v{service.version}</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<TabContent service={service}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h2">
|
||||
<Trans>Process</Trans>
|
||||
@ -463,35 +411,10 @@ export default function Add(props) {
|
||||
<Grid item xs={12}>
|
||||
<ProcessControl settings={$settings.control.process} onChange={handleControlChange('process')} />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography>
|
||||
<Trans>Maintainer:</Trans>{' '}
|
||||
<Link color="secondary" target="_blank" href={service.author.creator.link}>
|
||||
{service.author.maintainer.name}
|
||||
</Link>
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</TabContent>
|
||||
</TabPanel>
|
||||
<TabPanel value={$tab} index="source" className="panel">
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
|
||||
<ServiceIcon className={classes.serviceIcon} />
|
||||
<Stack direction="column" justifyContent="center" alignItems="flex-start" spacing={0}>
|
||||
<Typography variant="h1" className={classes.serviceName}>
|
||||
{service.name}
|
||||
</Typography>
|
||||
<Typography>v{service.version}</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<TabContent service={service}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h2">
|
||||
<Trans>Source</Trans>
|
||||
@ -504,35 +427,10 @@ export default function Add(props) {
|
||||
onChange={handleControlChange('source')}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography>
|
||||
<Trans>Maintainer:</Trans>{' '}
|
||||
<Link color="secondary" target="_blank" href={service.author.creator.link}>
|
||||
{service.author.maintainer.name}
|
||||
</Link>
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</TabContent>
|
||||
</TabPanel>
|
||||
<TabPanel value={$tab} index="encoding" className="panel">
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
|
||||
<ServiceIcon className={classes.serviceIcon} />
|
||||
<Stack direction="column" justifyContent="center" alignItems="flex-start" spacing={0}>
|
||||
<Typography variant="h1" className={classes.serviceName}>
|
||||
{service.name}
|
||||
</Typography>
|
||||
<Typography>v{service.version}</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<TabContent service={service}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h2">
|
||||
<Trans>Encoding</Trans>
|
||||
@ -575,18 +473,7 @@ export default function Add(props) {
|
||||
onChange={handleProcessing('audio')}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography>
|
||||
<Trans>Maintainer:</Trans>{' '}
|
||||
<Link color="secondary" target="_blank" href={service.author.creator.link}>
|
||||
{service.author.maintainer.name}
|
||||
</Link>
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</TabContent>
|
||||
</TabPanel>
|
||||
</TabsVerticalGrid>
|
||||
</Grid>
|
||||
|
||||
@ -8,10 +8,8 @@ import makeStyles from '@mui/styles/makeStyles';
|
||||
import Backdrop from '@mui/material/Backdrop';
|
||||
import Button from '@mui/material/Button';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Link from '@mui/material/Link';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Tab from '@mui/material/Tab';
|
||||
import Tabs from '@mui/material/Tabs';
|
||||
import TextField from '@mui/material/TextField';
|
||||
@ -34,6 +32,7 @@ import ProcessControl from '../../misc/controls/Process';
|
||||
import ProcessModal from '../../misc/modals/Process';
|
||||
import Services from './Services';
|
||||
import SourceControl from '../../misc/controls/Source';
|
||||
import TabContent from './TabContent';
|
||||
import TabPanel from '../../misc/TabPanel';
|
||||
import TabsVerticalGrid from '../../misc/TabsVerticalGrid';
|
||||
|
||||
@ -46,17 +45,6 @@ const useStyles = makeStyles((theme) => ({
|
||||
marginLeft: 10,
|
||||
wordWrap: 'anywhere',
|
||||
},
|
||||
serviceDescription: {
|
||||
margin: '1em 0em 1em 0em',
|
||||
},
|
||||
serviceIcon: {
|
||||
fontSize: '4rem!important',
|
||||
maxHeight: 64,
|
||||
marginTop: '-0.065em',
|
||||
},
|
||||
serviceName: {
|
||||
marginTop: '-.2rem',
|
||||
},
|
||||
}));
|
||||
|
||||
export default function Edit(props) {
|
||||
@ -384,7 +372,6 @@ export default function Edit(props) {
|
||||
}
|
||||
|
||||
const ServiceControl = $service.component;
|
||||
const ServiceIcon = $service.icon;
|
||||
|
||||
const title = $settings.name.length === 0 ? $service.name : $settings.name;
|
||||
|
||||
@ -409,19 +396,8 @@ export default function Edit(props) {
|
||||
<Tab className="tab" label={<Trans>Encoding</Trans>} value="encoding" />
|
||||
</Tabs>
|
||||
<TabPanel value={$tab} index="general" className="panel">
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
|
||||
<ServiceIcon className={classes.serviceIcon} />
|
||||
<Stack direction="column" justifyContent="center" alignItems="flex-start" spacing={0}>
|
||||
<Typography variant="h1" className={classes.serviceName}>
|
||||
{$service.name}
|
||||
</Typography>
|
||||
<Typography>v{$service.version}</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={12} className={classes.serviceDescription}>
|
||||
<TabContent service={$service}>
|
||||
<Grid item xs={12} sx={{ margin: '1em 0em 1em 0em' }}>
|
||||
<Typography>{$service.description}</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
@ -436,35 +412,10 @@ export default function Edit(props) {
|
||||
<Grid item xs={12}>
|
||||
<ServiceControl settings={$settings.settings} skills={$serviceSkills} metadata={$metadata} onChange={handleServiceChange} />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography>
|
||||
<Trans>Maintainer:</Trans>{' '}
|
||||
<Link color="secondary" target="_blank" href={$service.author.maintainer.link}>
|
||||
{$service.author.maintainer.name}
|
||||
</Link>
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</TabContent>
|
||||
</TabPanel>
|
||||
<TabPanel value={$tab} index="process" className="panel">
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
|
||||
<ServiceIcon className={classes.serviceIcon} />
|
||||
<Stack direction="column" justifyContent="center" alignItems="flex-start" spacing={0}>
|
||||
<Typography variant="h1" className={classes.serviceName}>
|
||||
{$service.name}
|
||||
</Typography>
|
||||
<Typography>v{$service.version}</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<TabContent service={$service}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h2">
|
||||
<Trans>Process</Trans>
|
||||
@ -501,35 +452,10 @@ export default function Edit(props) {
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography>
|
||||
<Trans>Maintainer:</Trans>{' '}
|
||||
<Link color="secondary" target="_blank" href={$service.author.maintainer.link}>
|
||||
{$service.author.maintainer.name}
|
||||
</Link>
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</TabContent>
|
||||
</TabPanel>
|
||||
<TabPanel value={$tab} index="source" className="panel">
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
|
||||
<ServiceIcon className={classes.serviceIcon} />
|
||||
<Stack direction="column" justifyContent="center" alignItems="flex-start" spacing={0}>
|
||||
<Typography variant="h1" className={classes.serviceName}>
|
||||
{$service.name}
|
||||
</Typography>
|
||||
<Typography>v{$service.version}</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<TabContent service={$service}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h2">
|
||||
<Trans>Source</Trans>
|
||||
@ -538,35 +464,10 @@ export default function Edit(props) {
|
||||
<Grid item xs={12}>
|
||||
<SourceControl settings={$settings.control.source} sources={$localSources} onChange={handleControlChange('source')} />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography>
|
||||
<Trans>Maintainer:</Trans>{' '}
|
||||
<Link color="secondary" target="_blank" href={$service.author.maintainer.link}>
|
||||
{$service.author.maintainer.name}
|
||||
</Link>
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</TabContent>
|
||||
</TabPanel>
|
||||
<TabPanel value={$tab} index="encoding" className="panel">
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
|
||||
<ServiceIcon className={classes.serviceIcon} />
|
||||
<Stack direction="column" justifyContent="center" alignItems="flex-start" spacing={0}>
|
||||
<Typography variant="h1" className={classes.serviceName}>
|
||||
{$service.name}
|
||||
</Typography>
|
||||
<Typography>v{$service.version}</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<TabContent service={$service}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h2">
|
||||
<Trans>Encoding</Trans>
|
||||
@ -611,18 +512,7 @@ export default function Edit(props) {
|
||||
onChange={handleEncoding('audio')}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography>
|
||||
<Trans>Maintainer:</Trans>{' '}
|
||||
<Link color="secondary" target="_blank" href={$service.author.maintainer.link}>
|
||||
{$service.author.maintainer.name}
|
||||
</Link>
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</TabContent>
|
||||
</TabPanel>
|
||||
</TabsVerticalGrid>
|
||||
</Grid>
|
||||
|
||||
65
src/views/Publication/TabContent.js
Normal file
65
src/views/Publication/TabContent.js
Normal file
@ -0,0 +1,65 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Trans } from '@lingui/macro';
|
||||
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Link from '@mui/material/Link';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
serviceIcon: {
|
||||
fontSize: '4rem!important',
|
||||
maxHeight: 64,
|
||||
marginTop: '-0.065em',
|
||||
},
|
||||
serviceName: {
|
||||
marginTop: '-.2rem',
|
||||
},
|
||||
}));
|
||||
|
||||
export default function TabContent(props) {
|
||||
const classes = useStyles();
|
||||
|
||||
return (
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
|
||||
<props.service.icon className={classes.serviceIcon} />
|
||||
<Stack direction="column" justifyContent="center" alignItems="flex-start" spacing={0}>
|
||||
<Typography variant="h1" className={classes.serviceName}>
|
||||
{props.service.name}
|
||||
</Typography>
|
||||
<Typography>v{props.service.version}</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
{props.children}
|
||||
<Grid item xs={12}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography>
|
||||
<Trans>Maintainer:</Trans>{' '}
|
||||
<Link color="secondary" target="_blank" href={props.service.author.creator.link}>
|
||||
{props.service.author.maintainer.name}
|
||||
</Link>
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
TabContent.defaultProps = {
|
||||
service: null,
|
||||
};
|
||||
|
||||
TabContent.propTypes = {
|
||||
service: PropTypes.object.isRequired,
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user