diff --git a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
index 661dff3d54..6a8bf6e882 100644
--- 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 (
- {account && (
-
- )}
+
+
+
+
@@ -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
index 678124b2a8..1147e448af 100644
--- 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
index 0f64c0dcc1..d84e672b8f 100644
--- a/app/javascript/flavours/glitch/styles/components/compose_form.scss
+++ b/app/javascript/flavours/glitch/styles/components/compose_form.scss
@@ -141,10 +141,6 @@
.reply-indicator__header {
margin-bottom: 5px;
overflow: hidden;
-
- & > .account.small {
- color: $inverted-text-color;
- }
}
.reply-indicator__cancel {
@@ -152,6 +148,25 @@
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;