mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-26 12:16:07 +00:00
Updated the design of the comments section
This commit is contained in:
parent
b12ae6d11b
commit
2694bb8fab
@ -54,7 +54,7 @@ class PageComments {
|
|||||||
commentElem.querySelector('[comment-edit-container]').style.display = 'block';
|
commentElem.querySelector('[comment-edit-container]').style.display = 'block';
|
||||||
let textArea = commentElem.querySelector('[comment-edit-container] textarea');
|
let textArea = commentElem.querySelector('[comment-edit-container] textarea');
|
||||||
let lineCount = textArea.value.split('\n').length;
|
let lineCount = textArea.value.split('\n').length;
|
||||||
textArea.style.height = (lineCount * 20) + 'px';
|
textArea.style.height = ((lineCount * 20) + 40) + 'px';
|
||||||
this.editingComment = commentElem;
|
this.editingComment = commentElem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -604,27 +604,26 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.comment-box {
|
.comment-box {
|
||||||
clear: left;
|
|
||||||
border: 1px solid #DDD;
|
border: 1px solid #DDD;
|
||||||
margin-bottom: $-s;
|
border-radius: 4px;
|
||||||
border-radius: 3px;
|
background-color: #FFF;
|
||||||
.content {
|
.content {
|
||||||
padding: $-s;
|
|
||||||
font-size: 0.666em;
|
font-size: 0.666em;
|
||||||
p, ul, ol {
|
p, ul, ol {
|
||||||
font-size: $fs-m;
|
font-size: $fs-m;
|
||||||
margin: .5em 0;
|
margin: .5em 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.reply-row {
|
.actions {
|
||||||
padding: $-xs $-s;
|
opacity: 0;
|
||||||
|
transition: opacity ease-in-out 120ms;
|
||||||
|
}
|
||||||
|
&:hover .actions {
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-box .header {
|
.comment-box .header {
|
||||||
padding: $-xs $-s;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
border-bottom: 1px solid #DDD;
|
|
||||||
.meta {
|
.meta {
|
||||||
img, a, span {
|
img, a, span {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -1,55 +1,52 @@
|
|||||||
<div class="comment-box" comment="{{ $comment->id }}" local-id="{{$comment->local_id}}" parent-id="{{$comment->parent_id}}" id="comment{{$comment->local_id}}">
|
<div class="comment-box mb-m" comment="{{ $comment->id }}" local-id="{{$comment->local_id}}" parent-id="{{$comment->parent_id}}" id="comment{{$comment->local_id}}">
|
||||||
<div class="header">
|
<div class="header p-s">
|
||||||
|
<div class="grid half">
|
||||||
<div class="float right actions">
|
<div class="meta">
|
||||||
@if(userCan('comment-update', $comment))
|
<a href="#comment{{$comment->local_id}}" class="text-muted">#{{$comment->local_id}}</a>
|
||||||
<button type="button" class="text-button" action="edit" title="{{ trans('common.edit') }}">@icon('edit')</button>
|
|
||||||
@endif
|
@if ($comment->createdBy)
|
||||||
@if(userCan('comment-create-all'))
|
<img width="50" src="{{ $comment->createdBy->getAvatar(50) }}" class="avatar" alt="{{ $comment->createdBy->name }}">
|
||||||
<button type="button" class="text-button" action="reply" title="{{ trans('common.reply') }}">@icon('reply')</button>
|
|
||||||
@endif
|
<a href="{{ $comment->createdBy->getProfileUrl() }}">{{ $comment->createdBy->name }}</a>
|
||||||
@if(userCan('comment-delete', $comment))
|
@else
|
||||||
|
<span>{{ trans('common.deleted_user') }}</span>
|
||||||
<div dropdown class="dropdown-container">
|
@endif
|
||||||
<button type="button" dropdown-toggle class="text-button" title="{{ trans('common.delete') }}">@icon('delete')</button>
|
<span title="{{ $comment->created_at }}">{{ trans('entities.comment_created', ['createDiff' => $comment->created]) }}</span>
|
||||||
<ul>
|
@if($comment->isUpdated())
|
||||||
<li class="px-m"><small class="text-muted">{{trans('entities.comment_delete_confirm')}}</small></li>
|
<span title="{{ $comment->updated_at }}">
|
||||||
<li><a action="delete" class="text-button text-neg" >@icon('delete'){{ trans('common.delete') }}</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="meta">
|
|
||||||
<a href="#comment{{$comment->local_id}}" class="text-muted">#{{$comment->local_id}}</a>
|
|
||||||
|
|
||||||
@if ($comment->createdBy)
|
|
||||||
<img width="50" src="{{ $comment->createdBy->getAvatar(50) }}" class="avatar" alt="{{ $comment->createdBy->name }}">
|
|
||||||
|
|
||||||
<a href="{{ $comment->createdBy->getProfileUrl() }}">{{ $comment->createdBy->name }}</a>
|
|
||||||
@else
|
|
||||||
<span>{{ trans('common.deleted_user') }}</span>
|
|
||||||
@endif
|
|
||||||
<span title="{{ $comment->created_at }}">
|
|
||||||
{{ trans('entities.comment_created', ['createDiff' => $comment->created]) }}
|
|
||||||
</span>
|
|
||||||
@if($comment->isUpdated())
|
|
||||||
<span title="{{ $comment->updated_at }}">
|
|
||||||
•
|
•
|
||||||
{{ trans('entities.comment_updated', ['updateDiff' => $comment->updated, 'username' => $comment->updatedBy? $comment->updatedBy->name : trans('common.deleted_user')]) }}
|
{{ trans('entities.comment_updated', ['updateDiff' => $comment->updated, 'username' => $comment->updatedBy? $comment->updatedBy->name : trans('common.deleted_user')]) }}
|
||||||
</span>
|
</span>
|
||||||
@endif
|
@endif
|
||||||
|
</div>
|
||||||
|
<div class="actions text-right">
|
||||||
|
@if(userCan('comment-update', $comment))
|
||||||
|
<button type="button" class="text-button" action="edit" title="{{ trans('common.edit') }}">@icon('edit')</button>
|
||||||
|
@endif
|
||||||
|
@if(userCan('comment-create-all'))
|
||||||
|
<button type="button" class="text-button" action="reply" title="{{ trans('common.reply') }}">@icon('reply')</button>
|
||||||
|
@endif
|
||||||
|
@if(userCan('comment-delete', $comment))
|
||||||
|
<div dropdown class="dropdown-container">
|
||||||
|
<button type="button" dropdown-toggle class="text-button" title="{{ trans('common.delete') }}">@icon('delete')</button>
|
||||||
|
<ul>
|
||||||
|
<li class="px-m text-small text-muted pb-s">{{trans('entities.comment_delete_confirm')}}</li>
|
||||||
|
<li><a action="delete" class="text-button text-neg" >@icon('delete'){{ trans('common.delete') }}</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if ($comment->parent_id)
|
@if ($comment->parent_id)
|
||||||
<div class="reply-row primary-background-light text-muted">
|
<div class="reply-row primary-background-light text-muted px-s py-xs mb-s">
|
||||||
{!! trans('entities.comment_in_reply_to', ['commentId' => '<a href="#comment'.$comment->parent_id.'">#'.$comment->parent_id.'</a>']) !!}
|
{!! trans('entities.comment_in_reply_to', ['commentId' => '<a href="#comment'.$comment->parent_id.'">#'.$comment->parent_id.'</a>']) !!}
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
<div comment-content class="content">
|
<div comment-content class="content px-s pb-s">
|
||||||
<div class="form-group loading" style="display: none;">
|
<div class="form-group loading" style="display: none;">
|
||||||
@include('partials.loading-icon', ['text' => trans('entities.comment_deleting')])
|
@include('partials.loading-icon', ['text' => trans('entities.comment_deleting')])
|
||||||
</div>
|
</div>
|
||||||
@ -57,10 +54,10 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if(userCan('comment-update', $comment))
|
@if(userCan('comment-update', $comment))
|
||||||
<div comment-edit-container style="display: none;" class="content">
|
<div comment-edit-container style="display: none;" class="content px-s">
|
||||||
<form novalidate>
|
<form novalidate>
|
||||||
<div class="form-group">
|
<div class="form-group description-input">
|
||||||
<textarea name="markdown" rows="3" v-model="comment.text" placeholder="{{ trans('entities.comment_placeholder') }}">{{ $comment->text }}</textarea>
|
<textarea name="markdown" rows="3" placeholder="{{ trans('entities.comment_placeholder') }}">{{ $comment->text }}</textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group text-right">
|
<div class="form-group text-right">
|
||||||
<button type="button" class="button outline" action="closeUpdateForm">{{ trans('common.cancel') }}</button>
|
<button type="button" class="button outline" action="closeUpdateForm">{{ trans('common.cancel') }}</button>
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
{{--TODO--}}
|
|
||||||
<div page-comments page-id="{{ $page->id }}" class="comments-list">
|
<div page-comments page-id="{{ $page->id }}" class="comments-list">
|
||||||
<h5 comments-title class="float left">{{ trans_choice('entities.comment_count', count($page->comments), ['count' => count($page->comments)]) }}</h5>
|
<h5 comments-title>{{ trans_choice('entities.comment_count', count($page->comments), ['count' => count($page->comments)]) }}</h5>
|
||||||
|
|
||||||
<div class="comment-container" comment-container>
|
<div class="comment-container" comment-container>
|
||||||
@foreach($page->comments as $comment)
|
@foreach($page->comments as $comment)
|
||||||
@ -9,32 +8,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if(userCan('comment-create-all'))
|
@if(userCan('comment-create-all'))
|
||||||
|
@include('comments.create')
|
||||||
<div class="comment-box" comment-box style="display:none;">
|
|
||||||
<div class="header">@icon('comment') {{ trans('entities.comment_new') }}</div>
|
|
||||||
<div comment-form-reply-to class="reply-row primary-background-light text-muted" style="display: none;">
|
|
||||||
<button class="text-button float right" action="remove-reply-to">{{ trans('common.remove') }}</button>
|
|
||||||
{!! trans('entities.comment_in_reply_to', ['commentId' => '<a href=""></a>']) !!}
|
|
||||||
</div>
|
|
||||||
<div class="content" comment-form-container>
|
|
||||||
<form novalidate>
|
|
||||||
<div class="form-group">
|
|
||||||
<textarea name="markdown" rows="3" v-model="comment.text" placeholder="{{ trans('entities.comment_placeholder') }}"></textarea>
|
|
||||||
</div>
|
|
||||||
<div class="form-group text-right">
|
|
||||||
<button type="button" class="button outline" action="hideForm">{{ trans('common.cancel') }}</button>
|
|
||||||
<button type="submit" class="button primary">{{ trans('entities.comment_save') }}</button>
|
|
||||||
</div>
|
|
||||||
<div class="form-group loading" style="display: none;">
|
|
||||||
@include('partials.loading-icon', ['text' => trans('entities.comment_saving')])
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group" comment-add-button>
|
|
||||||
<button type="button" action="addComment" class="button outline float right">{{ trans('entities.comment_add') }}</button>
|
|
||||||
</div>
|
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
</div>
|
</div>
|
34
resources/views/comments/create.blade.php
Normal file
34
resources/views/comments/create.blade.php
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<div class="comment-box" comment-box style="display:none;">
|
||||||
|
<div class="header p-s">{{ trans('entities.comment_new') }}</div>
|
||||||
|
<div comment-form-reply-to class="reply-row primary-background-light text-muted px-s py-xs mb-s" style="display: none;">
|
||||||
|
<div class="grid left-focus v-center">
|
||||||
|
<div>
|
||||||
|
{!! trans('entities.comment_in_reply_to', ['commentId' => '<a href=""></a>']) !!}
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<button class="text-button" action="remove-reply-to">{{ trans('common.remove') }}</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content px-s" comment-form-container>
|
||||||
|
<form novalidate>
|
||||||
|
<div class="form-group description-input">
|
||||||
|
<textarea name="markdown" rows="3"
|
||||||
|
placeholder="{{ trans('entities.comment_placeholder') }}"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="form-group text-right">
|
||||||
|
<button type="button" class="button outline"
|
||||||
|
action="hideForm">{{ trans('common.cancel') }}</button>
|
||||||
|
<button type="submit" class="button primary">{{ trans('entities.comment_save') }}</button>
|
||||||
|
</div>
|
||||||
|
<div class="form-group loading" style="display: none;">
|
||||||
|
@include('partials.loading-icon', ['text' => trans('entities.comment_saving')])
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</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>
|
Loading…
Reference in New Issue
Block a user