Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-01 01:36:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fixed "Add comment" layout when no comments exist

Browse Source
This commit is contained in:
Dan Brown 2019-04-13 12:58:57 +01:00
parent cc24d478aa
commit d3cc261320
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
3 changed files with 30 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
resources/assets/js/components/page-comments.js
View File

@ -88,6 +88,7 @@ class PageComments {
commentElem.parentNode.removeChild(commentElem); commentElem.parentNode.removeChild(commentElem);
window.$events.emit('success', window.trans('entities.comment_deleted_success')); window.$events.emit('success', window.trans('entities.comment_deleted_success'));
this.updateCount(); this.updateCount();
this.hideForm();
}); });
} }
@ -129,7 +130,7 @@ class PageComments {
showForm() { showForm() {
this.formContainer.style.display = 'block'; this.formContainer.style.display = 'block';
this.formContainer.parentNode.style.display = 'block'; this.formContainer.parentNode.style.display = 'block';
this.elem.querySelector('[comment-add-button]').style.display = 'none'; this.elem.querySelector('[comment-add-button-container]').style.display = 'none';
this.formInput.focus(); this.formInput.focus();
window.scrollToElement(this.formInput); window.scrollToElement(this.formInput);
} }
@ -137,7 +138,18 @@ class PageComments {
hideForm() { hideForm() {
this.formContainer.style.display = 'none'; this.formContainer.style.display = 'none';
this.formContainer.parentNode.style.display = 'none'; this.formContainer.parentNode.style.display = 'none';
this.elem.querySelector('[comment-add-button]').style.display = 'block'; const addButtonContainer = this.elem.querySelector('[comment-add-button-container]');
if (this.getCommentCount() > 0) {
this.elem.appendChild(addButtonContainer)
} else {
const countBar = this.elem.querySelector('[comment-count-bar]');
countBar.appendChild(addButtonContainer);
}
addButtonContainer.style.display = 'block';
}
getCommentCount() {
return this.elem.querySelectorAll('.comment-box[comment]').length;
} }
setReply(commentElem) { setReply(commentElem) {

17
resources/views/comments/comments.blade.php
View File

@ -1,5 +1,13 @@
<div page-comments page-id="{{ $page->id }}" class="comments-list"> <div page-comments page-id="{{ $page->id }}" class="comments-list">
<h5 comments-title>{{ trans_choice('entities.comment_count', count($page->comments), ['count' => count($page->comments)]) }}</h5> <div comment-count-bar class="grid half left-focus v-center">
<h5 comments-title>{{ trans_choice('entities.comment_count', count($page->comments), ['count' => count($page->comments)]) }}</h5>
@if (count($page->comments) === 0)
<div class="text-right" comment-add-button-container>
<button type="button" action="addComment"
class="button outline">{{ trans('entities.comment_add') }}</button>
</div>
@endif
</div>
<div class="comment-container" comment-container> <div class="comment-container" comment-container>
@foreach($page->comments as $comment) @foreach($page->comments as $comment)
@ -11,4 +19,11 @@
@include('comments.create') @include('comments.create')
@endif @endif
@if (count($page->comments) > 0)
<div class="text-right" comment-add-button-container>
<button type="button" action="addComment"
class="button outline">{{ trans('entities.comment_add') }}</button>
</div>
@endif
</div> </div>

5
resources/views/comments/create.blade.php
View File

@ -27,8 +27,3 @@
</form> </form>
</div> </div>
</div> </div>
<div class="form-group text-right" comment-add-button>
<button type="button" action="addComment"
class="button outline">{{ trans('entities.comment_add') }}</button>
</div>