Delete Comment UI

client/coral-embed-stream/src/Comment.css

@@ -13,13 +13,54 @@
   pointer-events: none;
 }
 
-.topRightMenu {
+/* element in the top right of the Comment */
+.topRight {
   float: right;
+  margin-top: 10px;
   text-align: right;
+}
+
+.topRight > * {
+  text-align: initial;
+}
+
+.topRight .popover {
+  margin-top: 1em;
+  right: 0px;
+}
+
+.topRight .popoverMenuOpen .link {
+  padding-bottom: 0.125em;
+  border-bottom: 2px solid currentColor;
+}
+
+.topRightMenu {
   cursor: pointer;
   margin-top: 5px;
 }
 
-.topRightMenu > * {
-  text-align: initial;
+.link {
+  color: #2376D8;
+  cursor: pointer;
+}
+
+.popover {
+  position: absolute;
+  z-index: 1;
+}
+
+/* Wizard used for Ignore User, Delete Comment confirmations */
+.Wizard {
+  background-color: #2E343B;
+  color: white;
+  padding: 1em;
+  max-width: 220px; /* consider moving to better class */
+}
+
+.Wizard header {
+  font-weight: bold;
+}
+
+.Wizard .textAlignRight {
+  text-align: right;
 }

client/coral-embed-stream/src/Comment.js

@@ -23,6 +23,8 @@ import Slot from 'coral-framework/components/Slot';
 import IgnoredCommentTombstone from './IgnoredCommentTombstone';
 import {TopRightMenu} from './TopRightMenu';
 import {getActionSummary, getTotalActionCount, iPerformedThisAction} from 'coral-framework/utils';
+import {Button} from 'coral-ui';
+import classnames from 'classnames';
 
 import styles from './Comment.css';
 
@@ -161,6 +163,55 @@ class Comment extends React.Component {
       tag: BEST_TAG,
     }), () => 'Failed to remove best comment tag');
 
+    class PopoverMenu extends React.Component {
+      static propTypes = {
+        children: PropTypes.node,
+        Popover: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+        openClassName: PropTypes.string,
+      }
+      constructor(props) {
+        super(props);
+        this.toggle = this.toggle.bind(this);
+        this.close = this.close.bind(this);
+        this.state = {
+          isOpen: false
+        };
+      }
+      toggle() {
+        this.setState({isOpen: ! this.state.isOpen});
+      }
+      close() {
+        this.setState({isOpen: false});
+      }
+      render() {
+        const {isOpen} = this.state;
+        const {children, Popover, openClassName} = this.props;
+        return (
+          <span className={classnames({[openClassName]: isOpen})}>
+            <span onClick={this.toggle}>
+              { children }
+            </span>
+            <span>
+              { isOpen ? <Popover close={this.close} /> : null }
+            </span>
+          </span>
+        );
+      }
+    }
+
+    const DeleteCommentConfirmation = ({cancel, deleteComment}) => {
+      return (
+        <div className={classnames(styles.popover, styles.Wizard)}>
+          <header>Delete a comment</header>
+          <p>Are you sure you want to delete that comment</p>
+          <div className={styles.textAlignRight}>
+            <Button cStyle='cancel' onClick={cancel}>Cancel</Button>
+            <Button onClick={() => deleteComment()}>Delete comment</Button>
+          </div>
+        </div>
+      );
+    };
+
     return (
       <div
         className={commentClass}
@@ -180,14 +231,30 @@ class Comment extends React.Component {
           <PubDate created_at={comment.created_at} />
           <Slot fill="commentInfoBar" comment={comment} commentId={comment.id} inline/>
 
-          { (currentUser && (comment.user.id !== currentUser.id))
-            ? <span className={styles.topRightMenu}>
-                <TopRightMenu
-                  comment={comment}
-                  ignoreUser={ignoreUser}
-                  addNotification={addNotification} />
-              </span>
-            : null
+          { (currentUser &&
+              (comment.user.id === currentUser.id))
+
+              /* User can edit/delete their own comment for a short window after posting */
+              ? <span className={classnames(styles.topRight)}>
+                  <PopoverMenu
+                    className={styles.popoverMenu}
+                    openClassName={styles.popoverMenuOpen}
+                    Popover={ ({close}) =>
+                      <DeleteCommentConfirmation
+                        cancel={close}
+                        deleteComment={() => { /*console.log('delete comment', comment)*/ }}
+                      /> }>
+                    <a className={styles.link}>Delete</a>
+                  </PopoverMenu>
+                </span>
+
+              /* TopRightMenu allows currentUser to ignore other users' comments */
+              : <span className={classnames(styles.topRight, styles.topRightMenu)}>
+                  <TopRightMenu
+                    comment={comment}
+                    ignoreUser={ignoreUser}
+                    addNotification={addNotification} />
+                </span>
           }
 
           <Content body={comment.body} />

client/coral-embed-stream/src/IgnoreUserWizard.css

@@ -1,14 +0,0 @@
-.IgnoreUserWizard {
-  background-color: #2E343B;
-  color: white;
-  padding: 1em;
-  max-width: 220px;
-}
-
-.IgnoreUserWizard header {
-  font-weight: bold;
-}
-
-.IgnoreUserWizard .textAlignRight {
-  text-align: right;
-}

client/coral-embed-stream/src/IgnoreUserWizard.js

@@ -1,5 +1,5 @@
 import React, {PropTypes} from 'react';
-import styles from './IgnoreUserWizard.css';
+import styles from './Comment.css';
 import {Button} from 'coral-ui';
 
 // Guides the user through ignoring another user, including confirming their decision
@@ -58,7 +58,7 @@ export class IgnoreUserWizard extends React.Component {
     const {step} = this.state;
     const elForThisStep = elsForStep[step - 1];
     return (
-      <div className={styles.IgnoreUserWizard}>
+      <div className={styles.Wizard}>
         { elForThisStep }
       </div>
     );