feat: show users when they are previewing a space

closes #96
graasp · Jun 14, 2019 · be10b87 · be10b87
1 parent 2859b14
commit be10b87
Show file tree

Hide file tree

Showing 6 changed files with 313 additions and 162 deletions.
diff --git a/package.json b/package.json
@@ -43,8 +43,8 @@
     "report": "cat ./coverage/lcov.info | env-cmd ./.env.test codacy-coverage"
   },
   "dependencies": {
-    "@material-ui/core": "3.9.3",
-    "@material-ui/icons": "3.0.2",
+    "@material-ui/core": "4.1.1",
+    "@material-ui/icons": "4.2.0",
     "@sentry/browser": "5.1.1",
     "@sentry/electron": "0.17.1",
     "archiver": "3.0.0",

diff --git a/src/Styles.js b/src/Styles.js
@@ -3,6 +3,7 @@ const drawerWidth = 240;
 const Styles = theme => ({
   root: {
     display: 'flex',
+    height: '100%',
   },
   appBar: {
     transition: theme.transitions.create(['margin', 'width'], {
@@ -41,7 +42,7 @@ const Styles = theme => ({
   },
   content: {
     flexGrow: 1,
-    padding: theme.spacing.unit * 3,
+    padding: theme.spacing(3),
     transition: theme.transitions.create('margin', {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen,
@@ -56,19 +57,22 @@ const Styles = theme => ({
     marginLeft: 0,
   },
   input: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(),
   },
   button: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(),
   },
   screenTitle: {
-    marginBottom: theme.spacing.unit * 2,
+    marginBottom: theme.spacing(2),
   },
   alert: {
     backgroundColor: theme.status.danger.background[500],
     color: theme.status.danger.color,
     textAlign: 'center',
   },
+  spaceDescription: {
+    marginBottom: theme.spacing(3),
+  },
 });
 
 export default Styles;
diff --git a/src/components/common/Banner.js b/src/components/common/Banner.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Avatar from '@material-ui/core/Avatar';
+import Divider from '@material-ui/core/Divider';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import WarningIcon from '@material-ui/icons/Warning';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import Box from '@material-ui/core/Box';
+import { withStyles } from '@material-ui/core';
+import PropTypes from 'prop-types';
+
+const styles = theme => ({
+  banner: {
+    marginBottom: theme.spacing(2),
+  },
+});
+
+const renderButton = buttonText => (
+  <Grid container justify="flex-end" spacing={8}>
+    <Grid item>
+      <Button color="primary">{buttonText}</Button>
+    </Grid>
+  </Grid>
+);
+
+const Banner = ({ text, buttonText, classes }) => {
+  return (
+    <div className={classes.banner}>
+      <CssBaseline />
+      <Paper elevation={0}>
+        <Box pt={2} pr={1} pb={1} pl={2}>
+          <Grid container spacing={6} alignItems="center" wrap="nowrap">
+            <Grid item>
+              <Box bgcolor="primary.main" clone>
+                <Avatar>
+                  <WarningIcon />
+                </Avatar>
+              </Box>
+            </Grid>
+            <Grid item>
+              <Typography>{text}</Typography>
+            </Grid>
+          </Grid>
+          {buttonText ? renderButton() : null}
+        </Box>
+      </Paper>
+      <Divider />
+    </div>
+  );
+};
+
+Banner.propTypes = {
+  text: PropTypes.string,
+  buttonText: PropTypes.string,
+  classes: PropTypes.shape({ banner: PropTypes.string.isRequired }).isRequired,
+};
+
+Banner.defaultProps = {
+  text: null,
+  buttonText: null,
+};
+
+export default withStyles(styles)(Banner);
diff --git a/src/components/space/SpaceDescription.js b/src/components/space/SpaceDescription.js
@@ -1,13 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Button from '@material-ui/core/Button';
-import { withStyles } from '@material-ui/core';
+import { Typography, withStyles } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import Styles from '../../Styles';
 import './SpaceDescription.css';
 import { DEFAULT_LANGUAGE } from '../../config/constants';
+import Banner from '../common/Banner';
 
-const SpaceDescription = ({ description, classes, start, lang }) => {
+const renderPreviewWarning = t => {
+  return (
+    <Banner
+      text={t(
+        'Warning: You are previewing this space. Any input or changes will not be saved.'
+      )}
+    />
+  );
+};
+
+const SpaceDescription = ({ description, classes, start, lang, saved }) => {
   const { i18n } = useTranslation();
 
   // we use the fixed translation for spaces as they
@@ -16,17 +27,19 @@ const SpaceDescription = ({ description, classes, start, lang }) => {
   return (
     <div className="SpaceDescription">
       <div>
-        <h4 style={{ textAlign: 'center' }}>
+        {saved ? null : renderPreviewWarning(t)}
+        <Typography variant="h4" className={classes.spaceDescription}>
           <div dangerouslySetInnerHTML={{ __html: description }} />
-        </h4>
+        </Typography>
         <Button
           variant="contained"
           className={classes.button}
           onClick={start}
+          size="large"
           color="primary"
           style={{ display: 'block', margin: '0 auto' }}
         >
-          {t('Start')}
+          {saved ? t('Start') : t('Preview')}
         </Button>
       </div>
     </div>
@@ -38,10 +51,12 @@ SpaceDescription.propTypes = {
   lang: PropTypes.string,
   classes: PropTypes.shape({ appBar: PropTypes.string.isRequired }).isRequired,
   start: PropTypes.func.isRequired,
+  saved: PropTypes.bool,
 };
 
 SpaceDescription.defaultProps = {
   lang: DEFAULT_LANGUAGE,
+  saved: false,
 };
 
 export default withStyles(Styles, { withTheme: true })(SpaceDescription);
diff --git a/src/components/space/SpaceHeader.js b/src/components/space/SpaceHeader.js
@@ -7,8 +7,11 @@ import AppBar from '@material-ui/core/AppBar/AppBar';
 import UnarchiveIcon from '@material-ui/icons/Unarchive';
 import DeleteIcon from '@material-ui/icons/Delete';
 import SaveIcon from '@material-ui/icons/Save';
+import WarningIcon from '@material-ui/icons/Warning';
 import Toolbar from '@material-ui/core/Toolbar/Toolbar';
+import { withTranslation } from 'react-i18next';
 import IconButton from '@material-ui/core/IconButton/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
 import { withStyles } from '@material-ui/core';
 import Styles from '../../Styles';
 import { deleteSpace, exportSpace, saveSpace } from '../../actions/space';
@@ -26,6 +29,7 @@ class SpaceHeader extends Component {
     dispatchExportSpace: PropTypes.func.isRequired,
     dispatchDeleteSpace: PropTypes.func.isRequired,
     dispatchSaveSpace: PropTypes.func.isRequired,
+    t: PropTypes.func.isRequired,
   };
 
   handleExport = () => {
@@ -98,6 +102,25 @@ class SpaceHeader extends Component {
     return null;
   }
 
+  renderPreviewIcon() {
+    const { space, classes, t } = this.props;
+    const { saved } = space;
+    if (!saved) {
+      return (
+        <IconButton color="inherit" className={classes.button}>
+          <Tooltip
+            title={t(
+              'You are previewing this space. Any input or changes will not be saved.'
+            )}
+          >
+            <WarningIcon className={classes.rightIcon} />
+          </Tooltip>
+        </IconButton>
+      );
+    }
+    return null;
+  }
+
   render() {
     const {
       openDrawer,
@@ -126,6 +149,7 @@ class SpaceHeader extends Component {
           </IconButton>
           {name}
           <span style={{ position: 'absolute', right: 20 }}>
+            {this.renderPreviewIcon()}
             {this.renderDeleteButton()}
             {this.renderExportButton()}
             {this.renderSaveButton()}
@@ -157,4 +181,6 @@ const StyledComponent = withStyles(Styles, { withTheme: true })(
   ConnectedComponent
 );
 
-export default StyledComponent;
+const TranslatedComponent = withTranslation()(StyledComponent);
+
+export default TranslatedComponent;