vue-intergrall-plugins 0.0.294 → 0.0.296

package/src/lib-components/Messages/ChatMessages.vue

@@ -206,7 +206,7 @@
       <!-- Autor da mensagem -->
       <span class="autor-mensagem" v-html="autor"></span>
       <!-- Menu de opcoes da mensagem -->
-      <div class="menu-primario" :class="origem" v-if="showMenu">
+      <div class="menu-primario" :class="origem" v-if="hasAnyMenu">
         <!-- <span class="menu-mensagem" @click="toggleIsMenuOpen" v-tippy :content="dictionary.tit_mais_msg">
           <fa-icon :icon="['fas', 'chevron-down']" />
         </span> -->
@@ -215,6 +215,7 @@
           @click="responderMensagemHandler"
           v-tippy
           :content="dictionary.tit_responder_msg"
+          v-if="showMenu.reply"
         >
           <fa-icon :icon="['fas', 'reply']" />
         </span>
@@ -223,6 +224,7 @@
           @click="reagirMensagemHandler"
           v-tippy
           :content="dictionary.tit_reagir_msg"
+          v-if="showMenu.reaction"
         >
           <fa-icon :icon="['fas', 'smile']" />
         </span>
@@ -236,10 +238,10 @@
       </div>
       <transition name="fade" mode="out-in" v-if="isMenuOpen">
         <ul class="menu-flutuante" :class="origem" v-on-clickaway="closeMenu">
-          <li @click="responderMensagemHandler">
+          <li @click="responderMensagemHandler" v-if="showMenu.reply">
             <span> {{ dictionary.tit_responder_msg }} </span>
           </li>
-          <li @click="reagirMensagemHandler">
+          <li @click="reagirMensagemHandler" v-if="showMenu.reaction">
             <span> {{ dictionary.tit_reagir_msg }} </span>
           </li>
         </ul>
@@ -405,6 +407,13 @@ export default {
       this.reply = "reply reply-with-2-icons";
       return false;
     },
+    hasAnyMenu() {
+      if (!this.showMenu || typeof this.showMenu !== "object") return false;
+      for (let key in this.showMenu) {
+        if (this.showMenu.hasOwnProperty(key) && this.showMenu[key] === true) return true;
+      }
+      return false;
+    },
   },
   mounted() {
     if (this.mapa) this.setMap();
@@ -452,8 +461,8 @@ export default {
       this.isEmojisOpen = false;
       this.$emit("reagir-mensagem", {
         emoji,
-        seq,
-        id_ext_msg,
+        seq: this.seq,
+        id_ext_msg: this.id_ext_msg,
         hasEmojiReaction: this.messageReaction ? true : false,
       });
     },
@@ -991,13 +1000,36 @@ export default {
 .emoji-message-container {
   position: absolute;
   top: 0;
-  left: 0;
-  right: 0;
+  z-index: 1;
+  width: 300px;
+  height: 250px;
 }
+/* .emoji-message-container {
+  z-index: 1;
+  overflow: hidden;
+  width: 300px;
+  height: 250px;
+
+  >.sm-emoji-picker {
+    position: relative;
+    width: 300px;
+    height: 250px;
+  }
+}
+
+.mensagem .reaction {
+  $size: 1.8em;
+  width: $size;
+  height: $size;
+  min-width: $size;
+  min-height: $size;
+  max-width: $size;
+  max-height: $size;
+} */
 
 .emoji-message-container .sm-emoji-picker {
-  height: 200px;
-  width: 90% !important;
+  width: 300px;
+  height: 250px;
 }
 .emoji-message-container .sm-emoji-picker .sm-emoji-header {
   overflow-x: auto;
@@ -1014,6 +1046,10 @@ export default {
   background-color: rgba(100, 100, 100, 0.4);
   padding: 5px;
   font-size: 1.3em;
+  min-width: 1.8em;
+  min-height: 1.8em;
+  max-width: 1.8em;
+  max-height: 1.8em;
 }
 
 .reaction > span {