From 0d401cc655dfcf413cafb0bff9ce4aaecd5fee61 Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Wed, 5 Aug 2020 16:06:12 +0100
Subject: [PATCH] Add basic right bar
---
frontend/src/components/App.tsx | 31 +++++++--
.../components/organisms/RightBar/index.tsx | 12 ++++
.../organisms/RightBar/style.module.scss | 64 +++++++++++++++++++
.../src/components/organisms/TopBar/index.tsx | 10 +--
.../components/pages/StandardView/index.tsx | 23 +++++--
.../components/pages/StandardView/style.scss | 11 +++-
6 files changed, 132 insertions(+), 19 deletions(-)
create mode 100644 frontend/src/components/organisms/RightBar/index.tsx
create mode 100644 frontend/src/components/organisms/RightBar/style.module.scss
diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
index e9f5aff4f..688b525a9 100644
--- a/frontend/src/components/App.tsx
+++ b/frontend/src/components/App.tsx
@@ -11,23 +11,29 @@ import {
} from "@fortawesome/free-solid-svg-icons";
import StandardView from "./pages/StandardView";
-type MyState = {
+type AppState = {
toggledLeft: boolean;
+ toggledRight: boolean;
};
-class App extends React.Component<{}, MyState> {
+class App extends React.Component<{}, AppState> {
constructor(props: {}) {
super(props);
- this.state = { toggledLeft: false };
+ this.state = { toggledLeft: false, toggledRight: false };
}
- toggleLeftBar(e: React.MouseEvent<HTMLElement>) {
- e.preventDefault();
+ toggleLeftBar() {
this.setState((state) => ({
toggledLeft: !state.toggledLeft,
}));
}
+ toggleRightBar() {
+ this.setState((state) => ({
+ toggledRight: !state.toggledRight,
+ }));
+ }
+
render() {
const horizontalBarPages = [
{ name: "Home", path: "/home", icon: faHome },
@@ -40,13 +46,24 @@ class App extends React.Component<{}, MyState> {
<>
<TopBar
pages={horizontalBarPages}
- onIconClick={(e) => this.toggleLeftBar(e)}
+ onFavIconClick={(e) => {
+ e.preventDefault();
+ this.toggleLeftBar();
+ }}
+ onUserIconClick={(e) => {
+ e.preventDefault();
+ this.toggleRightBar();
+ }}
/>
<StandardView
pages={horizontalBarPages}
toggledLeft={this.state.toggledLeft}
- onOverlayClick={(e) => this.toggleLeftBar(e)}
+ toggledRight={this.state.toggledRight}
+ onOverlayClick={(e) => {
+ e.preventDefault();
+ this.setState({ toggledLeft: false, toggledRight: false });
+ }}
/>
<BottomBar pages={horizontalBarPages} />
diff --git a/frontend/src/components/organisms/RightBar/index.tsx b/frontend/src/components/organisms/RightBar/index.tsx
new file mode 100644
index 000000000..b3414ae98
--- /dev/null
+++ b/frontend/src/components/organisms/RightBar/index.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import styles from "./style.module.scss"
+
+const RightBar: React.FC = () => {
+ return (
+ <div id={styles.rightbarWrapper}>
+ <p className={styles.rightbarStatus}>2020-08-05 15:08</p>
+ </div>
+ );
+};
+
+export default RightBar;
diff --git a/frontend/src/components/organisms/RightBar/style.module.scss b/frontend/src/components/organisms/RightBar/style.module.scss
new file mode 100644
index 000000000..a9d49f178
--- /dev/null
+++ b/frontend/src/components/organisms/RightBar/style.module.scss
@@ -0,0 +1,64 @@
+@import "assets/scss/custom";
+
+#rightbarWrapper {
+ position: fixed;
+ right: 250px;
+ width: 0;
+ margin-right: -250px;
+ height: 100%;
+ margin-bottom: 61px;
+ overflow-y: auto;
+ background: #fff;
+ background: #ffffff;
+ box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+ -webkit-transition: all 0.5s ease;
+ -moz-transition: all 0.5s ease;
+ -o-transition: all 0.5s ease;
+ transition: all 0.5s ease;
+ z-index: 5000;
+}
+
+:global(#wrapper.toggledRight) #rightbarWrapper {
+ width: 250px;
+}
+
+
+@media (max-width: 992px) {
+ .rightbarStatus {
+ margin-top: 30px;
+ margin-left: 16px;
+ margin-right: 16px;
+ margin-bottom: 0px;
+ font-size: 16px;
+ font-weight: 500;
+ color: #000000;
+ letter-spacing: 0;
+ position: absolute;
+ width: max-content;
+ text-transform: uppercase;
+ }
+}
+
+@media (min-width: 992px) {
+ .rightbarStatus {
+ margin-top: 30px;
+ margin-left: 32px;
+ margin-right: 32px;
+ margin-bottom: 0px;
+ font-size: 16px;
+ font-weight: 500;
+ text-align: right;
+ color: #000000;
+ letter-spacing: 0;
+ position: absolute;
+ width: max-content;
+ }
+
+ #rightbarWrapper {
+ width: 250px;
+ }
+
+ :global(#wrapper.toggledRight) #rightbarWrapper{
+ width: 0;
+ }
+}
diff --git a/frontend/src/components/organisms/TopBar/index.tsx b/frontend/src/components/organisms/TopBar/index.tsx
index 49bfe8f29..c8d692afc 100644
--- a/frontend/src/components/organisms/TopBar/index.tsx
+++ b/frontend/src/components/organisms/TopBar/index.tsx
@@ -11,14 +11,15 @@ export interface TopBarProps {
name: string;
path: string;
}[];
- onIconClick: (event: React.MouseEvent<HTMLImageElement>) => void;
+ onFavIconClick: (event: React.MouseEvent<HTMLElement>) => void;
+ onUserIconClick: (event: React.MouseEvent<HTMLElement>) => void;
}
-const TopBar: React.FC<TopBarProps> = ({ pages, onIconClick }: TopBarProps) => {
+const TopBar: React.FC<TopBarProps> = ({ pages, onFavIconClick, onUserIconClick }: TopBarProps) => {
return (
<Navbar className={styles.navBar} sticky="top" expand="lg" variant="light">
<Container fluid>
- <NavBarBrand onClick={onIconClick} />
+ <NavBarBrand onClick={onFavIconClick} />
<NavBarTabGroup pages={pages} />
@@ -27,7 +28,8 @@ const TopBar: React.FC<TopBarProps> = ({ pages, onIconClick }: TopBarProps) => {
width="30"
height="30"
className="d-inline-block align-top"
- alt="userPic"
+ alt="userPic"
+ onClick={onUserIconClick}
/>
</Container>
</Navbar>
diff --git a/frontend/src/components/pages/StandardView/index.tsx b/frontend/src/components/pages/StandardView/index.tsx
index e7739f2d5..66d1e362a 100644
--- a/frontend/src/components/pages/StandardView/index.tsx
+++ b/frontend/src/components/pages/StandardView/index.tsx
@@ -2,21 +2,25 @@ import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import ExamplePage from "components/templates/ExamplePage";
import LeftBar from "components/organisms/LeftBar";
-import "./style.scss"
+import "./style.scss";
+import RightBar from "components/organisms/RightBar";
+import classNames from "classnames";
interface StandardViewProps {
pages: {
name: string;
path: string;
}[];
- toggledLeft: boolean;
+ toggledLeft: boolean;
+ toggledRight: boolean;
onOverlayClick: (event: React.MouseEvent<HTMLElement>) => void;
}
const StandardView: React.FC<StandardViewProps> = ({
pages,
- toggledLeft,
- onOverlayClick,
+ toggledLeft,
+ toggledRight,
+ onOverlayClick,
}: StandardViewProps) => {
const topBarRoutes = pages.map(({ name, path }) => (
<Route path={path} key={name}>
@@ -25,9 +29,16 @@ const StandardView: React.FC<StandardViewProps> = ({
));
return (
- <div id="wrapper" className={toggledLeft ? "toggledLeft" : ""}>
+ <div
+ id="wrapper"
+ className={classNames({
+ toggledLeft: toggledLeft,
+ toggledRight: toggledRight,
+ })}
+ >
<LeftBar />
- <div id="sidenav-overlay" onClick={e => onOverlayClick(e)}></div>
+ <RightBar />
+ <div id="sidenav-overlay" onClick={(e) => onOverlayClick(e)}></div>
<Switch>
<Route exact path="/" render={() => <Redirect to="/modules" />} />
{topBarRoutes}
diff --git a/frontend/src/components/pages/StandardView/style.scss b/frontend/src/components/pages/StandardView/style.scss
index 752b81140..005d41135 100644
--- a/frontend/src/components/pages/StandardView/style.scss
+++ b/frontend/src/components/pages/StandardView/style.scss
@@ -1,5 +1,6 @@
#wrapper {
- padding-left: 0;
+ padding-left: 0;
+ padding-right: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
@@ -24,15 +25,21 @@
@media (min-width: 992px) {
#wrapper {
- padding-left: 250px;
+ padding-left: 250px;
+ padding-right: 250px;
}
#wrapper.toggledLeft {
padding-left: 0;
+ }
+
+ #wrapper.toggledRight {
+ padding-right: 0;
}
}
@media (max-width: 992px) {
+ #wrapper.toggledRight #sidenav-overlay,
#wrapper.toggledLeft #sidenav-overlay {
visibility:visible;
background-color: rgba(0, 0, 0, 0.3);
--
GitLab