add a drawer for the user details

client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js

@@ -16,7 +16,8 @@ import {
   showBanUserDialog,
   hideBanUserDialog,
   hideShortcutsNote,
-  viewUserDetail
+  viewUserDetail,
+  hideUserDetail
 } from 'actions/moderation';
 
 import {Spinner} from 'coral-ui';
@@ -118,7 +119,7 @@ class ModerationContainer extends Component {
   }
 
   render () {
-    const {data, moderation, settings, assets, onClose, viewUserDetail, ...props} = this.props;
+    const {data, moderation, settings, assets, onClose, viewUserDetail, hideUserDetail, ...props} = this.props;
     const providedAssetId = this.props.params.id;
     const activeTab = this.props.route.path === ':id' ? 'premod' : this.props.route.path;
 
@@ -189,6 +190,7 @@ class ModerationContainer extends Component {
           sort={this.state.sort}
           commentCount={activeTabCount}
           viewUserDetail={viewUserDetail}
+          hideUserDetail={hideUserDetail}
         />
         <BanUserDialog
           open={moderation.banDialog}
@@ -204,7 +206,7 @@ class ModerationContainer extends Component {
           shortcutsNoteVisible={moderation.shortcutsNoteVisible}
           open={moderation.modalOpen}
           onClose={onClose}/>
-        {moderation.userDetailId && <UserDetail id={moderation.userDetailId} />}
+        {moderation.userDetailId && <UserDetail id={moderation.userDetailId} hideUserDetail={hideUserDetail}/>}
       </div>
     );
   }
@@ -223,6 +225,7 @@ const mapDispatchToProps = dispatch => ({
   updateAssets: assets => dispatch(updateAssets(assets)),
   fetchSettings: () => dispatch(fetchSettings()),
   viewUserDetail: id => dispatch(viewUserDetail(id)),
+  hideUserDetail: () => dispatch(hideUserDetail()),
   showBanUserDialog: (user, commentId, showRejectedNote) => dispatch(showBanUserDialog(user, commentId, showRejectedNote)),
   hideBanUserDialog: () => dispatch(hideBanUserDialog(false)),
   hideShortcutsNote: () => dispatch(hideShortcutsNote()),

client/coral-admin/src/containers/ModerationQueue/UserDetail.css

@@ -0,0 +1,12 @@
+.copyButton {
+  float: right;
+  top: -10px;
+}
+
+.memberSince {
+  clear: both;
+}
+
+.small {
+  color: #aaa;
+}

client/coral-admin/src/containers/ModerationQueue/UserDetail.js

@@ -1,16 +1,27 @@
 import React, {PropTypes} from 'react';
 import {Button, Drawer} from 'coral-ui';
-import styles from './UserDetail.js';
+import styles from './UserDetail.css';
 import {compose} from 'react-apollo';
 import {getUserDetail} from 'coral-admin/src/graphql/queries';
 
 class UserDetail extends React.Component {
   static propTypes = {
-    id: PropTypes.string.isRequired
+    id: PropTypes.string.isRequired,
+    hideUserDetail: PropTypes.func.isRequired
+  }
+
+  copyPermalink () {
+    this.profile.select();
+    try {
+      document.execCommand('copy');
+    } catch (e) {
+
+      /* nothing */
+    }
   }
 
   render () {
-    const {data} = this.props;
+    const {data, hideUserDetail} = this.props;
 
     if (!('user' in data)) {
       return null;
@@ -27,13 +38,16 @@ class UserDetail extends React.Component {
     }
 
     return (
-      <Drawer>
+      <Drawer handleClickOutside={hideUserDetail}>
         <h3>{user.username}</h3>
-        <p>{profile}</p> <Button>Copy</Button>
-        <strong>Member since</strong> {user.created_at}
+        <Button className={styles.copyButton}>Copy</Button>
+        <p ref={ref => this.profile = ref} contentEditable="true">{profile}</p>
+        <p className={styles.memberSince}><strong>Member since</strong> {new Date(user.created_at).toLocaleString()}</p>
         <hr/>
-        <strong>Account summary</strong>
-        <br/><span className={styles.small}>Data represents the last six months of activity</span>
+        <p>
+          <strong>Account summary</strong>
+          <br/><small className={styles.small}>Data represents the last six months of activity</small>
+        </p>
         <div className={styles.stats}>
         </div>
       </Drawer>