Show replied to comment above textbox

app/assets/assets/locales/en/videoDebate.json

@@ -42,7 +42,7 @@
   },
   "statement": {
     "textPlaceholder": "Type a raw transcript of what the speaker says",
-    "noSpeakerTextPlaceholder": "Describe what you see",
+    "noSpeakerTextPlaceholder": "Describe what you see or select a speaker",
     "text": "Text",
     "add": "Add a statement",
     "autoscroll_enable": "Enable autoscroll",

app/assets/assets/locales/fr/videoDebate.json

@@ -46,7 +46,7 @@
   },
   "statement": {
     "textPlaceholder": "Retranscrivez ici les propos de l'intervenant·e",
-    "noSpeakerTextPlaceholder": "Decrivez ce qui apparait à l'image",
+    "noSpeakerTextPlaceholder": "Décrivez ce qui apparait à l'image ou ajoutez un intervenant",
     "text": "Le texte",
     "add": "Ajouter une citation",
     "autoscroll_enable": "Activer le scroll automatique",

app/components/Comments/CommentDisplay.jsx

@@ -110,11 +110,11 @@ export class CommentDisplay extends React.PureComponent {
 
   render() {
     const { user, text, source, score, inserted_at } = this.props.comment
-    const { t, withoutActions, replyingTo, nesting, replies, myVote, isVoting, hideThread } = this.props
+    const { t, withoutActions, withoutHeader, replyingTo, nesting, replies, myVote, isVoting, hideThread, className } = this.props
     return (
       <div>
         <MediaLayout
-          className={classNames('comment', {isBlurred: this.state.isBlurred, hasSource: !!source})}
+          className={classNames('comment', className, {isBlurred: this.state.isBlurred, hasSource: !!source})}
           ContainerType="article"
           left={
            <figure>
@@ -137,11 +137,11 @@ export class CommentDisplay extends React.PureComponent {
           content={
             <div className="content">
               <div>
-                <div className="comment-header">
+                {!withoutHeader && <div className="comment-header">
                   <UserAppellation user={user} withoutActions={withoutActions}/>
                   <span> - </span>
                   <TimeSince className="comment-time" time={inserted_at}/>
-                </div>
+                </div>}
                 {source && <Source source={source}/>}
                 <div className="comment-text">
                   {nesting > 4 && replyingTo &&

app/components/Comments/CommentForm.jsx

@@ -15,6 +15,7 @@ import { postComment } from '../../state/video_debate/comments/effects'
 import UserPicture from '../Users/UserPicture'
 import MediaLayout from '../Utils/MediaLayout'
 import { handleFormEffectResponse } from '../../lib/handle_effect_response'
+import { CommentDisplay } from './CommentDisplay'
 
 
 const validate = ({ source, text }) => {
@@ -106,6 +107,7 @@ export class CommentForm extends React.PureComponent {
         content={
           <div>
             {formValues.reply_to &&
+            <div>
               <Tag size="medium" className="reply_to"
                    onClick={() => this.props.change('reply_to', null)}>
                 <Icon name="times" isClickable={true}/>
@@ -114,6 +116,10 @@ export class CommentForm extends React.PureComponent {
                   <UserAppellation user={formValues.reply_to.user}/>
                 </span>
               </Tag>
+              <CommentDisplay withoutActions={true} withoutHeader={true} hideThread={true} className="quoted"
+                              comment={formValues.reply_to}/>
+              <br/>
+            </div>
             }
             <Field component={ CommentField } className="textarea" name="text" isReply={!!formValues.reply_to}
                    normalize={ cleanStrMultiline }

app/styles/_components/comments.sass

@@ -65,6 +65,10 @@ $max-comment-width: 600px
     margin: 0
   &.isBlurred
     filter: blur(2px)
+  &.quoted .comment-text
+    font-style: italic
+    color: grey
+
   .vote, .image
     display: inline-block
     vertical-align: middle