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

sidebar position fixed

Browse Source
This commit is contained in:
Taehee Choi 2022-03-10 18:27:01 -08:00
parent 1b9d651c19
commit 6f8b36bf87
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,
} from "./components/sidebar/SidebarUser";
import MeetingDetails from "./components/meeting-details/MeetingDetails";
import { Box } from "@mui/material";
const App: React.FC = () => {
const [meetingInfoOpen, setMeetingInfoOpen] = useState(false);
@ -49,16 +50,22 @@ const App: React.FC = () => {
return (
<ThemeProvider theme={Theme}>
<Router>
<Sidebar users={sidebarUsers} />
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route
path="/contacts"
element={<Contacts setMeetingInfoOpen={setMeetingInfoOpen} />}
/>
<Route path="/calendar" element={<Calendar />} />
</Routes>
<Box id="drawer-container" sx={{ display: "flex", height: "100%" }}>
<Box sx={{ flexGrow: 1 }}>
<Routes>
<Route path="/" element={<Home />} />
<Route
path="/contacts"
element={<Contacts setMeetingInfoOpen={setMeetingInfoOpen} />}
/>
<Route path="/calendar" element={<Calendar />} />
</Routes>
</Box>
<Box>
<Sidebar users={sidebarUsers} />
</Box>
</Box>
<MeetingDetails open={meetingInfoOpen} setOpen={setMeetingInfoOpen} />
</Router>
</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 ContactInfo from "../../ContactInfo";
import AddIcon from "@mui/icons-material/Add";
import { textAlign } from "@mui/system";
interface Props {
contactInfo: ContactInfo;

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

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

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

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

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

@ -1,19 +1,19 @@
import Meeting from "./Meeting";
const MeetingsPanel: React.FC = () => {
return (
<div className="meetings-panel">
<div className="row current-time">
<label>10:34 AM</label>
</div>
<div className="row current-date">
<label>Sunday, 03 Feb 2022</label>
</div>
return (
<div className="meetings-panel">
<div className="row current-time">
<label>10:34 AM</label>
</div>
<div className="row current-date">
<label>Sunday, 03 Feb 2022</label>
</div>
<Meeting meetingName="first meeting" meetingTime="time" />
<Meeting meetingName="second meeting" meetingTime="time" />
</div>
);
};
<Meeting meetingName="first meeting" meetingTime="time" />
<Meeting meetingName="second meeting" meetingTime="time" />
</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 AddIcon from '@mui/icons-material/Add';
import PhoneEnabledIcon from '@mui/icons-material/PhoneEnabled';
import CircleIcon from '@mui/icons-material/Circle';
import PeopleIcon from "@mui/icons-material/People";
import AddIcon from "@mui/icons-material/Add";
import PhoneEnabledIcon from "@mui/icons-material/PhoneEnabled";
import CircleIcon from "@mui/icons-material/Circle";
import Button from "@mui/material/Button";
import Grid from "@mui/material/Grid";
const ShortCuts: React.FC = () => {
return (
<div className="short-cuts" >
<Grid className="row-1" container spacing={1}>
<Grid item sm={6}>
<Button className="tile">
<PeopleIcon className="icon" />
</Button>
<label>New Meeting</label>
</Grid>
<Grid item sm={6}>
<Button className="tile">
<AddIcon className="icon" />
</Button>
<label>Join</label>
</Grid>
</Grid>
<Grid className="row-2" container spacing={1}>
<Grid item sm={6}>
<Button className="tile">
<PhoneEnabledIcon className="icon" />
</Button>
<label>Call Favourites</label>
</Grid>
<Grid item sm={6}>
<Button className="tile">
<CircleIcon className="icon" />
</Button>
<label>Recordings</label>
</Grid>
</Grid>
</div>
);
};
return (
<div className="short-cuts" >
<Grid className="row-1" container spacing={1}>
<Grid item sm={6}>
<Button className="tile">
<PeopleIcon className="icon" />
</Button>
<label>New Meeting</label>
</Grid>
<Grid item sm={6}>
<Button className="tile">
<AddIcon className="icon" />
</Button>
<label>Join</label>
</Grid>
</Grid>
<Grid className="row-2" container spacing={1}>
<Grid item sm={6}>
<Button className="tile">
<PhoneEnabledIcon className="icon" />
</Button>
<label>Call Favourites</label>
</Grid>
<Grid item sm={6}>
<Button className="tile">
<CircleIcon className="icon" />
</Button>
<label>Recordings</label>
</Grid>
</Grid>
</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";
const Login: React.FC = () => {
return (
<Container className="login">
return (
<Container className="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 SidebarUser, { SidebarUserObj } from "./SidebarUser";
// TODO: toolbar on top of sidebar since it goes under the navbar
const drawerWidth = 240;
const drawerWidth = 200;
interface Props {
users: SidebarUserObj[],
users: SidebarUserObj[];
}
const Sidebar: React.FC<Props> = ({ users }: Props) => {
@ -15,22 +22,21 @@ const Sidebar: React.FC<Props> = ({ users }: Props) => {
<Drawer
sx={{
width: drawerWidth,
flexShrink: 0,
"& .MuiDrawer-paper": {
width: drawerWidth,
boxSizing: "border-box",
},
}}
variant="permanent"
anchor="right"
>
<Toolbar />
<List disablePadding sx={{ height: "80%", overflow: "auto" }}>
<ListSubheader disableGutters>
<GroupSelect />
</ListSubheader>
{users.map((user) => (
<ListItem disablePadding key={user.id}>
<SidebarUser user={user} />
<SidebarUser user={user} />
</ListItem>
))}
</List>
@ -39,4 +45,4 @@ const Sidebar: React.FC<Props> = ({ users }: Props) => {
);
};
export default Sidebar;
export default Sidebar;