vue-intergrall-plugins 0.0.282 → 0.0.283

package/dist/vue-intergrall-plugins.ssr.js

@@ -12355,6 +12355,7 @@ var script$5 = {
   created: function created() {
     if (!this.$root.$refs.chatMessages) this.$root.$refs.chatMessages = this;
   },
+  mixins: [mixin_1],
   data: function data() {
     return {
       strTooltipAux: "",
@@ -12383,7 +12384,9 @@ var script$5 = {
         rotateControl: false,
         fullscreenControl: false,
         disableDefaultUI: false
-      }
+      },
+      isMenuOpen: false,
+      showMenuOptions: false
     };
   },
   computed: {
@@ -12438,6 +12441,33 @@ var script$5 = {
     this.validadeUrlToMsg();
   },
   methods: {
+    closeMenu: function closeMenu() {
+      this.isMenuOpen = false;
+    },
+    toggleIsMenuOpen: function toggleIsMenuOpen() {
+      this.isMenuOpen = !this.isMenuOpen;
+    },
+    responderMensagemHandler: function responderMensagemHandler() {
+      if (this.isMenuOpen) this.closeMenu();
+      this.$emit('responder-mensagem', {
+        messageIndex: this.messageIndex,
+        autor: this.autor,
+        origem: this.origem,
+        msg: this.msg,
+        anexo: this.anexo,
+        imgAnexo: this.imgAnexo,
+        tipoDoc: this.tipoDoc,
+        docAnexo: this.docAnexo,
+        nomeArquivo: this.nomeArquivo,
+        audio: this.audio,
+        video: this.video,
+        seq: this.seq,
+        mapa: this.mapa,
+        anexos: this.anexos,
+        interatividade: this.interatividade,
+        referenceSelector: this.referenceSelector
+      });
+    },
     validateInterativity: function validateInterativity() {
       try {
         if (this.interatividade && this.interatividade.formulario && this.interatividade.formulario.length || this.interatividade.list && this.interatividade.tipo == 'listItem') {
@@ -12889,7 +12919,60 @@ var __vue_render__$5 = function __vue_render__() {
     domProps: {
       "innerHTML": _vm._s(_vm.autor)
     }
-  })], 2)], 1) : _vm._e();
+  }), _vm._v(" "), _c('div', {
+    staticClass: "menu-primario",
+    class: _vm.origem
+  }, [_c('span', {
+    directives: [{
+      name: "tippy",
+      rawName: "v-tippy"
+    }],
+    staticClass: "menu-mensagem",
+    attrs: {
+      "content": "Mais"
+    },
+    on: {
+      "click": _vm.toggleIsMenuOpen
+    }
+  }, [_c('fa-icon', {
+    attrs: {
+      "icon": ['fas', 'chevron-down']
+    }
+  })], 1), _vm._v(" "), _c('span', {
+    directives: [{
+      name: "tippy",
+      rawName: "v-tippy"
+    }],
+    staticClass: "menu-mensagem",
+    attrs: {
+      "content": _vm.dictionary.tit_responder_msg
+    },
+    on: {
+      "click": _vm.responderMensagemHandler
+    }
+  }, [_c('fa-icon', {
+    attrs: {
+      "icon": ['fas', 'reply']
+    }
+  })], 1)]), _vm._v(" "), _vm.isMenuOpen ? _c('transition', {
+    attrs: {
+      "name": "fade",
+      "mode": "out-in"
+    }
+  }, [_c('ul', {
+    directives: [{
+      name: "on-clickaway",
+      rawName: "v-on-clickaway",
+      value: _vm.closeMenu,
+      expression: "closeMenu"
+    }],
+    staticClass: "menu-flutuante",
+    class: _vm.origem
+  }, [_c('li', {
+    on: {
+      "click": _vm.responderMensagemHandler
+    }
+  }, [_c('span', [_vm._v(" " + _vm._s(_vm.dictionary.tit_responder_msg) + " ")])])])]) : _vm._e()], 2)], 1) : _vm._e();
 };
 
 var __vue_staticRenderFns__$5 = [];
@@ -12897,8 +12980,8 @@ var __vue_staticRenderFns__$5 = [];
 
 var __vue_inject_styles__$5 = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-46fa6d7c_0", {
