Updated the design of the comments section

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;
     }
 

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: 4px;
-  border-radius: 3px;
+  background-color: #FFF;
   .content {
-    padding: $-s;
     font-size: 0.666em;
     p, ul, ol {
       font-size: $fs-m;
       margin: .5em 0;
     }
   }
-  .reply-row {
+  .actions {
-    padding: $-xs $-s;
+    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;

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="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>
+                &nbsp;&nbsp;
-            @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>
+                    &nbsp;
-            @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>
-            &nbsp;&nbsp;
-            @if ($comment->createdBy)
-                <img width="50" src="{{ $comment->createdBy->getAvatar(50) }}" class="avatar" alt="{{ $comment->createdBy->name }}">
-                &nbsp;
-                <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 }}">
                 &bull;&nbsp;
                     {{ 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">
+                <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 class="form-group text-right">
                     <button type="button" class="button outline" action="closeUpdateForm">{{ trans('common.cancel') }}</button>

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'))
-
+        @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
 
 </div>

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>