diff --git a/redesign/forum.nim b/redesign/forum.nim index 9de7c75..8f216d4 100644 --- a/redesign/forum.nim +++ b/redesign/forum.nim @@ -4,18 +4,20 @@ from dom import window, Location include karax/prelude import jester/patterns -import threadlist, postlist, header, profile +import threadlist, postlist, header, profile, newthread import karaxutils type State = ref object url: Location profile: ProfileState + newThread: NewThread proc newState(): State = State( url: window.location, - profile: newProfileState() + profile: newProfileState(), + newThread: newNewThread() ) var state = newState() @@ -46,6 +48,10 @@ proc render(): VNode = result = buildHtml(tdiv()): renderHeader() route([ + r("/newthread", + (params: Params) => + (render(state.newThread)) + ), r("/profile/@username", (params: Params) => (render(state.profile, params["username"])) diff --git a/redesign/newthread.nim b/redesign/newthread.nim index 0b3751e..315caa4 100644 --- a/redesign/newthread.nim +++ b/redesign/newthread.nim @@ -9,19 +9,17 @@ when defined(js): import karaxutils type - NewThreadModal* = ref object - shown: bool + NewThread* = ref object loading: bool - onNewThread: proc (threadId, postId: int) error: Option[PostError] replyBox: ReplyBox - proc onCreatePost(httpStatus: int, response: kstring, state: NewThreadModal) = + proc onCreatePost(httpStatus: int, response: kstring, state: NewThread) = postFinished: - state.shown = false - state.onNewThread(0, 0) # TODO + # TODO + discard - proc onCreateClick(ev: Event, n: VNode, state: NewThreadModal) = + proc onCreateClick(ev: Event, n: VNode, state: NewThread) = state.loading = true state.error = none[PostError]() @@ -32,46 +30,22 @@ when defined(js): ajaxPost(uri, @[], cast[cstring](formData), (s: int, r: kstring) => onCreatePost(s, r, state)) - proc onClose(ev: Event, n: VNode, state: NewThreadModal) = - state.shown = false - ev.preventDefault() - - proc newNewThreadModal*( - onNewThread: proc (threadId, postId: int) - ): NewThreadModal = - NewThreadModal( - shown: false, - onNewThread: onNewThread, + proc newNewThread*(): NewThread = + NewThread( replyBox: newReplyBox(nil) ) - proc show*(state: NewThreadModal) = - state.shown = true - - proc render*(state: NewThreadModal): VNode = + proc render*(state: NewThread): VNode = result = buildHtml(): - tdiv(class=class({"active": state.shown}, "modal modal-lg"), - id="new-thread-modal"): - a(href="", class="modal-overlay", "aria-label"="close", - onClick=(ev: Event, n: VNode) => onClose(ev, n, state)) - tdiv(class="modal-container"): - tdiv(class="modal-header"): - a(href="", class="btn btn-clear float-right", - "aria-label"="close", - onClick=(ev: Event, n: VNode) => onClose(ev, n, state)) - tdiv(class="modal-title h5"): - text "New Thread" - tdiv(class="modal-body"): - tdiv(class="content"): - input(class="form-input", `type`="text", name="username", - placeholder="Type the title here") - renderContent(state.replyBox, none[Thread](), none[Post]()) - - tdiv(class="modal-footer"): - button(class="btn", - onClick=(ev: Event, n: VNode) => - onClose(ev, n, state)): - text "Cancel" + section(class="container grid-xl"): + tdiv(id="new-thread"): + tdiv(class="title"): + p(): text "New Thread" + tdiv(class="content"): + input(class="form-input", `type`="text", name="username", + placeholder="Type the title here") + renderContent(state.replyBox, none[Thread](), none[Post]()) + tdiv(class="footer"): button(class=class( {"loading": state.loading}, "btn btn-primary" diff --git a/redesign/nimforum.scss b/redesign/nimforum.scss index b15b579..169e2b9 100644 --- a/redesign/nimforum.scss +++ b/redesign/nimforum.scss @@ -113,7 +113,7 @@ $logo-height: $navbar-height - 20px; } } -#new-thread-modal { +#new-thread { .modal-container .modal-body { max-height: none; } @@ -124,9 +124,13 @@ $logo-height: $navbar-height - 20px; textarea.form-input, .panel-body > div { margin-top: $control-padding-y*2; - resize: none; + resize: vertical; min-height: 40vh; - max-height: 45vh; + } + + .footer { + float: right; + margin-top: $control-padding-y*2; } } diff --git a/redesign/threadlist.nim b/redesign/threadlist.nim index 837c994..0ef3aa2 100644 --- a/redesign/threadlist.nim +++ b/redesign/threadlist.nim @@ -24,22 +24,20 @@ when defined(js): include karax/prelude import karax / [vstyles, kajax, kdom] - import karaxutils, error, newthread + import karaxutils, error type State = ref object list: Option[ThreadList] loading: bool status: HttpCode - newThread: NewThreadModal proc onNewThread(threadId, postId: int) proc newState(): State = State( list: none[ThreadList](), loading: false, - status: Http200, - newThread: newNewThreadModal(onNewThread) + status: Http200 ) var @@ -63,10 +61,10 @@ when defined(js): button(class="btn btn-link"): text "Most Active" button(class="btn btn-link"): text "Categories" section(class="navbar-section"): - button(class="btn btn-secondary", - onClick=(e: Event, n: VNode) => state.newThread.show()): - italic(class="fas fa-plus") - text " New Thread" + a(href=makeUri("/newthread"), onClick=anchorCB): + button(class="btn btn-secondary"): + italic(class="fas fa-plus") + text " New Thread" proc genUserAvatars(users: seq[User]): VNode = result = buildHtml(td): @@ -181,5 +179,4 @@ when defined(js): proc renderThreadList*(): VNode = result = buildHtml(tdiv): genTopButtons() - genThreadList() - render(state.newThread) \ No newline at end of file + genThreadList() \ No newline at end of file