Styling and autosuggest fixes for #293

app/javascript/flavours/glitch/components/account.js

@@ -105,10 +105,22 @@ export default class Account extends ImmutablePureComponent {
     }
 
     return small ? (
-      <div className='account small'>
+      <Permalink
-        <div className='account__avatar-wrapper'><Avatar account={account} size={18} /></div>
+        className='account small'
-        <DisplayName account={account} />
+        href={account.get('url')}
+        to={`/accounts/${account.get('id')}`}
+      >
+        <div className='account__avatar-wrapper'>
+          <Avatar
+            account={account}
+            size={24}
+          />
         </div>
+        <DisplayName
+          account={account}
+          inline
+        />
+      </Permalink>
     ) : (
       <div className='account'>
         <div className='account__wrapper'>

app/javascript/flavours/glitch/components/display_name.js

@@ -1,28 +1,30 @@
+//  Package imports.
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-export default class DisplayName extends React.PureComponent {
+//  The component.
-
+export default function DisplayName ({
-  static propTypes = {
-    account: ImmutablePropTypes.map.isRequired,
-    className: PropTypes.string,
-  };
-
-  render () {
-    const {
   account,
   className,
-    } = this.props;
+  inline,
-    const computedClass = classNames('display-name', className);
+}) {
-    const displayNameHtml = { __html: account.get('display_name_html') };
+  const computedClass = classNames('display-name', { inline }, className);
 
-    return (
+  //  The result.
+  return account ? (
     <span className={computedClass}>
-        <strong className='display-name__html' dangerouslySetInnerHTML={displayNameHtml} /> <span className='display-name__account'>@{this.props.account.get('acct')}</span>
+      <strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} />
+      {inline ? ' ' : null}
+      <span className='display-name__account'>@{account.get('acct')}</span>
     </span>
-    );
+  ) : null;
 }
 
-}
+//  Props.
+DisplayName.propTypes = {
+  account: ImmutablePropTypes.map,
+  className: PropTypes.string,
+  inline: PropTypes.bool,
+};

app/javascript/flavours/glitch/components/permalink.js

@@ -22,7 +22,13 @@ export default class Permalink extends React.PureComponent {
   }
 
   render () {
-    const { href, children, className, ...other } = this.props;
+    const {
+      children,
+      className,
+      href,
+      to,
+      ...other
+    } = this.props;
 
     return (
       <a target='_blank' href={href} onClick={this.handleClick} {...other} className={`permalink${className ? ' ' + className : ''}`}>

app/javascript/flavours/glitch/features/composer/index.js

@@ -59,7 +59,7 @@ function mapStateToProps (state) {
     preselectDate: state.getIn(['compose', 'preselectDate']),
     privacy: state.getIn(['compose', 'privacy']),
     progress: state.getIn(['compose', 'progress']),
-    replyAccount: inReplyTo ? state.getIn(['accounts', state.getIn(['statuses', inReplyTo, 'account'])]) : null,
+    replyAccount: inReplyTo ? state.getIn(['statuses', inReplyTo, 'account']) : null,
     replyContent: inReplyTo ? state.getIn(['statuses', inReplyTo, 'contentHtml']) : null,
     resetFileKey: state.getIn(['compose', 'resetFileKey']),
     sideArm: state.getIn(['local_settings', 'side_arm']),
@@ -265,7 +265,6 @@ class Composer extends React.Component {
       handleSubmit,
       handleRefTextarea,
     } = this.handlers;
-    const { history } = this.context;
     const {
       acceptContentTypes,
       amUnlocked,
@@ -317,7 +316,6 @@ class Composer extends React.Component {
           <ComposerReply
             account={replyAccount}
             content={replyContent}
-            history={history}
             intl={intl}
             onCancel={onCancelReply}
           />
@@ -384,11 +382,6 @@ class Composer extends React.Component {
 
 }
 
-//  Context
-Composer.contextTypes = {
-  history: PropTypes.object,
-};
-
 //  Props.
 Composer.propTypes = {
   intl: PropTypes.object.isRequired,
@@ -405,7 +398,7 @@ Composer.propTypes = {
   preselectDate: PropTypes.instanceOf(Date),
   privacy: PropTypes.string,
   progress: PropTypes.number,
-  replyAccount: ImmutablePropTypes.map,
+  replyAccount: PropTypes.string,
   replyContent: PropTypes.string,
   resetFileKey: PropTypes.number,
   sideArm: PropTypes.string,

app/javascript/flavours/glitch/features/composer/reply/index.js

@@ -1,12 +1,10 @@
 //  Package imports.
 import PropTypes from 'prop-types';
 import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages } from 'react-intl';
 
 //  Components.
-import Avatar from 'flavours/glitch/components/avatar';
+import AccountContainer from 'flavours/glitch/containers/account_container';
-import DisplayName from 'flavours/glitch/components/display_name';
 import IconButton from 'flavours/glitch/components/icon_button';
 
 //  Utils.
@@ -31,17 +29,6 @@ const handlers = {
       onCancel();
     }
   },
-
-  //  Handles a click on the status's account.
-  handleClickAccount () {
-    const {
-      account,
-      history,
-    } = this.props;
-    if (history) {
-      history.push(`/accounts/${account.get('id')}`);
-    }
-  },
 };
 
 //  The component.
@@ -55,10 +42,7 @@ export default class ComposerReply extends React.PureComponent {
 
   //  Rendering.
   render () {
-    const {
+    const { handleClick } = this.handlers;
-      handleClick,
-      handleClickAccount,
-    } = this.handlers;
     const {
       account,
       content,
@@ -76,21 +60,10 @@ export default class ComposerReply extends React.PureComponent {
             title={intl.formatMessage(messages.cancel)}
           />
           {account ? (
-            <a
+            <AccountContainer
-              className='account'
+              id={account}
-              href={account.get('url')}
+              small
-              onClick={handleClickAccount}
-            >
-              <Avatar
-                account={account}
-                className='avatar'
-                size={24}
             />
-              <DisplayName
-                account={account}
-                className='display_name'
-              />
-            </a>
           ) : null}
         </header>
         <div
@@ -105,9 +78,8 @@ export default class ComposerReply extends React.PureComponent {
 }
 
 ComposerReply.propTypes = {
-  account: ImmutablePropTypes.map,
+  account: PropTypes.string,
   content: PropTypes.string,
-  history: PropTypes.object,
   intl: PropTypes.object.isRequired,
   onCancel: PropTypes.func,
 };

app/javascript/flavours/glitch/features/composer/textarea/index.js

@@ -32,7 +32,7 @@ const handlers = {
 
   //  When blurring the textarea, suggestions are hidden.
   handleBlur () {
-    //this.setState({ suggestionsHidden: true });
+    this.setState({ suggestionsHidden: true });
   },
 
   //  When the contents of the textarea change, we have to pull up new
@@ -57,7 +57,7 @@ const handlers = {
     const right = value.slice(selectionStart).search(/[\s\u200B]/);
     const token = function () {
       switch (true) {
-      case left < 0 || /[@:]/.test(!value[left]):
+      case left < 0 || !/[@:]/.test(value[left]):
         return null;
       case right < 0:
         return value.slice(left);

app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js

@@ -24,9 +24,16 @@ const handlers = {
     } = this.props;
     if (onClick) {
       e.preventDefault();
+      e.stopPropagation();  //  Prevents following account links
       onClick(index);
     }
   },
+
+  //  This prevents the focus from changing, which would mess with
+  //  our suggestion code.
+  handleMouseDown (e) {
+    e.preventDefault();
+  },
 };
 
 //  The component.
@@ -40,7 +47,10 @@ export default class ComposerTextareaSuggestionsItem extends React.Component {
 
   //  Rendering.
   render () {
-    const { handleClick } = this.handlers;
+    const {
+      handleMouseDown,
+      handleClick,
+    } = this.handlers;
     const {
       selected,
       suggestion,
@@ -51,7 +61,8 @@ export default class ComposerTextareaSuggestionsItem extends React.Component {
     return (
       <div
         className={computedClass}
-        onMouseDown={handleClick}
+        onMouseDown={handleMouseDown}
+        onClickCapture={handleClick}  //  Jumps in front of contents
         role='button'
         tabIndex='0'
       >

app/javascript/flavours/glitch/styles/components/composer.scss

@@ -52,22 +52,7 @@
     margin-bottom: 5px;
     overflow: hidden;
 
-    & > .account {
+    & > .account.small { color: $ui-base-color }
-      & > .avatar {
-        float: left;
-        margin-right: 5px;
-      }
-
-      & > .display_name {
-        color: $ui-base-color;
-        display: block;
-        padding-right: 25px;
-        max-width: 100%;
-        line-height: 24px;
-        text-decoration: none;
-        overflow: hidden;
-      }
-    }
 
     & > .cancel {
       float: right;
@@ -87,13 +72,6 @@
     overflow: visible;
     white-space: pre-wrap;
     padding-top: 5px;
-  }
-
-  .emojione {
-    width: 20px;
-    height: 20px;
-    margin: -5px 0 0;
-  }
 
     p {
       margin-bottom: 20px;
@@ -117,6 +95,13 @@
     }
   }
 
+  .emojione {
+    width: 20px;
+    height: 20px;
+    margin: -5px 0 0;
+  }
+}
+
 .composer--textarea {
   position: relative;
 
@@ -175,6 +160,7 @@
   padding: 10px;
   font-size: 14px;
   line-height: 18px;
+  overflow: hidden;
   cursor: pointer;
 
   &:hover,
@@ -191,6 +177,12 @@
       height: 18px;
     }
   }
+
+  & > .account.small {
+    .display-name {
+      & > span { color: lighten($ui-base-color, 36%) }
+    }
+  }
 }
 
 .composer--upload_form {

app/javascript/flavours/glitch/styles/components/index.scss

@@ -745,6 +745,8 @@
 .account {
   padding: 10px;
   border-bottom: 1px solid lighten($ui-base-color, 8%);
+  color: inherit;
+  text-decoration: none;
 
   .account__display-name {
     flex: 1 1 auto;
@@ -762,27 +764,8 @@
     & > .account__avatar-wrapper { margin: 0 8px 0 0 }
 
     & > .display-name {
-      display: block;
+      height: 24px;
-      padding: 0;
+      line-height: 24px;
-      height: auto;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-
-      & > strong {
-        display: inline;
-        font-size: inherit;
-        line-height: inherit;
-      }
-
-      & > span {
-        display: inline;
-        color: lighten($ui-base-color, 36%);
-        font-size: inherit;
-        line-height: inherit;
-
-        &::before { content: " " }
-      }
     }
   }
 }
@@ -1243,6 +1226,30 @@
       text-decoration: underline;
     }
   }
+
+  &.inline {
+    padding: 0;
+    height: 18px;
+    font-size: 15px;
+    line-height: 18px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+
+    strong {
+      display: inline;
+      height: auto;
+      font-size: inherit;
+      line-height: inherit;
+    }
+
+    span {
+      display: inline;
+      height: auto;
+      font-size: inherit;
+      line-height: inherit;
+    }
+  }
 }
 
 .status__relative-time,