add input for replying to comment component

web/app/components/comment/__body/comment__body.scss

@@ -0,0 +1,3 @@
+.comment__body {
+  display: flex;
+}

web/app/components/comment/__controls/comment__controls.scss

@@ -0,0 +1,12 @@
+.comment__controls {
+  display: inline-block;
+  margin-left: 8px;
+  color: #06c5c5;
+
+  @media (hover: hover) {
+    margin-left: 0;
+    transition: transform .2s .1s ease-out, opacity .2s .1s ease-out;
+    font-weight: 700;
+    opacity: 0;
+  }
+}

web/app/components/comment/__input/comment__input.scss

@@ -0,0 +1,4 @@
+.comment__input {
+  padding-left: 56px;
+  margin-top: 8px;
+}

web/app/components/comment/__reply/comment__reply.scss

@@ -0,0 +1,3 @@
+.comment__reply {
+  cursor: pointer;
+}

web/app/components/comment/comment.jsx

@@ -4,6 +4,8 @@ import { vote } from 'common/api';
 import { url } from 'common/settings';
 import store from 'common/store';
 
+import Input from 'components/input';
+
 export default class Comment extends Component {
   constructor(props) {
     super(props);
@@ -15,10 +17,19 @@ export default class Comment extends Component {
       score: score,
       scoreIncreased: userId in votes && votes[userId],
       scoreDecreased: userId in votes && !votes[userId],
+      isInputVisible: false,
     };
 
     this.decreaseScore = this.decreaseScore.bind(this);
     this.increaseScore = this.increaseScore.bind(this);
+    this.onReplyClick = this.onReplyClick.bind(this);
+    this.onReply = this.onReply.bind(this);
+  }
+
+  onReplyClick() {
+    const { isInputVisible } = this.state;
+
+    this.setState({ isInputVisible: !isInputVisible });
   }
 
   increaseScore() {
@@ -49,9 +60,13 @@ export default class Comment extends Component {
     vote({ id: this.props.data.id, url, value: -1 });
   }
 
-  render(props, { score, scoreIncreased, scoreDecreased }) {
+  onReply(...rest) {
+    this.props.onReply(...rest);
+    this.setState({ isInputVisible: false });
+  }
+
+  render(props, { score, scoreIncreased, scoreDecreased, isInputVisible }) {
     const { data, mix, mods = {} } = props;
-    console.log('rerender', data.id)
 
     const time = new Date(data.time);
     // TODO: which format for datetime should we choose?
@@ -70,14 +85,15 @@ export default class Comment extends Component {
 
     return (
       // TODO: add default view mod or don't?
-      <div className={b('comment', props, { view: data.user.admin ? 'admin' : null })} data-id={o.id}>
-        <img src={o.user.picture} alt="" className="comment__avatar"/>
+      <div className={b('comment', props, { view: data.user.admin ? 'admin' : null })}>
+        <div className="comment__body">
+          <img src={o.user.picture} alt="" className="comment__avatar"/>
 
-        <div className="comment__content">
-          <div className="comment__info">
-            <a href="#" className="comment__username">{o.user.name}</a>
+          <div className="comment__content">
+            <div className="comment__info">
+              <a href="#" className="comment__username">{o.user.name}</a>
 
-            <span className="comment__score">
+              <span className="comment__score">
               <span
                 className={b('comment__vote', {}, { type: 'up', selected: scoreIncreased })}
                 onClick={this.increaseScore}
@@ -90,11 +106,22 @@ export default class Comment extends Component {
               >vote down</span>
             </span>
 
-            <span className="comment__time">{o.time}</span>
-          </div>
+              <span className="comment__time">{o.time}</span>
 
-          <div className="comment__text" dangerouslySetInnerHTML={{ __html: o.text }}/>
+              <span className="comment__controls">
+              <span className="comment__reply" onClick={this.onReplyClick}>reply</span>
+            </span>
+            </div>
+
+            <div className="comment__text" dangerouslySetInnerHTML={{ __html: o.text }}/>
+          </div>
         </div>
+
+        {
+          isInputVisible && (
+            <Input mix="comment__input" onSubmit={this.onReply} pid={o.id} autoFocus/>
+          )
+        }
       </div>
     );
   }

web/app/components/comment/comment.scss

@@ -1,10 +1,20 @@
 @import 'common/variables';
 
 .comment {
-  display: flex;
   position: relative;
   overflow: hidden;
   margin-bottom: $offset;
   font-size: 16px;
   line-height: 1.2;
+
+  &:hover {
+    .comment__controls {
+      font-weight: 700;
+
+      @media (hover: hover) {
+        transform: translateX(8px);
+        opacity: 1;
+      }
+    }
+  }
 }

web/app/components/comment/index.js

@@ -3,7 +3,11 @@ export { default } from './comment';
 require('./comment.scss');
 
 require('./__avatar/comment__avatar.scss');
+require('./__body/comment__body.scss');
+require('./__controls/comment__controls.scss');
 require('./__info/comment__info.scss');
+require('./__input/comment__input.scss');
+require('./__reply/comment__reply.scss');
 require('./__score/comment__score.scss');
 require('./__score-sign/comment__score-sign.scss');
 require('./__score-value/comment__score-value.scss');