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

Merge pull request #2 from CPSC319-Winter-term-2/material-ui-setup

Browse Source 
Material UI setup
This commit is contained in:
cth0604 2022-02-28 21:41:51 -08:00 committed by GitHub
commit be20a12a56
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
34 changed files with 5992 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.json
View File

@ -47,7 +47,7 @@
"SwitchCase": 1 "SwitchCase": 1
} }
], ],
"linebreak-style": ["warn", "unix"], "linebreak-style": ["warn", "windows"],
"quotes": ["error", "double", { "avoidEscape": true }], "quotes": ["error", "double", { "avoidEscape": true }],
"semi": ["error", "always"] "semi": ["error", "always"]
} }

10
declaration.d.ts vendored Normal file
View File

@ -0,0 +1,10 @@
declare module '*.svg' {
import React = require('react');
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;
}
declare module "*.png" {
const value: any;
export default value;
}

5502
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -23,6 +23,7 @@
"build-dev": "BUILD_ENV=DEV webpack --config webpack.config.ts", "build-dev": "BUILD_ENV=DEV webpack --config webpack.config.ts",
"build-prod": "BUILD_ENV=PROD webpack --config webpack.config.ts", "build-prod": "BUILD_ENV=PROD webpack --config webpack.config.ts",
"lint": "eslint src", "lint": "eslint src",
"lint-fix": "eslint src --ext .tsx --fix",
"prepare": "husky install" "prepare": "husky install"
}, },
"eslintConfig": { "eslintConfig": {
@ -61,6 +62,7 @@
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.1", "html-webpack-plugin": "^5.3.1",
"husky": "^7.0.0", "husky": "^7.0.0",
"image-webpack-loader": "^8.1.0",
"style-loader": "^2.0.0", "style-loader": "^2.0.0",
"ts-loader": "^8.0.18", "ts-loader": "^8.0.18",
"ts-node": "^9.1.1", "ts-node": "^9.1.1",

12
src/App.tsx
View File

@ -1,13 +1,20 @@
import { ENV } from "./constants/env"; import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import "./styles.css";
import Home from "./components/home/Home"; import Home from "./components/home/Home";
import Contacts from "./components/contacts/Contacts"; import Contacts from "./components/contacts/Contacts";
import Calendar from "./components/calendar/Calendar"; import Calendar from "./components/calendar/Calendar";
import Navbar from "./components/navbar/Navbar"; import Navbar from "./components/navbar/Navbar";
import { ThemeProvider } from "@emotion/react";
import Theme from "./Theme";
import "./style/App.css";
const App: React.FC = () => { const App: React.FC = () => {
return ( return (
<ThemeProvider theme={Theme}>
<Router> <Router>
<Navbar /> <Navbar />
<Routes> <Routes>
@ -16,6 +23,7 @@ const App: React.FC = () => {
<Route path="/calendar" element={<Calendar />} /> <Route path="/calendar" element={<Calendar />} />
</Routes> </Routes>
</Router> </Router>
</ThemeProvider>
); );
}; };

14
src/Theme.tsx Normal file
View File

@ -0,0 +1,14 @@
import { createTheme } from "@mui/material/styles";
export default createTheme({
palette: {
primary: {
// white
main: "#ffffff",
},
secondary: {
// red
main: "#af000d",
},
},
});

BIN
src/assets/logo-png.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

1
src/assets/logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

4
src/components/calendar/Calendar.tsx
View File

@ -1,6 +1,4 @@
import { ENV } from "../../constants/env"; const Calendar: React.FC = () => {
const Calendar:React.FC = () => {
return <span>Calendar</span>; return <span>Calendar</span>;
}; };

4
src/components/contacts/Contacts.tsx
View File

@ -1,6 +1,4 @@
import { ENV } from "../../constants/env"; const Contacts: React.FC = () => {
const Contacts:React.FC = () => {
return <span>Contacts</span>; return <span>Contacts</span>;
}; };

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

@ -1,7 +1,90 @@
import { ENV } from "../../constants/env"; import people from "./images/people.png";
import plus from "./images/plus.png";
import phoneCall from "./images/phone-call.png";
import circle from "./images/circle.png";
const Home:React.FC = () => { const Home: React.FC = () => {
return <span>Home</span>; return (
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Digital Walk-Around</title>
</head>
<body>
<div className="container-fluid">
<div className="row main-home">
<div className="col-8">
<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>
<div className="row meeting">
<div className="col-12">
<div className="row">
<label>Metting Name</label>
</div>
<div className="row">
<label>Metting time</label>
</div>
</div>
</div>
</div>
</div>
<div className="col-4 short-cuts">
<div className="row row-1">
<div className="col-6">
<div className="row">
<a className="tile btn">
<img src={people} />
</a>
</div>
<div className="row">
<label>New Meeting</label>
</div>
</div>
<div className="col-6">
<div className="row">
<a className="tile btn">
<img src={plus} />
</a>
</div>
<div className="row">
<label>Join</label>
</div>
</div>
</div>
<div className="row row-2">
<div className="col-6">
<div className="row">
<a className="tile btn">
<img src={phoneCall} />
</a>
</div>
<div className="row">
<label>Call Favourites</label>
</div>
</div>
<div className="col-6">
<div className="row">
<a className="tile btn">
<img src={circle} />
</a>
</div>
<div className="row">
<label>Recordings</label>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
);
}; };
export default Home; export default Home;

BIN
src/components/home/images/circle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
src/components/home/images/people.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
src/components/home/images/phone-call.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/components/home/images/plus.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

49
src/components/navbar/Clock.tsx Normal file
View File

@ -0,0 +1,49 @@
import { Typography } from "@mui/material";
import Box, { BoxProps } from "@mui/material/Box";
import { styled } from "@mui/material/styles";
import React, { useState, useEffect } from "react";
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
import AccessTimeIcon from "@mui/icons-material/AccessTime";
const FormattedBox = styled(Box)<BoxProps>(() => ({
marginRight: 12,
}));
const Clock: React.FC = () => {
const [date, setDate] = useState<Date>(new Date());
useEffect(() => {
setInterval(() => setDate(new Date()), 30000);
}, []);
return (
<Box sx={{ display: "flex" }}>
<FormattedBox sx={{ mt: 0.5 }}>
<CalendarTodayIcon />
</FormattedBox>
<FormattedBox>
<Typography variant="h6" color="inherit">
{date.toLocaleDateString("en-GB", {
day: "numeric",
month: "short",
year: "numeric",
})}
</Typography>
</FormattedBox>
<FormattedBox sx={{ mt: 0.5 }}>
<AccessTimeIcon />
</FormattedBox>
<FormattedBox>
<Typography variant="h6" color="inherit">
{date.toLocaleString("en-US", {
hour: "numeric",
minute: "numeric",
hour12: true,
})}
</Typography>
</FormattedBox>
</Box>
);
};
export default Clock;

47
src/components/navbar/Navbar.tsx
View File

@ -1,21 +1,40 @@
import { ENV } from "../../constants/env"; import React from "react";
import { AppBar, Box, IconButton, Toolbar, Typography } from "@mui/material";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import Clock from "./Clock";
import pngLogo from "../../assets/logo-png.png";
import { Page } from "./Page";
const pages: Page[] = [
{ name: "Home", url: "/" },
{ name: "Contacts", url: "/contacts" },
{ name: "Calendar", url: "/calendar" },
];
const Navbar: React.FC = () => { const Navbar: React.FC = () => {
return ( return (
<nav> <AppBar position="static">
<ul> <Toolbar variant="dense" disableGutters>
<li> <IconButton disableRipple sx={{ mr: 2 }}>
<Link to="/">Home</Link> <img src={pngLogo} alt="Kitty Katty!" style={{ maxWidth: 130 }} />
</li> </IconButton>
<li> {pages.map((page, i) => (
<Link to="/contacts">Contacts</Link> <Box flexGrow={i == pages.length - 1 ? 1 : 0} sx={{ mr: 3 }} key={i}>
</li> <Typography
<li> variant="h6"
<Link to="/calendar">Calendar</Link> color="inherit"
</li> component={Link}
</ul> to={page.url}
</nav> sx={{ textDecoration: "none" }}
>
{page.name}
</Typography>
</Box>
))}
<Clock />
</Toolbar>
</AppBar>
); );
}; };

6
src/components/navbar/Page.tsx Normal file
View File

@ -0,0 +1,6 @@
interface Page {
name: string;
url: string;
}
export type { Page };

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

@ -1,5 +1,3 @@
import { ENV } from "../../constants/env";
const Sidebar: React.FC = () => { const Sidebar: React.FC = () => {
return <span>Sidebar</span>; return <span>Sidebar</span>;
}; };

138
src/style/App.css Normal file
View File

@ -0,0 +1,138 @@
.col-1 {
width: 8.33% !important;
}
.col-2 {
width: 16.66% !important;
}
.col-3 {
width: 25% !important;
}
.col-4 {
width: 33.33% !important;
}
.col-5 {
width: 41.66% !important;
}
.col-6 {
width: 50% !important;
}
.col-7 {
width: 58.33% !important;
}
.col-8 {
width: 66.66% !important;
}
.col-9 {
width: 75% !important;
}
.col-10 {
width: 83.33% !important;
}
.col-11 {
width: 91.66% !important;
}
.col-12 {
width: 100% !important;
}
[class*="col-"] {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.row {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 100%;
}
.row * {
width: 100%;
}
.container-fluid {
width: 100%;
margin-right: auto;
margin-left: auto;
}
label {
display: inline-block;
}
.main-home .meetings-panel {
display: block;
margin-top: 20vh;
margin-left: 10vw;
border-style: solid;
border-color: #D3D3D3;
border-width: 2px;
width: 40vw;
height: 60vh;
border-radius: 40px;
overflow: hidden;
}
.main-home .meetings-panel .row {
width: 100%;
margin: 0;
}
.main-home .meetings-panel .current-time {
text-align: center;
background-color: grey;
}
.main-home .meetings-panel .current-date {
text-align: center;
background-color: grey;
}
.main-home .meetings-panel .meeting {
background-color: #D3D3D3;
text-align: center;
margin-top: 15px;
}
.main-home .short-cuts .row-1 {
margin-top: 25vh;
}
.main-home .short-cuts .row-2 {
margin-top: 5vh;
}
.main-home .short-cuts label {
width: 10vw;
text-align: center;
}
.main-home .short-cuts .tile {
background-color: #D3D3D3;
width: 10vw;
height: 10vw;
border-radius: 1.5vw;
}
.main-home .short-cuts .tile img {
width: 70%;
height: 70%;
margin-top: 15%;
margin-left: 15%;
}
/*# sourceMappingURL=style.css.map */

17
src/style/App.css.map Normal file
View File

@ -0,0 +1,17 @@
{
"version": 3,
"mappings": "AGAA,AAAA,MAAM,CAAC;EACH,KAAK,EAAE,gBAAgB;CAAG;;AAC9B,AAAA,MAAM,CAAC;EACH,KAAK,EAAE,iBAAiB;CAAG;;AAC/B,AAAA,MAAM,CAAC;EACH,KAAK,EAAE,cAAc;CAAG;;AAC5B,AAAA,MAAM,CAAC;EACH,KAAK,EAAE,iBAAiB;CAAG;;AAC/B,AAAA,MAAM,CAAC;EACH,KAAK,EAAE,iBAAiB;CAAG;;AAC/B,AAAA,MAAM,CAAC;EACH,KAAK,EAAE,cAAc;CAAG;;AAC5B,AAAA,MAAM,CAAC;EACH,KAAK,EAAE,iBAAiB;CAAG;;AAC/B,AAAA,MAAM,CAAC;EACH,KAAK,EAAE,iBAAiB;CAAG;;AAC/B,AAAA,MAAM,CAAC;EACH,KAAK,EAAE,cAAc;CAAG;;AAC5B,AAAA,OAAO,CAAC;EACJ,KAAK,EAAE,iBAAiB;CAAG;;AAC/B,AAAA,OAAO,CAAC;EACJ,KAAK,EAAE,iBAAiB;CAAG;;AAC/B,AAAA,OAAO,CAAC;EACJ,KAAK,EAAE,eAAe;CAAG;;CAE7B,AAAA,AAAA,KAAC,EAAO,MAAM,AAAb,EAAe;EACZ,IAAI,EAAE,QAAQ;CAAG;;AAErB,AAAA,IAAI,CAAC;EACD,UAAU,EAAE,UAAU;EACtB,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,IAAI;CAEK;;AALxB,AAII,IAJA,CAIA,CAAC,CAAC;EACE,KAAK,EAAE,IAAI;CAAG;;AAEtB,AAAA,gBAAgB,CAAC;EACb,KAAK,EAAE,IAAI;EACX,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;CAAG;;AAExB,AAAA,KAAK,CAAC;EACF,OAAO,EAAE,YAAY;CAAG;;AKzC5B,AACI,UADM,CACN,eAAe,CAAC;EACZ,OAAO,EAAE,KAAK;EACd,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,IAAI;EACjB,YAAY,EAAE,KAAK;EACnB,YAAY,EPNS,OAAO;EOO5B,YAAY,EAAE,GAAG;EACjB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,MAAM;CAaS;;AAxBjC,AAYQ,UAZE,CACN,eAAe,CAWX,IAAI,CAAC;EACD,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,CAAC;CAAG;;AAdxB,AAeQ,UAfE,CACN,eAAe,CAcX,aAAa,CAAC;EACV,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,IAAI;CAAG;;AAjBrC,AAkBQ,UAlBE,CACN,eAAe,CAiBX,aAAa,CAAC;EACV,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,IAAI;CAAG;;AApBrC,AAqBQ,UArBE,CACN,eAAe,CAoBX,QAAQ,CAAC;EACL,gBAAgB,EPtBC,OAAO;EOuBxB,UAAU,EAAE,MAAM;EAClB,UAAU,EAAE,IAAI;CAAG;;AAxB/B,AA2BQ,UA3BE,CA0BN,WAAW,CACP,MAAM,CAAC;EACH,UAAU,EAAE,IAAI;CAAG;;AA5B/B,AA6BQ,UA7BE,CA0BN,WAAW,CAGP,MAAM,CAAC;EACH,UAAU,EAAE,GAAG;CAAG;;AA9B9B,AA+BQ,UA/BE,CA0BN,WAAW,CAKP,KAAK,CAAC;EACF,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;CAAG;;AAjCjC,AAkCQ,UAlCE,CA0BN,WAAW,CAQP,KAAK,CAAC;EACF,gBAAgB,EPnCC,OAAO;EOoCxB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,KAAK;CAKK;;AA3CrC,AAuCY,UAvCF,CA0BN,WAAW,CAQP,KAAK,CAKD,GAAG,CAAC;EACA,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;EACX,UAAU,EAAE,GAAG;EACf,WAAW,EAAE,GAAG;CAAG",
"sources": [
"style.sass",
"_variables.sass",
"base/_base-dir.sass",
"base/_base.sass",
"layouts/_layouts-dir.sass",
"layouts/_header.sass",
"layouts/_footer.sass",
"modules/_modules-dir.sass",
"modules/_mainHome.sass"
],
"names": [],
"file": "style.css"
}

4
src/style/App.sass Normal file
View File

@ -0,0 +1,4 @@
@import "variables"
@import "base/base-dir"
@import "layouts/layouts-dir"
@import "modules/modules-dir"

1
src/style/_variables.sass Normal file
View File

@ -0,0 +1 @@
$main-home-background-color: #D3D3D3

1
src/style/base/_base-dir.sass Normal file
View File

@ -0,0 +1 @@
@import "base"

42
src/style/base/_base.sass Normal file
View File

@ -0,0 +1,42 @@
.col-1
width: 8.33% !important
.col-2
width: 16.66% !important
.col-3
width: 25% !important
.col-4
width: 33.33% !important
.col-5
width: 41.66% !important
.col-6
width: 50% !important
.col-7
width: 58.33% !important
.col-8
width: 66.66% !important
.col-9
width: 75% !important
.col-10
width: 83.33% !important
.col-11
width: 91.66% !important
.col-12
width: 100% !important
[class*="col-"]
flex: 0 0 auto
.row
box-sizing: border-box
display: flex
max-width: 100%
*
width: 100%
.container-fluid
width: 100%
margin-right: auto
margin-left: auto
label
display: inline-block

0
src/style/layouts/_footer.sass Normal file
View File

0
src/style/layouts/_header.sass Normal file
View File

2
src/style/layouts/_layouts-dir.sass Normal file
View File

@ -0,0 +1,2 @@
@import "header"
@import "footer"

44
src/style/modules/_mainHome.sass Normal file
View File

@ -0,0 +1,44 @@
.main-home
.meetings-panel
display: block
margin-top: 20vh
margin-left: 10vw
border-style: solid
border-color: $main-home-background-color
border-width: 2px
width: 40vw
height: 60vh
border-radius: 40px
overflow: hidden
.row
width: 100%
margin: 0
.current-time
text-align: center
background-color: grey
.current-date
text-align: center
background-color: grey
.meeting
background-color: $main-home-background-color
text-align: center
margin-top: 15px
.short-cuts
.row-1
margin-top: 25vh
.row-2
margin-top: 5vh
label
width: 10vw
text-align: center
.tile
background-color: $main-home-background-color
width: 10vw
height: 10vw
border-radius: 1.5vw
img
width: 70%
height: 70%
margin-top: 15%
margin-left: 15%

1
src/style/modules/_modules-dir.sass Normal file
View File

@ -0,0 +1 @@
@import "mainHome"

7
src/styles.css Normal file
View File

@ -0,0 +1,7 @@
html,
body,
#app,
#root,
#app > div {
height: 100%;
}

3
src/types/images.d.ts vendored Normal file
View File

@ -0,0 +1,3 @@
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.png";

2
tsconfig.json
View File

@ -66,6 +66,6 @@
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */, "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
"types": ["node", "webpack-env"] "types": ["node", "webpack-env"]
}, },
"include": ["src"], "include": ["src", "declaration.d.ts"],
"exclude": ["node_modules", "build"] "exclude": ["node_modules", "build"]
} }

7
webpack.config.ts
View File

@ -61,6 +61,13 @@ const baseConfig: Configuration = {
test: /\.svg$/, test: /\.svg$/,
use: ["@svgr/webpack"], use: ["@svgr/webpack"],
}, },
{
test: /\.(png|jpe?g|gif|jp2|webp)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
},
], ],
}, },