Improved autosaved state for comments

Signed-off-by: Parth Raiyani <[email protected]>
Change-Id: I9ad6c36a393ef5d895ee463f44569c52f1c8fd61

Author: rparth07

browser/css/cool.css

@@ -766,9 +766,13 @@ nav.spreadsheet-color-indicator ~ #sidebar-dock-wrapper {
 	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 {

browser/src/layer/tile/CommentListSection.ts

@@ -1123,7 +1123,6 @@ export class CommentSection extends CanvasSectionObject {
 		if (action === 'Add') {
 			if (app.view.commentAutoSave) {
 				app.view.commentAutoSave.sectionProperties.data.id = obj.comment.id;
-				app.view.commentAutoSave.sectionProperties.autoSave.innerText = _('Autosaved') ;
 				app.view.commentAutoSave = null;
 				app.view.commentAutoAdded = true;
 				return;
@@ -1158,7 +1157,6 @@ export class CommentSection extends CanvasSectionObject {
 			}
 		} else if (action === 'Modify') {
 			if (app.view.commentAutoSave) {
-				app.view.commentAutoSave.sectionProperties.autoSave.innerText = _('Autosaved');
 				app.view.commentAutoSave = null;
 				return;
 			}

browser/src/layer/tile/CommentSection.ts

@@ -114,8 +114,8 @@ export class Comment extends CanvasSectionObject {
 		var button = L.DomUtil.create('div', 'annotation-btns-container', this.sectionProperties.nodeModify);
 		L.DomEvent.on(this.sectionProperties.nodeModifyText, 'blur', this.onLostFocus, this);
 		L.DomEvent.on(this.sectionProperties.nodeReplyText, 'blur', this.onLostFocusReply, this);
-		L.DomEvent.on(this.sectionProperties.nodeModifyText, 'input', this.textAreaInput, this);
-		L.DomEvent.on(this.sectionProperties.nodeReplyText, 'input', this.textAreaInput, this);
+		L.DomEvent.on(this.sectionProperties.nodeModifyText, 'focus', this.onFocus, this);
+		L.DomEvent.on(this.sectionProperties.nodeReplyText, 'focus', this.onFocusReply, this);
 		this.createButton(button, 'annotation-cancel-' + this.sectionProperties.data.id, 'annotation-button button-secondary', _('Cancel'), this.onCancelClick);
 		this.createButton(button, 'annotation-save-' + this.sectionProperties.data.id, 'annotation-button button-primary',_('Save'), this.handleSaveCommentButton);
 		button = L.DomUtil.create('div', '', this.sectionProperties.nodeReply);
@@ -241,7 +241,6 @@ export class Comment extends CanvasSectionObject {
 		this.sectionProperties.authorAvatartdImg = tdImg;
 		this.sectionProperties.contentAuthor = L.DomUtil.create('div', 'cool-annotation-content-author', tdAuthor);
 		this.sectionProperties.contentDate = L.DomUtil.create('div', 'cool-annotation-date', tdAuthor);
-		this.sectionProperties.autoSave = L.DomUtil.create('div', 'cool-annotation-autosavelabel', tdAuthor);
 	}
 
 	private createMenu (): void {
@@ -304,8 +303,12 @@ export class Comment extends CanvasSectionObject {
 		this.sectionProperties.resolvedTextElement.innerText = state === 'true' ? _('Resolved') : '';
 	}
 
-	private textAreaInput (): void {
-		this.sectionProperties.autoSave.innerText = '';
+	private onFocus() {
+		this.resetControl(this.getSaveButton(), _('Save'), 'annotation-button-autosaved');
+	}
+
+	private onFocusReply() {
+		this.resetControl(this.getReplyButton(), _('Reply'), 'annotation-button-autosaved');
 	}
 
 	private updateContent (): void {
@@ -784,7 +787,6 @@ export class Comment extends CanvasSectionObject {
 
 	public handleReplyCommentButton (e: any): void {
 		app.view.commentAutoSave = null;
-		this.textAreaInput();
 		this.onReplyClick(e);
 	}
 
@@ -826,7 +828,6 @@ export class Comment extends CanvasSectionObject {
 
 	public handleSaveCommentButton (e: any): void {
 		app.view.commentAutoSave = null;
-		this.textAreaInput();
 		this.onSaveComment(e);
 	}
 
@@ -841,10 +842,49 @@ export class Comment extends CanvasSectionObject {
 		this.sectionProperties.commentListSection.save(this);
 	}
 
+
+	private getSaveButton(): HTMLButtonElement | null {
+		return this.sectionProperties.nodeModify.querySelector('input[type="button"][id^="annotation-save-"]');
+	}
+
+	private getCancelButton(): HTMLButtonElement | null {
+		return this.sectionProperties.nodeModify.querySelector('input[type="button"][id^="annotation-cancel-"]');
+	}
+
+	private getReplyButton(): HTMLButtonElement | null {
+		return this.sectionProperties.nodeReply.querySelector('input[type="button"][id^="annotation-reply-"]');
+	}
+
+	private getCancelReplyButton(): HTMLButtonElement | null {
+		return this.sectionProperties.nodeReply.querySelector('input[type="button"][id^="annotation-cancel-reply-"]');
+	}
+
+	private updateControl(
+		button: HTMLButtonElement | null,
+		label: string,
+		className: string
+	): void {
+		if (button) {
+		  button.value = label;
+		  button.classList.add(className);
+		}
+	}
+
+	private updateSaveControls() {
+		this.updateControl(this.getSaveButton(), _('Saved'), 'annotation-button-autosaved');
+		this.updateControl(this.getCancelButton(), _('Delete'), 'annotation-button-delete');
+	}
+
+	private updateReplyControls() {
+		this.updateControl(this.getReplyButton(), _('Saved'), 'annotation-button-autosaved');
+		this.updateControl(this.getCancelReplyButton(), _('Delete'), 'annotation-button-delete');
+	}
+
 	// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 	public onLostFocus (e: any): void {
 		if (!this.sectionProperties.isRemoved) {
 			app.view.commentAutoSave = this;
+			this.updateSaveControls();
 			if (this.sectionProperties.contentText.origText !== this.sectionProperties.nodeModifyText.value) {
 				this.onSaveComment(e);
 			}
@@ -868,6 +908,7 @@ export class Comment extends CanvasSectionObject {
 	public onLostFocusReply (e: any): void {
 
 		if (this.sectionProperties.nodeReplyText.value !== '') {
+			this.updateReplyControls();
 			app.view.commentAutoSave = this;
 			this.onReplyClick(e);
 		}
@@ -877,11 +918,34 @@ export class Comment extends CanvasSectionObject {
 		app.view.commentHasFocus = false;
 	}
 
+  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.getSaveButton(), _('Save'), 'annotation-button-autosaved');
+		this.resetControl(this.getCancelButton(), _('Cancel'), 'annotation-button-delete');
+	}
+
+	private resetReplyControls(): void {
+		this.resetControl(this.getReplyButton(), _('Reply'), 'annotation-button-autosaved');
+		this.resetControl(this.getCancelReplyButton(), _('Cancel'), 'annotation-button-delete');
+	}
+
 	public focus (): void {
 		this.sectionProperties.container.classList.add('annotation-active');
 		this.sectionProperties.nodeModifyText.focus();
 		this.sectionProperties.nodeReplyText.focus();
 		app.view.commentHasFocus = true;
+		this.resetSaveControls();
+		this.resetReplyControls();
 	}
 
 	public reply (): Comment {