diff --git a/app/Activity/Controllers/CommentController.php b/app/Activity/Controllers/CommentController.php index b198d2d56..9e7491fd7 100644 --- a/app/Activity/Controllers/CommentController.php +++ b/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' => [], + ] + ]); } /** diff --git a/resources/js/components/page-comment.js b/resources/js/components/page-comment.js index ff86297e2..43159b42c 100644 --- a/resources/js/components/page-comment.js +++ b/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)); diff --git a/resources/js/components/page-comments.js b/resources/js/components/page-comments.js index 9dc529963..1eaa7cfa4 100644 --- a/resources/js/components/page-comments.js +++ b/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'); diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss index bd85bb99f..a3818168f 100644 --- a/resources/sass/_components.scss +++ b/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 { diff --git a/resources/views/comments/comment-branch.blade.php b/resources/views/comments/comment-branch.blade.php index 69c967cd2..78d19ac3e 100644 --- a/resources/views/comments/comment-branch.blade.php +++ b/resources/views/comments/comment-branch.blade.php @@ -2,16 +2,14 @@
@include('comments.comment', ['comment' => $branch['comment']])
- @if(count($branch['children']) > 0) -
-
-
-
-
- @foreach($branch['children'] as $childBranch) - @include('comments.comment-branch', ['branch' => $childBranch]) - @endforeach -
+
+
+
- @endif +
+ @foreach($branch['children'] as $childBranch) + @include('comments.comment-branch', ['branch' => $childBranch]) + @endforeach +
+
\ No newline at end of file diff --git a/resources/views/comments/comment.blade.php b/resources/views/comments/comment.blade.php index ce0d59473..924b465fa 100644 --- a/resources/views/comments/comment.blade.php +++ b/resources/views/comments/comment.blade.php @@ -28,14 +28,14 @@
@if(userCan('comment-update', $comment)) - + @endif @if(userCan('comment-create-all')) - + @endif @if(userCan('comment-delete', $comment))
- +