Merge pull request #291 from graasp/285/classroomLegend

refactor: add classroom legend, refactor resource and action icons

Author: juancarlosfarah

src/components/classrooms/ActionIcon.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '@material-ui/icons/Assessment';
+import { withTranslation } from 'react-i18next';
+
+const ActionIcon = ({ className, text, t }) => {
+  return (
+    <>
+      <Icon className={className} />
+      {text && <span>{t('Actions')}</span>}
+    </>
+  );
+};
+
+ActionIcon.propTypes = {
+  className: PropTypes.string,
+  text: PropTypes.bool,
+  t: PropTypes.func.isRequired,
+};
+
+ActionIcon.defaultProps = {
+  className: '',
+  text: false,
+};
+
+export default withTranslation()(ActionIcon);

src/components/classrooms/ClassroomLegend.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core';
+import ResourceIcon from './ResourceIcon';
+import ActionIcon from './ActionIcon';
+
+const styles = theme => ({
+  legend: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+
+    '& span': {
+      marginLeft: theme.spacing(0.5),
+      marginRight: theme.spacing(2),
+    },
+  },
+});
+
+const ClassroomLegend = ({ classes }) => {
+  return (
+    <div className={classes.legend}>
+      <ResourceIcon text />
+      <ActionIcon text />
+    </div>
+  );
+};
+
+ClassroomLegend.propTypes = {
+  classes: PropTypes.shape({
+    legend: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+const StyledComponent = withStyles(styles, { withTheme: true })(
+  ClassroomLegend
+);
+
+export default StyledComponent;

src/components/classrooms/ClassroomScreen.js

@@ -9,6 +9,7 @@ import Button from '@material-ui/core/Button';
 import Toolbar from '@material-ui/core/Toolbar';
 import CssBaseline from '@material-ui/core/CssBaseline/CssBaseline';
 import AppBar from '@material-ui/core/AppBar/AppBar';
+import ClassroomLegend from './ClassroomLegend';
 import Styles from '../../Styles';
 import Loader from '../common/Loader';
 import Main from '../common/Main';
@@ -124,6 +125,7 @@ class ClassroomScreen extends Component {
       <Main>
         <div className={classes.screen}>
           <StudentsTable classroom={classroom} />
+          <ClassroomLegend />
           <ImportDataButton classroomId={classroomId} />
           <AddUserInClassroomButton classroomId={classroomId} />
           {this.renderBackButton()}

src/components/classrooms/EditUserInClassroomButton.js

@@ -13,8 +13,6 @@ import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import { withTranslation } from 'react-i18next';
 import Typography from '@material-ui/core/Typography';
-import ResourceIcon from '@material-ui/icons/AssignmentInd';
-import ActionIcon from '@material-ui/icons/Assessment';
 import CancelIcon from '@material-ui/icons/Cancel';
 import TextField from '@material-ui/core/TextField';
 import Dialog from '@material-ui/core/Dialog';
@@ -39,6 +37,8 @@ import {
   hasUserResourcesForSpaceInClassroom,
   hasUserDataInClassroom,
 } from '../../utils/classroom';
+import ResourceIcon from './ResourceIcon';
+import ActionIcon from './ActionIcon';
 
 const styles = theme => ({
   formControl: {

src/components/classrooms/ResourceIcon.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '@material-ui/icons/AssignmentInd';
+import { withTranslation } from 'react-i18next';
+
+const ResourceIcon = ({ className, text, t }) => {
+  return (
+    <>
+      <Icon className={className} />
+      {text && <span>{t('Resources')}</span>}
+    </>
+  );
+};
+
+ResourceIcon.propTypes = {
+  className: PropTypes.string,
+  text: PropTypes.bool,
+  t: PropTypes.func.isRequired,
+};
+
+ResourceIcon.defaultProps = {
+  className: '',
+  text: false,
+};
+
+export default withTranslation()(ResourceIcon);

src/components/classrooms/StudentsTable.js

@@ -11,8 +11,6 @@ import TableContainer from '@material-ui/core/TableContainer';
 import TablePagination from '@material-ui/core/TablePagination';
 import TableRow from '@material-ui/core/TableRow';
 import DeleteIcon from '@material-ui/icons/Delete';
-import ResourceIcon from '@material-ui/icons/AssignmentInd';
-import ActionIcon from '@material-ui/icons/Assessment';
 import IconButton from '@material-ui/core/IconButton/IconButton';
 import Tooltip from '@material-ui/core/Tooltip';
 import Paper from '@material-ui/core/Paper';
@@ -39,6 +37,8 @@ import {
   getUserResourcesForSpaceInClassroom,
   getUserActionsForSpaceInClassroom,
 } from '../../utils/classroom';
+import ActionIcon from './ActionIcon';
+import ResourceIcon from './ResourceIcon';
 
 const styles = theme => ({
   root: {