UBC/Alley-HSBC-Frontend
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #11 from CPSC319-Winter-term-2/sidebar-fix

Browse Source 
sidebar position fixed
This commit is contained in:
cth0604 2022-03-11 00:34:05 -08:00 committed by GitHub
commit 28083015f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 116 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/App.tsx
View File

@ -17,6 +17,7 @@ import {
SidebarUserObj, SidebarUserObj,
} from "./components/sidebar/SidebarUser"; } from "./components/sidebar/SidebarUser";
import MeetingDetails from "./components/meeting-details/MeetingDetails"; import MeetingDetails from "./components/meeting-details/MeetingDetails";
import { Box } from "@mui/material";
const App: React.FC = () => { const App: React.FC = () => {
const [meetingInfoOpen, setMeetingInfoOpen] = useState(false); const [meetingInfoOpen, setMeetingInfoOpen] = useState(false);
@ -49,16 +50,22 @@ const App: React.FC = () => {
return ( return (
<ThemeProvider theme={Theme}> <ThemeProvider theme={Theme}>
<Router> <Router>
<Sidebar users={sidebarUsers} />
<Navbar /> <Navbar />
<Routes> <Box id="drawer-container" sx={{ display: "flex", height: "100%" }}>
<Route path="/" element={<Home />} /> <Box sx={{ flexGrow: 1 }}>
<Route <Routes>
path="/contacts" <Route path="/" element={<Home />} />
element={<Contacts setMeetingInfoOpen={setMeetingInfoOpen} />} <Route
/> path="/contacts"
<Route path="/calendar" element={<Calendar />} /> element={<Contacts setMeetingInfoOpen={setMeetingInfoOpen} />}
</Routes> />
<Route path="/calendar" element={<Calendar />} />
</Routes>
</Box>
<Box>
<Sidebar users={sidebarUsers} />
</Box>
</Box>
<MeetingDetails open={meetingInfoOpen} setOpen={setMeetingInfoOpen} /> <MeetingDetails open={meetingInfoOpen} setOpen={setMeetingInfoOpen} />
</Router> </Router>
</ThemeProvider> </ThemeProvider>

1
src/components/contacts/contacts-components/body-components/UpperBody.tsx
View File

@ -5,7 +5,6 @@ import VideocamIcon from "@mui/icons-material/Videocam";
import GroupsIcon from "@mui/icons-material/Groups"; import GroupsIcon from "@mui/icons-material/Groups";
import ContactInfo from "../../ContactInfo"; import ContactInfo from "../../ContactInfo";
import AddIcon from "@mui/icons-material/Add"; import AddIcon from "@mui/icons-material/Add";
import { textAlign } from "@mui/system";
interface Props { interface Props {
contactInfo: ContactInfo; contactInfo: ContactInfo;

20
src/components/home/Home.tsx
View File

@ -5,16 +5,16 @@ import Grid from "@mui/material/Grid";
const Home: React.FC = () => { const Home: React.FC = () => {
return ( return (
<Container className="main-home"> <Container className="main-home">
<Grid container> <Grid container>
<Grid item sm={8}> <Grid item sm={8}>
<MeetingsPanel /> <MeetingsPanel />
</Grid> </Grid>
<Grid item sm={4}> <Grid item sm={4}>
<ShortCuts /> <ShortCuts />
</Grid> </Grid>
</Grid> </Grid>
</Container> </Container>
); );
}; };

34
src/components/home/Meeting.tsx
View File

@ -1,17 +1,21 @@
function Meeting(props: any) { interface Props {
return ( meetingName: string;
meetingTime: string;
}
<div className="row meeting"> function Meeting(props: Props) {
<div className="col-12"> return (
<div className="row"> <div className="row meeting">
<label>{props.meetingName}</label> <div className="col-12">
</div> <div className="row">
<div className="row"> <label>{props.meetingName}</label>
<label>{props.meetingTime}</label>
</div>
</div>
</div> </div>
); <div className="row">
}; <label>{props.meetingTime}</label>
</div>
export default Meeting; </div>
</div>
);
}
export default Meeting;

28
src/components/home/MeetingsPanel.tsx
View File

@ -1,19 +1,19 @@
import Meeting from "./Meeting"; import Meeting from "./Meeting";
const MeetingsPanel: React.FC = () => { const MeetingsPanel: React.FC = () => {
return ( return (
<div className="meetings-panel"> <div className="meetings-panel">
<div className="row current-time"> <div className="row current-time">
<label>10:34 AM</label> <label>10:34 AM</label>
</div> </div>
<div className="row current-date"> <div className="row current-date">
<label>Sunday, 03 Feb 2022</label> <label>Sunday, 03 Feb 2022</label>
</div> </div>
<Meeting meetingName="first meeting" meetingTime="time" /> <Meeting meetingName="first meeting" meetingTime="time" />
<Meeting meetingName="second meeting" meetingTime="time" /> <Meeting meetingName="second meeting" meetingTime="time" />
</div> </div>
); );
}; };
export default MeetingsPanel; export default MeetingsPanel;

76
src/components/home/ShortCuts.tsx
View File

@ -1,43 +1,43 @@
import PeopleIcon from '@mui/icons-material/People'; import PeopleIcon from "@mui/icons-material/People";
import AddIcon from '@mui/icons-material/Add'; import AddIcon from "@mui/icons-material/Add";
import PhoneEnabledIcon from '@mui/icons-material/PhoneEnabled'; import PhoneEnabledIcon from "@mui/icons-material/PhoneEnabled";
import CircleIcon from '@mui/icons-material/Circle'; import CircleIcon from "@mui/icons-material/Circle";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
import Grid from "@mui/material/Grid"; import Grid from "@mui/material/Grid";
const ShortCuts: React.FC = () => { const ShortCuts: React.FC = () => {
return ( return (
<div className="short-cuts" > <div className="short-cuts" >
<Grid className="row-1" container spacing={1}> <Grid className="row-1" container spacing={1}>
<Grid item sm={6}> <Grid item sm={6}>
<Button className="tile"> <Button className="tile">
<PeopleIcon className="icon" /> <PeopleIcon className="icon" />
</Button> </Button>
<label>New Meeting</label> <label>New Meeting</label>
</Grid> </Grid>
<Grid item sm={6}> <Grid item sm={6}>
<Button className="tile"> <Button className="tile">
<AddIcon className="icon" /> <AddIcon className="icon" />
</Button> </Button>
<label>Join</label> <label>Join</label>
</Grid> </Grid>
</Grid> </Grid>
<Grid className="row-2" container spacing={1}> <Grid className="row-2" container spacing={1}>
<Grid item sm={6}> <Grid item sm={6}>
<Button className="tile"> <Button className="tile">
<PhoneEnabledIcon className="icon" /> <PhoneEnabledIcon className="icon" />
</Button> </Button>
<label>Call Favourites</label> <label>Call Favourites</label>
</Grid> </Grid>
<Grid item sm={6}> <Grid item sm={6}>
<Button className="tile"> <Button className="tile">
<CircleIcon className="icon" /> <CircleIcon className="icon" />
</Button> </Button>
<label>Recordings</label> <label>Recordings</label>
</Grid> </Grid>
</Grid> </Grid>
</div> </div>
); );
}; };
export default ShortCuts; export default ShortCuts;

12
src/components/login/Login.tsx
View File

@ -1,11 +1,11 @@
import Container from "@mui/material/Container"; import Container from "@mui/material/Container";
const Login: React.FC = () => { const Login: React.FC = () => {
return ( return (
<Container className="login"> <Container className="login">
Login Login
</Container> </Container>
); );
}; };
export default Login; export default Login;

20
src/components/sidebar/Sidebar.tsx
View File

@ -1,13 +1,20 @@
import { Divider, Drawer, List, ListItem, ListSubheader } from "@mui/material"; import {
Divider,
Drawer,
List,
ListItem,
ListSubheader,
Toolbar,
} from "@mui/material";
import GroupSelect from "./GroupSelect"; import GroupSelect from "./GroupSelect";
import SidebarUser, { SidebarUserObj } from "./SidebarUser"; import SidebarUser, { SidebarUserObj } from "./SidebarUser";
// TODO: toolbar on top of sidebar since it goes under the navbar // TODO: toolbar on top of sidebar since it goes under the navbar
const drawerWidth = 240; const drawerWidth = 200;
interface Props { interface Props {
users: SidebarUserObj[], users: SidebarUserObj[];
} }
const Sidebar: React.FC<Props> = ({ users }: Props) => { const Sidebar: React.FC<Props> = ({ users }: Props) => {
@ -15,22 +22,21 @@ const Sidebar: React.FC<Props> = ({ users }: Props) => {
<Drawer <Drawer
sx={{ sx={{
width: drawerWidth, width: drawerWidth,
flexShrink: 0,
"& .MuiDrawer-paper": { "& .MuiDrawer-paper": {
width: drawerWidth, width: drawerWidth,
boxSizing: "border-box",
}, },
}} }}
variant="permanent" variant="permanent"
anchor="right" anchor="right"
> >
<Toolbar />
<List disablePadding sx={{ height: "80%", overflow: "auto" }}> <List disablePadding sx={{ height: "80%", overflow: "auto" }}>
<ListSubheader disableGutters> <ListSubheader disableGutters>
<GroupSelect /> <GroupSelect />
</ListSubheader> </ListSubheader>
{users.map((user) => ( {users.map((user) => (
<ListItem disablePadding key={user.id}> <ListItem disablePadding key={user.id}>
<SidebarUser user={user} /> <SidebarUser user={user} />
</ListItem> </ListItem>
))} ))}
</List> </List>
@ -39,4 +45,4 @@ const Sidebar: React.FC<Props> = ({ users }: Props) => {
); );
}; };
export default Sidebar; export default Sidebar;