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;