Bio Tooltips

client/coral-admin/src/reducers/auth.js

@@ -24,10 +24,7 @@ export default function auth (state = initialState, action) {
       .set('isAdmin', action.isAdmin)
       .set('user', action.user);
   case actions.LOGOUT_SUCCESS:
-    return state
-      .set('loggedIn', false)
-      .set('user', null)
-      .set('isAdmin', false);
+    return initialState;
   default :
     return state;
   }

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

@@ -106,6 +106,7 @@ hr {
 
 /* Comment styles */
 .comment {
+  position: relative;
   margin-bottom: 10px;
 }
 

client/coral-framework/reducers/user.js

@@ -4,8 +4,8 @@ import * as actions from '../constants/user';
 
 const initialState = Map({
   displayName: '',
-  profiles: null,
-  settings: null
+  profiles: [],
+  settings: {}
 });
 
 const purge = user => {

client/coral-plugin-author-name/AuthorName.js

@@ -1,9 +1,43 @@
-import React from 'react';
+import React, {Component} from 'react';
+import {Tooltip} from 'coral-ui';
 const packagename = 'coral-plugin-author-name';
 
-const AuthorName = ({author}) =>
-<div className={`${packagename}-text`}>
-  {author && author.displayName}
-</div>;
+export default class AuthorName extends Component {
+  constructor (props) {
+    super(props);
 
-export default AuthorName;
+    this.state = {
+      showTooltip: false
+    };
+
+    this.handleMouseOver = this.handleMouseOver.bind(this);
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+  }
+
+  handleMouseOver () {
+    this.setState({
+      showTooltip: true
+    });
+  }
+
+  handleMouseLeave () {
+    this.setState({
+      showTooltip: false
+    });
+  }
+
+  render () {
+    const {author} = this.props;
+    const {showTooltip} = this.state;
+    return (
+      <div
+        className={`${packagename}-text`}
+        onMouseOver={this.handleMouseOver}
+        onMouseLeave={this.handleMouseLeave}
+      >
+        {author && author.displayName}
+        { showTooltip && <Tooltip>{author.settings.bio}</Tooltip>}
+      </div>
+    );
+  }
+}

client/coral-settings/containers/BioContainer.js

@@ -22,9 +22,10 @@ export default class BioContainer extends Component {
   }
 
   render () {
+    const {bio, userData} = this.props;
     return <Bio
-      bio={this.props.bio}
-      userData={this.props.userData}
+      bio={bio}
+      userData={userData}
       handleSave={this.handleSave}
       handleInput={this.handleInput}
     />;

client/coral-ui/components/Tooltip.css

@@ -0,0 +1,36 @@
+.tooltip {
+  display: inline-block;
+  position: absolute;
+  width: 100%;
+  border: solid 1px #2376D8;
+  top: 33px;
+  left: 0;
+  box-sizing: border-box;
+  background: white;
+  border-radius: 3px;
+  padding: 20px 10px;
+  z-index: 3;
+  /*box-shadow: 1px 1px 4px rgba(0,105,255,.5);*/
+}
+
+.tooltip:before{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: white;
+  position: absolute;
+  left: 2em;
+  top: -19px;
+  transform: rotate(180deg);
+  z-index: 2;
+}
+
+.tooltip:after{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: #2376D8;
+  position: absolute;
+  left: 2em;
+  top: -20px;
+  transform: rotate(180deg);
+  z-index: 1;
+}

client/coral-ui/components/Tooltip.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import styles from './Tooltip.css';
+
+export default ({children}) => (
+  <span className={styles.tooltip}>{children}</span>
+);

client/coral-ui/index.js

@@ -6,3 +6,4 @@ export {default as Tab} from './components/Tab';
 export {default as TabContent} from './components/TabContent';
 export {default as Button} from './components/Button';
 export {default as Spinner} from './components/Spinner';
+export {default as Tooltip} from './components/Tooltip';