Comments: Fixed display, added archive list support for editor toolbox

diff --git a/lang/en/entities.php b/lang/en/entities.php
index e25a83299f3365aa561b80f0de69ff529fa830c9..6e616ded452c53b1e168da3561ff2bac1259c7c7 100644 (file)
--- a/lang/en/entities.php
+++ b/lang/en/entities.php
@@ -396,6 +396,7 @@ return [
     'comment_placeholder' => 'Leave a comment here',
     'comment_thread_count' => ':count Comment Thread|:count Comment Threads',
     'comment_archived_count' => ':count Archived',
     'comment_placeholder' => 'Leave a comment here',
     'comment_thread_count' => ':count Comment Thread|:count Comment Threads',
     'comment_archived_count' => ':count Archived',

+    'comment_archived_threads' => 'Archived Threads',

     'comment_save' => 'Save Comment',
     'comment_new' => 'New Comment',
     'comment_created' => 'commented :createDiff',
     'comment_save' => 'Save Comment',
     'comment_new' => 'New Comment',
     'comment_created' => 'commented :createDiff',

diff --git a/resources/js/components/page-comment-reference.ts b/resources/js/components/page-comment-reference.ts
index 5a71f0c513b8c176182aa64e30b16c278acaa62b..48fb8ee0a492a47380ad7b3432ec81eda675dc46 100644 (file)
--- a/resources/js/components/page-comment-reference.ts
+++ b/resources/js/components/page-comment-reference.ts
@@ -34,13 +34,26 @@ export class PageCommentReference extends Component {
         window.addEventListener('editor-toolbox-change', (event) => {
              const tabName: string = (event as {detail: {tab: string, open: boolean}}).detail.tab;
              const isOpen = (event as {detail: {tab: string, open: boolean}}).detail.open;
         window.addEventListener('editor-toolbox-change', (event) => {
              const tabName: string = (event as {detail: {tab: string, open: boolean}}).detail.tab;
              const isOpen = (event as {detail: {tab: string, open: boolean}}).detail.open;

-             if (tabName === 'comments' && isOpen) {
+             if (tabName === 'comments' && isOpen && this.link.checkVisibility()) {

                  this.showForEditor();
              } else {
                  this.hideMarker();
              }
         });
 
                  this.showForEditor();
              } else {
                  this.hideMarker();
              }
         });
 

+        // Handle visibility changes within editor toolbox archived details dropdown
+        window.addEventListener('toggle', event => {
+            if (event.target instanceof HTMLElement && event.target.contains(this.link)) {
+                window.requestAnimationFrame(() => {
+                    if (this.link.checkVisibility()) {
+                        this.showForEditor();
+                    } else {
+                        this.hideMarker();
+                    }
+                });
+            }
+        }, {capture: true});
+

         // Handle comments tab changes to hide/show markers & indicators
         window.addEventListener('tabs-change', event => {
             const sectionId = (event as {detail: {showing: string}}).detail.showing;
         // Handle comments tab changes to hide/show markers & indicators
         window.addEventListener('tabs-change', event => {
             const sectionId = (event as {detail: {showing: string}}).detail.showing;

diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss
index a86d31ce3730002ddea09b45cfa69a8bd866c62f..faeb2e05141c7edb1cded9530f1cb0101fd528db 100644 (file)
--- a/resources/sass/_components.scss
+++ b/resources/sass/_components.scss
@@ -1202,4 +1202,19 @@ input.scroll-box-search, .scroll-box-header-item {
 }
 .scroll-box > li.empty-state:last-child {
   display: list-item;
 }
 .scroll-box > li.empty-state:last-child {
   display: list-item;

+}
+
+details.section-expander summary {
+  border-top: 1px solid #DDD;
+  font-weight: bold;
+  font-size: 12px;
+  color: #888;
+  cursor: pointer;
+  padding-block: vars.$xs;
+}
+details.section-expander:open summary {
+  margin-bottom: vars.$s;
+}
+details.section-expander {
+  border-bottom: 1px solid #DDD;

 }
\ No newline at end of file
 }
\ No newline at end of file

diff --git a/resources/views/pages/parts/toolbox-comments.blade.php b/resources/views/pages/parts/toolbox-comments.blade.php
index d632b85c68997d3cc9d18fe9f11034e51e3e73ae..72958a2fede3d6050ad5a77fc756644456562dce 100644 (file)
--- a/resources/views/pages/parts/toolbox-comments.blade.php
+++ b/resources/views/pages/parts/toolbox-comments.blade.php
@@ -1,3 +1,6 @@
+{{--
+$comments - CommentTree
+--}}

 <div refs="editor-toolbox@tab-content" data-tab-content="comments" class="toolbox-tab-content">
     <h4>{{ trans('entities.comments') }}</h4>
 
 <div refs="editor-toolbox@tab-content" data-tab-content="comments" class="toolbox-tab-content">
     <h4>{{ trans('entities.comments') }}</h4>
 


@@ -5,11 +8,19 @@
         <p class="text-muted small mb-m">
             {{ trans('entities.comment_editor_explain') }}
         </p>
         <p class="text-muted small mb-m">
             {{ trans('entities.comment_editor_explain') }}
         </p>

-        @foreach($comments->get() as $branch)
+        @foreach($comments->getActive() as $branch)

             @include('comments.comment-branch', ['branch' => $branch, 'readOnly' => true])
         @endforeach
         @if($comments->empty())
             @include('comments.comment-branch', ['branch' => $branch, 'readOnly' => true])
         @endforeach
         @if($comments->empty())

-            <p class="italic text-muted">{{ trans('common.no_items') }}</p>
+            <p class="italic text-muted">{{ trans('entities.comment_none') }}</p>
+        @endif
+        @if($comments->archivedThreadCount() > 0)
+            <details class="section-expander mt-s">
+                <summary>{{ trans('entities.comment_archived_threads') }}</summary>
+                @foreach($comments->getArchived() as $branch)
+                    @include('comments.comment-branch', ['branch' => $branch, 'readOnly' => true])
+                @endforeach
+            </details>

         @endif
     </div>
 </div>
\ No newline at end of file
         @endif
     </div>
 </div>
\ No newline at end of file