MOBILE-3323 rte: Style draft messages

Author: crazyserver

src/core/editor/components/rich-text-editor/core-editor-rich-text-editor.html

@@ -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>
 

src/core/editor/components/rich-text-editor/rich-text-editor.scss

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

src/core/editor/components/rich-text-editor/rich-text-editor.ts

@@ -230,7 +230,7 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe
                 }
 
                 if (height > this.minHeight) {
-                    this.element.style.height = this.domUtils.formatPixelsSize(height);
+                    this.element.style.height = this.domUtils.formatPixelsSize(height - 1);
                 } else {
                     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.
      */
-    hideToolbar($event: any): void {
+    hideToolbar($event: Event): void {
         this.stopBubble($event);
 
         if (this.isPhone) {