From f86b9ee2202b17167b4899d3035d105ee0d4c627 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Wahlberg?= Date: Fri, 27 Nov 2020 17:04:19 +0100 Subject: [PATCH 01/36] Add popup class --- src/components/Popup.js | 32 ++++++++++++++++++++++++++++++++ src/components/css/Popup.css | 19 +++++++++++++++++++ 2 files changed, 51 insertions(+) create mode 100644 src/components/Popup.js create mode 100644 src/components/css/Popup.css diff --git a/src/components/Popup.js b/src/components/Popup.js new file mode 100644 index 0000000..bd5c01b --- /dev/null +++ b/src/components/Popup.js @@ -0,0 +1,32 @@ +import React, { Component } from 'react'; + +import './css/Popup.css'; + + +class Popup extends Component { + state = { + visible: false + }; + + show = () => { + this.setState({ + visible: true + }); + }; + + hide = () => { + this.setState({ + visible: false + }); + }; + + render() { + return ( +
+ {this.props.children} +
+ ); + } +} + +export default Popup; \ No newline at end of file diff --git a/src/components/css/Popup.css b/src/components/css/Popup.css new file mode 100644 index 0000000..b809375 --- /dev/null +++ b/src/components/css/Popup.css @@ -0,0 +1,19 @@ +.popup { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(0); + transform-origin: center; + background: white; + width: 65vw; + height: 45vh; + box-shadow: var(--boxShadow); + border-radius: var(--borderRadius); + transition: .35s; + z-index: 11; +} + +.visible { + pointer-events: all; + transform: translate(-50%, -50%) scale(1); +} \ No newline at end of file From 66dbc66ec4ffdaf12467ae3f9079b73f3ffcac71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Wahlberg?= Date: Fri, 27 Nov 2020 17:05:55 +0100 Subject: [PATCH 02/36] Add generalized button class --- src/components/Button.js | 31 ++++++++++++++++++------ src/components/DisruptionButton.js | 39 +++++++++++++++++------------- src/components/MenuButton.js | 13 +++++----- src/components/NavigationDrawer.js | 23 +++++++++++++++++- 4 files changed, 75 insertions(+), 31 deletions(-) diff --git a/src/components/Button.js b/src/components/Button.js index d6c6a90..1c7827a 100644 --- a/src/components/Button.js +++ b/src/components/Button.js @@ -1,14 +1,31 @@ -import React, {Component} from 'react'; +import React, { Component } from 'react'; class Button extends Component { - render() { + // Multiple onClick functions + onClick = () => { + console.log(this.props.onClick); + if (this.props.onClick !== null + && this.props.onClick !== undefined) { + if (Array.isArray(this.props.onClick)) { + this.props.onClick.forEach(func => { + func(); + }); + } else { + console.log("Error when parsing Button onClick functions."); + } + } else { + console.log("Error when parsing Button onClick functions."); + } + } + + render() { return ( - - {this.props.title} - + ); } } -// TODO Add css -export default Button + +export default Button; \ No newline at end of file diff --git a/src/components/DisruptionButton.js b/src/components/DisruptionButton.js index e29fc2f..c88e5ca 100644 --- a/src/components/DisruptionButton.js +++ b/src/components/DisruptionButton.js @@ -1,24 +1,29 @@ import addNotification from "react-push-notification"; +import Button from './Button.js'; import disruptIcon from '../img/flash.svg'; -const DisruptionButton = () => { - const genDisrupt = () => { - addNotification({ - title: "Warning", - subtitle: "This is a subtitle", - message: "This is a very long message", - theme: "blue", - native: true, // when using native, your OS will handle theming. - }); - }; - return ( - - ); -}; +class DisruptionButton extends Button { + genDisrupt = () => { + addNotification({ + title: "Warning", + subtitle: "This is a subtitle", + message: "This is a very long message", + theme: "blue", + native: true, // when using native, your OS will handle theming. + }); + } + + render() { + return ( + + ); + } +} + export default DisruptionButton; diff --git a/src/components/MenuButton.js b/src/components/MenuButton.js index 0c78162..0ab96d0 100644 --- a/src/components/MenuButton.js +++ b/src/components/MenuButton.js @@ -1,20 +1,21 @@ -import React, { Component } from 'react'; +import Button from './Button.js'; -class MenuButton extends Component { + +class MenuButton extends Button { render() { if (this.props.childOrderReverse) { return ( - + ); } else { return ( - + ); } } diff --git a/src/components/NavigationDrawer.js b/src/components/NavigationDrawer.js index 1b963b0..07864c8 100644 --- a/src/components/NavigationDrawer.js +++ b/src/components/NavigationDrawer.js @@ -2,11 +2,18 @@ import React, { Component } from 'react'; import './css/NavigationDrawer.css'; import DisruptionButton from "./DisruptionButton.js"; +import Popup from './Popup.js'; +import Button from './Button.js'; import userIcon from '../img/user.svg'; class NavigationDrawer extends Component { + constructor(props) { + super(props); + this.popupElem = React.createRef(); + } + state = { open: false }; @@ -30,9 +37,23 @@ class NavigationDrawer extends Component { }); }; + showPopup = () => { + this.popupElem.current.show(); + }; + render() { return ( <> + +

Välj hållplats:

+
    +
    • +
    • +
    • +
    • +
+ +