vue-intergrall-plugins 1.0.86 → 1.0.88

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

@@ -4,7 +4,8 @@
     <transition-group name="fade">
       <Loader v-if="loading" key="mfp-loader" />
       <template v-else-if="fileFormatError">
-        <span @click="deleteFile" :title="dictionary.msg_cancelar_anexo" class="text-footer-exclude-file" key="mfp-exlude-file">
+        <span @click="deleteFile" :title="dictionary.msg_cancelar_anexo" class="text-footer-exclude-file"
+          key="mfp-exlude-file">
           <fa-icon :icon="['fas', 'times-circle']" />
         </span>
         <div class="text-footer-invalid-format" v-if="fileFormatError" key="mfp-invalid-format">
@@ -14,18 +15,17 @@
       </template>
       <template v-else>
         <div class="file-preview" v-for="(singleFile, index) in file" :key="index">
-          <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}">
+          <p class="file-title" :style="`max-width: ${isPdf(singleFile.type) ? '175px' : '75px'}`"
+            :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.invalid ? singleFile.name : `${dictionary.titulo_msg_formato_invalido ? dictionary.titulo_msg_formato_invalido : "Arquivo invalido"} - ${singleFile.name}` }}
+            {{ !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' && !isPdf(singleFile.type)">
-              <img
-                :title="dictionary.titulo_visualizar_img"
-                :src="singleFile.src"
-                :alt="dictionary.alt_previa_img"
-                @click="openImage(singleFile.src)"
-              />
+              <img :title="dictionary.titulo_visualizar_img" :src="singleFile.src" :alt="dictionary.alt_previa_img"
+                @click="openImage(singleFile.src)" />
             </span>
             <span class="pdf" v-else-if="isPdf(singleFile.type)">
               <fa-icon :icon="['fas', 'file-pdf']" />
@@ -34,7 +34,8 @@
               <fa-icon :icon="['fas', 'file-alt']" />
             </span>
           </div>
-          <span @click="deleteSpecificFile(singleFile.name, index)" v-tippy="{placement: 'left'}" :content="dictionary.msg_excluir_anexo" :title="dictionary.msg_excluir_anexo" class="delete-file">
+          <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>
@@ -56,12 +57,12 @@ export default {
     }
   },
   mounted() {
-    setTimeout(() => { this.loading = false;}, 500);
+    setTimeout(() => { this.loading = false; }, 500);
   },
   watch: {
     file() {
-      if(!this.ignoreNextUpdate) {
-        if(this.loadingTimeout) clearTimeout(this.loadingTimeout);
+      if (!this.ignoreNextUpdate) {
+        if (this.loadingTimeout) clearTimeout(this.loadingTimeout);
         this.loading = true;
         this.loadingTimeout = setTimeout(() => { this.loading = false; }, 500);
         this.ignoreNextUpdate = true
@@ -87,7 +88,7 @@ export default {
       this.$emit("open-image", image);
     },
     icon(imgOrDoc) {
-      if(!imgOrDoc) return ['fas', 'times-circle'];
+      if (!imgOrDoc) return ['fas', 'times-circle'];
       return imgOrDoc == 'doc' ? ['fas', 'file-alt'] : ['fas', 'image'];
     },
     isPdf(type) {
@@ -98,169 +99,193 @@ export default {
 </script>
 
 <style>
-  .multiple-file-preview {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    max-height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    border-top-left-radius: 2.5px;
-    border-top-right-radius: 2.5px;
-    transition: background-color 150ms;
-    scrollbar-color: #888 rgba(0, 0, 0, 0.2);
-    scrollbar-width: 4px;
-  }
-  .multiple-file-preview::-webkit-scrollbar{
-    width: 4px;
-  }
+.multiple-file-preview {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-top-left-radius: 2.5px;
+  border-top-right-radius: 2.5px;
+  transition: background-color 150ms;
+  scrollbar-color: #888 rgba(0, 0, 0, 0.2);
+  scrollbar-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 {
+  width: 4px;
+}
 
-  .multiple-file-preview::-webkit-scrollbar-track{
-    background-color: rgba(0, 0, 0, 0.2);
-  }
+.multiple-file-preview .close-icon {
+  color: #E74C3C;
+  cursor: pointer;
+  opacity: .9;
+  transition: opacity 300ms;
+}
 
-  .multiple-file-preview::-webkit-scrollbar-thumb{
-    transition-duration: .5s;
-    background-color: #222
-  }
+.multiple-file-preview .close-icon:hover {
+  opacity: 1;
+}
 
-  .multiple-file-preview::-webkit-scrollbar-thumb:hover{
-    background-color: #555
-  }
+.multiple-file-preview::-webkit-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0.2);
+}
 
-  .text-footer-invalid-format {
-    color: #222;
-    padding: 10px; 
-  }
-  .text-footer-invalid-format h3 {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    font-weight: 500; 
-  }
-  .text-footer-invalid-format h4 {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    font-size: 14.4px; 
-  }
+.multiple-file-preview::-webkit-scrollbar-thumb {
+  transition-duration: .5s;
+  background-color: #222
+}
 
-  .text-footer-exclude-file {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    cursor: pointer; 
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-width: 16px;
-    min-height: 16px;
-    background-color: #FFF;
-    border-radius: 50%;
-  }
-  .text-footer-exclude-file svg {
-    transition: color 200ms;
-    color: #e9594a; 
-  }
-  .text-footer-exclude-file svg:hover {
-    color: #E74C3C; 
-  }
+.multiple-file-preview::-webkit-scrollbar-thumb:hover {
+  background-color: #555
+}
 
-  .file-preview {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    padding: 5px 10px;
-    transition: background-color 150ms;
-  }
-  .file-preview:hover {
-    background-color: rgba(0, 0, 0, .1)
-  }
+.text-footer-invalid-format {
+  color: #222;
+  padding: 10px;
+}
 
-  .file-title {
-    color: #222;
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    padding: 4px 10px;
-    background-color: #FFF;
-    border-radius: 30px;
-    display: inline-block;
-  }
-  .file-title.red {
-    color: #E74C3C;
-    margin-right: 5px;
-  }
-  .file-title > svg {
-    margin-right: 5px;
-    color: #333;
-  }
+.text-footer-invalid-format h3 {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-weight: 500;
+}
 
-  .small-img {
-    flex: 1;
-    margin: 0 15px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-  }
-  .small-img img {
-    height: 40px;
-    cursor: pointer;
-  }
-  .small-img .pdf, .small-img .doc {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 30px;
-  }
-  .small-img .pdf {
-    color: #E74C3C;
-  }
-  .small-img .doc {
-    color: #006bc9;
-  }
-  .small-img .pdf svg, .small-img .doc svg{ 
-    z-index: 1;
-  }
-  .small-img .pdf::after, .small-img .doc::after {
-    content: "";
-    position: absolute;
-    bottom: 2px;
-    transform: translateY(2px);
-    width: 20px;
-    height: 20px;
-    background-color: #FFF;
-  }
-  .img-container {
-    padding: 5px;
-    border-radius: 2.5px;
-    background-color: rgba(0, 0, 0, .15);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
+.text-footer-invalid-format h4 {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-size: 14.4px;
+}
 
-  .delete-file {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-  }
-  .delete-file > svg {
-    font-size: 16px;
-    color: #E74C3C;
-  }
+.text-footer-exclude-file {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 16px;
+  min-height: 16px;
+  background-color: #FFF;
+  border-radius: 50%;
+}
+
+.text-footer-exclude-file svg {
+  transition: color 200ms;
+  color: #e9594a;
+}
+
+.text-footer-exclude-file svg:hover {
+  color: #E74C3C;
+}
+
+.file-preview {
+  display: flex;
+  width: calc(100% - 20px);
+  align-items: center;
+  padding: 5px 10px;
+  transition: background-color 150ms;
+}
+
+.file-preview:hover {
+  background-color: rgba(0, 0, 0, .1)
+}
+
+.file-title {
+  color: #222;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding: 4px 10px;
+  background-color: #FFF;
+  border-radius: 30px;
+  display: inline-block;
+  max-width: 75px;
+}
+
+.file-title.red {
+  color: #E74C3C;
+  margin-right: 5px;
+}
+
+.file-title>svg {
+  margin-right: 5px;
+  color: #333;
+}
+
+.small-img {
+  flex: 1;
+  margin: 0 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.small-img img {
+  width: 100%;
+  height: 100%;
+  max-height: 40px;
+  max-width: 100px;
+  cursor: pointer;
+}
+
+.small-img .pdf,
+.small-img .doc {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 30px;
+}
+
+.small-img .pdf {
+  color: #E74C3C;
+}
+
+.small-img .doc {
+  color: #006bc9;
+}
+
+.small-img .pdf svg,
+.small-img .doc svg {
+  z-index: 1;
+}
+
+.small-img .pdf::after,
+.small-img .doc::after {
+  content: "";
+  position: absolute;
+  bottom: 2px;
+  transform: translateY(2px);
+  width: 20px;
+  height: 20px;
+  background-color: #FFF;
+}
+
+.img-container {
+  padding: 5px;
+  border-radius: 2.5px;
+  background-color: rgba(0, 0, 0, .15);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.delete-file {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.delete-file>svg {
+  font-size: 16px;
+  color: #E74C3C;
+}
 </style>

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

@@ -901,11 +901,11 @@ export default {
   transform: translateX(-5px);
 }
 
-.text-footer-container .text-footer-preview-container {
+.text-footer-container .old-footer-preview-container {
   width: 100%;
   cursor: default;
   position: absolute;
-  left: 0;
+  right: 0;
   background-color: #f1f1f1;
   border: 2px solid #ccc;
   border-bottom: unset;
@@ -913,25 +913,25 @@ export default {
   border-top-right-radius: 2.5px;
 }
 
-.text-footer-container .text-footer-preview-container.isDoc {
+.text-footer-container .old-footer-preview-container.isDoc {
   top: -50px;
   width: 100%;
   height: 45px;
 }
 
-.text-footer-container .text-footer-preview-container.isImg,
-.text-footer-container .text-footer-preview-container.isMultiple {
+.text-footer-container .old-footer-preview-container.isImg,
+.text-footer-container .old-footer-preview-container.isMultiple {
   top: -205px;
   width: 100%;
   height: 200px;
-  min-width: 200px;
+  min-width: 300px;
 }
 
-.text-footer-container .text-footer-preview-container.isImg .text-footer-image-preview {
+.text-footer-container .old-footer-preview-container.isImg .text-footer-image-preview {
   height: 170px;
 }
 
-.text-footer-container .text-footer-preview-container.isError {
+.text-footer-container .old-footer-preview-container.isError {
   top: -80px;
   width: 100%;
   height: 75px;