Quote posts: Compose box improvements

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

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);
+const mapDispatchToProps = dispatch => ({
+
+  onCancel() {
+    dispatch(cancelQuoteCompose());
+  },
+
+});
+
+export default connect(makeMapStateToProps, mapDispatchToProps)(QuotedStatus);

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 = (<>
+      <div className='quoted-status__display-avatar'><Avatar account={status.get('account')} size={24} /></div>
+      <DisplayName account={status.get('account')} />
+    </>);
+
+    const quotedStatus = (
       <div className='quoted-status' onClick={this.handleExpandClick} role='presentation'>
         <div className='quoted-status__info'>
-          <div className='quoted-status__relative-time'>
-            <RelativeTimestamp timestamp={status.get('created_at')} />
-          </div>
-          <NavLink to={`/@${status.getIn(['account', 'acct'])}`} className='quoted-status__display-name'>
-            <div className='quoted-status__display-avatar'><Avatar account={status.get('account')} size={24} /></div>
-            <DisplayName account={status.get('account')} />
-          </NavLink>
+          {onCancel
+            ? (
+              <div className='reply-indicator__cancel'>
+                <IconButton title={intl.formatMessage(messages.cancel)} src={require('@tabler/icons/icons/x.svg')} onClick={this.handleClose} inverted />
+              </div>
+            ) : (
+              <div className='quoted-status__relative-time'>
+                <RelativeTimestamp timestamp={status.get('created_at')} />
+              </div>
+            )}
+          {compose ? (
+            <div className='quoted-status__display-name'>
+              {displayName}
+            </div>
+          ) : (
+            <NavLink to={`/@${status.getIn(['account', 'acct'])}`} className='quoted-status__display-name'>
+              {displayName}
+            </NavLink>
+          )}
         </div>
 
         {this.renderReplyMentions()}
@@ -116,6 +149,16 @@ class QuotedStatus extends ImmutablePureComponent {
         )}
       </div>
     );
+
+    if (compose) {
+      return (
+        <div className='compose-form__quoted-status-wrapper'>
+          {quotedStatus}
+        </div>
+      );
+    }
+
+    return quotedStatus;
   }
 
 }

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;

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;

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;