mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 01:36:00 -04:00
Comments: Updated to show form in expected location
Includes a change of create response to use a branch as a template.
This commit is contained in:
Dan Brown
parent
154924cc0c
commit
3b46b92bb9
@ -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' => [],
|
||||
]
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -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));
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user