vue-intergrall-plugins 0.0.1075 → 1.0.0

package/src/lib-components/Chat/BtnScreenShare.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    class="text-footer-actions--btn"
+    @click="$emit('toggle-standard-messages')"
+    :title="dictionary.title_screen_share"
+  >
+    <fa-icon :icon="['fas', 'desktop']" />
+    <fa-icon :icon="['fas', 'share']" />
+  </div>
+</template>
+
+<style scoped>
+.text-footer-actions--btn {
+  position: relative;
+}
+.text-footer-actions--btn > svg:nth-child(1) {
+  font-size: 19.2px;
+}
+.text-footer-actions--btn > svg:nth-child(2) {
+  font-size: 9.6px;
+  position: absolute;
+  transform: translateY(-2px);
+}
+</style>
+
+<script>
+export default {
+  props: {
+    dictionary: {
+      type: Object,
+      default: {},
+      required: false,
+    },
+  },
+};
+</script>

package/src/lib-components/Chat/BtnStandardMessages.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="text-footer-actions--btn" @click="$emit('toggle-standard-messages')" :title="dictionary.title_msg_formatada">
+    <fa-icon :icon="['fas', 'comment']" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    dictionary: {
+      type: Object,
+      default: {},
+      required: false
+    }
+  }
+}
+</script>

package/src/lib-components/Chat/ExpandTextarea.vue

@@ -40,7 +40,7 @@
 import { mixin as clickaway } from "vue-clickaway"
 import BtnEmojis from "./BtnEmojis"
 import BtnFiles from "./BtnFiles"
