diff --git a/app/javascript/gabsocial/features/compose/components/compose_form.js b/app/javascript/gabsocial/features/compose/components/compose_form.js index 8dd548ae..b507c075 100644 --- a/app/javascript/gabsocial/features/compose/components/compose_form.js +++ b/app/javascript/gabsocial/features/compose/components/compose_form.js @@ -21,6 +21,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import { length } from 'stringz'; import { countableText } from '../util/counter'; import Icon from 'gabsocial/components/icon'; +import QuotedStatusPreviewContainer from '../containers/quoted_status_preview_container'; const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d'; const maxPostCharacterCount = 3000; @@ -199,7 +200,7 @@ class ComposeForm extends ImmutablePureComponent { } render () { - const { intl, onPaste, showSearch, anyMedia, shouldCondense, autoFocus, isModalOpen } = this.props; + const { intl, onPaste, showSearch, anyMedia, shouldCondense, autoFocus, isModalOpen, quoteOfId } = this.props; const condensed = shouldCondense && !this.props.text && !this.state.composeFocused; const disabled = this.props.isSubmitting; const text = [this.props.spoilerText, countableText(this.props.text)].join(''); @@ -271,6 +272,8 @@ class ComposeForm extends ImmutablePureComponent { } + {quoteOfId && } + { !condensed &&
diff --git a/app/javascript/gabsocial/features/compose/components/quoted_status_preview.js b/app/javascript/gabsocial/features/compose/components/quoted_status_preview.js new file mode 100644 index 00000000..a9226e77 --- /dev/null +++ b/app/javascript/gabsocial/features/compose/components/quoted_status_preview.js @@ -0,0 +1,26 @@ +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import DisplayName from '../../../components/display_name'; +import StatusContent from '../../../components/status_content'; + +export default class QuotedStatusPreview extends React.PureComponent { + static propTypes = { + status: ImmutablePropTypes.map, + account: ImmutablePropTypes.map, + } + + render() { + const { status, account } = this.props; + + return ( +
+ + + +
+ ); + } +} \ No newline at end of file diff --git a/app/javascript/gabsocial/features/compose/containers/compose_form_container.js b/app/javascript/gabsocial/features/compose/containers/compose_form_container.js index c7c5618d..e651a89f 100644 --- a/app/javascript/gabsocial/features/compose/containers/compose_form_container.js +++ b/app/javascript/gabsocial/features/compose/containers/compose_form_container.js @@ -26,6 +26,7 @@ const mapStateToProps = state => ({ showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']), anyMedia: state.getIn(['compose', 'media_attachments']).size > 0, isModalOpen: state.get('modal').modalType === 'COMPOSE', + quoteOfId: state.getIn(['compose', 'quote_of_id']), }); const mapDispatchToProps = (dispatch) => ({ diff --git a/app/javascript/gabsocial/features/compose/containers/quoted_status_preview_container.js b/app/javascript/gabsocial/features/compose/containers/quoted_status_preview_container.js new file mode 100644 index 00000000..dcd6852b --- /dev/null +++ b/app/javascript/gabsocial/features/compose/containers/quoted_status_preview_container.js @@ -0,0 +1,9 @@ +import { connect } from 'react-redux'; +import QuotedStatusPreview from '../components/quoted_status_preview'; + +const mapStateToProps = (state, { id }) => ({ + status: state.getIn(['statuses', id]), + account: state.getIn(['accounts', state.getIn(['statuses', id, 'account'])]), +}); + +export default connect(mapStateToProps)(QuotedStatusPreview); \ No newline at end of file diff --git a/app/javascript/styles/gabsocial/components/compose-form.scss b/app/javascript/styles/gabsocial/components/compose-form.scss index d295a5c9..87c9acc9 100644 --- a/app/javascript/styles/gabsocial/components/compose-form.scss +++ b/app/javascript/styles/gabsocial/components/compose-form.scss @@ -282,4 +282,17 @@ padding-top: 10px; } } + + &__quote-preview { + font-size: 14px; + padding: 5px 10px 0; + background: darken($simple-background-color, 8%); + border-bottom: 1px solid darken($simple-background-color, 22%); + color: #555; + + .status__content { + font-size: 0.9em; + color: #555; + } + } } // end .compose-form \ No newline at end of file