Skip to content

Commit 4345b46

Browse files
rparth07rparth07
committed
Improved autosaved state for comments
Signed-off-by: Parth Raiyani <[email protected]> Change-Id: I9ad6c36a393ef5d895ee463f44569c52f1c8fd61
1 parent aa259d7 commit 4345b46

File tree

3 files changed

+84
-12
lines changed

3 files changed

+84
-12
lines changed

‎browser/css/cool.css‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -719,9 +719,13 @@ nav.spreadsheet-color-indicator ~ #sidebar-dock-wrapper {
719719
font-size: var(--default-font-size);
720720
}
721721

722-
.cool-annotation-autosavelabel {
723-
font-size: var(--default-font-size);
724-
opacity: 75%;
722+
.annotation-button-autosaved {
723+
color: var(--color-primary-dark) !important;
724+
background-color: #e1e8f9 !important;
725+
}
726+
727+
.annotation-button-delete {
728+
color: var(--color-error) !important;
725729
}
726730

727731
.cool-annotation-menubar {

‎browser/src/layer/tile/CommentListSection.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1268,7 +1268,7 @@ export class CommentSection extends CanvasSectionObject {
12681268
var isOurComment = annotation.isAutoSaved();
12691269
if (isOurComment) {
12701270
annotation.sectionProperties.container.style.visibility = 'visible';
1271-
annotation.sectionProperties.autoSave.innerText = _('Autosaved');
1271+
annotation.focusLost();
12721272
if (this.sectionProperties.docLayer._docType === 'spreadsheet')
12731273
annotation.show();
12741274
annotation.edit();
@@ -1330,7 +1330,6 @@ export class CommentSection extends CanvasSectionObject {
13301330
this.update();
13311331

13321332
if (CommentSection.autoSavedComment) {
1333-
CommentSection.autoSavedComment.sectionProperties.autoSave.innerText = _('Autosaved');
13341333
if (this.sectionProperties.docLayer._docType === 'spreadsheet')
13351334
modified.show();
13361335
modified.edit();

‎browser/src/layer/tile/CommentSection.ts‎

Lines changed: 76 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -151,8 +151,8 @@ export class Comment extends CanvasSectionObject {
151151
var button = L.DomUtil.create('div', 'annotation-btns-container', this.sectionProperties.nodeModify);
152152
L.DomEvent.on(this.sectionProperties.nodeModifyText, 'blur', this.onLostFocus, this);
153153
L.DomEvent.on(this.sectionProperties.nodeReplyText, 'blur', this.onLostFocusReply, this);
154-
L.DomEvent.on(this.sectionProperties.nodeModifyText, 'input', this.textAreaInput, this);
155-
L.DomEvent.on(this.sectionProperties.nodeReplyText, 'input', this.textAreaInput, this);
154+
L.DomEvent.on(this.sectionProperties.nodeModifyText, 'focus', this.onFocus, this);
155+
L.DomEvent.on(this.sectionProperties.nodeReplyText, 'focus', this.onFocusReply, this);
156156
this.createButton(button, 'annotation-cancel-' + this.sectionProperties.data.id, 'annotation-button button-secondary', _('Cancel'), this.handleCancelCommentButton);
157157
this.createButton(button, 'annotation-save-' + this.sectionProperties.data.id, 'annotation-button button-primary',_('Save'), this.handleSaveCommentButton);
158158
button = L.DomUtil.create('div', '', this.sectionProperties.nodeReply);
@@ -283,7 +283,6 @@ export class Comment extends CanvasSectionObject {
283283
this.sectionProperties.authorAvatartdImg = tdImg;
284284
this.sectionProperties.contentAuthor = L.DomUtil.create('div', 'cool-annotation-content-author', tdAuthor);
285285
this.sectionProperties.contentDate = L.DomUtil.create('div', 'cool-annotation-date', tdAuthor);
286-
this.sectionProperties.autoSave = L.DomUtil.create('div', 'cool-annotation-autosavelabel', tdAuthor);
287286
}
288287

289288
private createMenu (): void {
@@ -345,8 +344,12 @@ export class Comment extends CanvasSectionObject {
345344
this.sectionProperties.resolvedTextElement.innerText = state === 'true' ? _('Resolved') : '';
346345
}
347346

348-
private textAreaInput (): void {
349-
this.sectionProperties.autoSave.innerText = '';
347+
private onFocus() {
348+
this.resetControl(this.getSaveButton(), _('Save'), 'annotation-button-autosaved');
349+
}
350+
351+
private onFocusReply() {
352+
this.resetControl(this.getReplyButton(), _('Reply'), 'annotation-button-autosaved');
350353
}
351354

352355
private updateContent (): void {
@@ -885,7 +888,6 @@ export class Comment extends CanvasSectionObject {
885888
public handleReplyCommentButton (e: any): void {
886889
cool.CommentSection.autoSavedComment = null;
887890
cool.CommentSection.commentWasAutoAdded = false;
888-
this.textAreaInput();
889891
this.onReplyClick(e);
890892
}
891893

@@ -950,7 +952,6 @@ export class Comment extends CanvasSectionObject {
950952
cool.CommentSection.autoSavedComment = null;
951953
cool.CommentSection.commentWasAutoAdded = false;
952954
this.sectionProperties.contentText.unedited = null;
953-
this.textAreaInput();
954955
this.onSaveComment(e);
955956
}
956957

@@ -964,10 +965,49 @@ export class Comment extends CanvasSectionObject {
964965
this.sectionProperties.commentListSection.save(this);
965966
}
966967

968+
969+
private getSaveButton(): HTMLButtonElement | null {
970+
return this.sectionProperties.nodeModify.querySelector('input[type="button"][id^="annotation-save-"]');
971+
}
972+
973+
private getCancelButton(): HTMLButtonElement | null {
974+
return this.sectionProperties.nodeModify.querySelector('input[type="button"][id^="annotation-cancel-"]');
975+
}
976+
977+
private getReplyButton(): HTMLButtonElement | null {
978+
return this.sectionProperties.nodeReply.querySelector('input[type="button"][id^="annotation-reply-"]');
979+
}
980+
981+
private getCancelReplyButton(): HTMLButtonElement | null {
982+
return this.sectionProperties.nodeReply.querySelector('input[type="button"][id^="annotation-cancel-reply-"]');
983+
}
984+
985+
private updateControl(
986+
button: HTMLButtonElement | null,
987+
label: string,
988+
className: string
989+
): void {
990+
if (button) {
991+
button.value = label;
992+
button.classList.add(className);
993+
}
994+
}
995+
996+
private updateSaveControls() {
997+
this.updateControl(this.getSaveButton(), _('Saved'), 'annotation-button-autosaved');
998+
this.updateControl(this.getCancelButton(), _('Delete'), 'annotation-button-delete');
999+
}
1000+
1001+
private updateReplyControls() {
1002+
this.updateControl(this.getReplyButton(), _('Saved'), 'annotation-button-autosaved');
1003+
this.updateControl(this.getCancelReplyButton(), _('Delete'), 'annotation-button-delete');
1004+
}
1005+
9671006
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
9681007
public onLostFocus (e: any): void {
9691008
if (!this.sectionProperties.isRemoved) {
9701009
$(this.sectionProperties.container).removeClass('annotation-active reply-annotation-container modify-annotation-container');
1010+
this.updateSaveControls();
9711011
if (this.sectionProperties.contentText.origText !== this.sectionProperties.nodeModifyText.value) {
9721012
if (!this.sectionProperties.contentText.unedited)
9731013
this.sectionProperties.contentText.unedited = this.sectionProperties.contentText.origText;
@@ -989,6 +1029,7 @@ export class Comment extends CanvasSectionObject {
9891029
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
9901030
public onLostFocusReply (e: any): void {
9911031
if (this.sectionProperties.nodeReplyText.value !== '') {
1032+
this.updateReplyControls();
9921033
if (!this.sectionProperties.contentText.unedited)
9931034
this.sectionProperties.contentText.unedited = this.sectionProperties.contentText.origText;
9941035
cool.CommentSection.autoSavedComment = this;
@@ -999,10 +1040,38 @@ export class Comment extends CanvasSectionObject {
9991040
}
10001041
}
10011042

1043+
private resetControl(
1044+
button: HTMLButtonElement | null,
1045+
label: string,
1046+
className: string
1047+
): void {
1048+
if (button) {
1049+
button.value = label;
1050+
button.classList.remove(className);
1051+
}
1052+
}
1053+
1054+
private resetSaveControls(): void {
1055+
this.resetControl(this.getSaveButton(), _('Save'), 'annotation-button-autosaved');
1056+
this.resetControl(this.getCancelButton(), _('Cancel'), 'annotation-button-delete');
1057+
}
1058+
1059+
private resetReplyControls(): void {
1060+
this.resetControl(this.getReplyButton(), _('Reply'), 'annotation-button-autosaved');
1061+
this.resetControl(this.getCancelReplyButton(), _('Cancel'), 'annotation-button-delete');
1062+
}
1063+
10021064
public focus (): void {
10031065
this.sectionProperties.container.classList.add('annotation-active');
10041066
this.sectionProperties.nodeModifyText.focus();
10051067
this.sectionProperties.nodeReplyText.focus();
1068+
this.resetSaveControls();
1069+
this.resetReplyControls();
1070+
}
1071+
1072+
public focusLost (): void {
1073+
this.updateSaveControls();
1074+
this.updateReplyControls();
10061075
}
10071076

10081077
public reply (): Comment {

0 commit comments

Comments
 (0)