From 2694bb8fab9a43e914a1dbf96e6add74c9b30a31 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sat, 13 Apr 2019 10:50:24 +0100
Subject: [PATCH] Updated the design of the comments section
---
.../assets/js/components/page-comments.js | 2 +-
resources/assets/sass/_components.scss | 17 ++--
resources/views/comments/comment.blade.php | 83 +++++++++----------
resources/views/comments/comments.blade.php | 30 +------
resources/views/comments/create.blade.php | 34 ++++++++
5 files changed, 85 insertions(+), 81 deletions(-)
create mode 100644 resources/views/comments/create.blade.php
diff --git a/resources/assets/js/components/page-comments.js b/resources/assets/js/components/page-comments.js
index c86b90d2c..0c8b32b7c 100644
--- a/resources/assets/js/components/page-comments.js
+++ b/resources/assets/js/components/page-comments.js
@@ -54,7 +54,7 @@ class PageComments {
commentElem.querySelector('[comment-edit-container]').style.display = 'block';
let textArea = commentElem.querySelector('[comment-edit-container] textarea');
let lineCount = textArea.value.split('\n').length;
- textArea.style.height = (lineCount * 20) + 'px';
+ textArea.style.height = ((lineCount * 20) + 40) + 'px';
this.editingComment = commentElem;
}
diff --git a/resources/assets/sass/_components.scss b/resources/assets/sass/_components.scss
index 09b7c5f02..044b8ec10 100644
--- a/resources/assets/sass/_components.scss
+++ b/resources/assets/sass/_components.scss
@@ -604,27 +604,26 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
}
.comment-box {
- clear: left;
border: 1px solid #DDD;
- margin-bottom: $-s;
- border-radius: 3px;
+ border-radius: 4px;
+ background-color: #FFF;
.content {
- padding: $-s;
font-size: 0.666em;
p, ul, ol {
font-size: $fs-m;
margin: .5em 0;
}
}
- .reply-row {
- padding: $-xs $-s;
+ .actions {
+ opacity: 0;
+ transition: opacity ease-in-out 120ms;
+ }
+ &:hover .actions {
+ opacity: 1;
}
}
.comment-box .header {
- padding: $-xs $-s;
- background-color: #f8f8f8;
- border-bottom: 1px solid #DDD;
.meta {
img, a, span {
display: inline-block;
diff --git a/resources/views/comments/comment.blade.php b/resources/views/comments/comment.blade.php
index 9f955f691..2993425bb 100644
--- a/resources/views/comments/comment.blade.php
+++ b/resources/views/comments/comment.blade.php
@@ -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="header">
-
- <div class="float right actions">
- @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"><small class="text-muted">{{trans('entities.comment_delete_confirm')}}</small></li>
- <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 }}">
+<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 p-s">
+ <div class="grid half">
+ <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')]) }}
</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>
@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>']) !!}
</div>
@endif
- <div comment-content class="content">
+ <div comment-content class="content px-s pb-s">
<div class="form-group loading" style="display: none;">
@include('partials.loading-icon', ['text' => trans('entities.comment_deleting')])
</div>
@@ -57,10 +54,10 @@
</div>
@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>
- <div class="form-group">
- <textarea name="markdown" rows="3" v-model="comment.text" placeholder="{{ trans('entities.comment_placeholder') }}">{{ $comment->text }}</textarea>
+ <div class="form-group description-input">
+ <textarea name="markdown" rows="3" placeholder="{{ trans('entities.comment_placeholder') }}">{{ $comment->text }}</textarea>
</div>
<div class="form-group text-right">
<button type="button" class="button outline" action="closeUpdateForm">{{ trans('common.cancel') }}</button>
diff --git a/resources/views/comments/comments.blade.php b/resources/views/comments/comments.blade.php
index bc42e0a0c..71b7a2ef6 100644
--- a/resources/views/comments/comments.blade.php
+++ b/resources/views/comments/comments.blade.php
@@ -1,6 +1,5 @@
-{{--TODO--}}
<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>
@foreach($page->comments as $comment)
@@ -9,32 +8,7 @@
</div>
@if(userCan('comment-create-all'))
-
- <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>
+ @include('comments.create')
@endif
</div>
\ No newline at end of file
diff --git a/resources/views/comments/create.blade.php b/resources/views/comments/create.blade.php
new file mode 100644
index 000000000..29d6f1974
--- /dev/null
+++ b/resources/views/comments/create.blade.php
@@ -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>
\ No newline at end of file