aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--webui/src/pages/bug/EditHistoryMenu.tsx80
-rw-r--r--webui/src/pages/bug/Message.tsx13
2 files changed, 89 insertions, 4 deletions
diff --git a/webui/src/pages/bug/EditHistoryMenu.tsx b/webui/src/pages/bug/EditHistoryMenu.tsx
new file mode 100644
index 00000000..10b66f8f
--- /dev/null
+++ b/webui/src/pages/bug/EditHistoryMenu.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+
+import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import HistoryIcon from '@material-ui/icons/History';
+
+const options = [
+ 'None',
+ 'Atria',
+ 'Callisto',
+ 'Dione',
+ 'Ganymede',
+ 'Hangouts Call',
+ 'Luna',
+ 'Oberon',
+ 'Phobos',
+ 'Pyxis',
+ 'Sedna',
+ 'Titania',
+ 'Triton',
+ 'Umbriel',
+];
+
+const ITEM_HEIGHT = 48;
+
+type Props = {
+ iconBtnProps?: IconButtonProps;
+};
+function EditHistoryMenu({ iconBtnProps }: Props) {
+ const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+ const open = Boolean(anchorEl);
+
+ const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+
+ return (
+ <div>
+ <IconButton
+ aria-label="more"
+ aria-controls="long-menu"
+ aria-haspopup="true"
+ onClick={handleClick}
+ {...iconBtnProps}
+ >
+ <HistoryIcon />
+ </IconButton>
+ <Menu
+ id="long-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={open}
+ onClose={handleClose}
+ PaperProps={{
+ style: {
+ maxHeight: ITEM_HEIGHT * 4.5,
+ width: '20ch',
+ },
+ }}
+ >
+ {options.map((option) => (
+ <MenuItem
+ key={option}
+ selected={option === 'Pyxis'}
+ onClick={handleClose}
+ >
+ {option}
+ </MenuItem>
+ ))}
+ </Menu>
+ </div>
+ );
+}
+
+export default EditHistoryMenu;
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 26bbb1aa..d36b1044 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -13,6 +13,7 @@ import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn';
import { BugFragment } from './Bug.generated';
import EditCommentForm from './EditCommentForm';
+import EditHistoryMenu from './EditHistoryMenu';
import { AddCommentFragment } from './MessageCommentFragment.generated';
import { CreateFragment } from './MessageCreateFragment.generated';
@@ -57,7 +58,8 @@ const useStyles = makeStyles((theme) => ({
...theme.typography.body2,
padding: '0.5rem',
},
- editButton: {
+ headerActions2: {},
+ headerActions: {
color: theme.palette.info.contrastText,
padding: '0rem',
marginLeft: theme.spacing(1),
@@ -91,13 +93,17 @@ function Message({ bug, op }: Props) {
<span> commented </span>
<Date date={comment.createdAt} />
</div>
- {comment.edited && <div className={classes.tag}>Edited</div>}
+ {comment.edited && (
+ <EditHistoryMenu
+ iconBtnProps={{ className: classes.headerActions }}
+ />
+ )}
<IfLoggedIn>
{() => (
<Tooltip title="Edit Message" placement="top" arrow={true}>
<IconButton
disableRipple
- className={classes.editButton}
+ className={classes.headerActions}
aria-label="edit message"
onClick={() => editComment(comment.id)}
>
@@ -129,7 +135,6 @@ function Message({ bug, op }: Props) {
<EditCommentForm
bug={bug}
onCancelClick={cancelEdition}
- // Close edit view after submitted changes
onPostSubmit={onPostSubmit}
comment={comment}
/>