Merge pull request #249 from cofacts/feature/new-article-details-page-ui

Feature/new article details page ui

components/AppLayout/AppHeader.js

@@ -32,7 +32,7 @@ const useStyles = makeStyles(theme => ({
     position: 'sticky',
     height: NAVBAR_HEIGHT + TABS_HEIGHT,
     top: 0,
-    zIndex: 10,
+    zIndex: theme.zIndex.appBar,
     [theme.breakpoints.up('md')]: {
       height: NAVBAR_HEIGHT,
     },

components/ArticleInfo.js

@@ -52,8 +52,8 @@ export default function ArticleInfo({ article }) {
     <div>
       <span className={classes.info}>
         {ngettext(
-          msgid`${replyRequestCount} occurence`,
-          `${replyRequestCount} occurences`,
+          msgid`${replyRequestCount} occurrence`,
+          `${replyRequestCount} occurrences`,
           replyRequestCount
         )}
       </span>

components/ArticleReply/CopyButton.js

@@ -0,0 +1,22 @@
+import React, { useRef, useEffect } from 'react';
+import { Button } from '@material-ui/core';
+import ClipboardJS from 'clipboard';
+import { t } from 'ttag';
+
+const CopyButton = React.memo(({ content = '', onClick = () => {} }) => {
+  const copyBtnRef = useRef(null);
+
+  useEffect(() => {
+    const clipboard = new ClipboardJS(copyBtnRef.current, {
+      text: () => content,
+    });
+    clipboard.on('success', () => onClick());
+    return () => clipboard.destroy();
+  }, [copyBtnRef.current, content, onClick]);
+
+  return <Button ref={copyBtnRef}>{t`Copy`}</Button>;
+});
+
+CopyButton.displayName = 'CopyButton';
+
+export default CopyButton;

components/ArticleReply/ReplyActions.js

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { Button, Menu, MenuItem } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+
+const useStyles = makeStyles(theme => ({
+  button: {
+    minWidth: 0,
+    padding: '8px 14px',
+    color: ({ open }) =>
+      open ? theme.palette.primary[500] : theme.palette.secondary[500],
+  },
+  menu: {
+    marginTop: 40,
+  },
+}));
+
+const ReplyActions = ({ disabled, handleAction, actionText }) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  const classes = useStyles({ open: !!anchorEl });
+
+  const handleClick = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <Button
+        aria-controls="actions"
+        aria-haspopup="true"
+        className={classes.button}
+        onClick={handleClick}
+      >
+        <MoreVertIcon />
+      </Button>
+      <Menu
+        id="actions"
+        anchorEl={anchorEl}
+        keepMounted
+        open={!!anchorEl}
+        onClose={handleClose}
+        className={classes.menu}
+      >
+        <MenuItem disabled={disabled} onClick={handleAction}>
+          {actionText}
+        </MenuItem>
+      </Menu>
+    </>
+  );
+};
+
+export default ReplyActions;