Comments: Navigate to active edit instead of blocking with popup

-When a user inserted a new comment/modified/replied with an unsaved
 edit, the UI displayed a blocking popup requiring the edited comment
 to be resolved first.
-In large documents with many comments, locating that comment was
 slow and disruptive.
-This update removes that popup and now automatically navigates to
 the comment currently in edit, applies a doc-type outline, and sets
 focus so the user can save or discard.

Signed-off-by: Banobe Pascal <[email protected]>
Change-Id: I2e149f3a44f9b2c144f768d07c0e9e7deda6341d

Author: banobepascal

browser/css/cool.css

@@ -794,6 +794,11 @@ body {
 	height: var(--default-height); /* Height of new image */
 }
 
+.cool-annotation-inedit {
+	outline: 2px solid rgb(var(--doc-type));
+	offset: -2px;
+}
+
 .leaflet-container .leaflet-pane.leaflet-calc-background-pane {
 	z-index: 0;
 }

browser/src/canvas/CanvasSectionObject.ts

@@ -191,6 +191,7 @@ class CanvasSectionObject {
 	isCalcRTL(): boolean { return; }
 	setViewResolved(on: boolean): void { return; }
 	setView(on: boolean): void { return; }
+	navigateAndFocusComment(comment: cool.Comment): void { return; }
 	scrollVerticalWithOffset(offset: number): void { return; }
 	remove(id: string): void { return; }
 	deleteThis(): void { return; }

browser/src/canvas/sections/CommentListSection.ts

@@ -19,7 +19,7 @@ window.L.Map.include({
 		if (this.stateChangeHandler.getItemValue('InsertAnnotation') === 'disabled')
 			return;
 		if (cool.Comment.isAnyEdit()) {
-			cool.CommentSection.showCommentEditingWarning();
+			app.sectionContainer.getSectionWithName(app.CSections.CommentList.name).navigateAndFocusComment(cool.Comment.isAnyEdit());
 			return;
 		}
 
@@ -180,9 +180,27 @@ export class CommentSection extends CanvasSectionObject {
 		}
 	}
 
-	public static showCommentEditingWarning (): void {
-		window.L.Map.THIS.uiManager.showInfoModal('annotation-editing', _('A comment is being edited'),
-		_('Please save or discard the comment currently being edited.'), null, _('Close'));
+	public navigateAndFocusComment(comment: cool.Comment): void {
+		this.highlightComment(comment);
+		comment.highlight();
+		this.scrollCommentIntoView(comment);
+		
+		if (this.sectionProperties.selectedComment !== comment) {
+			this.select(comment, true);
+		}
+		
+		comment.focus();
+
+		const wrapper = comment.sectionProperties.wrapper;
+		wrapper.classList.add('cool-annotation-inedit');
+
+	}
+
+	private removeCommentAttention(annotation: any): void {
+		if (annotation.sectionProperties.container) {
+			const wrapper = annotation.sectionProperties.wrapper;
+			wrapper.classList.remove('cool-annotation-inedit');
+		}
 	}
 
 	private checkCollapseState(): void {
@@ -747,12 +765,13 @@ export class CommentSection extends CanvasSectionObject {
 			this.map.sendUnoCommand('.uno:EditAnnotation', comment, true /* force */);
 		}
 		this.unselect();
+		this.removeCommentAttention(annotation);
 		this.map.focus();
 	}
 
 	public reply (annotation: any): void {
 		if (cool.Comment.isAnyEdit()) {
-			cool.CommentSection.showCommentEditingWarning();
+			this.navigateAndFocusComment(cool.Comment.isAnyEdit());
 			return;
 		}
 		if ((<any>window).mode.isMobile()) {
@@ -791,8 +810,9 @@ export class CommentSection extends CanvasSectionObject {
 	}
 
 	public modify (annotation: any): void {
+		const editComment = cool.Comment.isAnyEdit();
 		if (cool.Comment.isAnyEdit()) {
-			cool.CommentSection.showCommentEditingWarning();
+			this.navigateAndFocusComment(editComment);
 			return;
 		}
 		if ((<any>window).mode.isMobile()) {
@@ -1053,6 +1073,8 @@ export class CommentSection extends CanvasSectionObject {
 	}
 
 	public cancel (annotation: any): void {
+		this.removeCommentAttention(annotation);
+
 		if (annotation.sectionProperties.data.id === 'new') {
 			this.removeItem(annotation.sectionProperties.data.id);
 		}

browser/src/control/Control.PartsPreview.js

@@ -480,7 +480,7 @@ window.L.Control.PartsPreview = window.L.Control.extend({
 
 	_setPart: function (e) {
 		if (cool.Comment.isAnyEdit()) {
-			cool.CommentSection.showCommentEditingWarning();
+			app.sectionContainer.getSectionWithName(app.CSections.CommentList.name).navigateAndFocusComment(cool.Comment.isAnyEdit());
 			return;
 		}
 

browser/src/control/Control.Tabs.js

@@ -326,7 +326,7 @@ window.L.Control.Tabs = window.L.Control.extend({
 	// Set the part by index. Return true if cancelled.
 	_setPartIndex: function(index) {
 		if (cool.Comment.isAnyEdit()) {
-			cool.CommentSection.showCommentEditingWarning();
+			app.sectionContainer.getSectionWithName(app.CSections.CommentList.name).navigateAndFocusComment(cool.Comment.isAnyEdit());
 			return true;
 		}
 

browser/src/control/Parts.js

@@ -23,7 +23,7 @@ window.L.Map.include({
 	*/
 	setPart: function (part, external, calledFromSetPartHandler) {
 		if (cool.Comment.isAnyEdit()) {
-			cool.CommentSection.showCommentEditingWarning();
+			app.sectionContainer.getSectionWithName(app.CSections.CommentList.name).navigateAndFocusComment(cool.Comment.isAnyEdit());
 			return;
 		}
 
@@ -330,7 +330,7 @@ window.L.Map.include({
 
 	insertPage: function(nPos) {
 		if (cool.Comment.isAnyEdit()) {
-			cool.CommentSection.showCommentEditingWarning();
+			app.sectionContainer.getSectionWithName(app.CSections.CommentList.name).navigateAndFocusComment(cool.Comment.isAnyEdit());
 			return;
 		}