Progress

app/javascript/gabsocial/components/display_name.js

@@ -1,44 +1,120 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
+import { debounce } from 'lodash'
+import classNames from 'classnames/bind'
+import { openPopover, closePopover } from '../actions/popover'
 import Badge from './badge'
 import Icon from './icon'
 
-export default class DisplayName extends ImmutablePureComponent {
+const cx = classNames.bind(_s)
+
+const mapDispatchToProps = dispatch => ({
+  openUserInfoPopover() {
+    dispatch(openPopover('USER_INFO'))
+  },
+  closeUserInfoPopover() {
+    dispatch(closePopover())
+  }
+})
+
+export default
+@connect(null, mapDispatchToProps)
+class DisplayName extends ImmutablePureComponent {
 
   static propTypes = {
     account: ImmutablePropTypes.map.isRequired,
+    openUserInfoPopover: PropTypes.func.isRequired,
+    closeUserInfoPopover: PropTypes.func.isRequired,
     multiline: PropTypes.bool,
+    large: PropTypes.bool,
+    noHover: PropTypes.bool,
   }
 
-  render () {
-    const { account, multiline } = this.props
+  handleMouseEnter = debounce(() => {
+    console.log("SHOW - USER POPOVER")
+    this.props.openUserInfoPopover()
+  }, 50, { leading: true })
+
+  handleMouseLeave = () => {
+    console.log("HIDE - USER POPOVER")
+    // this.props.closeUserInfoPopover()
+  }
+
+  render() {
+    const { account, multiline, large, noHover } = this.props
+
+    if (!account) return null
+
+    const containerOptions = {
+      className: cx({
+        default: 1,
+        maxWidth100PC: 1,
+        alignItemsCenter: !multiline,
+        flexRow: !multiline,
+        cursorPointer: !noHover,
+      }),
+      onMouseEnter: noHover ? undefined : this.handleMouseEnter,
+      onMouseLeave: noHover ? undefined : this.handleMouseLeave,
+    }
+
+    const displayNameClasses = cx({
+      text: 1,
+      overflowWrapBreakWord: 1,
+      whiteSpaceNoWrap: 1,
+      fontWeightBold: 1,
+      colorPrimary: 1,
+      lineHeight125: 1,
+      marginRight2PX: 1,
+      fontSize15PX: !large,
+      fontSize24PX: large,
+    })
+
+    const usernameClasses = cx({
+      text: 1,
+      displayFlex: 1,
+      flexNormal: 1,
+      flexShrink1: 1,
+      overflowWrapBreakWord: 1,
+      textOverflowEllipsis: 1,
+      colorSecondary: 1,
+      fontWeightNormal: 1,
+      lineHeight15: multiline,
+      lineHeight125: !multiline,
+      marginLeft5PX: !multiline,
+      fontSize15PX: !large,
+      fontSize16PX: large
+    })
+
+    const iconSize = !!large ? '19px' : '16px'
 
     // : todo :
     return (
-      <span className={[_s.default, _s.flexRow, _s.maxWidth100PC, _s.alignItemsCenter].join(' ')}>
-        <bdi className={[_s.text, _s.whiteSpaceNoWrap, _s.textOverflowEllipsis].join(' ')}>
-          <strong
-            className={[_s.text, _s.overflowWrapBreakWord, _s.whiteSpaceNoWrap, _s.fontSize15PX, _s.fontWeightBold, _s.colorPrimary, _s.lineHeight125, _s.marginRight2PX].join(' ')}
-            dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }}
-          />
-        </bdi>
-        {
-          account.get('is_verified') &&
-          <Icon id='verified' width='16px' height='16px' className={_s.default} title='Verified Account' />
-        }
-        { /*
-          account.get('is_pro') &&
-          <Icon id='verified' width='16px' height='16px' className={_s.default} title='Gab PRO' />
-        */ }
-        { /*
-          account.get('is_donor') &&
-          <Icon id='verified' width='16px' height='16px' className={_s.default} title='Gab Donor' />
-        */ }
-        { /*
-          account.get('is_investor') &&
-          <Icon id='verified' width='16px' height='16px' className={_s.default} title='Gab Investor' />
-        */ }
-        <span className={[_s.text, _s.displayFlex, _s.flexNormal, _s.flexShrink1, _s.fontSize15PX, _s.overflowWrapBreakWord, _s.textOverflowEllipsis, _s.marginLeft5PX, _s.colorSecondary, _s.fontWeightNormal, _s.lineHeight125].join(' ')}>
+      <span {...containerOptions}>
+        <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+          <bdi className={[_s.text, _s.whiteSpaceNoWrap, _s.textOverflowEllipsis].join(' ')}>
+            <strong
+              className={displayNameClasses}
+              dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }}
+            />
+          </bdi>
+          {
+            account.get('is_verified') &&
+            <Icon id='verified' width={iconSize} height={iconSize} className={_s.default} title='Verified Account' />
+          }
+          { /*
+            account.get('is_pro') &&
+            <Icon id='verified' width='16px' height='16px' className={_s.default} title='Gab PRO' />
+          */ }
+          { /*
+            account.get('is_donor') &&
+            <Icon id='verified' width='16px' height='16px' className={_s.default} title='Gab Donor' />
+          */ }
+          { /*
+            account.get('is_investor') &&
+            <Icon id='verified' width='16px' height='16px' className={_s.default} title='Gab Investor' />
+          */ }
+        </div>
+        <span className={usernameClasses}>
           @{account.get('acct')}
         </span>
       </span>