From abb5bffd85d1ce23a35f56625d0095086d3bc7e5 Mon Sep 17 00:00:00 2001
From: kj1352 <nikhilkj24@gmail.com>
Date: Wed, 17 Jun 2020 11:55:51 +0530
Subject: [PATCH] Add comment UI forum

---
 .../courses/details/details.component.html    | 22 ++++++++++++--
 .../courses/details/details.component.scss    | 29 +++++++++++++++++++
 .../tabs/courses/details/details.component.ts |  1 +
 3 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/src/app/tabs/courses/details/details.component.html b/src/app/tabs/courses/details/details.component.html
index c8eb910..28a02f7 100644
--- a/src/app/tabs/courses/details/details.component.html
+++ b/src/app/tabs/courses/details/details.component.html
@@ -246,7 +246,10 @@
                     </div>
 
                     <ul class="comment-list">
-                        <button class="add-comment-button"> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon> ADD A COMMENT </button>
+                        <button class="add-comment-button" (click)="showAddCommentToPost = true">
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
+                            ADD A COMMENT
+                        </button>
                         <li class="comment">
                             <div class="author">
                                 <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
@@ -337,7 +340,10 @@
                     </div>
 
                     <ul class="comment-list">
-                        <button class="add-comment-button"> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon> ADD A COMMENT </button>
+                        <button class="add-comment-button" (click)="showAddCommentToPost = true">
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
+                            ADD A COMMENT
+                        </button>
                         <li class="comment">
                             <div class="author">
                                 <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
@@ -410,6 +416,18 @@
                     </li>
                 </ul>
             </section>
+
+
+            <section class="more-options-slideup" [ngClass]="{'active' : showAddCommentToPost }">
+                <header>
+                    <h4> Add Comment </h4>
+                    <button class="close-button" (click)="showAddCommentToPost = false">
+                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+                    </button>
+                </header>
+                <textarea placeholder="Type your comment..."></textarea>
+                <button class="post-comment-button"> Submit </button>
+            </section>
         </section>
     </div>
 
diff --git a/src/app/tabs/courses/details/details.component.scss b/src/app/tabs/courses/details/details.component.scss
index d525791..485b8b1 100644
--- a/src/app/tabs/courses/details/details.component.scss
+++ b/src/app/tabs/courses/details/details.component.scss
@@ -436,6 +436,35 @@
             font-weight: 400;
         }
 
+        textarea {
+            display: block;
+            height: 150px;
+            resize: none;
+            background-color: var(--black);
+            font-size: 14px;
+            color: var(--light-grey);
+            padding: 15px;
+            border-radius: 7px;
+            width: 90%;
+            margin: 20px auto;
+            border: 0px;
+        }
+
+        .post-comment-button {
+            width: 90%;
+            margin: 20px auto;
+            height: 40px;
+            background-color: var(--dark-grey);
+            box-shadow: 1px 1px 5px var(--black);
+            border-radius: 5px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--light-grey);
+            font-size: 14px;
+            border: 0px;
+        }
+
         ul {
             position: relative;
             list-style: none;
diff --git a/src/app/tabs/courses/details/details.component.ts b/src/app/tabs/courses/details/details.component.ts
index 3653dfe..3d40a65 100644
--- a/src/app/tabs/courses/details/details.component.ts
+++ b/src/app/tabs/courses/details/details.component.ts
@@ -15,6 +15,7 @@ export class DetailsComponent implements OnInit {
     selectedChapter: number = 1;
     showMorePostOptions: boolean = false;
     selectedPost: number;
+    showAddCommentToPost: boolean = false;
 
 	constructor(
         private route: ActivatedRoute,