X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/41f56e659dfb82b2a8750dcfb62ea2e51c9a9ec6..refs/pull/5313/head:/resources/views/comments/comment.blade.php

diff --git a/resources/views/comments/comment.blade.php b/resources/views/comments/comment.blade.php
index e32de68f2..b507a810b 100644
--- a/resources/views/comments/comment.blade.php
+++ b/resources/views/comments/comment.blade.php
@@ -1,67 +1,92 @@
-<div class="comment-box" comment="{{ $comment->id }}" local-id="{{$comment->local_id}}" parent-id="{{$comment->parent_id || ''}}" id="comment{{$comment->local_id}}">
+@php
+    $commentHtml = $comment->safeHtml();
+@endphp
+<div component="{{ $readOnly ? '' : 'page-comment' }}"
+     option:page-comment:comment-id="{{ $comment->id }}"
+     option:page-comment:comment-local-id="{{ $comment->local_id }}"
+     option:page-comment:comment-parent-id="{{ $comment->parent_id }}"
+     option:page-comment:updated-text="{{ trans('entities.comment_updated_success') }}"
+     option:page-comment:deleted-text="{{ trans('entities.comment_deleted_success') }}"
+     option:page-comment:wysiwyg-language="{{ $locale->htmlLang() }}"
+     option:page-comment:wysiwyg-text-direction="{{ $locale->htmlDirection() }}"
+     id="comment{{$comment->local_id}}"
+     class="comment-box">
     <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') }}"><i class="zmdi zmdi-edit"></i></button>
-            @endif
-            @if(userCan('comment-create-all'))
-                <button type="button" class="text-button" action="reply" title="{{ trans('common.reply') }}"><i class="zmdi zmdi-mail-reply-all"></i></button>
-            @endif
-            @if(userCan('comment-delete', $comment))
-
-                <div dropdown class="dropdown-container">
-                    <button type="button" dropdown-toggle class="text-button" title="{{ trans('common.delete') }}"><i class="zmdi zmdi-delete"></i></button>
-                    <ul>
-                        <li class="padded"><small class="text-muted">{{trans('entities.comment_delete_confirm')}}</small></li>
-                        <li><a action="delete" class="text-button neg" ><i class="zmdi zmdi-delete"></i>{{ trans('common.delete') }}</a></li>
-                    </ul>
+        <div class="flex-container-row wrap items-center gap-x-xs">
+            @if ($comment->createdBy)
+                <div>
+                    <img width="50" src="{{ $comment->createdBy->getAvatar(50) }}" class="avatar block mr-xs" alt="{{ $comment->createdBy->name }}">
                 </div>
             @endif
-        </div>
-
-        <div class="meta">
-            <a href="#comment{{$comment->local_id}}" class="text-muted">#{{$comment->local_id}}</a>
-            &nbsp;&nbsp;
-            <img width="50" src="{{ $comment->createdBy->getAvatar(50) }}" class="avatar" alt="{{ $comment->createdBy->name }}">
-            &nbsp;
-            <a href="{{ $comment->createdBy->getProfileUrl() }}">{{ $comment->createdBy->name }}</a>
-            {{--TODO - Account for deleted user--}}
-            <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->name]) }}
-            </span>
-            @endif
+            <div class="meta text-muted flex-container-row wrap items-center flex text-small">
+                @if ($comment->createdBy)
+                    <a href="{{ $comment->createdBy->getProfileUrl() }}">{{ $comment->createdBy->getShortName(16) }}</a>
+                @else
+                    {{ trans('common.deleted_user') }}
+                @endif
+                <span title="{{ $comment->created_at }}">&nbsp;{{ trans('entities.comment_created', ['createDiff' => $comment->created]) }}</span>
+                @if($comment->isUpdated())
+                    <span class="mx-xs">&bull;</span>
+                    <span title="{{ trans('entities.comment_updated', ['updateDiff' => $comment->updated_at, 'username' => $comment->updatedBy->name ?? trans('common.deleted_user')]) }}">
+                 {{ trans('entities.comment_updated_indicator') }}
+                    </span>
+                @endif
+            </div>
+            <div class="right-meta flex-container-row justify-flex-end items-center px-s">
+                @if(!$readOnly && (userCan('comment-create-all') || userCan('comment-update', $comment) || userCan('comment-delete', $comment)))
+                <div class="actions mr-s">
+                    @if(userCan('comment-create-all'))
+                        <button refs="page-comment@reply-button" type="button" class="text-button text-muted hover-underline text-small p-xs">@icon('reply') {{ trans('common.reply') }}</button>
+                    @endif
+                    @if(userCan('comment-update', $comment))
+                        <button refs="page-comment@edit-button" type="button" class="text-button text-muted hover-underline text-small p-xs">@icon('edit') {{ trans('common.edit') }}</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 text-muted hover-underline text-small p-xs">@icon('delete') {{ trans('common.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>
+                                    <button refs="page-comment@delete-button" type="button" class="text-button text-neg icon-item">
+                                        @icon('delete')
+                                        <div>{{ trans('common.delete') }}</div>
+                                    </button>
+                                </li>
+                            </ul>
+                        </div>
+                    @endif
+                    <span class="text-muted">
+                        &nbsp;&bull;&nbsp;
+                    </span>
+                </div>
+                @endif
+                <div>
+                    <a class="bold text-muted text-small" href="#comment{{$comment->local_id}}">#{{$comment->local_id}}</a>
+                </div>
+            </div>
         </div>
 
     </div>
 
-    @if ($comment->parent_id)
-        <div class="reply-row primary-background-light text-muted">
-            {!! trans('entities.comment_in_reply_to', ['commentId' => '<a href="#comment'.$comment->parent_id.'">#'.$comment->parent_id.'</a>']) !!}
-        </div>
-    @endif
-
-    <div comment-content class="content">
-        {!! $comment->html  !!}
+    <div refs="page-comment@content-container" class="content">
+        @if ($comment->parent_id)
+            <p class="comment-reply">
+                <a class="text-muted text-small" href="#comment{{ $comment->parent_id }}">@icon('reply'){{ trans('entities.comment_in_reply_to', ['commentId' => '#' . $comment->parent_id]) }}</a>
+            </p>
+        @endif
+        {!! $commentHtml  !!}
     </div>
 
-    @if(userCan('comment-update', $comment))
-        <div comment-edit-container style="display: none;" class="content">
-            <form novalidate>
-                <div class="form-group">
-                    <textarea name="markdown" rows="3" v-model="comment.text" 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>
-                    <button type="submit" class="button pos">{{ trans('entities.comment_save') }}</button>
-                </div>
-            </form>
-        </div>
+    @if(!$readOnly && userCan('comment-update', $comment))
+        <form novalidate refs="page-comment@form" hidden class="content pt-s px-s block">
+            <div class="form-group description-input">
+                <textarea refs="page-comment@input" name="html" rows="3" placeholder="{{ trans('entities.comment_placeholder') }}">{{ $commentHtml }}</textarea>
+            </div>
+            <div class="form-group text-right">
+                <button type="button" class="button outline" refs="page-comment@form-cancel">{{ trans('common.cancel') }}</button>
+                <button type="submit" class="button">{{ trans('entities.comment_save') }}</button>
+            </div>
+        </form>
     @endif
 
 </div>
\ No newline at end of file