Adding plugin

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

@@ -1,6 +1,5 @@
 import React, {PropTypes} from 'react';
 
-import PermalinkButton from 'coral-plugin-permalinks/PermalinkButton';
 import AuthorName from 'coral-plugin-author-name/AuthorName';
 import TagLabel from 'coral-plugin-tag-label/TagLabel';
 import PubDate from 'coral-plugin-pubdate/PubDate';
@@ -509,19 +508,18 @@ export default class Comment extends React.Component {
                   currentUserId={currentUser && currentUser.id}
                 />
               </ActionButton>}
+          </div>
+          <div className="commentActionsRight comment__action-container">
             <Slot
               fill="commentActions"
+              wrapperComponent={ActionButton}
               data={this.props.data}
               root={this.props.root}
+              asset={asset}
               comment={comment}
               commentId={comment.id}
               inline
             />
-          </div>
-          <div className="commentActionsRight comment__action-container">
-            <ActionButton>
-              <PermalinkButton articleURL={asset.url} commentId={comment.id} />
-            </ActionButton>
             <ActionButton>
               <FlagComment
                 flaggedByCurrentUser={!!myFlag}

client/coral-plugin-permalinks/PermalinkButton.js

@@ -1,81 +0,0 @@
-import React, {PropTypes} from 'react';
-const name = 'coral-plugin-permalinks';
-import {Button} from 'coral-ui';
-import styles from './styles.css';
-import ClickOutside from 'coral-framework/components/ClickOutside';
-
-import t from 'coral-framework/services/i18n';
-
-export default class PermalinkButton extends React.Component {
-
-  static propTypes = {
-    articleURL: PropTypes.string.isRequired,
-    commentId: PropTypes.string.isRequired
-  }
-
-  constructor (props) {
-    super(props);
-    this.state = {popoverOpen: false, copySuccessful: null, copyFailure: null};
-    this.toggle = this.toggle.bind(this);
-    this.copyPermalink = this.copyPermalink.bind(this);
-  }
-
-  toggle () {
-
-    // I wish I could position this with a stylesheet, but top-level comments with
-    // nested replies throws everything off, as well as very long comments
-    this.popover.style.top = `${this.linkButton.offsetTop - 80}px`;
-    this.setState({popoverOpen: !this.state.popoverOpen});
-  }
-
-  handleClickOutside = () => {
-    this.setState({popoverOpen: false});
-  }
-
-  copyPermalink () {
-    this.permalinkInput.select();
-    try {
-      document.execCommand('copy');
-      this.setState({copySuccessful: true, copyFailure: null});
-    } catch (err) {
-      this.setState({copyFailure: true, copySuccessful: null});
-    }
-
-    setTimeout(() => {
-      this.setState({copyFailure: null, copySuccessful: null});
-    }, 3000);
-  }
-
-  render () {
-    const {copySuccessful, copyFailure} = this.state;
-    return (
-      <ClickOutside onClickOutside={this.handleClickOutside}>
-        <div className={`${name}-container`}>
-          <button
-            ref={(ref) => this.linkButton = ref}
-            onClick={this.toggle}
-            className={`${name}-button`}>
-            {t('permalink')}
-            <i className={`${name}-icon material-icons`} aria-hidden={true}>link</i>
-          </button>
-          <div
-            ref={(ref) => this.popover = ref}
-            className={`${name}-popover ${styles.container} ${this.state.popoverOpen ? 'active' : ''}`}>
-            <input
-              className={`${name}-copy-field`}
-              type='text'
-              ref={(input) => this.permalinkInput = input}
-              value={`${this.props.articleURL}#${this.props.commentId}`}
-              onChange={() => {}} />
-            <Button className={`${name}-copy-button ${copySuccessful ? styles.success : ''} ${copyFailure ? styles.failure : ''}`}
-                    onClick={this.copyPermalink} >
-              {!copyFailure && !copySuccessful && 'Copy'}
-              {copySuccessful && 'Copied'}
-              {copyFailure && 'Not supported'}
-            </Button>
-          </div>
-        </div>
-      </ClickOutside>
-    );
-  }
-}

client/coral-plugin-permalinks/styles.css

@@ -1,67 +0,0 @@
-.container {
-  border-radius: 3px;
-  padding: 15px 10px;
-  box-sizing: border-box;
-  /* box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3); */
-  border: solid 1px rgba(153, 153, 153, 0.33);
-  left: 0;
-  width: 100%;
-
-  &::before {
-    content: '';
-    border: 10px solid transparent;
-    border-top-color: white;
-    position: absolute;
-    right: 7em;
-    bottom: -20px;
-    z-index: 2;
-  }
-
-  &::after{
-    content: '';
-    border: 10px solid transparent;
-    border-top-color: rgba(153, 153, 153, 0.33);
-    position: absolute;
-    right: 7em;
-    bottom: -21px;
-    z-index: 1;
-  }
-
-  input {
-    display: inline-block;
-    width: calc(100% - 78px);
-    padding: 8px;
-    border-radius: 3px;
-    border: solid 1px #e0e0e0;
-    height: 32px;
-    box-sizing: border-box;
-    font-size: 1em;
-  }
-
-  button {
-    display: inline-block;
-    float: right;
-    box-sizing: border-box;
-    margin: 0;
-    background-color: #e0e0e0;
-    font-size: 1em;
-    width: auto;
-    height: auto;
-    padding: 2px;
-    transition: background-color 0.4s ease;
-
-    &:hover{
-      color: black;
-    }
-
-    &.success {
-      background-color: #00897B;
-      color: white;
-    }
-
-    &.failure {
-      background-color: #FF5252;
-      color: white;
-    }
-  }
-}