colin
/
bookstack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Comments: Fixed tab focus change & button placement on form usage 

Fixes issue of tabs jumping back to active comments when stopping a
reply to an archived comment.
Fixes button placement looking odd due to wrong location and differing
styles depending on interaction path.
This commit is contained in:
Dan Brown 2025-05-28 22:00:24 +01:00
parent 7650ebf2f9
commit b0f8b11054
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
resources/js/components/page-comments.ts
View File

@ -16,6 +16,7 @@ export class PageComments extends Component {
private archivedTab!: HTMLElement;
private addButtonContainer!: HTMLElement;
private archiveContainer!: HTMLElement;
private activeContainer!: HTMLElement;
private replyToRow!: HTMLElement;
private referenceRow!: HTMLElement;
private formContainer!: HTMLElement;
@ -48,6 +49,7 @@ export class PageComments extends Component {
this.archivedTab = this.$refs.archivedTab;
this.addButtonContainer = this.$refs.addButtonContainer;
this.archiveContainer = this.$refs.archiveContainer;
this.activeContainer = this.$refs.activeContainer;
this.replyToRow = this.$refs.replyToRow;
this.referenceRow = this.$refs.referenceRow;
this.formContainer = this.$refs.formContainer;
@ -76,8 +78,10 @@ export class PageComments extends Component {
protected setupListeners(): void {
this.elem.addEventListener('page-comment-delete', () => {
setTimeout(() => this.updateCount(), 1);
this.hideForm();
setTimeout(() => {
this.updateCount();
this.hideForm();
}, 1);
});
this.elem.addEventListener('page-comment-reply', ((event: CustomEvent<PageCommentReplyEventData>) => {
@ -154,8 +158,10 @@ export class PageComments extends Component {
protected resetForm(): void {
this.removeEditor();
this.formInput.value = '';
this.parentId = null;
this.replyToRow.toggleAttribute('hidden', true);
this.container.append(this.formContainer);
this.setContentReference('');
this.removeReplyTo();
}
protected showForm(): void {
@ -165,9 +171,9 @@ export class PageComments extends Component {
this.formContainer.scrollIntoView({behavior: 'smooth', block: 'nearest'});
this.loadEditor();
// Ensure the active comments tab is displaying
// Ensure the active comments tab is displaying if that's where we're showing the form
const tabs = window.$components.firstOnElement(this.elem, 'tabs');
if (tabs instanceof Tabs) {
if (tabs instanceof Tabs && this.formContainer.closest('#comment-tab-panel-active')) {
tabs.show('comment-tab-panel-active');
}
}
@ -176,7 +182,7 @@ export class PageComments extends Component {
this.resetForm();
this.formContainer.toggleAttribute('hidden', true);
if (this.getActiveThreadCount() > 0) {
this.elem.append(this.addButtonContainer);
this.activeContainer.append(this.addButtonContainer);
} else {
this.commentCountBar.append(this.addButtonContainer);
}
@ -239,7 +245,8 @@ export class PageComments extends Component {
}
public startNewComment(contentReference: string): void {
this.removeReplyTo();
this.resetForm();
this.showForm();
this.setContentReference(contentReference);
}

9
resources/views/comments/comments.blade.php
View File

@ -24,15 +24,16 @@
aria-selected="false">{{ trans_choice('entities.comment_archived_count', count($commentTree->getArchived())) }}</button>
</div>
@if ($commentTree->empty() && userCan('comment-create-all'))
<div class="ml-m" refs="page-comments@add-button-container">
<div refs="page-comments@add-button-container" class="ml-m flex-container-row" >
<button type="button"
refs="page-comments@add-comment-button"
class="button outline mb-m">{{ trans('entities.comment_add') }}</button>
class="button outline mb-m ml-auto">{{ trans('entities.comment_add') }}</button>
</div>
@endif
</div>
<div id="comment-tab-panel-active"
refs="page-comments@active-container"
tabindex="0"
role="tabpanel"
aria-labelledby="comment-tab-active"
@ -48,10 +49,10 @@
@if(userCan('comment-create-all'))
@include('comments.create')
@if (!$commentTree->empty())
<div refs="page-comments@addButtonContainer" class="flex-container-row">
<div refs="page-comments@addButtonContainer" class="ml-m flex-container-row">
<button type="button"
refs="page-comments@add-comment-button"
class="button outline ml-auto">{{ trans('entities.comment_add') }}</button>
class="button outline mb-m ml-auto">{{ trans('entities.comment_add') }}</button>
</div>
@endif
@endif