Permalinks and Embed

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

@@ -3,7 +3,7 @@ import {compose} from 'react-apollo';
 import {connect} from 'react-redux';
 import isEqual from 'lodash/isEqual';
 
-import {TabBar, Tab, TabContent, Spinner} from '../../coral-ui';
+import {TabBar, Tab, TabContent, Spinner} from 'coral-ui';
 
 const {logout, showSignInDialog} = authActions;
 const {addNotification, clearNotification} = notificationActions;
@@ -17,27 +17,18 @@ import Stream from './Stream';
 import InfoBox from 'coral-plugin-infobox/InfoBox';
 import Count from 'coral-plugin-comment-count/CommentCount';
 import CommentBox from 'coral-plugin-commentbox/CommentBox';
-import UserBox from '../../coral-sign-in/components/UserBox';
-import SignInContainer from '../../coral-sign-in/containers/SignInContainer';
-import SuspendedAccount from '../../coral-framework/components/SuspendedAccount';
-import SettingsContainer from '../../coral-settings/containers/SettingsContainer';
-import RestrictedContent from '../../coral-framework/components/RestrictedContent';
-import ConfigureStreamContainer from '../../coral-configure/containers/ConfigureStreamContainer';
+import UserBox from 'coral-sign-in/components/UserBox';
+import SignInContainer from 'coral-sign-in/containers/SignInContainer';
+import SuspendedAccount from 'coral-framework/components/SuspendedAccount';
+import SettingsContainer from 'coral-settings/containers/SettingsContainer';
+import RestrictedContent from 'coral-framework/components/RestrictedContent';
+import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStreamContainer';
 
 class Embed extends Component {
 
-  constructor (props) {
-    super(props);
+  state = { activeTab: 0, showSignInDialog: false };
 
-    this.state = {
-      activeTab: 0,
-      showSignInDialog: false
-    };
-
-    this.changeTab = this.changeTab.bind(this);
-  }
-
-  changeTab (tab) {
+  changeTab = (tab) => {
     this.setState({
       activeTab: tab
     });
@@ -78,7 +69,6 @@ class Embed extends Component {
         }
       }, 100);
     });
