Display: Fix tinyeditor styles

chamilo · Apr 22, 2024 · 75b3424 · 75b3424
1 parent edca592
commit 75b3424
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 24 deletions.
diff --git a/assets/css/app.scss b/assets/css/app.scss
@@ -606,7 +606,6 @@ form .field {
   }
 
   .freeze + label,
-  .html-editor-container + label,
   .advmultiselect + label {
     font-size: 13px;
     @apply absolute top-0 left-0 text-support-3 text-caption px-1 bg-white text-primary;

diff --git a/assets/css/scss/atoms/_form.scss b/assets/css/scss/atoms/_form.scss
@@ -81,11 +81,13 @@
   &:has(textarea:focus) label,
   &:has(textarea.p-filled) label,
   &:has(.p-inputwrapper-focus) label,
-  &:has(.p-inputwrapper-filled) label {
-    @apply top-0 left-2 text-caption px-1 bg-white text-primary;
+  &:has(.p-inputwrapper-filled) label,
+  &:has(.tox.tox-tinymce) label {
+    @apply top-0 left-2 text-caption px-1 bg-white text-primary z-[1];
   }
 
-  .html-editor-container > div {
+  .html-editor-container > div,
+  .tox.tox-tinymce {
     @apply pt-2 border-support-3 rounded-lg;
   }
 

diff --git a/assets/vue/components/basecomponents/BaseTinyEditor.vue b/assets/vue/components/basecomponents/BaseTinyEditor.vue
@@ -1,25 +1,24 @@
 <template>
-  <div class="base-tiny-editor">
-    <label
-      v-if="title"
-      :for="editorId"
-    >
-      {{ title }}
-    </label>
-    <TinyEditor
-      :id="editorId"
-      :model-value="modelValue"
-      :init="editorConfig"
-      :required="required"
-      @update:model-value="updateValue"
-      @input="updateValue"
-    />
-    <p
+  <div class="field">
+    <FloatLabel>
+      <TinyEditor
+        :id="editorId"
+        :model-value="modelValue"
+        :init="editorConfig"
+        :required="required"
+        @update:model-value="updateValue"
+        @input="updateValue"
+      />
+      <label
+        v-if="title"
+        :for="editorId"
+        v-text="title"
+      />
+    </FloatLabel>
+    <small
       v-if="helpText"
-      class="help-text"
-    >
-      {{ helpText }}
-    </p>
+      v-text="helpText"
+    />
   </div>
 </template>
 
@@ -30,6 +29,7 @@ import { useRoute, useRouter } from "vue-router"
 import { useCidReqStore } from "../../store/cidReq"
 import { storeToRefs } from "pinia"
 import { useSecurityStore } from "../../store/securityStore"
+import FloatLabel from "primevue/floatlabel"
 
 import { TINYEDITOR_MODE_DOCUMENTS, TINYEDITOR_MODE_PERSONAL_FILES, TINYEDITOR_MODES } from "./TinyEditorOptions"