#469 Make ideas/actions pretty and recognisable

m2ms · Dec 9, 2020 · d845a3a · d845a3a
1 parent 6ea2e2a
commit d845a3a
Show file tree

Hide file tree

Showing 5 changed files with 236 additions and 25 deletions.
diff --git a/js/components/tracking/EditableText.js b/js/components/tracking/EditableText.js
@@ -0,0 +1,65 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { makeStyles, TextField, IconButton, Tooltip, Grid } from '@material-ui/core';
+import { Edit } from '@material-ui/icons';
+
+const useStyles = makeStyles(theme => ({
+  search: {
+    width: '100%'
+  },
+  fontSizeSmall: {
+    fontSize: '0.82rem'
+  }
+}));
+
+const EditableInput = props => {
+  const inputRef = useRef(null);
+  const [inputVisible, setInputVisible] = useState(false);
+  const [text, setText] = useState(props.text);
+  const classes = useStyles();
+
+  function onClickOutSide(e) {
+    if (inputRef.current && !inputRef.current.contains(e.target)) {
+      setInputVisible(false);
+    }
+  }
+
+  useEffect(() => {
+    // Handle outside clicks on mounted state
+    if (inputVisible) {
+      document.addEventListener('mousedown', onClickOutSide);
+    }
+
+    // This is a necessary step to "dismount" unnecessary events when we destroy the component
+    return () => {
+      document.removeEventListener('mousedown', onClickOutSide);
+    };
+  });
+
+  return (
+    <React.Fragment>
+      {inputVisible ? (
+        <TextField
+          className={classes.search}
+          ref={inputRef}
+          value={text}
+          onChange={e => {
+            setText(e.target.value);
+          }}
+        />
+      ) : (
+        <Grid item justify="flex-start" alignItems="flex-start">
+          {<span onClick={() => setInputVisible(true)}>{text}</span>}
+          {
+            <IconButton color={'primary'} size="small" onClick={() => setInputVisible(true)}>
+              <Tooltip title="Edit">
+                <Edit className={classes.fontSizeSmall} />
+              </Tooltip>
+            </IconButton>
+          }
+        </Grid>
+      )}
+    </React.Fragment>
+  );
+};
+
+export default EditableInput;
diff --git a/js/components/tracking/timelineView.js b/js/components/tracking/timelineView.js
@@ -0,0 +1,119 @@
+import React, { useState, useRef, memo } from 'react';
+import { makeStyles, IconButton, Tooltip, Grid } from '@material-ui/core';
+import { Check, Clear, Warning, Favorite, Star } from '@material-ui/icons';
+import { actionAnnotation } from '../../reducers/tracking/constants';
+import { TimelineEvent } from 'react-event-timeline';
+import EditableText from './editableText';
+import palette from '../../theme/palette';
+
+const useStyles = makeStyles(theme => ({
+  headerGrid: {
+    height: '25px'
+  },
+  grid: {
+    height: 'inherit'
+  },
+  iconButton: {
+    padding: '6px'
+  },
+  timelineEvent: {
+    borderBottom: '1px dashed ' + palette.divider,
+    paddingBottom: '10px'
+  }
+}));
+
+const TimelineView = memo(({ data, index }) => {
+  const ref = useRef(null);
+  const [isHovering, setIsHovering] = useState(false);
+
+  const classes = useStyles();
+
+  const getActionIcon = data => {
+    if (data && data.annotation) {
+      switch (data.annotation) {
+        case actionAnnotation.CHECK:
+          return <Check />;
+        case actionAnnotation.CLEAR:
+          return <Clear />;
+        case actionAnnotation.WARNING:
+          return <Warning />;
+        case actionAnnotation.FAVORITE:
+          return <Favorite />;
+        case actionAnnotation.STAR:
+          return <Star />;
+        default:
+          return <Check />;
+      }
+    } else {
+      return <Check />;
+    }
+  };
+
+  const annotationActions = [
+    <IconButton className={classes.iconButton} color={'primary'} onClick={() => {}}>
+      <Tooltip title="Check">
+        <Check />
+      </Tooltip>
+    </IconButton>,
+    <IconButton className={classes.iconButton} color={'primary'} onClick={() => {}}>
+      <Tooltip title="Clear">
+        <Clear />
+      </Tooltip>
+    </IconButton>,
+    <IconButton className={classes.iconButton} color={'primary'} onClick={() => {}}>
+      <Tooltip title="Warning">
+        <Warning />
+      </Tooltip>
+    </IconButton>,
+    <IconButton className={classes.iconButton} color={'primary'} onClick={() => {}}>
+      <Tooltip title="Favorite">
+        <Favorite />
+      </Tooltip>
+    </IconButton>,
+    <IconButton className={classes.iconButton} color={'primary'} onClick={() => {}}>
+      <Tooltip title="Star">
+        <Star />
+      </Tooltip>
+    </IconButton>
+  ];
+
+  return (
+    <div ref={ref} onMouseEnter={() => setIsHovering(true)} onMouseLeave={() => setIsHovering(false)}>
+      <TimelineEvent
+        key={index}
+        title={
+          <div>
+            <Grid container justify="flex-start" direction="row" alignItems="center" className={classes.headerGrid}>
+              {
+                <Grid item xs={8} justify="flex-start" direction="row" alignItems="flex-start">
+                  <EditableText text={data.text} identifier={index} />
+                </Grid>
+              }
+              {isHovering && (
+                <Grid item container direction="row" justify="flex-end" xs={4} className={classes.grid}>
+                  {annotationActions &&
+                    annotationActions.map((action, index) => (
+                      <Grid item key={index}>
+                        {action}
+                      </Grid>
+                    ))}
+                </Grid>
+              )}
+            </Grid>
+          </div>
+        }
+        createdAt={
+          <Grid item justify="flex-start" alignItems="flex-start">
+            {new Date(data.timestamp).toLocaleString()}
+          </Grid>
+        }
+        icon={getActionIcon(data)}
+        iconColor={palette.primary.main}
+        className={classes.timelineEvent}
+      ></TimelineEvent>
+    </div>
+  );
+});
+
+TimelineView.displayName = 'TimelineView';
+export default TimelineView;
diff --git a/js/components/tracking/trackingModal.js b/js/components/tracking/trackingModal.js
@@ -2,10 +2,11 @@ import React, { memo, useCallback, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import Modal from '../common/Modal';
 import { Grid, makeStyles, IconButton, Tooltip } from '@material-ui/core';
-import { Timeline, TimelineEvent } from 'react-event-timeline';
-import { Check, Clear, Close } from '@material-ui/icons';
+import { Timeline } from 'react-event-timeline';
+import { Close } from '@material-ui/icons';
 import palette from '../../theme/palette';
 import { Panel } from '../common';
+import TimelineView from './timelineView';
 import { setProjectTrackingActions } from '../../reducers/tracking/dispatchActions';
 
 const useStyles = makeStyles(theme => ({
@@ -16,10 +17,7 @@ const useStyles = makeStyles(theme => ({
   customContentModal: {
     height: '100%'
   },
-  timelineEvent: {
-    borderBottom: '1px dashed ' + palette.divider,
-    paddingBottom: '10px'
-  },
+
   divContainer: {
     height: '100%',
     width: '100%',
@@ -78,24 +76,7 @@ export const TrackingModal = memo(({ openModal, onModalClose }) => {
                 {orderedActionList &&
                   orderedActionList.map((data, index) => {
                     if (data && data != null) {
-                      return (
-                        <TimelineEvent
-                          key={index}
-                          title={data.text}
-                          createdAt={new Date(data.timestamp).toLocaleString()}
-                          icon={
-                            data.type.includes('OFF') === true ||
-                            data.type.includes('DESELECTED') === true ||
-                            data.type.includes('REMOVED') === true ? (
-                              <Clear />
-                            ) : (
-                              <Check />
-                            )
-                          }
-                          iconColor={palette.primary.main}
-                          className={classes.timelineEvent}
-                        ></TimelineEvent>
-                      );
+                      return <TimelineView data={data} index={index}></TimelineView>;
                     }
                   })}
               </Timeline>

diff --git a/js/reducers/tracking/constants.js b/js/reducers/tracking/constants.js
@@ -86,3 +86,11 @@ export const actionObjectType = {
   CROSS_REFERENCE: 'CROSS_REFERENCE',
   REPRESENTATION: 'REPRESENTATION'
 };
+
+export const actionAnnotation = {
+  CHECK: 'CHECK',
+  CLEAR: 'CLEAR',
+  WARNING: 'WARNING',
+  FAVORITE: 'FAVORITE',
+  STAR: 'STAR'
+};