-    source: ":root{--message-color:#373737;--text-color:#FFF;--files-bg:rgba(255, 255, 255, 0.1);--files-bg-hover:rgba(255, 255, 255, 0.1);--light:80;--threshold:60}.fade-enter-active,.fade-leave-active{transition:opacity .5s}.fade-enter,.fade-leave-to{opacity:0}.mensagem-reply{padding:5px 10px;font-size:.75rem;color:#666;transition:background-color 150ms ease-in-out;border-radius:5px;margin:5px 0;overflow:hidden;max-width:100%}.mensagem-reply p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-reply-principal{border-left:3px solid transparent;background-color:rgba(100,100,100,.1)}.message-reply-principal:hover{background-color:rgba(100,100,100,.2)}.message-reply-outros{background-color:#f5f5f5;border-left:3px solid var(--message-color)}.message-reply-outros:hover{background-color:#ebebeb}.mensagem-reply-vazia{display:flex;align-items:center}.mensagem-reply-vazia svg{margin-right:5px;color:#ba181b}.mensagem{padding:14px 7px;border-radius:5px;min-width:150px;min-height:60px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;max-width:80%;margin-bottom:10px;font-size:.75rem;word-break:break-word;-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);-moz-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.mensagem.max-w-60{max-width:60%}.mensagem.mapa{width:100%}.mensagem.hist-msg{animation:show 1s}.mensagem a{margin-right:5px;font-weight:550;color:inherit;text-decoration:none}.mensagem a:hover{text-decoration:underline}.message p{white-space:pre-wrap}.mensagem-anexo a,.mensagem-div-mapa a{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.reply{cursor:pointer;position:absolute;right:53px;bottom:5px;font-size:.6rem;color:#67a332;width:.9rem;height:.9rem;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#fff}.reply svg{margin-top:-1px;margin-right:-1px}.reply-with-2-icons{right:30px}.check{cursor:pointer;position:absolute;right:10px;bottom:2px;font-size:.7rem}.check.visualizado,.check.visualizado svg{color:#006daa}.check.verde,.check.verde svg{color:#4f772d}.check.vermelho,.check.vermelho svg{color:#ba181b}.check.cinza,.check.cinza svg{color:#999}.check.preto,.check.preto svg{color:#666}.star{cursor:pointer;position:absolute;right:30px;bottom:2px;font-size:.4rem;width:11.2px}.default-stick-size{width:180px;height:auto}.horario-envio{margin-right:15px;font-size:.7rem;position:absolute;left:10px;bottom:2px}.autor-mensagem{position:absolute;font-size:.6rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:90%;font-weight:700;top:2px}.mensagem__principal{width:100%;display:flex;justify-content:flex-end}.mensagem__principal>.mensagem::after{content:\"\";width:0;height:0;position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid var(--message-color);bottom:5px;right:-10px;transform:rotate(-90deg)}.mensagem__principal>.mensagem{background-color:var(--message-color);color:var(--text-color)}.mensagem__principal>.mensagem .horario-envio{color:var(--text-color)}.mensagem__principal>.mensagem .autor-mensagem{right:5px;color:var(--text-color)}.mensagem__outros{width:100%;display:flex}.mensagem__outros>.mensagem{background-color:#fff;color:#333}.mensagem__outros>.mensagem::after{content:\"\";width:0;height:0;position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #fff;bottom:5px;left:-10px;transform:rotate(90deg)}.mensagem__outros>.autor-mensagem{left:5px;color:#333}.mensagem-div-mapa{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;margin-bottom:5px}.msg-mapa{width:100%;min-height:225px;height:100%;box-sizing:initial}.msg-mapa img{max-width:none!important}.info-mapa{list-style-type:none}.info-mapa li.title{font-size:.85em}.info-mapa li.address,.info-mapa li.url{font-size:.85em}.info-mapa li.url{font-size:.85em}.tooltip-list{margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}",
+  inject("data-v-08bbf94d_0", {
+    source: ":root{--message-color:#373737;--text-color:#FFF;--files-bg:rgba(255, 255, 255, 0.1);--files-bg-hover:rgba(255, 255, 255, 0.1);--light:80;--threshold:60}.fade-enter-active,.fade-leave-active{transition:opacity .5s}.fade-enter,.fade-leave-to{opacity:0}.mensagem-reply{padding:5px 10px;font-size:.75rem;color:#666;transition:background-color 150ms ease-in-out;border-radius:5px;margin:5px 0;overflow:hidden;max-width:100%}.mensagem-reply p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-reply-principal{border-left:3px solid transparent;background-color:rgba(100,100,100,.1)}.message-reply-principal:hover{background-color:rgba(100,100,100,.2)}.message-reply-outros{background-color:#f5f5f5;border-left:3px solid var(--message-color)}.message-reply-outros:hover{background-color:#ebebeb}.mensagem-reply-vazia{display:flex;align-items:center}.mensagem-reply-vazia svg{margin-right:5px;color:#ba181b}.mensagem{padding:14px 7px;border-radius:5px;min-width:150px;min-height:60px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;max-width:80%;margin-bottom:10px;font-size:.75rem;word-break:break-word;-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);-moz-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.mensagem.max-w-60{max-width:60%}.mensagem.mapa{width:100%}.mensagem.hist-msg{animation:show 1s}.mensagem a{margin-right:5px;font-weight:550;color:inherit;text-decoration:none}.mensagem a:hover{text-decoration:underline}.message p{white-space:pre-wrap}.mensagem:hover .menu-primario{visibility:visible;opacity:1}.mensagem-anexo a,.mensagem-div-mapa a{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.reply{cursor:pointer;position:absolute;right:53px;bottom:5px;font-size:.6rem;color:#67a332;width:.9rem;height:.9rem;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#fff}.reply svg{margin-top:-1px;margin-right:-1px}.reply-with-2-icons{right:30px}.check{cursor:pointer;position:absolute;right:10px;bottom:2px;font-size:.7rem}.check.visualizado,.check.visualizado svg{color:#006daa}.check.verde,.check.verde svg{color:#4f772d}.check.vermelho,.check.vermelho svg{color:#ba181b}.check.cinza,.check.cinza svg{color:#999}.check.preto,.check.preto svg{color:#666}.star{cursor:pointer;position:absolute;right:30px;bottom:2px;font-size:.4rem;width:11.2px}.default-stick-size{width:180px;height:auto}.horario-envio{margin-right:15px;font-size:.7rem;position:absolute;left:10px;bottom:2px}.autor-mensagem{position:absolute;font-size:.6rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:90%;font-weight:700;top:2px}.menu-primario{visibility:hidden;opacity:0;transition:opacity 150ms ease-in-out;position:absolute;font-size:.7rem;top:4px;display:flex;gap:5px}.menu-primario.principal{left:4px;color:var(--text-color)}.menu-primario.outros{right:4px;color:var(--text-color)}.menu-primario.outros>span:nth-child(1){order:10}.menu-mensagem{cursor:pointer;padding:1px}.menu-flutuante{background-color:#fff;-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);-moz-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);border-radius:10px;position:absolute;top:20px;width:200px;min-height:100px;height:100px;max-height:100px;overflow-x:hidden;overflow-y:auto;margin:0;padding:0;display:flex;flex-direction:column}.menu-flutuante.principal{left:3px}.menu-flutuante.outros{right:3px}.menu-flutuante li{transition:background-color .3s ease-in-out;width:100%;cursor:pointer;padding:5px 10px;display:flex;align-items:center}.menu-flutuante li:hover{background-color:#e9e9e9}.mensagem__principal{width:100%;display:flex;justify-content:flex-end}.mensagem__principal>.mensagem::after{content:\"\";width:0;height:0;position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid var(--message-color);bottom:5px;right:-10px;transform:rotate(-90deg)}.mensagem__principal>.mensagem{background-color:var(--message-color);color:var(--text-color)}.mensagem__principal>.mensagem .horario-envio{color:var(--text-color)}.mensagem__principal>.mensagem .autor-mensagem{right:5px;color:var(--text-color)}.mensagem__outros{width:100%;display:flex}.mensagem__outros>.mensagem{background-color:#fff;color:#333}.mensagem__outros>.mensagem::after{content:\"\";width:0;height:0;position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #fff;bottom:5px;left:-10px;transform:rotate(90deg)}.mensagem__outros>.autor-mensagem{left:5px;color:#333}.mensagem-div-mapa{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;margin-bottom:5px}.msg-mapa{width:100%;min-height:225px;height:100%;box-sizing:initial}.msg-mapa img{max-width:none!important}.info-mapa{list-style-type:none}.info-mapa li.title{font-size:.85em}.info-mapa li.address,.info-mapa li.url{font-size:.85em}.info-mapa li.url{font-size:.85em}.tooltip-list{margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}",
     map: undefined,
     media: undefined
   });
