Skip to content

Commit

Permalink
Improved autosaved state for comments
Browse files Browse the repository at this point in the history 
Signed-off-by: Parth Raiyani <[email protected]>
Change-Id: I9ad6c36a393ef5d895ee463f44569c52f1c8fd61
  • Loading branch information
@rparth07
rparth07 committed Oct 15, 2023
1 parent b35c4f5 commit 385b4d3
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 12 deletions.
10 changes: 7 additions & 3 deletions browser/css/cool.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 0 additions & 2 deletions browser/src/layer/tile/CommentListSection.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down
78 changes: 71 additions & 7 deletions browser/src/layer/tile/CommentSection.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -784,7 +787,6 @@ export class Comment extends CanvasSectionObject {

public handleReplyCommentButton (e: any): void {
app.view.commentAutoSave = null;
this.textAreaInput();
this.onReplyClick(e);
}

Expand Down Expand Up @@ -826,7 +828,6 @@ export class Comment extends CanvasSectionObject {

public handleSaveCommentButton (e: any): void {
app.view.commentAutoSave = null;
this.textAreaInput();
this.onSaveComment(e);
}

Expand All @@ -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);
}
Expand All @@ -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);
}
Expand All @@ -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 {
Expand Down

0 comments on commit 385b4d3

Please sign in to comment.