diff --git a/redesign/nimforum.scss b/redesign/nimforum.scss index fe4bb53..a3413c6 100644 --- a/redesign/nimforum.scss +++ b/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 diff --git a/redesign/postlist.nim b/redesign/postlist.nim index 2563a74..461f587 100644 --- a/redesign/postlist.nim +++ b/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]) = - state.editing = p + proc onEditClick(e: Event, n: VNode, p: Post) = + 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 = - let postCopy = post # TODO: Another workaround here, closure capture :( + proc genPostButtons(post: Post, currentUser: Option[User]): Vnode = 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: - 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" + genPostButtons(postCopy, currentUser) proc genTimePassed(prevPost: Post, post: Option[Post], last: bool): VNode = var latestTime = diff --git a/redesign/replybox.nim b/redesign/replybox.nim index af46fe6..5a1e032 100644 --- a/redesign/replybox.nim +++ b/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)