EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/core/editor/components/rich-text-editor/core-editor-rich-text-editor.html
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>

20
src/core/editor/components/rich-text-editor/rich-text-editor.scss
View File

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

17
src/core/editor/components/rich-text-editor/rich-text-editor.ts
View File

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