Merge pull request #96 from bored-engineers/change-board-accordian

Saptarshi | Updating the Board UI
bored-engineers · Aug 21, 2020 · b8d7841 · b8d7841
2 parents fbff892 + dcfe584
commit b8d7841
Show file tree

Hide file tree

Showing 8 changed files with 157 additions and 100 deletions.
diff --git a/packages/webapp/src/components/board-info/BoardInfo.scss b/packages/webapp/src/components/board-info/BoardInfo.scss
@@ -19,24 +19,20 @@
 .export-icon{
     color: rgb(52, 231, 97)
 }
-
-.popper{
-    border: 1px solid;
-    padding: 1vh;
-    background-color: white;
-}
-.safety-result-info{
-    margin-left: 0.5vw;
-}
-.safety-graph{
-    padding-top:2vh;
-    margin-top: 1vh;
-}
-.safety-success{
-    border-color: rgb(69, 199, 80) !important;
-    color: rgb(69, 199, 80) !important;
-}
-.safety-failure{
-    border-color: rgb(209, 73, 73) !important;
-    color: rgb(209, 73, 73) !important;
+.menuitem-text{
+    margin-left: 5% !important;
+    margin-right: 8% !important;
+    font-size: 8.5pt !important;
+}
+.menuitem-icon{
+    color: #3f51b5 !important;
+}
+.board-button-group{
+    color: rgb(255, 255, 255) !important;
+    border-color: rgb(255, 255, 255) !important;
+    font-size: 8.5pt !important;
+}
+.feedback-button{
+    color: #ebc856 !important;
+    size: 10pt !important;
 }
diff --git a/packages/webapp/src/components/board-info/BoardInfo.tsx b/packages/webapp/src/components/board-info/BoardInfo.tsx
@@ -1,89 +1,86 @@
-import React, { useEffect, useState } from 'react';
-import Accordion from '@material-ui/core/Accordion';
-import AccordionSummary from '@material-ui/core/AccordionSummary';
-import AccordionDetails from '@material-ui/core/AccordionDetails';
+import React from 'react';
 import Typography from '@material-ui/core/Typography';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import GetAppRoundedIcon from '@material-ui/icons/GetAppRounded';
-import IconButton from '@material-ui/core/IconButton';
 import { exportBoard } from '../../services/board.service'
-
 import Tooltip from '@material-ui/core/Tooltip';
-import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
-import Popper from '@material-ui/core/Popper';
 import Button from '@material-ui/core/Button';
-import Paper from '@material-ui/core/Paper';
-
-import SafetyChart from '../safety-chart/SafetyChart';
 import './BoardInfo.scss'
-import { ButtonGroup } from '@material-ui/core';
+import { ButtonGroup, Menu, MenuItem } from '@material-ui/core';
+import { useHistory } from 'react-router'
+import PictureAsPdfRoundedIcon from '@material-ui/icons/PictureAsPdfRounded';
+import FileCopyRoundedIcon from '@material-ui/icons/FileCopyRounded';
+import FeedbackRoundedIcon from '@material-ui/icons/FeedbackRounded';
 
 type BoardInfoPropType = {
     boardId: string;
-    safetyScores: number[];
 };
 
-const BoardInfo = ({ boardId, safetyScores }: BoardInfoPropType) => {
+const BoardInfo = ({ boardId }: BoardInfoPropType) => {
+    const browserHistory = useHistory();
 
-    const [isSafe, setIsSafe] = useState(false);
     const [openTooltip, setOpenTooltip] = React.useState(false);
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
     const onClickBoardInfoHeading = async (event: any) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const onBoardCopyCLick = async (event: any) => {
+        setAnchorEl(null);
         event.stopPropagation()
         navigator.clipboard.writeText(boardId);
         setOpenTooltip(true);
         await new Promise(r => setTimeout(r, 2000));
         setOpenTooltip(false);
-    };
-    const open = Boolean(anchorEl);
-    const id = open ? 'simple-popper' : undefined;
+      };
 
-    const onSafetyResultClickHandler = (event: any) => {
-        event.stopPropagation()
-        setAnchorEl(anchorEl ? null : event.currentTarget);
-    }
+    const onExportBoard = (event: any) => {
+        setAnchorEl(null);
+        exportBoard(boardId);
+    };
 
-    useEffect(() => {
-        setIsSafe(safetyScores.every(score => score > 2));
-    }, [safetyScores]);
+    const onFeedBack = (event: any) => {
+        setAnchorEl(null);
+        browserHistory.push(`/survey`);
+    };
+    const handleClose = () => {
+       setAnchorEl(null);
+      };
 
     return (
         <div className='board-info'>
-            <Accordion>
-                <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="additional-actions1-content" aria-label="Expand" id="panel1a-header">
-                    <Tooltip
-                        PopperProps={{
-                            disablePortal: true,
+            <Tooltip
+                PopperProps={{
+                    disablePortal: true,
+                }}
+                open={openTooltip}
+                disableFocusListener
+                disableHoverListener
+                disableTouchListener
+                title="Successfully copied to clipboard"
+                placement="bottom-start"
+            >
+                <span className="board-info">
+                    <Tooltip title={`Board ID: ${boardId}`} aria-label="copy" placement="top-start">
+                        <ButtonGroup size="small" aria-label="small outlined button group">
+                            <Button className="board-button-group" variant="outlined" onMouseOver={onClickBoardInfoHeading}>{`Board : ${boardId}`}</Button>
+                        </ButtonGroup>
+                    </Tooltip>
+                    <Menu
+                        id="board-menu"
+                        anchorEl={anchorEl}
+                        open={Boolean(anchorEl)}
+                        onClose={handleClose}
+                        className="board-menu"
+                        anchorOrigin={{
+                            vertical: 'bottom',
+                            horizontal: 'center',
                         }}
-                        open={openTooltip}
-                        disableFocusListener
-                        disableHoverListener
-                        disableTouchListener
-                        title="Successfully copied to clipboard"
-                        placement="bottom-start"
                     >
-                        <span className="board-info">
-                            <Tooltip title="Click to copy Board Id" aria-label="copy" placement="top-start">
-                            <ButtonGroup color="primary" variant="outlined" size="small" aria-label="small outlined button group">
-                             <Button onClick={onClickBoardInfoHeading}>{`Board ID: ${boardId}`}</Button>
-                             </ButtonGroup>
-                            </Tooltip>
-                        </span>
-                    </Tooltip>
-                    <Button size="small" variant="outlined" className={isSafe ? "safety-success" : "safety-failure"} onClick={onSafetyResultClickHandler}> Safety Result: {isSafe ? 'Safe' : 'False'} <InfoOutlinedIcon className='safety-result-info' /></Button>
-
-                    <Typography className='safety-score-info'></Typography>
-                    <Popper id={id} open={open} anchorEl={anchorEl}>
-                        <Paper variant='elevation' elevation={3} className='safety-graph'><SafetyChart data={safetyScores} /></ Paper>
-                    </Popper>
-                </AccordionSummary>
-                <AccordionDetails>
-                    <span className='export-button'>Export Board<IconButton onClick={() => {
-                        exportBoard(boardId)
-                    }}><GetAppRoundedIcon className='export-icon' /></IconButton></span>
-                </AccordionDetails>
-            </Accordion>
+                        <MenuItem className="board-menu" onClick={onBoardCopyCLick}><FileCopyRoundedIcon className="menuitem-icon" /><Typography className="menuitem-text" variant="button">COPY BOARD ID</Typography></MenuItem>
+                        <MenuItem className="board-menu" onClick={onExportBoard}><PictureAsPdfRoundedIcon className="menuitem-icon" /><Typography className="menuitem-text" variant="button">EXPORT BOARD AS PDF</Typography></MenuItem>
+                    </Menu>
+                </span>
+            </Tooltip>
+            <Button onClick={onFeedBack}><FeedbackRoundedIcon className="feedback-button" /></Button>
         </div>
     );
 }

diff --git a/packages/webapp/src/components/boards/Board.scss b/packages/webapp/src/components/boards/Board.scss
@@ -39,4 +39,26 @@
 .toolbar-box{
     padding: 0.5%;
     border-bottom-color: rgb(194, 194, 194) !important;
+}
+.popper{
+    border: 1px solid;
+    padding: 1vh;
+    background-color: white;
+}
+.safety-result-info{
+    margin-left: 0.5vw;
+}
+.safety-graph{
+    padding-top:2vh;
+    margin-top: 1vh;
+}
+.safety-success{
+    float: left !important;
+    border-color: rgb(69, 199, 80) !important;
+    color: rgb(69, 199, 80) !important;
+}
+.safety-failure{
+    float: left !important;
+    border-color: rgb(209, 73, 73) !important;
+    color: rgb(209, 73, 73) !important;
 }
diff --git a/packages/webapp/src/components/boards/Boards.tsx b/packages/webapp/src/components/boards/Boards.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Grid, Typography, Button, Box, ButtonGroup } from '@material-ui/core';
+import { Grid, Typography, Button, Box, ButtonGroup, Popper, Paper, ClickAwayListener } from '@material-ui/core';
 import Divider from '@material-ui/core/Divider';
 import GoodMoodIcon from '@material-ui/icons/Mood';
 import BadMoodIcon from '@material-ui/icons/MoodBad';
@@ -8,12 +8,13 @@ import AppreciationIcon from '@material-ui/icons/Stars';
 import AddIcon from '@material-ui/icons/AddCircle';
 import io from 'socket.io-client'
 import Navbar from '../navbar/Navbar';
-import BoardInfo from '../board-info/BoardInfo';
 import NoteForm from '../note-form/NoteForm';
 import Note from '../note/Note';
 import IconButton from '@material-ui/core/IconButton';
 import SafetyCheck from '../safety-check/SafetyCheck';
 import { getUserIDStorageKey } from '../../common-utils';
+import SafetyChart from '../safety-chart/SafetyChart';
+import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
 
 import './Board.scss';
 
@@ -33,6 +34,21 @@ const Boards = ({ location }: { location: Location }) => {
 
     const [safetyCheck, setSafetyCheck] = useState({ open: false });
 
+    const [isSafe, setIsSafe] = useState(false);
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+    const open = Boolean(anchorEl);
+    const id = open ? 'simple-popper' : undefined;
+
+    const onSafetyResultClickHandler = (event: any) => {
+        event.stopPropagation()
+        setAnchorEl(anchorEl ? null : event.currentTarget);
+    }
+
+    const onSafetyCheckClickAway = (event: any) => {
+        setAnchorEl(null);
+    }
+
     const CATEGORIES_TITLE_MAP = new Map<string, string>()
         .set('went-well', 'What went well')
         .set('not-well', 'What didn\'t go well')
@@ -91,9 +107,12 @@ const Boards = ({ location }: { location: Location }) => {
         if (Boolean(userId)) return userId;
         else throw new Error('Invalid user id');
     }
+    useEffect(() => {
+        setIsSafe(safetyScores.every(score => score > 2));
+    }, [safetyScores]);
 
     useEffect(() => {
-        const { boardId } = location.pathname.match(/(\/boards\/(?<boardId>[\w\d-]*))/)?.groups || { boardId: '' };
+        const { boardId } = location.pathname.match(/(\/boards\/(?<boardId>[\w\d-]*))/) ?.groups || { boardId: '' };
         if (!boardId) throw new Error('Invalid board id');
         const userId = getUserIdForBoard(boardId);
 
@@ -161,12 +180,24 @@ const Boards = ({ location }: { location: Location }) => {
 
     return (
         <div className="board">
-            <Navbar />
-            <BoardInfo boardId={boardId} safetyScores={safetyScores} />
-            <Box display="flex" borderBottom={1} boxShadow={1} className="toolbar-box" flexDirection="row-reverse">
+            <Navbar boardId={boardId} />
+            <Box display="flex" borderBottom={1} boxShadow={1} className="toolbar-box">
+            <Box display="flex" flexDirection="row">
                 <ButtonGroup color="primary" variant="contained" size="small" aria-label="small outlined button group">
                     <Button onClick={sortCardHandler}>SORT BY VOTES</Button>
                 </ButtonGroup>
+                </Box>
+                <Box display="flex" flexGrow={1} flexDirection="row-reverse">
+                    <Button size="small" variant="outlined" className={isSafe ? "safety-success" : "safety-failure"} onClick={onSafetyResultClickHandler}> Safety Result: {isSafe ? 'Safe' : 'False'} <InfoOutlinedIcon className='safety-result-info' /></Button>
+
+                    <Typography className='safety-score-info'></Typography>
+
+                    <Popper id={id} open={open} anchorEl={anchorEl}>
+                        <ClickAwayListener onClickAway={onSafetyCheckClickAway}>
+                            <Paper variant='elevation' elevation={3} className='safety-graph'><SafetyChart data={safetyScores} /></ Paper>
+                        </ClickAwayListener>
+                    </Popper>
+                </Box>
             </Box>
             <div className="board-content">
                 <Grid container>

diff --git a/packages/webapp/src/components/navbar/Navbar.tsx b/packages/webapp/src/components/navbar/Navbar.tsx
@@ -3,13 +3,16 @@ import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import Avatar from "@material-ui/core/Avatar";
-import PersonIcon from '@material-ui/icons/Person';
-import { useHistory } from 'react-router'
-import HomeLogo from '../../assets/Logo.png'
+import { useHistory } from 'react-router';
+import HomeLogo from '../../assets/Logo.png';
+import BoardInfo from '../board-info/BoardInfo';
 
 import './Navbar.scss';
 
-const Navbar = () => {
+type BoardInfoPropType = {
+    boardId: string;
+};
+const Navbar = ({ boardId }: BoardInfoPropType) => {
     const browserHistory = useHistory();
     return (
         <div className='navbar'>
@@ -19,9 +22,9 @@ const Navbar = () => {
                             <img alt="Home Logog" src={HomeLogo} />
                         </Avatar>
                     <Typography variant="h6" className='title'>The Retro App</Typography>
-                    <Avatar className='user-icon'>
-                        <PersonIcon />
-                    </Avatar>
+                    <div className='user-icon'>
+                       <BoardInfo boardId={boardId}/>
+                    </div>
                 </Toolbar>
             </AppBar>
         </div>

diff --git a/packages/webapp/src/components/note/Note.scss b/packages/webapp/src/components/note/Note.scss
@@ -13,4 +13,7 @@
 }
 .card-box{
     border-radius: 5%;
+}
+.card-actions{
+    margin-bottom: 5px !important;
 }
diff --git a/packages/webapp/src/components/note/Note.tsx b/packages/webapp/src/components/note/Note.tsx
@@ -4,7 +4,9 @@ import CardContent from "@material-ui/core/CardContent";
 import Typography from "@material-ui/core/Typography";
 import ThumbUpOutlinedIcon from '@material-ui/icons/ThumbUpOutlined';
 import ThumbUp from '@material-ui/icons/ThumbUp';
-import { Button, IconButton, Badge, Tooltip, Box } from "@material-ui/core";
+import { Button, Badge, Tooltip, Box, Divider } from "@material-ui/core";
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+import EditRoundedIcon from '@material-ui/icons/EditRounded';
 
 import './Note.scss';
 
@@ -32,15 +34,18 @@ const Note = ({ userId, note, setNoteForm, updateNoteHandler, updateVoteHandler,
               {note.text}
             </Typography>
           </CardContent>
-          <Tooltip title={hasVoted() ? 'downvote' : 'upvote'}>
-            <IconButton onClick={voteHandler}>
+          <Divider variant="middle" />
+          <div className="card-actions">
+          <Tooltip title={hasVoted() ? 'DOWN VOTE' : 'UP VOTE'}>
+            <Button size="small" onClick={voteHandler}>
               <Badge badgeContent={note.votes.length} color="secondary" >
                 {hasVoted() ? <ThumbUp color='primary' /> : <ThumbUpOutlinedIcon />}
               </Badge>
-            </IconButton>
+            </Button>
           </Tooltip>
-          <Button color='primary' className='edit-button' onClick={editNoteHandler}>Edit</Button>
-          <Button color='primary' className='edit-button' onClick={deleteClickHandler}>DELETE</Button>
+          <Button size="small" color='primary' className='edit-button' onClick={editNoteHandler}><EditRoundedIcon/></Button>
+          <Button size="small" color='primary' className='edit-button' onClick={deleteClickHandler}><DeleteRoundedIcon/></Button>
+          </div>
         </Card>
       </Box>
     </div >

diff --git a/packages/webapp/src/components/safety-chart/SafetyChart.tsx b/packages/webapp/src/components/safety-chart/SafetyChart.tsx
@@ -27,8 +27,8 @@ const SafetyChart = ({ data }: { data: any }) => {
     const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];
 
     return (
-        <BarChart width={400} height={300} data={graphData} barGap="0" barCategoryGap={0}
-            margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+        <BarChart width={300} height={250} data={graphData} barGap="0" barCategoryGap={0}
+            margin={{ top: 15, right: 10, left: 5, bottom: 5 }}>
             <CartesianGrid strokeDasharray="3 3" />
             <XAxis type="category" dataKey="uv" />
             <YAxis />