Implements Cancel/Save buttons for edit box.

redesign/nimforum.scss

@@ -101,6 +101,8 @@ $logo-height: $navbar-height - 20px;
   &:hover, &:focus {
     background: darken($secondary-btn-color, 5%);
     border-color: darken($secondary-btn-color, 10%);
+
+    color: invert($secondary-btn-color);
   }
 
   &:focus {
@@ -127,8 +129,6 @@ $logo-height: $navbar-height - 20px;
   }
 
   textarea.form-input, .panel-body > div {
-    margin-top: $control-padding-y*2;
-    resize: vertical;
     min-height: 40vh;
   }
 
@@ -474,14 +474,12 @@ blockquote {
   }
 }
 
+.form-input.post-text-area {
+  margin-top: $control-padding-y*2;
+  resize: vertical;
+}
+
 #reply-box {
-
-  .form-input {
-    // For reply text area.
-    margin-top: $control-padding-y*2;
-    resize: vertical;
-  }
-
   .panel {
     margin-top: $control-padding-y*2;
   }
@@ -503,6 +501,22 @@ hr {
   border: 0;
 }
 
+.edit-box {
+  margin-bottom: $control-padding-y;
+
+  .form-input.post-text-area {
+    margin-bottom: $control-padding-y*2;
+  }
+}
+
+.edit-buttons {
+  float: right;
+
+  > div {
+    display: inline-block;
+  }
+}
+
 @import "syntax.scss";
 
 // - Profile view

redesign/postlist.nim

@@ -117,12 +117,15 @@ when defined(js):
         list.posts[i].info.content = content
         break
 
+  proc onEditConfirm(e: Event, n: VNode, p: Post) =
+    discard
+
   proc onReplyClick(e: Event, n: VNode, p: Option[Post]) =
     state.replyingTo = p
     state.replyBox.show()
 
-  proc onEditClick(e: Event, n: VNode, p: Option[Post]) =
+  proc onEditClick(e: Event, n: VNode, p: Post) =
-    state.editing = p
+    state.editing = some(p)
 
   proc onLoadMore(ev: Event, n: VNode, start: int, post: Post) =
     loadMore(start, post.moreBefore) # TODO: Don't load all!
@@ -142,12 +145,58 @@ when defined(js):
               span(class="more-post-count"):
                 text "(" & $post.moreBefore.len & ")"
 
-  proc genPost(post: Post, thread: Thread, currentUser: Option[User]): VNode =
+  proc genPostButtons(post: Post, currentUser: Option[User]): Vnode =
-    let postCopy = post # TODO: Another workaround here, closure capture :(
     let loggedIn = currentUser.isSome()
     let authoredByUser =
       loggedIn and currentUser.get().name == post.author.name
 
+    if state.editing.isSome() and state.editing.get() == post:
+      result = buildHtml():
+        tdiv(class="edit-buttons"):
+          tdiv(class="reply-button"):
+            button(class="btn btn-link",
+                   onClick=(e: Event, n: VNode) =>
+                      (state.editing = none[Post]())):
+              text " Cancel"
+          tdiv(class="save-button"):
+            button(class="btn btn-primary", onClick=(e: Event, n: VNode) =>
+                   onEditConfirm(e, n, post)):
+              italic(class="fas fa-check")
+              text " Save"
+    else:
+      result = buildHtml():
+        tdiv(class="post-buttons"):
+          if authoredByUser:
+            tdiv(class="edit-button", onClick=(e: Event, n: VNode) =>
+                 onEditClick(e, n, post)):
+              button(class="btn"):
+                italic(class="far fa-edit")
+            tdiv(class="delete-button"):
+              button(class="btn"):
+                italic(class="far fa-trash-alt")
+          else:
+            tdiv(class="like-button"):
+              button(class="btn"):
+                span(class="like-count"):
+                  if post.likes.len > 0:
+                    text $post.likes.len
+                  italic(class="far fa-heart")
+
+            if loggedIn:
+              tdiv(class="flag-button"):
+                button(class="btn"):
+                  italic(class="far fa-flag")
+
+          if loggedIn:
+            tdiv(class="reply-button"):
+              button(class="btn", onClick=(e: Event, n: VNode) =>
+                     onReplyClick(e, n, some(post))):
+                italic(class="fas fa-reply")
+                text " Reply"
+
+  proc genPost(post: Post, thread: Thread, currentUser: Option[User]): VNode =
+    let postCopy = post # TODO: Another workaround here, closure capture :(
+
     result = buildHtml():
       tdiv(class="post", id = $post.id):
         tdiv(class="post-icon"):
@@ -166,34 +215,8 @@ when defined(js):
               render(state.editBox, postCopy)
             else:
               verbatim(post.info.content)
-          tdiv(class="post-buttons"):
-            if authoredByUser:
-              tdiv(class="edit-button", onClick=(e: Event, n: VNode) =>
-                   onEditClick(e, n, some(postCopy))):
-                button(class="btn"):
-                  italic(class="far fa-edit")
-              tdiv(class="delete-button"):
-                button(class="btn"):
-                  italic(class="far fa-trash-alt")
-            else:
-              tdiv(class="like-button"):
-                button(class="btn"):
-                  span(class="like-count"):
-                    if post.likes.len > 0:
-                      text $post.likes.len
-                    italic(class="far fa-heart")
 
-              if loggedIn:
+          genPostButtons(postCopy, currentUser)
-                tdiv(class="flag-button"):
-                  button(class="btn"):
-                    italic(class="far fa-flag")
-
-            if loggedIn:
-              tdiv(class="reply-button"):
-                button(class="btn", onClick=(e: Event, n: VNode) =>
-                       onReplyClick(e, n, some(postCopy))):
-                  italic(class="fas fa-reply")
-                  text " Reply"
 
   proc genTimePassed(prevPost: Post, post: Option[Post], last: bool): VNode =
     var latestTime =

redesign/replybox.nim

@@ -115,7 +115,7 @@ when defined(js):
             elif state.rendering.isSome():
               verbatim(state.rendering.get())
           else:
-            textarea(class="form-input", rows="5",
+            textarea(class="form-input post-text-area", rows="5",
                      onChange=(e: Event, n: VNode) =>
                         onChange(e, n, state),
                      value=state.text)