From 19e39ddd1f7f5fe3bef4ead24bc9090e8da58393 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Fri, 9 Jun 2023 17:36:30 +0100 Subject: [PATCH] Comments: Updated reply-to and general styling Updated reply inidicator to fit with new nesting system, only showing on view when nest within nesting structure. Updated the general design to be a bit cleaner and better adapt on mobile. Tested on FF+Chrome, inc. dark mode. --- lang/en/entities.php | 1 + resources/js/components/page-comment.js | 24 ++++-- resources/js/components/page-comments.js | 13 +++- resources/sass/_components.scss | 36 +++++---- resources/views/comments/comment.blade.php | 87 ++++++++++++---------- resources/views/comments/create.blade.php | 6 +- 6 files changed, 98 insertions(+), 69 deletions(-) diff --git a/lang/en/entities.php b/lang/en/entities.php index 8499bb30f..caf9e2361 100644 --- a/lang/en/entities.php +++ b/lang/en/entities.php @@ -365,6 +365,7 @@ return [ 'comment_new' => 'New Comment', 'comment_created' => 'commented :createDiff', 'comment_updated' => 'Updated :updateDiff by :username', + 'comment_updated_indicator' => 'Updated', 'comment_deleted_success' => 'Comment deleted', 'comment_created_success' => 'Comment added', 'comment_updated_success' => 'Comment updated', diff --git a/resources/js/components/page-comment.js b/resources/js/components/page-comment.js index 43159b42c..8284d7f20 100644 --- a/resources/js/components/page-comment.js +++ b/resources/js/components/page-comment.js @@ -25,14 +25,22 @@ export class PageComment extends Component { } setupListeners() { - this.replyButton.addEventListener('click', () => this.$emit('reply', { - id: this.commentLocalId, - element: this.container, - })); - this.editButton.addEventListener('click', this.startEdit.bind(this)); - this.deleteButton.addEventListener('click', this.delete.bind(this)); - this.form.addEventListener('submit', this.update.bind(this)); - this.formCancel.addEventListener('click', () => this.toggleEditMode(false)); + if (this.replyButton) { + this.replyButton.addEventListener('click', () => this.$emit('reply', { + id: this.commentLocalId, + element: this.container, + })); + } + + if (this.editButton) { + this.editButton.addEventListener('click', this.startEdit.bind(this)); + this.form.addEventListener('submit', this.update.bind(this)); + this.formCancel.addEventListener('click', () => this.toggleEditMode(false)); + } + + if (this.deleteButton) { + this.deleteButton.addEventListener('click', this.delete.bind(this)); + } } toggleEditMode(show) { diff --git a/resources/js/components/page-comments.js b/resources/js/components/page-comments.js index 1eaa7cfa4..a46a5c3b3 100644 --- a/resources/js/components/page-comments.js +++ b/resources/js/components/page-comments.js @@ -16,6 +16,7 @@ export class PageComments extends Component { this.formContainer = this.$refs.formContainer; this.form = this.$refs.form; this.formInput = this.$refs.formInput; + this.formReplyLink = this.$refs.formReplyLink; this.addCommentButton = this.$refs.addCommentButton; this.hideFormButton = this.$refs.hideFormButton; this.removeReplyToButton = this.$refs.removeReplyToButton; @@ -26,6 +27,7 @@ export class PageComments extends Component { // Internal State this.parentId = null; + this.formReplyText = this.formReplyLink.textContent; this.setupListeners(); } @@ -86,13 +88,15 @@ export class PageComments extends Component { resetForm() { this.formInput.value = ''; - this.removeReplyTo(); + this.parentId = null; + this.replyToRow.toggleAttribute('hidden', true); this.container.append(this.formContainer); } showForm() { this.formContainer.toggleAttribute('hidden', false); this.addButtonContainer.toggleAttribute('hidden', true); + this.formContainer.scrollIntoView({behavior: 'smooth', block: 'nearest'}); setTimeout(() => { this.formInput.focus(); }, 100); @@ -115,19 +119,20 @@ export class PageComments extends Component { setReply(commentLocalId, commentElement) { const targetFormLocation = commentElement.closest('.comment-branch').querySelector('.comment-branch-children'); - this.showForm(); targetFormLocation.append(this.formContainer); - this.formContainer.scrollIntoView({behavior: 'smooth', block: 'nearest'}); + this.showForm(); this.parentId = commentLocalId; this.replyToRow.toggleAttribute('hidden', false); const replyLink = this.replyToRow.querySelector('a'); - replyLink.textContent = `#${this.parentId}`; + replyLink.textContent = this.formReplyText.replace('1234', this.parentId); replyLink.href = `#comment${this.parentId}`; } removeReplyTo() { this.parentId = null; this.replyToRow.toggleAttribute('hidden', true); + this.container.append(this.formContainer); + this.showForm(); } } diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss index f75f8b8f8..321c26e88 100644 --- a/resources/sass/_components.scss +++ b/resources/sass/_components.scss @@ -691,26 +691,28 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { .actions button:focus { outline: 1px dotted var(--color-primary); } + @include smaller-than($m) { + .actions { + opacity: 1; + } + } } .comment-box .header { - .meta { - img, a, span { - display: inline-block; - vertical-align: top; - } - a, span { - padding: $-xxs 0 $-xxs 0; - line-height: 1.6; - } - a { color: #666; } - span { - padding-inline-start: $-xxs; - } + border-bottom: 1px solid #DDD; + @include lightDark(border-color, #DDD, #000); + button { + font-size: .8rem; + } + a { + color: inherit; } .text-muted { color: #999; } + .right-meta .text-muted { + opacity: .8; + } } .comment-thread-indicator { @@ -725,6 +727,14 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { display: none; } +.comment-reply { + display: none; +} + +.comment-branch .comment-branch .comment-branch .comment-branch .comment-reply { + display: block; +} + #tag-manager .drag-card { max-width: 500px; } diff --git a/resources/views/comments/comment.blade.php b/resources/views/comments/comment.blade.php index 924b465fa..04468b83c 100644 --- a/resources/views/comments/comment.blade.php +++ b/resources/views/comments/comment.blade.php @@ -7,63 +7,68 @@ id="comment{{$comment->local_id}}" class="comment-box">
-
-
- #{{$comment->local_id}} -    +
+
@if ($comment->createdBy) - {{ $comment->createdBy->name }} + {{ $comment->createdBy->name }}   - {{ $comment->createdBy->name }} + {{ $comment->createdBy->getShortName(16) }} @else - {{ trans('common.deleted_user') }} + {{ trans('common.deleted_user') }} @endif - {{ trans('entities.comment_created', ['createDiff' => $comment->created]) }} +  {{ trans('entities.comment_created', ['createDiff' => $comment->created]) }} @if($comment->isUpdated()) - - •  - {{ trans('entities.comment_updated', ['updateDiff' => $comment->updated, 'username' => $comment->updatedBy? $comment->updatedBy->name : trans('common.deleted_user')]) }} - + • + + {{ trans('entities.comment_updated_indicator') }} + @endif
-
- @if(userCan('comment-update', $comment)) - - @endif - @if(userCan('comment-create-all')) - - @endif - @if(userCan('comment-delete', $comment)) -
- - -
- @endif +
+
+ @if(userCan('comment-create-all')) + + @endif + @if(userCan('comment-update', $comment)) + + @endif + @if(userCan('comment-delete', $comment)) +
+ + +
+ @endif + +  •  + +
+
- @if ($comment->parent_id) -
- {!! trans('entities.comment_in_reply_to', ['commentId' => '#'.$comment->parent_id.'']) !!} -
- @endif - -
+
+ @if ($comment->parent_id) +

+ @icon('reply'){{ trans('entities.comment_in_reply_to', ['commentId' => '#' . $comment->parent_id]) }} +

+ @endif {!! $comment->html !!}
@if(userCan('comment-update', $comment)) -