update ProjectPage Layout

This commit is contained in:
Ruidy Nemausat 2020-04-03 14:23:37 +02:00
parent 084f666ff1
commit 95fa11e605
2 changed files with 21 additions and 12 deletions

View file

@ -28,7 +28,6 @@ const useStyles = makeStyles((theme: Theme) =>
export const FileCollection: FC<IProps> = ({ files, filterText }) => { export const FileCollection: FC<IProps> = ({ files, filterText }) => {
const classes = useStyles(); const classes = useStyles();
return ( return (
<List className={classes.root}> <List className={classes.root}>
{files.length === 0 ? ( {files.length === 0 ? (
<FileEntry /> <FileEntry />
@ -42,7 +41,6 @@ export const FileCollection: FC<IProps> = ({ files, filterText }) => {
.map((file: AppFile) => <FileEntry file={file} key={file.id} />) .map((file: AppFile) => <FileEntry file={file} key={file.id} />)
)} )}
</List> </List>
); );
}; };

View file

@ -3,16 +3,22 @@ import ProjectVM from "../VM/ProjectVM";
import { Header } from "../components/Header"; import { Header } from "../components/Header";
import { AvatarList } from "../components/AvatarList"; import { AvatarList } from "../components/AvatarList";
import { ProgressBar } from "../components/ProgressBar"; import { ProgressBar } from "../components/ProgressBar";
import { TabRouter } from "../components/TabRouter";
import { FloatingButton } from "../components/FloatingButton"; import { FloatingButton } from "../components/FloatingButton";
import { UsersModal } from "../components/UsersModal"; import { UsersModal } from "../components/UsersModal";
import { Container, Grid } from "@material-ui/core"; import { Container, Grid, makeStyles, Theme } from "@material-ui/core";
import { ProjectTabPanel } from "../components/ProjectTabPanel"; import { ProjectTabPanel } from "../components/ProjectTabPanel";
interface IProps { interface IProps {
viewModel: ProjectVM; viewModel: ProjectVM;
} }
const useStyles = makeStyles((theme: Theme) => ({
root: {
margin: theme.spacing(1),
flexGrow: 1
}
}));
export const ProjectPage: FC<IProps> = ({ viewModel }) => { export const ProjectPage: FC<IProps> = ({ viewModel }) => {
const { const {
// id, // id,
@ -33,9 +39,13 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
const tabNames: string[] = ["Tickets", "Files"]; //, "Activity"]; const tabNames: string[] = ["Tickets", "Files"]; //, "Activity"];
const [showModal, setShowModal] = useState<boolean>(false); const [showModal, setShowModal] = useState<boolean>(false);
const classes = useStyles();
return ( return (
<Container maxWidth="md"> <Container maxWidth="md">
<Header title={title} description={description} /> <div className={classes.root}>
<Header title={title} description={description} />
</div>
<UsersModal <UsersModal
show={showModal} show={showModal}
users={users} users={users}
@ -57,13 +67,14 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
</Grid> </Grid>
</Grid> </Grid>
<ProgressBar <div className={classes.root}>
value={progression} <ProgressBar
tasksDone={ticketsDone} value={progression}
tasksTotalCount={ticketsTotalCount} tasksDone={ticketsDone}
remainingDays={remainingDays} tasksTotalCount={ticketsTotalCount}
/> remainingDays={remainingDays}
/>
</div>
<ProjectTabPanel <ProjectTabPanel
tabNames={tabNames} tabNames={tabNames}
tickets={tickets} tickets={tickets}