Skip to content

Improved autosaved state for comments #7445

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lpranam merged 2 commits into from
Oct 17, 2025
+266 −109
Merged

Improved autosaved state for comments #7445

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6bbdbf0
Fix: Improve visibility of autosaved state for comments
rparth07 Sep 3, 2025
c08dbd9
Test: Update test cases for autosaved comment feature
rparth07 May 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions browser/css/cool.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -825,9 +825,13 @@ body {
font-size: var(--default-font-size);
}

.cool-annotation-autosavelabel {
font-size: var(--default-font-size);
opacity: 75%;
.annotation-button-autosaved {
color: var(--color-primary-dark) !important;
background-color: #e1e8f9 !important;
}

.annotation-button-delete {
color: var(--color-error) !important;
}

.cool-annotation-menubar {
Expand Down
4 changes: 2 additions & 2 deletions browser/src/canvas/sections/CommentListSection.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1586,7 +1586,7 @@ export class CommentSection extends CanvasSectionObject {
app.definitions.CommentSection.needFocus = annotation;
}
annotation.sectionProperties.container.style.visibility = 'visible';
annotation.sectionProperties.autoSave.innerText = _('Autosaved');
annotation.focusLost();
if (app.map._docLayer._docType === 'spreadsheet')
annotation.show();
if (autoSavedComment.sectionProperties.data.id === 'new')
Expand Down Expand Up @@ -1660,7 +1660,7 @@ export class CommentSection extends CanvasSectionObject {
this.update();

if (CommentSection.autoSavedComment) {
CommentSection.autoSavedComment.sectionProperties.autoSave.innerText = _('Autosaved');
modified.focusLost();
if (app.map._docLayer._docType === 'spreadsheet')
modified.show();
modified.edit();
Expand Down
78 changes: 69 additions & 9 deletions browser/src/canvas/sections/CommentSection.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,10 @@ export class Comment extends CanvasSectionObject {
this.sectionProperties.contentNode = null;
this.sectionProperties.nodeModify = null;
this.sectionProperties.nodeModifyText = null;
this.sectionProperties.saveButton = null;
this.sectionProperties.cancelButton = null;
this.sectionProperties.replyButton = null;
this.sectionProperties.cancelReplyButton = null;
this.sectionProperties.contentText = null;
this.sectionProperties.nodeReply = null;
this.sectionProperties.nodeReplyText = null;
Expand Down Expand Up @@ -170,15 +174,17 @@ export class Comment extends CanvasSectionObject {
}

var button = window.L.DomUtil.create('div', 'annotation-btns-container', this.sectionProperties.nodeModify);
window.L.DomEvent.on(this.sectionProperties.nodeModifyText, 'focus', this.onFocus, this);
window.L.DomEvent.on(this.sectionProperties.nodeReplyText, 'focus', this.onFocusReply, this);
window.L.DomEvent.on(this.sectionProperties.nodeModifyText, 'input', this.textAreaInput, this);
window.L.DomEvent.on(this.sectionProperties.nodeReplyText, 'input', this.textAreaInput, this);
window.L.DomEvent.on(this.sectionProperties.nodeModifyText, 'keydown', this.textAreaKeyDown, this);
window.L.DomEvent.on(this.sectionProperties.nodeReplyText, 'keydown', this.textAreaKeyDown, this);
this.createButton(button, 'annotation-cancel-' + this.sectionProperties.data.id, 'annotation-button button-secondary', _('Cancel'), this.handleCancelCommentButton);
this.createButton(button, 'annotation-save-' + this.sectionProperties.data.id, 'annotation-button button-primary',_('Save'), this.handleSaveCommentButton);
this.sectionProperties.cancelButton = this.createButton(button, 'annotation-cancel-' + this.sectionProperties.data.id, 'annotation-button button-secondary', _('Cancel'), this.handleCancelCommentButton);
this.sectionProperties.saveButton = this.createButton(button, 'annotation-save-' + this.sectionProperties.data.id, 'annotation-button button-primary',_('Save'), this.handleSaveCommentButton);
button = window.L.DomUtil.create('div', '', this.sectionProperties.nodeReply);
this.createButton(button, 'annotation-cancel-reply-' + this.sectionProperties.data.id, 'annotation-button button-secondary', _('Cancel'), this.handleCancelCommentButton);
this.createButton(button, 'annotation-reply-' + this.sectionProperties.data.id, 'annotation-button button-primary', _('Reply'), this.handleReplyCommentButton);
this.sectionProperties.cancelReplyButton = this.createButton(button, 'annotation-cancel-reply-' + this.sectionProperties.data.id, 'annotation-button button-secondary', _('Cancel'), this.handleCancelCommentButton);
this.sectionProperties.replyButton = this.createButton(button, 'annotation-reply-' + this.sectionProperties.data.id, 'annotation-button button-primary', _('Reply'), this.handleReplyCommentButton);
window.L.DomEvent.disableScrollPropagation(this.sectionProperties.container);

// Since this is a late called function, if the width is enough, we shouldn't collapse the comments.
Expand Down Expand Up @@ -313,7 +319,6 @@ export class Comment extends CanvasSectionObject {
this.sectionProperties.authorAvatartdImg = tdImg;
this.sectionProperties.contentAuthor = window.L.DomUtil.create('div', 'cool-annotation-content-author', tdAuthor);
this.sectionProperties.contentDate = window.L.DomUtil.create('div', 'cool-annotation-date', tdAuthor);
this.sectionProperties.autoSave = window.L.DomUtil.create('div', 'cool-annotation-autosavelabel', tdAuthor);
}

private createMenu (): void {
Expand Down Expand Up @@ -412,13 +417,14 @@ export class Comment extends CanvasSectionObject {
}

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
private createButton (container: any, id: any, cssClass: string, value: any, handler: any): void {
private createButton (container: any, id: any, cssClass: string, value: any, handler: any): HTMLButtonElement {
var button = window.L.DomUtil.create('input', cssClass, container);
button.id = id;
button.type = 'button';
button.value = value;
window.L.DomEvent.on(button, 'mousedown', window.L.DomEvent.preventDefault);
window.L.DomEvent.on(button, 'click', handler, this);
return button;
}

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
Expand All @@ -443,8 +449,6 @@ export class Comment extends CanvasSectionObject {
}

private textAreaInput(ev: any): void {
this.sectionProperties.autoSave.innerText = '';

if (ev && app.map._docLayer._docType === 'text') {
// special handling for mentions
this.map?.mention.handleMentionInput(ev, this.isNewPara());
Expand Down Expand Up @@ -479,6 +483,14 @@ export class Comment extends CanvasSectionObject {
this.handleKeyDownForPopup(ev, 'mentionPopup');
}

private onFocus() {
this.resetControl(this.sectionProperties.saveButton, _('Save'), 'annotation-button-autosaved');
}

private onFocusReply() {
this.resetControl(this.sectionProperties.replyButton, _('Reply'), 'annotation-button-autosaved');
}

private updateContent (): void {
if(this.sectionProperties.data.html)
this.sectionProperties.contentText.innerHTML = app.LOUtil.sanitize(this.sectionProperties.data.html);
Expand Down Expand Up @@ -1131,6 +1143,27 @@ export class Comment extends CanvasSectionObject {
return false;
}

private updateControl(
button: HTMLButtonElement | null,
label: string,
className: string
): void {
if (button) {
button.value = label;
button.classList.add(className);
}
}

private updateSaveControls() {
this.updateControl(this.sectionProperties.saveButton, _('Saved'), 'annotation-button-autosaved');
this.updateControl(this.sectionProperties.cancelButton, _('Delete'), 'annotation-button-delete');
}

private updateReplyControls() {
this.updateControl(this.sectionProperties.replyButton, _('Saved'), 'annotation-button-autosaved');
this.updateControl(this.sectionProperties.cancelReplyButton, _('Delete'), 'annotation-button-delete');
}

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
public onLostFocus (e: any): void {

Expand All @@ -1145,7 +1178,6 @@ export class Comment extends CanvasSectionObject {
return;
}
if (!this.sectionProperties.commentContainerRemoved) {
this.cachedIsEdit = false;
$(this.sectionProperties.container).removeClass('annotation-active reply-annotation-container modify-annotation-container');
this.removeLastBRTag(this.sectionProperties.nodeModifyText);
if (this.sectionProperties.contentText.origText !== this.sectionProperties.nodeModifyText.innerText ||
Expand Down Expand Up @@ -1194,6 +1226,27 @@ export class Comment extends CanvasSectionObject {
}
}

private resetControl(
button: HTMLButtonElement | null,
label: string,
className: string
): void {
if (button) {
button.value = label;
button.classList.remove(className);
}
}

private resetSaveControls(): void {
this.resetControl(this.sectionProperties.saveButton, _('Save'), 'annotation-button-autosaved');
this.resetControl(this.sectionProperties.cancelButton, _('Cancel'), 'annotation-button-delete');
}

private resetReplyControls(): void {
this.resetControl(this.sectionProperties.replyButton, _('Reply'), 'annotation-button-autosaved');
this.resetControl(this.sectionProperties.cancelReplyButton, _('Cancel'), 'annotation-button-delete');
}

public focus (): void {
this.sectionProperties.container.classList.add('annotation-active');
this.sectionProperties.nodeModifyText.focus({ focusVisible: true });
Expand All @@ -1209,6 +1262,13 @@ export class Comment extends CanvasSectionObject {
sel.addRange(range)
}

this.resetSaveControls();
this.resetReplyControls();
}

public focusLost (): void {
this.updateSaveControls();
this.updateReplyControls();
}

public reply (): Comment {
Expand Down
38 changes: 25 additions & 13 deletions cypress_test/integration_tests/desktop/calc/annotation_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,20 +96,24 @@ describe(['tagdesktop'], 'Annotation Tests', function() {
cy.cGet('#comment-container-1').should('not.exist');
});

it('Tab Nevigation', function() {
it('Tab Navigation', function() {
desktopHelper.insertComment(undefined, false);

cy.cGet('.cool-annotation-autosavelabel').should('be.not.visible');
cy.cGet('.annotation-button-autosaved').should('not.exist');
cy.cGet('.annotation-button-delete').should('not.exist');
cy.realPress('Tab');
cy.cGet('.cool-annotation-autosavelabel').should('be.not.visible');
cy.cGet('.annotation-button-autosaved').should('not.exist');
cy.cGet('.annotation-button-delete').should('not.exist');
cy.cGet('#annotation-cancel-new:focus-visible');

cy.realPress('Tab');
cy.cGet('#annotation-save-new:focus-visible');
cy.cGet('.cool-annotation-autosavelabel').should('be.not.visible');
cy.cGet('.annotation-button-autosaved').should('not.exist');
cy.cGet('.annotation-button-delete').should('not.exist');

cy.realPress('Tab');
cy.cGet('.cool-annotation-autosavelabel').should('be.visible');
cy.cGet('.annotation-button-autosaved').should('be.visible');
cy.cGet('.annotation-button-delete').should('be.visible');
});
});

Expand All @@ -124,7 +128,8 @@ describe(['tagdesktop'], 'Annotation Autosave Tests', function() {
it('Insert autosave',function() {
desktopHelper.insertComment(undefined, false);
cy.cGet('#map').focus();
cy.cGet('.cool-annotation-autosavelabel').should('be.visible');
cy.cGet('.annotation-button-autosaved').should('be.visible');
cy.cGet('.annotation-button-delete').should('be.visible');
cy.cGet('.cool-annotation-edit.modify-annotation').should('be.visible');

helper.reloadDocument(newFilePath);
Expand All @@ -140,15 +145,17 @@ describe(['tagdesktop'], 'Annotation Autosave Tests', function() {
it('Insert autosave save',function() {
desktopHelper.insertComment(undefined, false);
cy.cGet('#map').focus();
cy.cGet('.cool-annotation-autosavelabel').should('be.visible');
cy.cGet('.annotation-button-autosaved').should('be.visible');
cy.cGet('.annotation-button-delete').should('be.visible');
cy.cGet('.cool-annotation-edit.modify-annotation').should('be.visible');
cy.cGet('#annotation-save-1').click();
cy.cGet('.cool-annotation').should('exist');
cy.cGet('#comment-container-1').then(function (element) {
element[0].style.visibility = '';
element[0].style.display = '';
});
cy.cGet('.cool-annotation-autosavelabel').should('be.not.visible');
cy.cGet('.annotation-button-autosaved').should('be.not.visible');
cy.cGet('.annotation-button-delete').should('be.not.visible');
cy.cGet('#comment-container-1').trigger('mouseover', {force: true});
cy.cGet('#annotation-content-area-1').should('have.text','some text0');

Expand All @@ -165,11 +172,13 @@ describe(['tagdesktop'], 'Annotation Autosave Tests', function() {
it('Insert autosave cancel',function() {
desktopHelper.insertComment(undefined, false);
cy.cGet('#map').focus();
cy.cGet('.cool-annotation-autosavelabel').should('be.visible');
cy.cGet('.annotation-button-autosaved').should('be.visible');
cy.cGet('.annotation-button-delete').should('be.visible');
cy.cGet('.cool-annotation-edit.modify-annotation').should('be.visible');
cy.cGet('#annotation-cancel-1').click();
cy.cGet('.cool-annotation').should('not.exist');
cy.cGet('.cool-annotation-autosavelabel').should('not.exist');
cy.cGet('.annotation-button-autosaved').should('not.exist');
cy.cGet('.annotation-button-delete').should('not.exist');

helper.reloadDocument(newFilePath);
cy.cGet('.cool-annotation').should('not.exist');
Expand All @@ -190,7 +199,8 @@ describe(['tagdesktop'], 'Annotation Autosave Tests', function() {
cy.cGet('body').contains('.context-menu-item','Modify').click();
cy.cGet('#annotation-modify-textarea-1').type(', some other text');
cy.cGet('#map').focus();
cy.cGet('.cool-annotation-autosavelabel').should('be.visible');
cy.cGet('.annotation-button-autosaved').should('be.visible');
cy.cGet('.annotation-button-delete').should('be.visible');
cy.cGet('.cool-annotation-edit.modify-annotation').should('be.visible');

helper.reloadDocument(newFilePath);
Expand Down Expand Up @@ -218,7 +228,8 @@ describe(['tagdesktop'], 'Annotation Autosave Tests', function() {
cy.cGet('body').contains('.context-menu-item','Modify').click();
cy.cGet('#annotation-modify-textarea-1').type(', some other text');
cy.cGet('#map').focus();
cy.cGet('.cool-annotation-autosavelabel').should('be.visible');
cy.cGet('.annotation-button-autosaved').should('be.visible');
cy.cGet('.annotation-button-delete').should('be.visible');
cy.cGet('.cool-annotation-edit.modify-annotation').should('be.visible');
cy.cGet('#annotation-save-1').click();
cy.cGet('#comment-container-1').then(function (element) {
Expand Down Expand Up @@ -254,7 +265,8 @@ describe(['tagdesktop'], 'Annotation Autosave Tests', function() {
cy.cGet('body').contains('.context-menu-item','Modify').click();
cy.cGet('#annotation-modify-textarea-1').type('some other text, ');
cy.cGet('#map').focus();
cy.cGet('.cool-annotation-autosavelabel').should('be.visible');
cy.cGet('.annotation-button-autosaved').should('be.visible');
cy.cGet('.annotation-button-delete').should('be.visible');
cy.cGet('.cool-annotation-edit.modify-annotation').should('be.visible');
cy.cGet('#annotation-cancel-1').click();
cy.cGet('#comment-container-1').then(function (element) {
Expand Down
Loading