Styling and autosuggest fixes for #293

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 DisplayName from 'flavours/glitch/components/display_name';
+import AccountContainer from 'flavours/glitch/containers/account_container';
 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 {
-      handleClick,
-      handleClickAccount,
-    } = this.handlers;
+    const { handleClick } = this.handlers;
     const {
       account,
       content,
@@ -76,21 +60,10 @@ export default class ComposerReply extends React.PureComponent {
             title={intl.formatMessage(messages.cancel)}
           />
           {account ? (
-            <a
-              className='account'
-              href={account.get('url')}
-              onClick={handleClickAccount}
-            >
-              <Avatar
-                account={account}
-                className='avatar'
-                size={24}
-              />
-              <DisplayName
-                account={account}
-                className='display_name'
-              />
-            </a>
+            <AccountContainer
+              id={account}
+              small
+            />
           ) : 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'
       >