MOBILE-3323 rte: Style draft messages

main
Pau Ferrer Ocaña 2020-02-06 12:19:09 +01:00 committed by Dani Palou
parent 7fa8e6fe05
commit 0fcdd494de
3 changed files with 29 additions and 10 deletions

View File

@ -1,4 +1,4 @@
<div class="core-rte-editor-container"> <div class="core-rte-editor-container" (click)="focusRTE()" [class.toolbar-hidden]="toolbarHidden">
<div [hidden]="!rteEnabled" #editor contenteditable="true" class="core-rte-editor" tappable (focus)="showToolbar()" (longPress)="showToolbar()" (blur)="hideToolbar($event)" [attr.data-placeholder-text]="placeholder" role="textbox"> <div [hidden]="!rteEnabled" #editor contenteditable="true" class="core-rte-editor" tappable (focus)="showToolbar()" (longPress)="showToolbar()" (blur)="hideToolbar($event)" [attr.data-placeholder-text]="placeholder" role="textbox">
</div> </div>

View File

@ -11,15 +11,20 @@ ion-app.app-root core-rich-text-editor {
} }
.core-rte-editor-container { .core-rte-editor-container {
height: 100%; max-height: calc(100% - 46px);
position: relative; display: flex;
flex-direction: column;
flex-grow: 1;
&.toolbar-hidden {
max-height: 100%;
}
.core-rte-info-message { .core-rte-info-message {
position: absolute; padding: 5px;
bottom: 0; border-top: 1px solid $info;
padding: 3px; background: white;
border: 1px solid $info; flex-shrink: 1;
border-radius: 5px; font-size: 1.4rem;
.icon { .icon {
color: $info; color: $info;
@ -33,6 +38,7 @@ ion-app.app-root core-rich-text-editor {
width: 100%; width: 100%;
resize: none; resize: none;
background-color: $white; background-color: $white;
flex-grow: 1;
@include darkmode() { @include darkmode() {
background-color: $gray-darker; background-color: $gray-darker;
color: $white; color: $white;

View File

@ -230,7 +230,7 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe
} }
if (height > this.minHeight) { if (height > this.minHeight) {
this.element.style.height = this.domUtils.formatPixelsSize(height); this.element.style.height = this.domUtils.formatPixelsSize(height - 1);
} else { } else {
this.element.style.height = ''; this.element.style.height = '';
} }
@ -583,10 +583,23 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe
} }
} }
/**
* Focus editor when click the area.
*
* @param e Event
*/
focusRTE(e?: Event): void {
if (this.rteEnabled) {
this.editorElement.focus();
} else {
this.textarea.setFocus();
}
}
/** /**
* Hide the toolbar in phone mode. * Hide the toolbar in phone mode.
*/ */
hideToolbar($event: any): void { hideToolbar($event: Event): void {
this.stopBubble($event); this.stopBubble($event);
if (this.isPhone) { if (this.isPhone) {