Comments: Updated to show form in expected location

Includes a change of create response to use a branch as a template.

app/Activity/Controllers/CommentController.php

@@ -10,11 +10,9 @@ use Illuminate\Validation\ValidationException;
 
 class CommentController extends Controller
 {
-    protected $commentRepo;
-
-    public function __construct(CommentRepo $commentRepo)
-    {
-        $this->commentRepo = $commentRepo;
+    public function __construct(
+        protected CommentRepo $commentRepo
+    ) {
     }
 
     /**
@@ -43,7 +41,12 @@ class CommentController extends Controller
         $this->checkPermission('comment-create-all');
         $comment = $this->commentRepo->create($page, $request->get('text'), $request->get('parent_id'));
 
-        return view('comments.comment', ['comment' => $comment]);
+        return view('comments.comment-branch', [
+            'branch' => [
+                'comment' => $comment,
+                'children' => [],
+            ]
+        ]);
     }
 
     /**

resources/js/components/page-comment.js

@@ -25,7 +25,10 @@ export class PageComment extends Component {
     }
 
     setupListeners() {
-        this.replyButton.addEventListener('click', () => this.$emit('reply', {id: this.commentLocalId}));
+        this.replyButton.addEventListener('click', () => this.$emit('reply', {
+            id: this.commentLocalId,
+            element: this.container,
+        }));
         this.editButton.addEventListener('click', this.startEdit.bind(this));
         this.deleteButton.addEventListener('click', this.delete.bind(this));
         this.form.addEventListener('submit', this.update.bind(this));

resources/js/components/page-comments.js

@@ -41,7 +41,7 @@ export class PageComments extends Component {
         });
 
         this.elem.addEventListener('page-comment-reply', event => {
-            this.setReply(event.detail.id);
+            this.setReply(event.detail.id, event.detail.element);
         });
 
         if (this.form) {
@@ -66,15 +66,16 @@ export class PageComments extends Component {
 
         window.$http.post(`/comment/${this.pageId}`, reqData).then(resp => {
             const newElem = htmlToDom(resp.data);
-            this.container.appendChild(newElem);
+            this.formContainer.after(newElem);
             window.$events.success(this.createdText);
-            this.resetForm();
+            this.hideForm();
             this.updateCount();
         }).catch(err => {
             this.form.toggleAttribute('hidden', false);
             window.$events.showValidationErrors(err);
         });
 
+        this.form.toggleAttribute('hidden', false);
         loading.remove();
     }
 
@@ -85,32 +86,38 @@ export class PageComments extends Component {
 
     resetForm() {
         this.formInput.value = '';
-        this.hideForm();
         this.removeReplyTo();
+        this.container.append(this.formContainer);
     }
 
     showForm() {
         this.formContainer.toggleAttribute('hidden', false);
         this.addButtonContainer.toggleAttribute('hidden', true);
-        this.formInput.focus();
+        setTimeout(() => {
+            this.formInput.focus();
+        }, 100);
     }
 
     hideForm() {
+        this.resetForm();
         this.formContainer.toggleAttribute('hidden', true);
         if (this.getCommentCount() > 0) {
-            this.elem.appendChild(this.addButtonContainer);
+            this.elem.append(this.addButtonContainer);
         } else {
-            this.commentCountBar.appendChild(this.addButtonContainer);
+            this.commentCountBar.append(this.addButtonContainer);
         }
         this.addButtonContainer.toggleAttribute('hidden', false);
     }
 
     getCommentCount() {
-        return this.container.querySelectorAll('[compontent="page-comment"]').length;
+        return this.container.querySelectorAll('[component="page-comment"]').length;
     }
 
-    setReply(commentLocalId) {
+    setReply(commentLocalId, commentElement) {
+        const targetFormLocation = commentElement.closest('.comment-branch').querySelector('.comment-branch-children');
         this.showForm();
+        targetFormLocation.append(this.formContainer);
+        this.formContainer.scrollIntoView({behavior: 'smooth', block: 'nearest'});
         this.parentId = commentLocalId;
         this.replyToRow.toggleAttribute('hidden', false);
         const replyLink = this.replyToRow.querySelector('a');

resources/sass/_components.scss

@@ -682,6 +682,9 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   &:hover .actions, &:focus-within .actions {
     opacity: 1;
   }
+  .actions button:focus {
+    outline: 1px dotted var(--color-primary);
+  }
 }
 
 .comment-box .header {
@@ -709,6 +712,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   @include lightDark(border-color, #DDD, #444);
   margin-inline-start: $-xs;
   width: $-l;
+  height: calc(100% - $-m);
 }
 
 #tag-manager .drag-card {

resources/views/comments/comment-branch.blade.php

@@ -2,16 +2,14 @@
     <div class="mb-m">
         @include('comments.comment', ['comment' => $branch['comment']])
     </div>
-    @if(count($branch['children']) > 0)
-        <div class="flex-container-row">
-            <div class="pb-m">
-                <div class="comment-thread-indicator fill-height"></div>
-            </div>
-            <div class="flex">
-                @foreach($branch['children'] as $childBranch)
-                    @include('comments.comment-branch', ['branch' => $childBranch])
-                @endforeach
-            </div>
+    <div class="flex-container-row">
+        <div class="comment-thread-indicator-parent">
+            <div class="comment-thread-indicator"></div>
         </div>
-    @endif
+        <div class="comment-branch-children flex">
+            @foreach($branch['children'] as $childBranch)
+                @include('comments.comment-branch', ['branch' => $childBranch])
+            @endforeach
+        </div>
+    </div>
 </div>

resources/views/comments/comment.blade.php

@@ -28,14 +28,14 @@
             </div>
             <div class="actions text-right">
                 @if(userCan('comment-update', $comment))
-                    <button refs="page-comment@edit-button" type="button" class="text-button"  aria-label="{{ trans('common.edit') }}" title="{{ trans('common.edit') }}">@icon('edit')</button>
+                    <button refs="page-comment@edit-button" type="button" class="text-button icon p-xs"  aria-label="{{ trans('common.edit') }}" title="{{ trans('common.edit') }}">@icon('edit')</button>
                 @endif
                 @if(userCan('comment-create-all'))
-                    <button refs="page-comment@reply-button" type="button" class="text-button" aria-label="{{ trans('common.reply') }}" title="{{ trans('common.reply') }}">@icon('reply')</button>
+                    <button refs="page-comment@reply-button" type="button" class="text-button icon p-xs" aria-label="{{ trans('common.reply') }}" title="{{ trans('common.reply') }}">@icon('reply')</button>
                 @endif
                 @if(userCan('comment-delete', $comment))
                     <div component="dropdown" class="dropdown-container">
-                        <button type="button" refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" class="text-button" title="{{ trans('common.delete') }}">@icon('delete')</button>
+                        <button type="button" refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" class="text-button icon p-xs" title="{{ trans('common.delete') }}">@icon('delete')</button>
                         <ul refs="dropdown@menu" class="dropdown-menu" role="menu">
                             <li class="px-m text-small text-muted pb-s">{{trans('entities.comment_delete_confirm')}}</li>
                             <li>

resources/views/comments/create.blade.php

@@ -1,30 +1,32 @@
-<div refs="page-comments@form-container" hidden class="comment-box">
+<div refs="page-comments@form-container" hidden class="comment-branch mb-m">
+    <div class="comment-box">
 
-    <div class="header p-s">{{ trans('entities.comment_new') }}</div>
-    <div refs="page-comments@reply-to-row" hidden class="primary-background-light text-muted px-s py-xs mb-s">
-        <div class="grid left-focus v-center">
-            <div>
-                {!! trans('entities.comment_in_reply_to', ['commentId' => '<a href=""></a>']) !!}
-            </div>
-            <div class="text-right">
-                <button refs="page-comments@remove-reply-to-button" class="text-button">{{ trans('common.remove') }}</button>
+        <div class="header p-s">{{ trans('entities.comment_new') }}</div>
+        <div refs="page-comments@reply-to-row" hidden class="primary-background-light text-muted px-s py-xs mb-s">
+            <div class="grid left-focus v-center">
+                <div>
+                    {!! trans('entities.comment_in_reply_to', ['commentId' => '<a href=""></a>']) !!}
+                </div>
+                <div class="text-right">
+                    <button refs="page-comments@remove-reply-to-button" class="text-button">{{ trans('common.remove') }}</button>
+                </div>
             </div>
         </div>
-    </div>
 
-    <div class="content px-s">
-        <form refs="page-comments@form" novalidate>
-            <div class="form-group description-input">
+        <div class="content px-s">
+            <form refs="page-comments@form" novalidate>
+                <div class="form-group description-input">
                 <textarea refs="page-comments@form-input" name="markdown"
                           rows="3"
                           placeholder="{{ trans('entities.comment_placeholder') }}"></textarea>
-            </div>
-            <div class="form-group text-right">
-                <button type="button" class="button outline"
-                        refs="page-comments@hide-form-button">{{ trans('common.cancel') }}</button>
-                <button type="submit" class="button">{{ trans('entities.comment_save') }}</button>
-            </div>
-        </form>
-    </div>
+                </div>
+                <div class="form-group text-right">
+                    <button type="button" class="button outline"
+                            refs="page-comments@hide-form-button">{{ trans('common.cancel') }}</button>
+                    <button type="submit" class="button">{{ trans('entities.comment_save') }}</button>
+                </div>
+            </form>
+        </div>
 
+    </div>
 </div>