added edit/save/discard functionality

Author: Vlad Sternbach

package.json

@@ -20,8 +20,7 @@
   "dependencies": {
     "angular": "^1.5.3",
     "angular-sanitize": "^1.5.3",
-    "angular-ui-router": "^0.2.18",
-    "bootstrap-sass": "^3.3.6"
+    "angular-ui-router": "^0.2.18"
   },
   "scripts": {
     "prestart": "npm install",

src/components/comment/comment.component.ts

@@ -10,11 +10,11 @@ import './comment.scss';
             <div class="comment" ng-class="{'comment-edit': $ctrl.editMode}">
                 <div class="comment-header">
                     <div class="comment-actions">
-                        <button type="button" class="comment-edit-button" title="Edit comment" ng-click="$ctrl.editMode = true">
+                        <button type="button" class="comment-edit-button" title="Edit comment" ng-click="$ctrl.edit()">
                             <svg aria-hidden="true" class="octicon octicon-pencil" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path d="M0 12v3h3l8-8-3-3L0 12z m3 2H1V12h1v1h1v1z m10.3-9.3l-1.3 1.3-3-3 1.3-1.3c0.39-0.39 1.02-0.39 1.41 0l1.59 1.59c0.39 0.39 0.39 1.02 0 1.41z"></path></svg>
                         </button>
                     </div>
-                    <div class="comment-tag"></div>
+                    <div class="comment-tag" ng-repeat="tag in $ctrl.comment.tags">{{tag}}</div>
                     <div class="comment-header-text">{{$ctrl.comment.title}}</div>
                     <div class="comment-edit-title">
                         <input ng-model="$ctrl.comment.title" autofocus="autofocus" class="comment-header-input" placeholder="Title" required="required" size="30" type="text">
@@ -28,9 +28,13 @@ import './comment.scss';
                         </nav>
                     </div>
                     <div class="write-content">
-                        <textarea placeholder="Leave a comment" class="comment-textarea" ng-bind-html="$ctrl.comment.text"></textarea>
+                        <textarea placeholder="Leave a comment" class="comment-textarea" ng-model="$ctrl.comment.text"></textarea>
                     </div>
-                    <!--<div class="comment-body" ng-bind-html="$ctrl.comment.text"></div>-->
+                    <div class="comment-body" ng-bind-html="$ctrl.comment.text"></div>
+                </div>
+                <div class="form-actions">
+                    <button ng-click="$ctrl.save()" class="btn btn-primary" tabindex="2">Comment</button>
+                    <button ng-click="$ctrl.discard()" class="btn" tabindex="3">Discard</button>
                 </div>
             </div>
         </div>`,
@@ -39,7 +43,25 @@ import './comment.scss';
     }
 })
 class CommentController {
+    editMode: boolean;
+    comment: any;
+    commentCopy: any;
+
     constructor() {
-        console.log('yep');
+        this.editMode = false;
+    }
+
+    edit() {
+        this.editMode = true;
+        this.commentCopy = angular.copy(this.comment);
+    }
+
+    save() {
+        this.editMode = false;
+    }
+
+    discard() {
+        this.editMode = false;
+        this.comment = this.commentCopy;
     }
 }

src/components/comment/comment.scss

@@ -31,12 +31,18 @@
   font-size: 12px;
   border: 1px solid rgba(0,0,0,0.1);
   border-radius: 3px;
+  .comment-edit & {
+    display: none;
+  }
 }
 
 .comment-header-text {
   max-width: 78%;
   padding-top: 10px;
   padding-bottom: 10px;
+  .comment-edit & {
+    display: none;
+  }
 }
 
 .comment-header-input {
@@ -60,6 +66,9 @@
   float: right;
   margin-right: -5px;
   margin-left: 10px;
+  .comment-edit & {
+    display: none;
+  }
 }
 
 .comment-edit-button {
@@ -76,8 +85,12 @@
 
 
 .comment-edit-title {
-  max-width: 78%;
+  display: none;
+  width: 100%;
   padding: 10px 0;
+  .comment-edit & {
+    display: block;
+  }
 }
 
 .comment-body {
@@ -87,11 +100,18 @@
   font-size: 14px;
   line-height: 1.6;
   word-wrap: break-word;
+  .comment-edit & {
+    display: none;
+  }
 }
 
 .write-content {
   padding: 0 0 10px;
   margin: 0 10px;
+  display: none;
+  .comment-edit & {
+    display: block;
+  }
 }
 
 .comment-textarea {
@@ -118,13 +138,17 @@
 }
 
 .comment-tabnav {
-  background-color: #fff;
+  background: #f7f7f7;
   padding: 6px 10px 0;
   border-radius: 3px 3px 0 0;
   margin: 0 0 10px;
   position: relative;
   margin-bottom: 15px;
   border-bottom: 1px solid #ddd;
+  display: none;
+  .comment-edit & {
+    display: block;
+  }
 }
 
 .tabnav-tabs {
@@ -143,6 +167,7 @@
   border-bottom: 0;
   &:hover {
     text-decoration: none;
+    cursor: pointer;
   }
   &.selected {
     color: #333;
@@ -151,3 +176,51 @@
     border-radius: 3px 3px 0 0;
   }
 }
+
+
+.form-actions {
+  display: none;
+  padding: 0 10px 10px;
+  &:before {
+    display: table;
+    content: "";
+  }
+  &:after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+  .comment-edit & {
+    display: block;
+  }
+  .btn {
+    margin-left: 10px;
+  }
+}
+
+.btn {
+  float: right;
+  position: relative;
+  display: inline-block;
+  padding: 6px 12px;
+  font-size: 13px;
+  font-weight: bold;
+  line-height: 20px;
+  color: #333;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  background-color: #eee;
+  background-image: linear-gradient(#fcfcfc, #eee);
+  border: 1px solid #d5d5d5;
+  border-radius: 3px;
+  -webkit-appearance: none;
+  &.btn-primary {
+    color: #fff;
+    text-shadow: 0 -1px 0 rgba(0,0,0,0.15);
+    background-color: #60b044;
+    background-image: linear-gradient(#8add6d, #60b044);
+    border-color: #5ca941;
+  }
+}