From 49ea32f49519c3f2ec323514e4945dd1b93f4beb Mon Sep 17 00:00:00 2001
From: Sean Engelhardt <sean.f.t.engelhardt@gmail.com>
Date: Thu, 22 Aug 2019 17:47:31 +0200
Subject: [PATCH] Add usage hints to tinymce mobile

shows "dont forget to save" and "touch the book to edit" messages if the tinymce
mobile editor was called from motion comments and personal notes
---
 client/src/app/base.component.ts              | 27 +++++++++++++++++++
 .../meta-text-block.component.scss            |  4 ---
 .../motion-comments.component.html            | 14 +++++++++-
 .../personal-note.component.html              | 20 ++++++++++++--
 4 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/client/src/app/base.component.ts b/client/src/app/base.component.ts
index 814c69d35..7f16b093f 100644
--- a/client/src/app/base.component.ts
+++ b/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);
+    }
 }
diff --git a/client/src/app/shared/components/meta-text-block/meta-text-block.component.scss b/client/src/app/shared/components/meta-text-block/meta-text-block.component.scss
index 8a5751c84..c4883338d 100644
--- a/client/src/app/shared/components/meta-text-block/meta-text-block.component.scss
+++ b/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);
-                }
             }
         }
     }
diff --git a/client/src/app/site/motions/modules/motion-detail/components/motion-comments/motion-comments.component.html b/client/src/app/site/motions/modules/motion-detail/components/motion-comments/motion-comments.component.html
index 569b78b20..879a34fde 100644
--- a/client/src/app/site/motions/modules/motion-detail/components/motion-comments/motion-comments.component.html
+++ b/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 }}"
diff --git a/client/src/app/site/motions/modules/motion-detail/components/personal-note/personal-note.component.html b/client/src/app/site/motions/modules/motion-detail/components/personal-note/personal-note.component.html
index 23828da38..370dbfaf8 100644
--- a/client/src/app/site/motions/modules/motion-detail/components/personal-note/personal-note.component.html
+++ b/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>