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