ruidy/ticket_manager
1
0
Fork 0
mirror of https://github.com/rjNemo/ticket_manager synced 2026-06-12 11:46:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Updated ProjectTabPanel UI

Browse source
This commit is contained in:
Ruidy Nemausat 2020-04-17 10:12:44 +02:00
parent 19f896f296
commit 1ad15ed05c
1 changed files with 14 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
client/src/components/ProjectTabPanel.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from "react"; import React, { FC, useState, ReactNode } from "react";
import SwipeableViews from "react-swipeable-views"; import SwipeableViews from "react-swipeable-views";
import { makeStyles, Theme, useTheme } from "@material-ui/core/styles"; import { makeStyles, Theme, useTheme } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar"; import AppBar from "@material-ui/core/AppBar";
@ -13,7 +13,7 @@ import { TicketList } from "./TicketList";
import { AppFile } from "../types/AppFile"; import { AppFile } from "../types/AppFile";
interface TabProps { interface TabProps {
children?: React.ReactNode; children?: ReactNode;
dir?: string; dir?: string;
index: any; index: any;
value: any; value: any;
@ -39,15 +39,15 @@ const TabPanel: FC<TabProps> = (props: TabProps) => {
const a11yProps = (index: any) => { const a11yProps = (index: any) => {
return { return {
id: `full-width-tab-${index}`, id: `full-width-tab-${index}`,
"aria-controls": `full-width-tabpanel-${index}` "aria-controls": `full-width-tabpanel-${index}`,
}; };
}; };
const useStyles = makeStyles((theme: Theme) => ({ const useStyles = makeStyles((theme: Theme) => ({
root: { root: {
backgroundColor: "#ffffff", backgroundColor: "#E9ECEF",
flexGrow: 1 borderRadius: "20px",
} },
})); }));
interface IProps { interface IProps {
@ -62,12 +62,12 @@ interface IProps {
export const ProjectTabPanel: FC<IProps> = ({ export const ProjectTabPanel: FC<IProps> = ({
tickets, tickets,
tabNames, tabNames,
files files,
// allProjects // allProjects
}) => { }) => {
const classes = useStyles(); const classes = useStyles();
const theme = useTheme(); const theme = useTheme();
const [value, setValue] = React.useState(0); const [value, setValue] = useState(0);
const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => { const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
setValue(newValue); setValue(newValue);
@ -79,14 +79,18 @@ export const ProjectTabPanel: FC<IProps> = ({
return ( return (
<div className={classes.root}> <div className={classes.root}>
<AppBar position="static" color="inherit"> <AppBar
position="static"
color="inherit"
style={{ borderTopLeftRadius: "10px", borderTopRightRadius: "10px" }}
>
<Tabs <Tabs
value={value} value={value}
onChange={handleChange} onChange={handleChange}
indicatorColor="primary" indicatorColor="primary"
textColor="primary" textColor="primary"
variant="fullWidth" variant="fullWidth"
aria-label="full width tabs example" aria-label="full width tabs"
> >
{tabNames.map((t: string, i: number) => ( {tabNames.map((t: string, i: number) => (
<Tab key={i} label={t} {...a11yProps({ i })} /> <Tab key={i} label={t} {...a11yProps({ i })} />