@@ -12909,7 +12992,7 @@ var __vue_inject_styles__$5 = function __vue_inject_styles__(inject) {
 var __vue_scope_id__$5 = undefined;
 /* module identifier */
 
-var __vue_module_identifier__$5 = "data-v-46fa6d7c";
+var __vue_module_identifier__$5 = "data-v-08bbf94d";
 /* functional template */
 
 var __vue_is_functional_template__$5 = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-intergrall-plugins",
-  "version": "0.0.282",
+  "version": "0.0.283",
   "description": "",
   "main": "dist/vue-intergrall-plugins.ssr.js",
   "browser": "dist/vue-intergrall-plugins.esm.js",

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

@@ -1,5 +1,7 @@
 <template>
-  <div :class="'mensagem__'+origem" v-if="origem && !erro" :id="`a${messageIndex ? messageIndex : randomizeValue}`">
+  <div 
+    :class="'mensagem__'+origem" v-if="origem && !erro" :id="`a${messageIndex ? messageIndex : randomizeValue}`"
+  >
     <InteratividadeFormulario 
         v-if="interatividade && validateInterativity()"
         :interatividade="interatividade"
@@ -8,7 +10,12 @@
         :anexos="anexos"
         :dictionary="dictionary"
       />
-    <div v-else class="mensagem" :class="{mapa, 'hist-msg' : histMsg, 'max-w-60' : link && !mapa}">
+    <div 
+      v-else 
+      class="mensagem" 
+      :class="{mapa, 'hist-msg' : histMsg, 'max-w-60' : link && !mapa}"
+    >
+      <!-- Estilo da mensagem do tipo reply (que foi respondida) -->
       <div v-if="isReply && replyMessage" class="mensagem-reply" :class="`message-reply-${origem}`">
         <p v-if="replyMessage" v-html="replyMessage"></p>
         <span v-else class="mensagem-reply-vazia">
@@ -16,12 +23,15 @@
           {{ defaultReplyMessage ? defaultReplyMessage : dictionary.mensagem_reply_padrao }}
         </span>
       </div>
+      <!-- Anexos -->
       <template v-if="anexos && anexos.length">
         <div class="mensagem-anexo" v-for="(anexo, index) in anexos" :key="index">
           <AnexoMensagem :showControlFiles="showControlFiles" :referenceSelector="referenceSelector" :dictionary="dictionary" :anexo="anexo" :origemExterna="origemExterna" :dominio="dominio" @abrir-imagem="abrirImagem" @download-all="$emit('download-all')"/>
         </div>
       </template>
+      <!-- sticker -->
       <img class="default-stick-size" v-if="urlSticker" :src="urlSticker" :title="urlFileName">
+      <!-- Mapa -->
       <div v-if="mapa" class="mensagem-div-mapa">
         <GmapMap
           :id="`mapa_${seq}`"
@@ -39,16 +49,22 @@
           </li>
         </ul>
       </div>
+      <!-- Preview do link -->
       <LinkPreview v-if="link && !mapa && status != 'O'" :message="message" />
+      <!-- Mensagem -->
       <p v-html="validateInterativity() ? '' : formatMsg(message)"></p>
+      <!-- Botoes da interatividade -->
       <InteratividadeBotoes 
         v-if="interatividade"
         :interatividade="interatividade"
       />
+      <!-- Horario da mensagem -->
       <span class="horario-envio" v-text="horario"></span>
+      <!-- Reenviar mensagem -->
       <transition name="fade" mode="out-in">
         <span :class="reply" v-if="hasReply && (status == 'C' || status == 'T' || status == 'ERRO')" v-tippy :content="msgReply ? msgReply : 'Fazer reenvio da mensagem'" @click="$emit('replyMsg')"> <fa-icon :icon="['fas', 'reply']" /> </span> 
       </transition>
+      <!-- ?? -->
       <transition name="fade" mode="out-in" v-if="validadeSeq">
         <span class="star dourado" v-if="iniDialogo > 0" :content="contentTooltipStar" v-tippy key="star-padrao-dourado">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
@@ -61,6 +77,7 @@
           </svg>
         </span>
       </transition>
+      <!-- Status da mensagem -->
       <transition name="fade" mode="out-in">
         <span class="check" v-if="status == 'D'" :content="contentTooltip" v-tippy key="check-padrao"> <fa-icon :icon="['fas', 'check']" /> </span>
         <span class="check cinza" v-else-if="status == 'Q'" :content="contentTooltip" v-tippy key="check-cinza"> <fa-icon :icon="['fas', 'check']" /> </span>
@@ -71,8 +88,24 @@
         <span class="check vermelho" v-else-if="status == 'T'" :content="contentTooltip" v-tippy key="hourglass"> <fa-icon :icon="['fas', 'hourglass']" /> </span> <!-- Status finalizador -->
         <span class="check vermelho" v-else-if="status == 'O'" :content="contentTooltip" v-tippy key="deleted"> <fa-icon :icon="['fas', 'times']" /> </span> <!-- Status de mensagem deletada -->
       </transition>
-
+      <!-- Autor da mensagem -->
       <span class="autor-mensagem" v-html="autor"></span>
+      <!-- Menu de opcoes da mensagem -->
+      <div class="menu-primario" :class="origem">
+        <span class="menu-mensagem" @click="toggleIsMenuOpen" v-tippy content="Mais">
+          <fa-icon :icon="['fas', 'chevron-down']" />
+        </span>
+        <span class="menu-mensagem" @click="responderMensagemHandler" v-tippy :content="dictionary.tit_responder_msg">
+          <fa-icon :icon="['fas', 'reply']" />
+        </span>
+      </div>
+      <transition name="fade" mode="out-in" v-if="isMenuOpen">
+        <ul class="menu-flutuante" :class="origem" v-on-clickaway="closeMenu">
+          <li @click="responderMensagemHandler">
+            <span> {{ dictionary.tit_responder_msg }} </span>
+          </li>
+        </ul>
+      </transition>
     </div>
   </div>
 </template>
@@ -83,6 +116,7 @@ import InteratividadeBotoes from "./InteratividadeBotoes"
 import InteratividadeFormulario from "./InteratividadeFormulario"
 import { formataTimezoneData } from "../../services/textFormatting"
 import LinkPreview from './LinkPreview'
+import { mixin as clickaway } from 'vue-clickaway'
 
 export default {
   components: { AnexoMensagem, InteratividadeBotoes, InteratividadeFormulario, LinkPreview },
@@ -90,6 +124,7 @@ export default {
   created() {
     if(!this.$root.$refs.chatMessages) this.$root.$refs.chatMessages = this
   },
+  mixins: [clickaway],
   data(){
     return{
       strTooltipAux: "",
@@ -110,7 +145,9 @@ export default {
         rotateControl: false,
         fullscreenControl: false,
         disableDefaultUI: false
-      }
+      },
+      isMenuOpen: false,
+      showMenuOptions: false
     }
   },
   computed: {
@@ -164,6 +201,33 @@ export default {
     this.validadeUrlToMsg()
   },
   methods: {
+    closeMenu() {
+      this.isMenuOpen = false
+    },
+    toggleIsMenuOpen() {
+      this.isMenuOpen = !this.isMenuOpen
+    },
+    responderMensagemHandler() {
+      if(this.isMenuOpen) this.closeMenu()
+      this.$emit('responder-mensagem', {
+        messageIndex: this.messageIndex,
+        autor: this.autor,
+        origem: this.origem,
+        msg: this.msg,
+        anexo: this.anexo,
+        imgAnexo: this.imgAnexo,
+        tipoDoc: this.tipoDoc,
+        docAnexo: this.docAnexo,
+        nomeArquivo: this.nomeArquivo,
+        audio: this.audio,
+        video: this.video,
+        seq: this.seq,
+        mapa: this.mapa,
+        anexos: this.anexos,
+        interatividade: this.interatividade,
+        referenceSelector: this.referenceSelector,
+      })
+    },
     validateInterativity(){
       try {
         if(this.interatividade && (this.interatividade.formulario && this.interatividade.formulario.length) || (this.interatividade.list && this.interatividade.tipo == 'listItem')){
@@ -388,6 +452,10 @@ export default {
   .message p {
     white-space: pre-wrap;
   }
+  .mensagem:hover .menu-primario {
+    visibility: visible;
+    opacity: 1;
+  }
 
   .mensagem-anexo a, .mensagem-div-mapa a {
     white-space: nowrap;
@@ -470,6 +538,76 @@ export default {
     font-weight: bold;
     top: 2px;
   }
+
+  .menu-primario {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 150ms ease-in-out;
+    position: absolute;
+    font-size: 0.7rem;
+    top: 4px;
+    display: flex;
+    gap: 5px;
+  }
+  .menu-primario.principal {
+    left: 4px;
+    color: var(--text-color)
+  }
+  .menu-primario.outros {
+    right: 4px;
+    color: var(--text-color);
+  }
+
+  .menu-primario.outros > span:nth-child(1) {
+    order: 10;
+  }
+
+  .menu-mensagem {
+    cursor: pointer;
+    padding: 1px;
+  }
+
+  .menu-flutuante {
+    background-color: #FFF;
+    -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    border-radius: 10px;
+    position: absolute;
+    top: 20px;
+    width: 200px;
+    min-height: 100px;
+    height: 100px;
+    max-height: 100px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .menu-flutuante.principal {
+    left: 3px
+  }
+
+  .menu-flutuante.outros {
+    right: 3px
+  }
+
+  .menu-flutuante li {
+    transition: background-color 300ms ease-in-out;
+    width: 100%;
+    cursor: pointer;
+    padding: 5px 10px;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-flutuante li:hover {
+    background-color: #e9e9e9;
+  }
+
   /* Principal */
   .mensagem__principal {
     width: 100%;