-
   }
 
   componentWillReceiveProps (nextProps) {
@@ -100,85 +90,93 @@ class Embed extends Component {
       minHeight: document.body.scrollHeight + 200
     } : {};
 
-    return <div style={expandForLogin}>
-      {
-        loading ? <Spinner/>
-      : <div className="commentStream">
+    if (loading) {
+      return <Spinner />
+    }
+
+    console.log(
+      asset
+    )
+
+    return (
+      <div style={expandForLogin}>
+        <div className="commentStream">
           <TabBar onChange={this.changeTab} activeTab={activeTab}>
-            <Tab><Count count={asset.comments.length}/></Tab>
-            <Tab>Settings</Tab>
-            <Tab restricted={!isAdmin}>Configure Stream</Tab>
+          <Tab><Count count={asset.comments.length}/></Tab>
+          <Tab>Settings</Tab>
+          <Tab restricted={!isAdmin}>Configure Stream</Tab>
           </TabBar>
-            {loggedIn && <UserBox user={user} logout={this.props.logout} changeTab={this.changeTab} />}
-            <TabContent show={activeTab === 0}>
-                {
-                  openStream
-                   ? <div id="commentBox">
-                       <InfoBox
-                         content={asset.settings.infoBoxContent}
-                         enable={asset.settings.infoBoxEnable} />
-                     <RestrictedContent restricted={false} restrictedComp={<SuspendedAccount />}>
-                       {
-                         user
-                         ? <CommentBox
-                            commentPostedHandler={refetch}
-                            addNotification={this.props.addNotification}
-                            postItem={this.props.postItem}
-                            appendItemArray={this.props.appendItemArray}
-                            updateItem={this.props.updateItem}
-                            assetId={asset.id}
-                            premod={asset.settings.moderation}
-                            isReply={false}
-                            currentUser={this.props.auth.user}
-                            banned={false}
-                            authorId={user.id}
-                            charCount={asset.settings.charCountEnable && asset.settings.charCount} />
-                         : null
-                       }
-                     </RestrictedContent>
-                     </div>
-                   : <p>{asset.settings.closedMessage}</p>
-                }
-                {!loggedIn && <SignInContainer offset={signInOffset}/>}
-                <Stream
-                  refetch={refetch}
-                  addNotification={this.props.addNotification}
-                  postItem={this.props.postItem}
-                  asset={asset}
-                  currentUser={user}
-                  postAction={this.props.postAction}
-                  deleteAction={this.props.deleteAction}
-                  showSignInDialog={this.props.showSignInDialog}
-                  comments={asset.comments} />
-                <Notification
-                  notifLength={4500}
-                  clearNotification={this.props.clearNotification}
-                  notification={{text: null}}
-                />
-            </TabContent>
-             <TabContent show={activeTab === 1}>
-               <SettingsContainer
-                 loggedIn={loggedIn}
-                 userData={this.props.userData}
-                 showSignInDialog={this.props.showSignInDialog}
-               />
-             </TabContent>
-             <TabContent show={activeTab === 2}>
-               <RestrictedContent restricted={!loggedIn}>
-                 <ConfigureStreamContainer
-                   status={status}
-                   onClick={this.toggleStatus}
-                 />
-               </RestrictedContent>
-             </TabContent>
-              <Notification
-                notifLength={4500}
-                clearNotification={this.props.clearNotification}
-                notification={this.props.notification}
-              />
-        </div>
-      }
-    </div>;
+          {loggedIn && <UserBox user={user} logout={this.props.logout} />}
+          <TabContent show={activeTab === 0}>
+            {
+              openStream
+               ? <div id="commentBox">
+                   <InfoBox
+                     content={asset.settings.infoBoxContent}
+                     enable={asset.settings.infoBoxEnable}
+                   />
+                 <RestrictedContent restricted={false} restrictedComp={<SuspendedAccount />}>
+                   {
+                     user
+                     ? <CommentBox
+                        commentPostedHandler={refetch}
+                        addNotification={this.props.addNotification}
+                        postItem={this.props.postItem}
+                        appendItemArray={this.props.appendItemArray}
+                        updateItem={this.props.updateItem}
+                        assetId={asset.id}
+                        premod={asset.settings.moderation}
+                        isReply={false}
+                        currentUser={this.props.auth.user}
+                        banned={false}
+                        authorId={user.id}
+                        charCount={asset.settings.charCountEnable && asset.settings.charCount} />
+                     : null
+                   }
+                 </RestrictedContent>
+                 </div>
+               : <p>{asset.settings.closedMessage}</p>
+            }
+            {!loggedIn && <SignInContainer offset={signInOffset}/>}
+            <Stream
+              refetch={refetch}
+              addNotification={this.props.addNotification}
+              postItem={this.props.postItem}
+              asset={asset}
+              currentUser={user}
+              postAction={this.props.postAction}
+              deleteAction={this.props.deleteAction}
+              showSignInDialog={this.props.showSignInDialog}
+              comments={asset.comments} />
+            <Notification
+              notifLength={4500}
+              clearNotification={this.props.clearNotification}
+              notification={{text: null}}
+            />
+          </TabContent>
+          <TabContent show={activeTab === 1}>
+           <SettingsContainer
+             loggedIn={loggedIn}
+             userData={this.props.userData}
+             showSignInDialog={this.props.showSignInDialog}
+           />
+          </TabContent>
+          <TabContent show={activeTab === 2}>
+           <RestrictedContent restricted={!loggedIn}>
+             <ConfigureStreamContainer
+               status={status}
+               onClick={this.toggleStatus}
+             />
+           </RestrictedContent>
+          </TabContent>
+          <Notification
+            notifLength={4500}
+            clearNotification={this.props.clearNotification}
+            notification={this.props.notification}
+          />
+          </div>
+      </div>
+    );
   }
 }
 

client/coral-embed-stream/style/default.css

@@ -219,8 +219,8 @@ hr {
 .coral-plugin-flags-popup span {
   min-width: 280px;
   bottom: 36px;
-  left: -190px;
   position: absolute;
+  right: 10px;
 }
 
 .coral-plugin-flags-popup-form {

client/coral-plugin-permalinks/PermalinkButton.js

@@ -47,24 +47,26 @@ class PermalinkButton extends React.Component {
   render () {
     const {copySuccessful, copyFailure} = this.state;
     return (
-      <div className={`${name}-container`}>
-        <button onClick={this.toggle} className={`${name}-button`}>
-          <i className={`${name}-icon material-icons`} aria-hidden={true}>link</i>
-          {lang.t('permalink.permalink')}
-        </button>
-        <div 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 className={style.mainContainer}>
+        <div className={`${name}-container`}>
+          <button onClick={this.toggle} className={`${name}-button`}>
+            <i className={`${name}-icon material-icons`} aria-hidden={true}>link</i>
+            {lang.t('permalink.permalink')}
+          </button>
+          <div 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>
       </div>
     );

client/coral-plugin-permalinks/styles.css

@@ -1,15 +1,18 @@
 .container {
-  border-radius: 3px;
-  border: solid 1px #D8D8D8;
   border-radius: 3px;
   padding: 15px 10px;
   box-sizing: border-box;
-  box-shadow: 1px 3px 28px 48px rgba(255, 255, 255, 0.75);
+  box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3);
+  border: solid 1px #999;
   width: auto;
   margin: 0 auto;
   left: 0;
   margin: 0 5px;
 
+  &:before {
+    box-shadow: 1px 3px 28px 48px rgba(255, 255, 255, 0.75);
+  }
+
   input {
     display: inline-block;
     width: calc(100% - 78px);