MOBILE-3323 rte: Style draft messages
parent
7fa8e6fe05
commit
0fcdd494de
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in New Issue