From 7db9671e5bb01570b53d9d6088d626c8242e3294 Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Mon, 24 Aug 2020 15:06:37 +0100
Subject: [PATCH] Add basic settings modal
---
src/components/App.scss | 4 ++++
src/components/App.tsx | 14 +++++++++++++-
src/components/organisms/RightBar/index.tsx | 12 +++++++++---
src/components/pages/SettingsModal/index.tsx | 20 ++++++++++++++++++++
src/components/pages/StandardView/index.tsx | 8 +++++---
5 files changed, 51 insertions(+), 7 deletions(-)
create mode 100644 src/components/pages/SettingsModal/index.tsx
diff --git a/src/components/App.scss b/src/components/App.scss
index 4ea60895d..bdb3a88b8 100644
--- a/src/components/App.scss
+++ b/src/components/App.scss
@@ -58,3 +58,7 @@ code {
border-color: #fff;
color: #000;
}
+
+.modal-backdrop{
+ z-index: 9000;
+}
diff --git a/src/components/App.tsx b/src/components/App.tsx
index bc5789894..d2c7db6af 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -11,17 +11,23 @@ import {
import StandardView from "./pages/StandardView";
import { Switch, Route } from "react-router-dom";
import SignIn from "./pages/SignIn";
+import SettingsModal from "./pages/SettingsModal";
type AppState = {
toggledLeft: boolean;
toggledRight: boolean;
+ showSettings: boolean;
};
class App extends React.Component<{}, AppState> {
width = window.innerWidth;
constructor(props: {}) {
super(props);
- this.state = { toggledLeft: false, toggledRight: false };
+ this.state = {
+ toggledLeft: false,
+ toggledRight: false,
+ showSettings: false,
+ };
}
componentDidMount() {
@@ -85,6 +91,11 @@ class App extends React.Component<{}, AppState> {
return (
<>
+ <SettingsModal
+ show={this.state.showSettings}
+ onHide={() => this.setState({ showSettings: false })}
+ />
+
<Switch>
<Route path="/signin">
<SignIn />
@@ -105,6 +116,7 @@ class App extends React.Component<{}, AppState> {
<StandardView
pages={horizontalBarPages}
+ onSettingsClick={() => this.setState({ showSettings: true })}
toggledLeft={this.state.toggledLeft}
toggledRight={this.state.toggledRight}
onOverlayClick={(e) => {
diff --git a/src/components/organisms/RightBar/index.tsx b/src/components/organisms/RightBar/index.tsx
index 4f5b2c11d..180b89759 100644
--- a/src/components/organisms/RightBar/index.tsx
+++ b/src/components/organisms/RightBar/index.tsx
@@ -3,14 +3,19 @@ import styles from "./style.module.scss";
import CalendarGroup from "components/molecules/CalendarGroup";
import SideBarTabGroup from "components/molecules/SideBarTabGroup";
import { faCog, faSignOutAlt } from "@fortawesome/free-solid-svg-icons";
+
export interface RightBarState {
date: Date;
}
-class RightBar extends React.Component<{}, RightBarState> {
+export interface RightBarProps {
+ onSettingsClick: (event: React.MouseEvent) => void;
+}
+
+class RightBar extends React.Component<RightBarProps, RightBarState> {
private timerID: number = 0;
- constructor(props: {}) {
+ constructor(props: RightBarProps) {
super(props);
this.state = { date: new Date() };
}
@@ -33,7 +38,8 @@ class RightBar extends React.Component<{}, RightBarState> {
let buttons = [
{
title: "Settings",
- icon: faCog,
+ icon: faCog,
+ onClick: this.props.onSettingsClick,
},
{
title: "Sign Out",
diff --git a/src/components/pages/SettingsModal/index.tsx b/src/components/pages/SettingsModal/index.tsx
new file mode 100644
index 000000000..adc7d58ed
--- /dev/null
+++ b/src/components/pages/SettingsModal/index.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import Modal from "react-bootstrap/Modal";
+
+interface Props {
+ show: boolean;
+ onHide: any;
+}
+
+const SettingsModal: React.FC<Props> = ({ show, onHide }) => {
+ return (
+ <Modal style={{ zIndex: "10000" }} show={show} onHide={onHide}>
+ <Modal.Header closeButton>
+ <Modal.Title>Settings</Modal.Title>
+ </Modal.Header>
+ <Modal.Body>Woohoo, you're reading this settings in a modal!</Modal.Body>
+ </Modal>
+ );
+};
+
+export default SettingsModal;
diff --git a/src/components/pages/StandardView/index.tsx b/src/components/pages/StandardView/index.tsx
index 40c8cea46..9d98e4037 100644
--- a/src/components/pages/StandardView/index.tsx
+++ b/src/components/pages/StandardView/index.tsx
@@ -28,13 +28,15 @@ interface StandardViewProps {
}[];
toggledLeft: boolean;
toggledRight: boolean;
- onOverlayClick: (event: React.MouseEvent<HTMLElement>) => void;
+ onOverlayClick: (event: React.MouseEvent<HTMLElement>) => void;
+ onSettingsClick: (event: React.MouseEvent) => void;
}
const StandardView: React.FC<StandardViewProps> = ({
toggledLeft,
toggledRight,
- onOverlayClick,
+ onOverlayClick,
+ onSettingsClick,
}: StandardViewProps) => {
const [modulesFilter, setModulesFilter] = useState("In Progress");
@@ -132,7 +134,7 @@ const StandardView: React.FC<StandardViewProps> = ({
<Route path="/" render={() => <Redirect to="/dashboard" />} />
</Switch>
</Container>
- <RightBar />
+ <RightBar onSettingsClick={onSettingsClick} />
</div>
);
};
--
GitLab