Merge pull request #4942 from tsiegleauq/tinymce-mobile-save

Add usage hints to tinymce mobile

client/src/app/base.component.ts

@@ -27,6 +27,11 @@ export abstract class BaseComponent {
      */
     protected swipeTime?: number;
 
+    /**
+     * Determine to display a save hint
+     */
+    public saveHint: boolean;
+
     /**
      * Settings for the TinyMCE editor selector
      */
@@ -78,4 +83,26 @@ export abstract class BaseComponent {
     public trackByIndex(index: number): number {
         return index;
     }
+
+    /**
+     * TinyMCE Init callback. Used for certain mobile editors
+     * @param event
+     */
+    protected onInitTinyMce(event: any): void {
+        console.log('tinyMCE event: ', event);
+
+        if (event.event.target.settings.theme === 'mobile') {
+            console.log('is mobile editor');
+            this.saveHint = true;
+        } else {
+            console.log('is no mobile editor');
+            event.editor.focus();
+        }
+    }
+
+    protected onLeaveTinyMce(event: any): void {
+        console.log('tinyevent:', event.event.type);
+        this.saveHint = false;
+        // console.log("event: ", event.event.type);
+    }
 }

client/src/app/shared/components/meta-text-block/meta-text-block.component.scss

@@ -19,10 +19,6 @@
             .title-container {
                 display: flex;
                 justify-content: space-between;
-
-                ::ng-deep button {
-                    color: rgba(0, 0, 0, 0.54);
-                }
             }
         }
     }

client/src/app/site/motions/modules/motion-detail/components/motion-comments/motion-comments.component.html

@@ -17,8 +17,19 @@
             </ng-container>
             <form [formGroup]="commentForms[section.id]" *ngIf="isCommentEdited(section)">
                 <!-- The HTML Editor -->
-                <editor formControlName="comment" [init]="tinyMceSettings"></editor>
+                <editor
+                    [id]="section.id"
+                    formControlName="comment"
+                    [init]="tinyMceSettings"
+                    (onInit)="onInitTinyMce($event)"
+                    (onRemove)="onLeaveTinyMce($event)"
+                ></editor>
             </form>
+            <div *ngIf="saveHint">
+                <span translate>Touch the book icon to enter text</span>
+                <br />
+                <span class="red-warning-text" translate>Do not forget to save your changes!</span>
+            </div>
         </ng-container>
 
         <ng-container class="meta-text-block-action-row">
@@ -40,6 +51,7 @@
             </button>
             <button
                 mat-icon-button
+                color="warn"
                 *ngIf="isCommentEdited(section)"
                 (click)="saveComment(section)"
                 matTooltip="{{ 'Save' | translate }}"

client/src/app/site/motions/modules/motion-detail/components/personal-note/personal-note.component.html

@@ -17,7 +17,13 @@
         >
             <mat-icon>picture_as_pdf</mat-icon>
         </button>
-        <button mat-icon-button *ngIf="isEditMode" (click)="savePersonalNote()" matTooltip="{{ 'Save' | translate }}">
+        <button
+            mat-icon-button
+            color="warn"
+            *ngIf="isEditMode"
+            (click)="savePersonalNote()"
+            matTooltip="{{ 'Save' | translate }}"
+        >
             <mat-icon>save</mat-icon>
         </button>
         <button
@@ -40,7 +46,17 @@
         </ng-container>
         <form [formGroup]="personalNoteForm" *ngIf="isEditMode">
             <!-- The HTML Editor -->
-            <editor formControlName="note" [init]="tinyMceSettings"></editor>
+            <editor
+                formControlName="note"
+                [init]="tinyMceSettings"
+                (onInit)="onInitTinyMce($event)"
+                (onRemove)="onLeaveTinyMce($event)"
+            ></editor>
         </form>
+        <div *ngIf="saveHint">
+            <span translate>Touch the book icon to enter text</span>
+            <br />
+            <span class="red-warning-text" translate>Do not forget to save your changes!</span>
+        </div>
     </ng-container>
 </os-meta-text-block>