Styling and autosuggest fixes for #293

2024-11-27 18:31:37 +01:00 · 2018-01-05 20:04:13 -08:00 · 2018-01-05 20:04:13 -08:00 · ad10a80a99
commit ad10a80a99
parent 8bf9d9362a
10 changed files with 128 additions and 133 deletions
--- a/app/javascript/flavours/glitch/components/account.js
+++ b/app/javascript/flavours/glitch/components/account.js
@ -105,10 +105,22 @@ export default class Account extends ImmutablePureComponent {
    }

    return small ? (
-      <div className='account small'>
-        <div className='account__avatar-wrapper'><Avatar account={account} size={18} /></div>
-        <DisplayName account={account} />
-      </div>
+      <Permalink
+        className='account small'
+        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'>
--- a/app/javascript/flavours/glitch/components/display_name.js
+++ b/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 {
-
-  static propTypes = {
-    account: ImmutablePropTypes.map.isRequired,
-    className: PropTypes.string,
-  };
-
-  render () {
-    const {
-      account,
-      className,
-    } = this.props;
-    const computedClass = classNames('display-name', className);
-    const displayNameHtml = { __html: account.get('display_name_html') };
-
-    return (
-      <span className={computedClass}>
-        <strong className='display-name__html' dangerouslySetInnerHTML={displayNameHtml} /> <span className='display-name__account'>@{this.props.account.get('acct')}</span>
-      </span>
-    );
-  }
+//  The component.
+export default function DisplayName ({
+  account,
+  className,
+  inline,
+}) {
+  const computedClass = classNames('display-name', { inline }, className);

+  //  The result.
+  return account ? (
+    <span className={computedClass}>
+      <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,
+};
--- a/app/javascript/flavours/glitch/components/permalink.js
+++ b/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 : ''}`}>
--- a/app/javascript/flavours/glitch/features/composer/index.js
+++ b/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,
--- a/app/javascript/flavours/glitch/features/composer/reply/index.js
+++ b/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,
 };
--- a/app/javascript/flavours/glitch/features/composer/textarea/index.js
+++ b/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);
--- a/app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js
+++ b/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'
      >
--- a/app/javascript/flavours/glitch/locales/pl.js
+++ b/app/javascript/flavours/glitch/locales/pl.js
@ -36,7 +36,7 @@ const messages = {

  'favourite_modal.combo': 'Możesz nacisnąć {combo}, aby pominąć to następnym razem',

-'home.column_settings.show_direct': 'Pokaż wiadomości bezpośrednie',
+  'home.column_settings.show_direct': 'Pokaż wiadomości bezpośrednie',

  'notification.markForDeletion': 'Oznacz do usunięcia',
  'notifications.clear': 'Wyczyść wszystkie powiadomienia',
--- a/app/javascript/flavours/glitch/styles/components/composer.scss
+++ b/app/javascript/flavours/glitch/styles/components/composer.scss
@ -52,22 +52,7 @@
    margin-bottom: 5px;
    overflow: hidden;

-    & > .account {
-      & > .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;
-      }
-    }
+    & > .account.small { color: $ui-base-color }

    & > .cancel {
      float: right;
@ -87,6 +72,27 @@
    overflow: visible;
    white-space: pre-wrap;
    padding-top: 5px;
+
+    p {
+      margin-bottom: 20px;
+
+      &:last-child { margin-bottom: 0 }
+    }
+
+    a {
+      color: lighten($ui-base-color, 20%);
+      text-decoration: none;
+
+      &:hover { text-decoration: underline }
+
+      &.mention {
+        &:hover {
+          text-decoration: none;
+
+          span { text-decoration: underline }
+        }
+      }
+    }
  }

  .emojione {
@ -94,27 +100,6 @@
    height: 20px;
    margin: -5px 0 0;
  }
-
-  p {
-    margin-bottom: 20px;
-
-    &:last-child { margin-bottom: 0 }
-  }
-
-  a {
-    color: lighten($ui-base-color, 20%);
-    text-decoration: none;
-
-    &:hover { text-decoration: underline }
-
-    &.mention {
-      &:hover {
-        text-decoration: none;
-
-        span { text-decoration: underline }
-      }
-    }
-  }
 }

 .composer--textarea {
@ -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 {
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/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;
-      padding: 0;
-      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: " " }
-      }
+      height: 24px;
+      line-height: 24px;
    }
  }
 }
@ -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,