Wysiwyg - Counter limit (fix counter limit in Textfield) (#459)

* Wysiwyg - Make sure CSS in Wysiwyg do not interefer with the CSS of the TextField * Fix Wysiwyg counter position
area17 · Nov 19, 2019 · 01151e5 · 01151e5
1 parent 9a87a2b
commit 01151e5
Showing 1 changed file with 13 additions and 12 deletions.
diff --git a/frontend/js/components/Wysiwyg.vue b/frontend/js/components/Wysiwyg.vue
@@ -5,7 +5,7 @@
       <template v-if="editSource">
         <div class="wysiwyg" :class="textfieldClasses" v-show="!activeSource">
           <div class="wysiwyg__editor" ref="editor"></div>
-          <span v-if="shouldShowCounter" class="input__limit f--tiny" :class="limitClasses">{{ counter }}</span>
+          <span v-if="shouldShowCounter" class="wysiwyg__limit f--tiny" :class="limitClasses">{{ counter }}</span>
         </div>
         <div class="form__field form__field--textarea" v-show="activeSource">
           <textarea :placeholder="placeholder" :autofocus="autofocus" v-model="value" :style="textareaHeight"></textarea>
@@ -15,7 +15,7 @@
       <template v-else>
         <div class="wysiwyg" :class="textfieldClasses">
           <div class="wysiwyg__editor" ref="editor"></div>
-          <span v-if="shouldShowCounter" class="input__limit f--tiny" :class="limitClasses">{{ counter }}</span>
+          <span v-if="shouldShowCounter" class="wysiwyg__limit f--tiny" :class="limitClasses">{{ counter }}</span>
         </div>
       </template>
     </div>
@@ -97,7 +97,7 @@
       },
       limitClasses: function () {
         return {
-          'input__limit--red': this.counter < 10
+          'wysiwyg__limit--red': this.counter < 10
         }
       },
       ...mapState({
@@ -270,30 +270,31 @@
 </script>
 
 <style lang="scss" scoped>
+  @import '~styles/setup/_mixins-colors-vars.scss';
+
   .wysiwyg__button {
     margin-top:20px;
   }
-</style>
-<style lang="scss">
-  /* Not scoped style here because we want to overwrite default style of the wysiwig */
-  @import '~styles/setup/_mixins-colors-vars.scss';
 
   $height_input: 45px;
-
-  .input__limit {
+  .wysiwyg__limit {
     height:$height_input - 2px;
     line-height:$height_input - 2px;
     color:$color__text--light;
-    user-select: none;
+    user-select:none;
     pointer-events:none;
     position:absolute;
     right:15px;
-    bottom: 55px;
+    bottom:0;
   }
 
-  .input__limit--red {
+  .wysiwyg__limit--red {
     color:red;
   }
+</style>
+<style lang="scss">
+  /* Not scoped style here because we want to overwrite default style of the wysiwig */
+  @import '~styles/setup/_mixins-colors-vars.scss';
 
   .a17 {
     .ql-toolbar.ql-snow {