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

Add usage hints to tinymce mobile
This commit is contained in:
Emanuel Schütze 2019-08-26 15:28:04 +02:00 committed by GitHub
commit 900ba55a06
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 58 additions and 7 deletions

View File

@ -27,6 +27,11 @@ export abstract class BaseComponent {
*/ */
protected swipeTime?: number; protected swipeTime?: number;
/**
* Determine to display a save hint
*/
public saveHint: boolean;
/** /**
* Settings for the TinyMCE editor selector * Settings for the TinyMCE editor selector
*/ */
@ -78,4 +83,26 @@ export abstract class BaseComponent {
public trackByIndex(index: number): number { public trackByIndex(index: number): number {
return index; 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);
}
} }

View File

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

View File

@ -17,8 +17,19 @@
</ng-container> </ng-container>
<form [formGroup]="commentForms[section.id]" *ngIf="isCommentEdited(section)"> <form [formGroup]="commentForms[section.id]" *ngIf="isCommentEdited(section)">
<!-- The HTML Editor --> <!-- 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> </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>
<ng-container class="meta-text-block-action-row"> <ng-container class="meta-text-block-action-row">
@ -40,6 +51,7 @@
</button> </button>
<button <button
mat-icon-button mat-icon-button
color="warn"
*ngIf="isCommentEdited(section)" *ngIf="isCommentEdited(section)"
(click)="saveComment(section)" (click)="saveComment(section)"
matTooltip="{{ 'Save' | translate }}" matTooltip="{{ 'Save' | translate }}"

View File

@ -17,7 +17,13 @@
> >
<mat-icon>picture_as_pdf</mat-icon> <mat-icon>picture_as_pdf</mat-icon>
</button> </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> <mat-icon>save</mat-icon>
</button> </button>
<button <button
@ -40,7 +46,17 @@
</ng-container> </ng-container>
<form [formGroup]="personalNoteForm" *ngIf="isEditMode"> <form [formGroup]="personalNoteForm" *ngIf="isEditMode">
<!-- The HTML Editor --> <!-- The HTML Editor -->
<editor formControlName="note" [init]="tinyMceSettings"></editor> <editor
formControlName="note"
[init]="tinyMceSettings"
(onInit)="onInitTinyMce($event)"
(onRemove)="onLeaveTinyMce($event)"
></editor>
</form> </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>
</os-meta-text-block> </os-meta-text-block>