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 @@
<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>
\ 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 @@
</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>
diff --git a/resources/views/comments/create.blade.php b/resources/views/comments/create.blade.php
index 5f9f6d449..88cec4876 100644
--- a/resources/views/comments/create.blade.php
+++ b/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>
\ No newline at end of file