Show reply only for a selected comment

Author: AtanasKrondev

src/assets/iconReply.svg

@@ -19,25 +19,31 @@
         :comment="{ tipId, id }"
         @click.native.stop
       />
-      <span
+      <div
         class="comments-count"
         :title="$t('components.tipRecords.TipComment.Replies')"
       >
-        <img src="../../assets/iconReply.svg">
-        &nbsp;<span>{{ children.length }}</span>
-      </span>
+        <ButtonPlain @click.stop="$emit('reply')">
+          <IconReply />
+        </ButtonPlain>
+        <span>&nbsp;{{ children.length }}</span>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import TipInput from '../TipInput.vue';
 import AuthorAndDate from './AuthorAndDate.vue';
+import ButtonPlain from '../ButtonPlain.vue';
+import IconReply from '../../assets/iconReply.svg?icon-component';
 
 export default {
   components: {
     TipInput,
     AuthorAndDate,
+    ButtonPlain,
+    IconReply,
   },
   inheritAttrs: false,
   props: {
@@ -102,8 +108,23 @@ export default {
       padding-top: 0.5rem;
     }
 
-    .comments-count > * {
-      vertical-align: middle;
+    .comments-count {
+      span {
+        vertical-align: middle;
+      }
+
+      .button-plain {
+        color: $search_nav_border_color;
+        transition: color 0.3s;
+
+        &:hover {
+          color: $standard_font_color;
+        }
+
+        svg {
+          height: 14px;
+        }
+      }
     }
 
     > :not(:first-child) {

src/components/tipRecords/TipComment.vue

@@ -5,16 +5,23 @@
       :key="comment.id"
       class="tree"
     >
-      <TipComment v-bind="comment" />
+      <TipComment
+        v-bind="comment"
+        @reply="openReply = comment.id"
+      />
       <TipComment
         v-for="childComment in sort(comment.children || [], true)"
         :key="childComment.id"
         v-bind="childComment"
+        @reply="openReply = comment.id"
       />
-      <SendComment
-        :tip-id="comment.tipId"
-        :parent-id="comment.id"
-      />
+      <Transition name="fade">
+        <SendComment
+          v-if="openReply === comment.id"
+          :tip-id="comment.tipId"
+          :parent-id="comment.id"
+        />
+      </Transition>
     </div>
   </div>
 </template>
@@ -31,6 +38,7 @@ export default {
   props: {
     comments: { type: Array, required: true },
   },
+  data: () => ({ openReply: null }),
   methods: {
     sort: (array, isAsc) => array.slice().sort((a, b) => {
       const values = [a, b].map((e) => Date.parse(e.createdAt));
@@ -66,14 +74,26 @@ export default {
       border-radius: 0;
     }
 
-    + .tip-comment,
-    + .tip-comment + .send-comment {
+    + .tip-comment {
       padding-left: 3rem;
 
       @include smallest {
         padding-left: 1.5rem;
       }
     }
   }
+
+  .send-comment {
+    &.fade-enter-active,
+    &.fade-leave-active {
+      transition: all 0.3s ease;
+    }
+
+    &.fade-enter,
+    &.fade-leave-to {
+      opacity: 0;
+      transform: scaleY(0);
+    }
+  }
 }
 </style>