-import { returnMessageWithHexa } from "@/services/textFormatting"
+import { returnMessageWithHexa } from "../../services/textFormatting"
 
 export default {
   components: { BtnEmojis, BtnFiles },
@@ -244,9 +244,8 @@ export default {
     },
     insertEmoji(emoji) {
       try {
+        if(!emoji) return
         const textarea = this.$refs[`${this.identifier}`]
-        console.log("emoji: ", emoji)
-        console.log(textarea)
         if (document.activeElement === textarea) {
           const cursorStart = textarea.selectionStart
           const cursorEnd = textarea.selectionEnd
@@ -282,7 +281,7 @@ export default {
     border-radius: 50%;
     z-index: 1;
     color: #E74C3C;
-    font-size: 1.3rem;
+    font-size: 20.8px;
   }
   .sc-icone-fechar.sc-icone-fechar--externo {
     top: -10px;
@@ -315,7 +314,7 @@ export default {
     display: flex;
     align-items: center;
     width: 100%;
-    font-size: 1.3rem;
+    font-size: 20.8px;
     background-color: #222;
     color: #FFF;
   }
@@ -357,7 +356,7 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 1.3rem;
+    font-size: 20.8px;
     cursor: pointer;
     opacity: .9;
     transition: all 300ms;

package/src/lib-components/Chat/MultipleFilePreview.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="multiple-file-preview">
+    <fa-icon :icon="['fas', 'times-circle']" class="close-icon" @click="$emit('close')" />
     <transition-group name="fade">
       <Loader v-if="loading" key="mfp-loader" />
       <template v-else-if="fileFormatError">
@@ -8,20 +9,17 @@
         </span>
         <div class="text-footer-invalid-format" v-if="fileFormatError" key="mfp-invalid-format">
           <h3 v-text="dictionary.titulo_msg_formato_invalido"></h3>
-          <h4 v-html="validFileFormats"></h4>
+          <h4 v-html="validFileFormats" :title="validFileFormats"></h4>
         </div>
       </template>
       <template v-else>
         <div class="file-preview" v-for="(singleFile, index) in file" :key="index">
-          <p class="file-title">
+          <p class="file-title" :title="!singleFile.invalid ? singleFile.name : `${dictionary.titulo_msg_formato_invalido ? dictionary.titulo_msg_formato_invalido : 'Arquivo invalido'} - ${singleFile.name}`" :class="{'red' : singleFile.invalid}">
             <fa-icon :icon="icon(singleFile.imgOrDoc)" />
-            {{ singleFile.name }}
-          </p>
-          <p v-if="singleFile.invalid" class="file-title red">
-            {{ dictionary.titulo_msg_formato_invalido ? dictionary.titulo_msg_formato_invalido : "Arquivo invalido" }}
+            {{ !singleFile.invalid ? singleFile.name : `${dictionary.titulo_msg_formato_invalido ? dictionary.titulo_msg_formato_invalido : "Arquivo invalido"} - ${singleFile.name}` }}
           </p>
           <div class="small-img">
-            <span class="img-container" v-if="singleFile.imgOrDoc === 'img'">
+            <span class="img-container" v-if="singleFile.imgOrDoc === 'img' && !isPdf(singleFile.type)">
               <img
                 :title="dictionary.titulo_visualizar_img"
                 :src="singleFile.src"
@@ -32,9 +30,12 @@
             <span class="pdf" v-else-if="isPdf(singleFile.type)">
               <fa-icon :icon="['fas', 'file-pdf']" />
             </span>
+            <span class="doc" v-else>
+              <fa-icon :icon="['fas', 'file-alt']" />
+            </span>
           </div>
-          <span @click="deleteSpecificFile(singleFile.name, index)" :title="dictionary.msg_excluir_anexo" class="delete-file">
-            <fa-icon :icon="['fas', 'times-circle']" />
+          <span @click="deleteSpecificFile(singleFile.name, index)" v-tippy="{placement: 'left'}" :content="dictionary.msg_excluir_anexo" :title="dictionary.msg_excluir_anexo" class="delete-file">
+            <fa-icon :icon="['fas', 'trash-alt']" />
           </span>
         </div>
       </template>
@@ -116,6 +117,16 @@ export default {
     width: 4px;
   }
 
+  .multiple-file-preview .close-icon {
+    color: #E74C3C;
+    cursor: pointer;
+    opacity: .9;
+    transition: opacity 300ms;
+  }
+  .multiple-file-preview .close-icon:hover {
+    opacity: 1;
+  }
+
   .multiple-file-preview::-webkit-scrollbar-track{
     background-color: rgba(0, 0, 0, 0.2);
   }
@@ -134,10 +145,14 @@ export default {
     padding: 10px; 
   }
   .text-footer-invalid-format h3 {
+    text-overflow: ellipsis;
+    overflow: hidden;
     font-weight: 500; 
   }
   .text-footer-invalid-format h4 {
-    font-size: .9rem; 
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-size: 14.4px; 
   }
 
   .text-footer-exclude-file {
@@ -148,8 +163,8 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    min-width: 1rem;
-    min-height: 1rem;
+    min-width: 16px;
+    min-height: 16px;
     background-color: #FFF;
     border-radius: 50%;
   }
@@ -182,13 +197,15 @@ export default {
     padding: 4px 10px;
     background-color: #FFF;
     border-radius: 30px;
+    display: inline-block;
   }
   .file-title.red {
     color: #E74C3C;
-    margin-left:5px;
+    margin-right: 5px;
   }
   .file-title > svg {
-    margin-right: 5px
+    margin-right: 5px;
+    color: #333;
   }
 
   .small-img {
@@ -203,17 +220,22 @@ export default {
     height: 40px;
     cursor: pointer;
   }
-  .small-img .pdf {
+  .small-img .pdf, .small-img .doc {
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 30px;
+  }
+  .small-img .pdf {
     color: #E74C3C;
   }
-  .small-img .pdf svg{ 
+  .small-img .doc {
+    color: #006bc9;
+  }
+  .small-img .pdf svg, .small-img .doc svg{ 
     z-index: 1;
   }
-  .small-img .pdf::after {
+  .small-img .pdf::after, .small-img .doc::after {
     content: "";
     position: absolute;
     bottom: 2px;
@@ -235,14 +257,10 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    border-radius: 50%;
-    background-color: #FFF;
-    min-width: 1rem;
-    min-height: 1rem;
     cursor: pointer;
   }
   .delete-file > svg {
-    font-size: 1rem;
+    font-size: 16px;
     color: #E74C3C;
   }
 </style>