Change ReplyIndicator implementation and markup to match upstream's

ClearlyClaire · Nov 20, 2023 · fcc62d3 · fcc62d3
1 parent d59196e
commit fcc62d3
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 20 deletions.
diff --git a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
@@ -6,9 +6,11 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import AttachmentList from 'flavours/glitch/components/attachment_list';
+import { WithOptionalRouterPropTypes, withOptionalRouter } from 'flavours/glitch/utils/react_router';
 
+import { Avatar } from '../../../components/avatar';
+import { DisplayName } from '../../../components/display_name';
 import { IconButton } from '../../../components/icon_button';
-import AccountContainer from '../../../containers/account_container';
 
 const messages = defineMessages({
   cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
@@ -18,14 +20,19 @@ class ReplyIndicator extends ImmutablePureComponent {
 
   static propTypes = {
     status: ImmutablePropTypes.map,
-    onCancel: PropTypes.func,
+    onCancel: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
+    ...WithOptionalRouterPropTypes,
   };
 
   handleClick = () => {
-    const { onCancel } = this.props;
-    if (onCancel) {
-      onCancel();
+    this.props.onCancel();
+  };
+
+  handleAccountClick = (e) => {
+    if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      this.props.history?.push(`/@${this.props.status.getIn(['account', 'acct'])}`);
     }
   };
 
@@ -38,19 +45,15 @@ class ReplyIndicator extends ImmutablePureComponent {
 
     const content = { __html: status.get('contentHtml') };
 
-    const account     = status.get('account');
-
     return (
       <div className='reply-indicator'>
         <div className='reply-indicator__header'>
           <div className='reply-indicator__cancel'><IconButton title={intl.formatMessage(messages.cancel)} icon='times' onClick={this.handleClick} inverted /></div>
 
-          {account && (
-            <AccountContainer
-              id={account}
-              small
-            />
-          )}
+          <a href={`/@${status.getIn(['account', 'acct'])}`} onClick={this.handleAccountClick} className='reply-indicator__display-name'>
+            <div className='reply-indicator__display-avatar'><Avatar account={status.get('account')} size={24} /></div>
+            <DisplayName account={status.get('account')} inline />
+          </a>
         </div>
 
         <div className='reply-indicator__content translate' dangerouslySetInnerHTML={content} />
@@ -67,4 +70,4 @@ class ReplyIndicator extends ImmutablePureComponent {
 
 }
 
-export default injectIntl(ReplyIndicator);
+export default withOptionalRouter(injectIntl(ReplyIndicator));
diff --git a/app/javascript/flavours/glitch/features/compose/containers/reply_indicator_container.js b/app/javascript/flavours/glitch/features/compose/containers/reply_indicator_container.js
@@ -1,9 +1,12 @@
 import { connect } from 'react-redux';
 
 import { cancelReplyCompose } from '../../../actions/compose';
+import { makeGetStatus } from '../../../selectors';
 import ReplyIndicator from '../components/reply_indicator';
 
 const makeMapStateToProps = () => {
+  const getStatus = makeGetStatus();
+
   const mapStateToProps = state => {
     let statusId = state.getIn(['compose', 'id'], null);
     let editing  = true;
@@ -14,7 +17,7 @@ const makeMapStateToProps = () => {
     }
 
     return {
-      status: state.getIn(['statuses', statusId]),
+      status: getStatus(state, { id: statusId }),
       editing,
     };
   };

diff --git a/app/javascript/flavours/glitch/styles/components/compose_form.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss
@@ -141,17 +141,32 @@
 .reply-indicator__header {
   margin-bottom: 5px;
   overflow: hidden;
-
-  & > .account.small {
-    color: $inverted-text-color;
-  }
 }
 
 .reply-indicator__cancel {
   float: right;
   line-height: 24px;
 }
 
+.reply-indicator__display-name {
+  color: $inverted-text-color;
+  display: block;
+  max-width: 100%;
+  line-height: 24px;
+  overflow: hidden;
+  text-decoration: none;
+
+  & > .display-name {
+    line-height: unset;
+    height: unset;
+  }
+}
+
+.reply-indicator__display-avatar {
+  float: left;
+  margin-inline-end: 5px;
+}
+
 .reply-indicator__content {
   position: relative;
   font-size: 14px;

diff --git a/app/javascript/mastodon/features/compose/components/reply_indicator.jsx b/app/javascript/mastodon/features/compose/components/reply_indicator.jsx
@@ -52,7 +52,7 @@ class ReplyIndicator extends ImmutablePureComponent {
         <div className='reply-indicator__header'>
           <div className='reply-indicator__cancel'><IconButton title={intl.formatMessage(messages.cancel)} icon='times' iconComponent={CloseIcon} onClick={this.handleClick} inverted /></div>
 
-          <a href={`/@${status.getIn(['account', 'acct'])}`} onClick={this.handleAccountClick} className='reply-indicator__display-name'>
+          <a href={status.getIn(['account', 'url'])} target='_blank' onClick={this.handleAccountClick} className='reply-indicator__display-name'>
             <div className='reply-indicator__display-avatar'><Avatar account={status.get('account')} size={24} /></div>
             <DisplayName account={status.get('account')} />
           </a>