github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-06 10:44:33 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Comments: Updated reply-to and general styling

Browse Source 
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.
This commit is contained in:
Dan Brown
2023-06-09 17:36:30 +01:00
parent 3bede42121
commit 19e39ddd1f
6 changed files with 98 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
resources/js/components/page-comment.js
View File

@ -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) {

13
resources/js/components/page-comments.js
View File

@ -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();
}
}