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

MOBILE-3320 rte: Improve rte click handling

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2021-05-20 11:16:16 +02:00
parent 0eaa97cb55
commit 660866b80d
2 changed files with 27 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
View File

@ -1,11 +1,28 @@
<div class="core-rte-editor-container" (click)="focusRTE()" [class.toolbar-hidden]="toolbarHidden"> <div class="core-rte-editor-container" (click)="focusRTE()" [class.toolbar-hidden]="toolbarHidden">
<div [hidden]="!rteEnabled" #editor contenteditable="true" class="core-rte-editor" button (focus)="showToolbar($event)" <div
(longPress)="showToolbar($event)" (blur)="hideToolbar($event)" [attr.data-placeholder-text]="placeholder" role="textbox"> [hidden]="!rteEnabled"
#editor
class="core-rte-editor"
role="textbox"
contenteditable="true"
[attr.data-placeholder-text]="placeholder"
(focus)="showToolbar($event)"
(blur)="hideToolbar($event)"
>
</div> </div>
<ion-textarea [hidden]="rteEnabled" #textarea class="core-textarea" [placeholder]="placeholder" [attr.name]="name" <ion-textarea
ngControl="control" (ionChange)="onChange()" (focus)="showToolbar($event)" (longPress)="showToolbar($event)" [hidden]="rteEnabled"
(blur)="hideToolbar($event)" role="textbox"> #textarea
class="core-textarea"
role="textbox"
[attr.name]="name"
ngControl="control"
[placeholder]="placeholder"
(ionChange)="onChange()"
(ionFocus)="showToolbar($event)"
(ionBlur)="hideToolbar($event)"
>
</ion-textarea> </ion-textarea>
<div class="core-rte-info-message" *ngIf="infoMessage"> <div class="core-rte-info-message" *ngIf="infoMessage">

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

@ -29,8 +29,9 @@
.core-rte-editor-container { .core-rte-editor-container {
max-height: calc(100% - 46px); max-height: calc(100% - 46px);
display: flex; display: flex;
flex-direction: column;
flex-grow: 1; flex-grow: 1;
flex-direction: column;
justify-content: space-between;
&.toolbar-hidden { &.toolbar-hidden {
max-height: 100%; max-height: 100%;
} }
@ -51,7 +52,7 @@
.core-rte-editor, .core-textarea { .core-rte-editor, .core-textarea {
padding: 2px; padding: 2px;
margin: 2px; margin: 2px;
width: 100%; width: calc(100% - 4px);
resize: none; resize: none;
background-color: var(--background); background-color: var(--background);
color: var(--color); color: var(--color);
@ -59,8 +60,6 @@
} }
.core-rte-editor { .core-rte-editor {
flex-grow: 1;
flex-shrink: 1;
-webkit-user-select: auto !important; -webkit-user-select: auto !important;
user-select: auto !important; user-select: auto !important;
word-wrap: break-word; word-wrap: break-word;
@ -86,8 +85,6 @@
} }
.core-textarea { .core-textarea {
flex-grow: 1;
flex-shrink: 1;
position: relative; position: relative;
::ng-deep textarea { ::ng-deep textarea {
@ -97,6 +94,7 @@
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
position: absolute; position: absolute;
height: auto;
top: 0; top: 0;
bottom: 0; bottom: 0;
} }
@ -160,7 +158,7 @@
} }
&.toolbar-hidden { &.toolbar-hidden {
visibility: none; visibility: hidden;
height: 0; height: 0;
border: none; border: none;
} }