From aab10809a24a518185f05ebd302413491672181e Mon Sep 17 00:00:00 2001
From: Dominik Picheta <dominikpicheta@gmail.com>
Date: Fri, 11 May 2018 20:52:07 +0100
Subject: [PATCH] Implements reply box UI.

---
 redesign/nimforum.scss |  6 ++++++
 redesign/postlist.nim  | 11 ++++++++---
 redesign/replybox.nim  | 40 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 redesign/replybox.nim

diff --git a/redesign/nimforum.scss b/redesign/nimforum.scss
index 99cf68b..b255092 100644
--- a/redesign/nimforum.scss
+++ b/redesign/nimforum.scss
@@ -389,4 +389,10 @@ blockquote {
     margin-right: $control-padding-x*2;
     float: right;
   }
+}
+
+.form-input {
+  // For reply text area.
+  margin-top: $control-padding-y*2;
+  resize: vertical;
 }
\ No newline at end of file
diff --git a/redesign/postlist.nim b/redesign/postlist.nim
index 37caf8e..a437088 100644
--- a/redesign/postlist.nim
+++ b/redesign/postlist.nim
@@ -31,7 +31,7 @@ when defined(js):
   include karax/prelude
   import karax / [vstyles, kajax, kdom]
 
-  import karaxutils, error
+  import karaxutils, error, replybox
 
   type
     State = ref object
@@ -39,12 +39,15 @@ when defined(js):
       loading: bool
       status: HttpCode
       replyBoxShown: bool
+      replyBox: ReplyBox
 
   proc newState(): State =
     State(
       list: none[PostList](),
       loading: false,
-      status: Http200
+      status: Http200,
+      replyBoxShown: true,
+      replyBox: newReplyBox()
     )
 
   var
@@ -156,7 +159,6 @@ when defined(js):
           tdiv(class="information-title"):
             text diffStr
 
-
   proc renderPostList*(threadId: int, isLoggedIn: bool): VNode =
     if state.status != Http200:
       return renderError("Couldn't retrieve posts.")
@@ -186,3 +188,6 @@ when defined(js):
 
           if list.moreCount > 0:
             genLoadMore(list.posts.len)
+
+          if state.replyBoxShown:
+            render(state.replyBox, list.thread)
\ No newline at end of file
diff --git a/redesign/replybox.nim b/redesign/replybox.nim
new file mode 100644
index 0000000..00a69ed
--- /dev/null
+++ b/redesign/replybox.nim
@@ -0,0 +1,40 @@
+when defined(js):
+  import strformat
+
+  include karax/prelude
+  import karax / [vstyles, kajax, kdom]
+
+  import karaxutils, threadlist
+
+  type
+    ReplyBox* = ref object
+      preview: bool
+
+  proc newReplyBox*(): ReplyBox =
+    ReplyBox()
+
+  proc render*(state: ReplyBox, thread: Thread): VNode =
+    result = buildHtml():
+      tdiv(class="information no-border"):
+        tdiv(class="information-icon"):
+          italic(class="fas fa-reply")
+        tdiv(class="information-main", style=style(StyleAttr.width, "100%")):
+          tdiv(class="information-title"):
+            # text fmt("Replying to \"{thread.topic}\"")
+          # tdiv(class="information-content"):
+            tdiv(class="panel"):
+              tdiv(class="panel-nav"):
+                ul(class="tab tab-block"):
+                  li(class=class({"active": not state.preview}, "tab-item")):
+                    a(href="#"):
+                      text "Message"
+                  li(class=class({"active": state.preview}, "tab-item")):
+                    a(href="#"):
+                      text "Preview"
+              tdiv(class="panel-body"):
+                textarea(class="form-input", rows="5")
+              tdiv(class="panel-footer"):
+                button(class="btn btn-primary float-right"):
+                  text "Reply"
+                button(class="btn btn-link float-right"):
+                  text "Cancel"
\ No newline at end of file