From d90a158298ee629770b72148eac7bbef4ff1cd09 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 30 Nov 2016 17:09:34 -0300
Subject: [PATCH] Bio Tooltips

---
 client/coral-admin/src/reducers/auth.js       |  5 +-
 client/coral-embed-stream/style/default.css   |  1 +
 client/coral-framework/reducers/user.js       |  4 +-
 client/coral-plugin-author-name/AuthorName.js | 46 ++++++++++++++++---
 .../coral-settings/containers/BioContainer.js |  5 +-
 client/coral-ui/components/Tooltip.css        | 36 +++++++++++++++
 client/coral-ui/components/Tooltip.js         |  6 +++
 client/coral-ui/index.js                      |  1 +
 8 files changed, 90 insertions(+), 14 deletions(-)
 create mode 100644 client/coral-ui/components/Tooltip.css
 create mode 100644 client/coral-ui/components/Tooltip.js

diff --git a/client/coral-admin/src/reducers/auth.js b/client/coral-admin/src/reducers/auth.js
index f897c1bae..095ef7aac 100644
--- a/client/coral-admin/src/reducers/auth.js
+++ b/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;
   }
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index d6fc43dff..26992699e 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -106,6 +106,7 @@ hr {
 
 /* Comment styles */
 .comment {
+  position: relative;
   margin-bottom: 10px;
 }
 
diff --git a/client/coral-framework/reducers/user.js b/client/coral-framework/reducers/user.js
index f1d02a42c..11b57fc15 100644
--- a/client/coral-framework/reducers/user.js
+++ b/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 => {
diff --git a/client/coral-plugin-author-name/AuthorName.js b/client/coral-plugin-author-name/AuthorName.js
index aef819468..56b868726 100644
--- a/client/coral-plugin-author-name/AuthorName.js
+++ b/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>
+    );
+  }
+}
diff --git a/client/coral-settings/containers/BioContainer.js b/client/coral-settings/containers/BioContainer.js
index b045b71f9..ca4373644 100644
--- a/client/coral-settings/containers/BioContainer.js
+++ b/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}
     />;
diff --git a/client/coral-ui/components/Tooltip.css b/client/coral-ui/components/Tooltip.css
new file mode 100644
index 000000000..cf849b7cb
--- /dev/null
+++ b/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;
+}
diff --git a/client/coral-ui/components/Tooltip.js b/client/coral-ui/components/Tooltip.js
new file mode 100644
index 000000000..833d76552
--- /dev/null
+++ b/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>
+);
diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js
index 39d17f2ca..ffdb3bbd2 100644
--- a/client/coral-ui/index.js
+++ b/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';