From 22a70a7595f2c7636dcaf7879014f3cf23ae387b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Mon, 24 Jan 2022 18:17:07 +0100 Subject: [PATCH] Quote posts: Compose box improvements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- .../containers/quoted_status_container.js | 12 +++- .../status/components/quoted_status.js | 69 +++++++++++++++---- app/styles/components/compose-form.scss | 16 ++++- app/styles/components/dropdown-menu.scss | 2 +- app/styles/components/status.scss | 2 - 5 files changed, 83 insertions(+), 18 deletions(-) diff --git a/app/soapbox/features/compose/containers/quoted_status_container.js b/app/soapbox/features/compose/containers/quoted_status_container.js index 907a4caa3..c15fa1764 100644 --- a/app/soapbox/features/compose/containers/quoted_status_container.js +++ b/app/soapbox/features/compose/containers/quoted_status_container.js @@ -1,5 +1,6 @@ import { connect } from 'react-redux'; +import { cancelQuoteCompose } from 'soapbox/actions/compose'; import QuotedStatus from 'soapbox/features/status/components/quoted_status'; import { makeGetStatus } from 'soapbox/selectors'; @@ -8,9 +9,18 @@ const makeMapStateToProps = () => { const mapStateToProps = state => ({ status: getStatus(state, { id: state.getIn(['compose', 'quote']) }), + compose: true, }); return mapStateToProps; }; -export default connect(makeMapStateToProps)(QuotedStatus); \ No newline at end of file +const mapDispatchToProps = dispatch => ({ + + onCancel() { + dispatch(cancelQuoteCompose()); + }, + +}); + +export default connect(makeMapStateToProps, mapDispatchToProps)(QuotedStatus); \ No newline at end of file diff --git a/app/soapbox/features/status/components/quoted_status.js b/app/soapbox/features/status/components/quoted_status.js index 0825052c5..3bb8b2367 100644 --- a/app/soapbox/features/status/components/quoted_status.js +++ b/app/soapbox/features/status/components/quoted_status.js @@ -2,15 +2,20 @@ import PropTypes from 'prop-types'; import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { FormattedMessage, injectIntl } from 'react-intl'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { NavLink } from 'react-router-dom'; import AttachmentThumbs from 'soapbox/components/attachment_thumbs'; import Avatar from 'soapbox/components/avatar'; import DisplayName from 'soapbox/components/display_name'; +import IconButton from 'soapbox/components/icon_button'; import RelativeTimestamp from 'soapbox/components/relative_timestamp'; import { isRtl } from 'soapbox/rtl'; +const messages = defineMessages({ + cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' }, +}); + export default @injectIntl class QuotedStatus extends ImmutablePureComponent { @@ -20,20 +25,31 @@ class QuotedStatus extends ImmutablePureComponent { static propTypes = { status: ImmutablePropTypes.map, + onCancel: PropTypes.func, + intl: PropTypes.object.isRequired, + compose: PropTypes.bool, }; - handleExpandClick = (e) => { - if (e.button === 0) { + handleExpandClick = e => { + const { compose, status } = this.props; + + if (!compose && e.button === 0) { if (!this.context.router) { return; } - this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}/posts/${this.props.status.get('id')}`); + this.context.router.history.push(`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`); e.preventDefault(); } } + handleClose = e => { + this.props.onCancel(); + + e.preventDefault(); + } + renderReplyMentions = () => { const { status } = this.props; @@ -81,7 +97,7 @@ class QuotedStatus extends ImmutablePureComponent { } render() { - const { status } = this.props; + const { status, onCancel, intl, compose } = this.props; if (!status) { return null; @@ -92,16 +108,33 @@ class QuotedStatus extends ImmutablePureComponent { direction: isRtl(status.get('search_index')) ? 'rtl' : 'ltr', }; - return ( + const displayName = (<> +
+ + ); + + const quotedStatus = (
-
- -
- -
- - + {onCancel + ? ( +
+ +
+ ) : ( +
+ +
+ )} + {compose ? ( +
+ {displayName} +
+ ) : ( + + {displayName} + + )}
{this.renderReplyMentions()} @@ -116,6 +149,16 @@ class QuotedStatus extends ImmutablePureComponent { )}
); + + if (compose) { + return ( +
+ {quotedStatus} +
+ ); + } + + return quotedStatus; } } diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss index 8c583edff..4c1537f4f 100644 --- a/app/styles/components/compose-form.scss +++ b/app/styles/components/compose-form.scss @@ -84,13 +84,27 @@ .spoiler-input__input { border-radius: 4px; } + &__quoted-status-wrapper { + background: var(--background-color); + + .quoted-status { + &:hover, + &:focus, + &:active { + background: transparent; + cursor: unset; + } + } + } + &.condensed { .autosuggest-textarea__textarea { min-height: 46px; border-radius: 5px; } - .compose-form__buttons-wrapper { + .compose-form__buttons-wrapper, + .compose-form__quoted-status-wrapper { height: 0; padding: 0; overflow: hidden; diff --git a/app/styles/components/dropdown-menu.scss b/app/styles/components/dropdown-menu.scss index 66d5832c5..5c705db81 100644 --- a/app/styles/components/dropdown-menu.scss +++ b/app/styles/components/dropdown-menu.scss @@ -62,7 +62,7 @@ box-sizing: border-box; overflow: hidden; margin: 0 6px; - padding: 4px 4px; + padding: 4px; border-radius: 6px; font-size: 15px; text-decoration: none; diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss index 274252d24..25bdfec78 100644 --- a/app/styles/components/status.scss +++ b/app/styles/components/status.scss @@ -762,8 +762,6 @@ a.status-card.compact:hover { border: 1px solid var(--brand-color--med); border-radius: 10px; padding: 12px; - overflow-y: auto; - flex: 0 2 auto; transition: background 0.2s; cursor: pointer;