vue-intergrall-plugins 0.0.293 → 0.0.294

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/vue-intergrall-plugins.esm.js +96 -20
  2. package/dist/vue-intergrall-plugins.min.js +1 -1
  3. package/dist/vue-intergrall-plugins.ssr.js +94 -21
  4. package/package.json +1 -1
  5. package/src/lib-components/Messages/ChatMessages.vue +824 -509
package/src/lib-components/Messages/ChatMessages.vue CHANGED
@@ -1,36 +1,58 @@
1
1
  <template>
2
- <div
3
- :class="'mensagem__'+origem" v-if="origem && !erro" :id="`a${messageIndex ? messageIndex : randomizeValue}`"
2
+ <div
3
+ :class="'mensagem__' + origem"
4
+ v-if="origem && !erro"
5
+ :id="`a${messageIndex ? messageIndex : randomizeValue}`"
4
6
  >
5
- <InteratividadeFormulario
6
- v-if="interatividade && validateInterativity()"
7
- :interatividade="interatividade"
8
- :dominio="dominio"
9
- :infoCanal="infoCanalTeste"
10
- :anexos="anexos"
11
- :dictionary="dictionary"
12
- />
13
- <div
14
- v-else
15
- class="mensagem"
16
- :class="{mapa, 'hist-msg' : histMsg, 'max-w-60' : link && !mapa}"
7
+ <InteratividadeFormulario
8
+ v-if="interatividade && validateInterativity()"
9
+ :interatividade="interatividade"
10
+ :dominio="dominio"
11
+ :infoCanal="infoCanalTeste"
12
+ :anexos="anexos"
13
+ :dictionary="dictionary"
14
+ />
15
+ <div
16
+ v-else
17
+ class="mensagem"
18
+ :class="{ mapa, 'hist-msg': histMsg, 'max-w-60': link && !mapa }"
17
19
  >
18
20
  <!-- Estilo da mensagem do tipo reply (que foi respondida) -->
19
- <div v-if="isReply && replyMessage" class="mensagem-reply" :class="`message-reply-${origem}`">
21
+ <div
22
+ v-if="isReply && replyMessage"
23
+ class="mensagem-reply"
24
+ :class="`message-reply-${origem}`"
25
+ >
20
26
  <p v-if="replyMessage" v-html="replyMessage"></p>
21
27
  <span v-else class="mensagem-reply-vazia">
22
28
  <fa-icon :icon="['fas', 'times']" v-if="showReplyIcon" />
23
- {{ defaultReplyMessage ? defaultReplyMessage : dictionary.mensagem_reply_padrao }}
29
+ {{
30
+ defaultReplyMessage ? defaultReplyMessage : dictionary.mensagem_reply_padrao
31
+ }}
24
32
  </span>
25
33
  </div>
26
34
  <!-- Anexos -->
27
35
  <template v-if="anexos && anexos.length">
28
36
  <div class="mensagem-anexo" v-for="(anexo, index) in anexos" :key="index">
29
- <AnexoMensagem :showControlFiles="showControlFiles" :referenceSelector="referenceSelector" :dictionary="dictionary" :anexo="anexo" :origemExterna="origemExterna" :dominio="dominio" @abrir-imagem="abrirImagem" @download-all="$emit('download-all')"/>
37
+ <AnexoMensagem
38
+ :showControlFiles="showControlFiles"
39
+ :referenceSelector="referenceSelector"
40
+ :dictionary="dictionary"
41
+ :anexo="anexo"
42
+ :origemExterna="origemExterna"
43
+ :dominio="dominio"
44
+ @abrir-imagem="abrirImagem"
45
+ @download-all="$emit('download-all')"
46
+ />
30
47
  </div>
31
48
  </template>
32
49
  <!-- sticker -->
33
- <img class="default-stick-size" v-if="urlSticker" :src="urlSticker" :title="urlFileName">
50
+ <img
51
+ class="default-stick-size"
52
+ v-if="urlSticker"
53
+ :src="urlSticker"
54
+ :title="urlFileName"
55
+ />
34
56
  <!-- Mapa -->
35
57
  <div v-if="mapa" class="mensagem-div-mapa">
36
58
  <GmapMap
@@ -39,13 +61,15 @@
39
61
  :center="center"
40
62
  :zoom="17"
41
63
  :options="mapOptions"
42
- >
64
+ >
43
65
  <GmapMarker :position="marker" />
44
66
  </GmapMap>
45
67
  <ul class="info-mapa" v-if="infos.length">
46
68
  <li v-for="(info, index) in infos" :key="index" :class="info.classe">
47
69
  <template v-if="!info.link"> {{ info.value }} </template>
48
- <a v-else :href="info.value" @click.prevent="abrirPopup(info.value)"> {{ info.textLink }} <fa-icon :icon="['fas', 'map-marker-alt']" /> </a>
70
+ <a v-else :href="info.value" @click.prevent="abrirPopup(info.value)">
71
+ {{ info.textLink }} <fa-icon :icon="['fas', 'map-marker-alt']" />
72
+ </a>
49
73
  </li>
50
74
  </ul>
51
75
  </div>
@@ -54,39 +78,130 @@
54
78
  <!-- Mensagem -->
55
79
  <p v-html="validateInterativity() ? '' : formatMsg(message)"></p>
56
80
  <!-- Botoes da interatividade -->
57
- <InteratividadeBotoes
58
- v-if="interatividade"
59
- :interatividade="interatividade"
60
- />
81
+ <InteratividadeBotoes v-if="interatividade" :interatividade="interatividade" />
61
82
  <!-- Horario da mensagem -->
62
83
  <span class="horario-envio" v-text="horario"></span>
63
84
  <!-- Reenviar mensagem -->
64
85
  <transition name="fade" mode="out-in">
65
- <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>
86
+ <span
87
+ :class="reply"
88
+ v-if="hasReply && (status == 'C' || status == 'T' || status == 'ERRO')"
89
+ v-tippy
90
+ :content="msgReply ? msgReply : 'Fazer reenvio da mensagem'"
91
+ @click="$emit('replyMsg')"
92
+ >
93
+ <fa-icon :icon="['fas', 'reply']" />
94
+ </span>
66
95
  </transition>
67
96
  <!-- ?? -->
68
97
  <transition name="fade" mode="out-in" v-if="validadeSeq">
69
- <span class="star dourado" v-if="iniDialogo > 0" :content="contentTooltipStar" v-tippy key="star-padrao-dourado">
98
+ <span
99
+ class="star dourado"
100
+ v-if="iniDialogo > 0"
101
+ :content="contentTooltipStar"
102
+ v-tippy
103
+ key="star-padrao-dourado"
104
+ >
70
105
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
71
- <path fill="#FFD700" d="M224 122.8c-72.7 0-131.8 59.1-131.9 131.8 0 24.9 7 49.2 20.2 70.1l3.1 5-13.3 48.6 49.9-13.1 4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8 0-35.2-15.2-68.3-40.1-93.2-25-25-58-38.7-93.2-38.7zm77.5 188.4c-3.3 9.3-19.1 17.7-26.7 18.8-12.6 1.9-22.4.9-47.5-9.9-39.7-17.2-65.7-57.2-67.7-59.8-2-2.6-16.2-21.5-16.2-41s10.2-29.1 13.9-33.1c3.6-4 7.9-5 10.6-5 2.6 0 5.3 0 7.6.1 2.4.1 5.7-.9 8.9 6.8 3.3 7.9 11.2 27.4 12.2 29.4s1.7 4.3.3 6.9c-7.6 15.2-15.7 14.6-11.6 21.6 15.3 26.3 30.6 35.4 53.9 47.1 4 2 6.3 1.7 8.6-1 2.3-2.6 9.9-11.6 12.5-15.5 2.6-4 5.3-3.3 8.9-2 3.6 1.3 23.1 10.9 27.1 12.9s6.6 3 7.6 4.6c.9 1.9.9 9.9-2.4 19.1zM400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM223.9 413.2c-26.6 0-52.7-6.7-75.8-19.3L64 416l22.5-82.2c-13.9-24-21.2-51.3-21.2-79.3C65.4 167.1 136.5 96 223.9 96c42.4 0 82.2 16.5 112.2 46.5 29.9 30 47.9 69.8 47.9 112.2 0 87.4-72.7 158.5-160.1 158.5z"/>
106
+ <path
107
+ fill="#FFD700"
108
+ d="M224 122.8c-72.7 0-131.8 59.1-131.9 131.8 0 24.9 7 49.2 20.2 70.1l3.1 5-13.3 48.6 49.9-13.1 4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8 0-35.2-15.2-68.3-40.1-93.2-25-25-58-38.7-93.2-38.7zm77.5 188.4c-3.3 9.3-19.1 17.7-26.7 18.8-12.6 1.9-22.4.9-47.5-9.9-39.7-17.2-65.7-57.2-67.7-59.8-2-2.6-16.2-21.5-16.2-41s10.2-29.1 13.9-33.1c3.6-4 7.9-5 10.6-5 2.6 0 5.3 0 7.6.1 2.4.1 5.7-.9 8.9 6.8 3.3 7.9 11.2 27.4 12.2 29.4s1.7 4.3.3 6.9c-7.6 15.2-15.7 14.6-11.6 21.6 15.3 26.3 30.6 35.4 53.9 47.1 4 2 6.3 1.7 8.6-1 2.3-2.6 9.9-11.6 12.5-15.5 2.6-4 5.3-3.3 8.9-2 3.6 1.3 23.1 10.9 27.1 12.9s6.6 3 7.6 4.6c.9 1.9.9 9.9-2.4 19.1zM400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM223.9 413.2c-26.6 0-52.7-6.7-75.8-19.3L64 416l22.5-82.2c-13.9-24-21.2-51.3-21.2-79.3C65.4 167.1 136.5 96 223.9 96c42.4 0 82.2 16.5 112.2 46.5 29.9 30 47.9 69.8 47.9 112.2 0 87.4-72.7 158.5-160.1 158.5z"
109
+ />
72
110
  </svg>
73
111
  </span>
74
- <span class="star cinza" v-if="iniDialogo == 0" :content="contentTooltipStar" v-tippy key="star-padrao-cinza">
112
+ <span
113
+ class="star cinza"
114
+ v-if="iniDialogo == 0"
115
+ :content="contentTooltipStar"
116
+ v-tippy
117
+ key="star-padrao-cinza"
118
+ >
75
119
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
76
- <path fill="#808080" d="M224 122.8c-72.7 0-131.8 59.1-131.9 131.8 0 24.9 7 49.2 20.2 70.1l3.1 5-13.3 48.6 49.9-13.1 4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8 0-35.2-15.2-68.3-40.1-93.2-25-25-58-38.7-93.2-38.7zm77.5 188.4c-3.3 9.3-19.1 17.7-26.7 18.8-12.6 1.9-22.4.9-47.5-9.9-39.7-17.2-65.7-57.2-67.7-59.8-2-2.6-16.2-21.5-16.2-41s10.2-29.1 13.9-33.1c3.6-4 7.9-5 10.6-5 2.6 0 5.3 0 7.6.1 2.4.1 5.7-.9 8.9 6.8 3.3 7.9 11.2 27.4 12.2 29.4s1.7 4.3.3 6.9c-7.6 15.2-15.7 14.6-11.6 21.6 15.3 26.3 30.6 35.4 53.9 47.1 4 2 6.3 1.7 8.6-1 2.3-2.6 9.9-11.6 12.5-15.5 2.6-4 5.3-3.3 8.9-2 3.6 1.3 23.1 10.9 27.1 12.9s6.6 3 7.6 4.6c.9 1.9.9 9.9-2.4 19.1zM400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM223.9 413.2c-26.6 0-52.7-6.7-75.8-19.3L64 416l22.5-82.2c-13.9-24-21.2-51.3-21.2-79.3C65.4 167.1 136.5 96 223.9 96c42.4 0 82.2 16.5 112.2 46.5 29.9 30 47.9 69.8 47.9 112.2 0 87.4-72.7 158.5-160.1 158.5z"/>
120
+ <path
121
+ fill="#808080"
122
+ d="M224 122.8c-72.7 0-131.8 59.1-131.9 131.8 0 24.9 7 49.2 20.2 70.1l3.1 5-13.3 48.6 49.9-13.1 4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8 0-35.2-15.2-68.3-40.1-93.2-25-25-58-38.7-93.2-38.7zm77.5 188.4c-3.3 9.3-19.1 17.7-26.7 18.8-12.6 1.9-22.4.9-47.5-9.9-39.7-17.2-65.7-57.2-67.7-59.8-2-2.6-16.2-21.5-16.2-41s10.2-29.1 13.9-33.1c3.6-4 7.9-5 10.6-5 2.6 0 5.3 0 7.6.1 2.4.1 5.7-.9 8.9 6.8 3.3 7.9 11.2 27.4 12.2 29.4s1.7 4.3.3 6.9c-7.6 15.2-15.7 14.6-11.6 21.6 15.3 26.3 30.6 35.4 53.9 47.1 4 2 6.3 1.7 8.6-1 2.3-2.6 9.9-11.6 12.5-15.5 2.6-4 5.3-3.3 8.9-2 3.6 1.3 23.1 10.9 27.1 12.9s6.6 3 7.6 4.6c.9 1.9.9 9.9-2.4 19.1zM400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM223.9 413.2c-26.6 0-52.7-6.7-75.8-19.3L64 416l22.5-82.2c-13.9-24-21.2-51.3-21.2-79.3C65.4 167.1 136.5 96 223.9 96c42.4 0 82.2 16.5 112.2 46.5 29.9 30 47.9 69.8 47.9 112.2 0 87.4-72.7 158.5-160.1 158.5z"
123
+ />
77
124
  </svg>
78
125
  </span>
79
126
  </transition>
80
127
  <!-- Status da mensagem -->
81
128
  <transition name="fade" mode="out-in">
82
- <span class="check" v-if="status == 'D'" :content="contentTooltip" v-tippy key="check-padrao"> <fa-icon :icon="['fas', 'check']" /> </span>
83
- <span class="check cinza" v-else-if="status == 'Q'" :content="contentTooltip" v-tippy key="check-cinza"> <fa-icon :icon="['fas', 'check']" /> </span>
84
- <span class="check preto" v-else-if="status == 'G'" :content="contentTooltip" v-tippy key="check-preto"> <fa-icon :icon="['fas', 'check']" /> </span>
85
- <span class="check preto" v-else-if="status == 'E'" :content="contentTooltip" v-tippy key="double-check-preto"> <fa-icon :icon="['fas', 'check-double']" /> </span>
86
- <span class="check visualizado" v-else-if="status == 'L'" :content="contentTooltip" v-tippy key="double-check-visualizado"> <fa-icon :icon="['fas', 'check-double']" /> </span> <!-- Status finalizador -->
87
- <span class="check vermelho" v-else-if="status == 'C' || status == 'ERRO'" :content="contentTooltip" v-tippy key="times-circle"> <fa-icon :icon="['fas', 'times-circle']" /> </span> <!-- Status finalizador -->
88
- <span class="check vermelho" v-else-if="status == 'T'" :content="contentTooltip" v-tippy key="hourglass"> <fa-icon :icon="['fas', 'hourglass']" /> </span> <!-- Status finalizador -->
89
- <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 -->
129
+ <span
130
+ class="check"
131
+ v-if="status == 'D'"
132
+ :content="contentTooltip"
133
+ v-tippy
134
+ key="check-padrao"
135
+ >
136
+ <fa-icon :icon="['fas', 'check']" />
137
+ </span>
138
+ <span
139
+ class="check cinza"
140
+ v-else-if="status == 'Q'"
141
+ :content="contentTooltip"
142
+ v-tippy
143
+ key="check-cinza"
144
+ >
145
+ <fa-icon :icon="['fas', 'check']" />
146
+ </span>
147
+ <span
148
+ class="check preto"
149
+ v-else-if="status == 'G'"
150
+ :content="contentTooltip"
151
+ v-tippy
152
+ key="check-preto"
153
+ >
154
+ <fa-icon :icon="['fas', 'check']" />
155
+ </span>
156
+ <span
157
+ class="check preto"
158
+ v-else-if="status == 'E'"
159
+ :content="contentTooltip"
160
+ v-tippy
161
+ key="double-check-preto"
162
+ >
163
+ <fa-icon :icon="['fas', 'check-double']" />
164
+ </span>
165
+ <span
166
+ class="check visualizado"
167
+ v-else-if="status == 'L'"
168
+ :content="contentTooltip"
169
+ v-tippy
170
+ key="double-check-visualizado"
171
+ >
172
+ <fa-icon :icon="['fas', 'check-double']" />
173
+ </span>
174
+ <!-- Status finalizador -->
175
+ <span
176
+ class="check vermelho"
177
+ v-else-if="status == 'C' || status == 'ERRO'"
178
+ :content="contentTooltip"
179
+ v-tippy
180
+ key="times-circle"
181
+ >
182
+ <fa-icon :icon="['fas', 'times-circle']" />
183
+ </span>
184
+ <!-- Status finalizador -->
185
+ <span
186
+ class="check vermelho"
187
+ v-else-if="status == 'T'"
188
+ :content="contentTooltip"
189
+ v-tippy
190
+ key="hourglass"
191
+ >
192
+ <fa-icon :icon="['fas', 'hourglass']" />
193
+ </span>
194
+ <!-- Status finalizador -->
195
+ <span
196
+ class="check vermelho"
197
+ v-else-if="status == 'O'"
198
+ :content="contentTooltip"
199
+ v-tippy
200
+ key="deleted"
201
+ >
202
+ <fa-icon :icon="['fas', 'times']" />
203
+ </span>
204
+ <!-- Status de mensagem deletada -->
90
205
  </transition>
91
206
  <!-- Autor da mensagem -->
92
207
  <span class="autor-mensagem" v-html="autor"></span>
@@ -95,38 +210,120 @@
95
210
  <!-- <span class="menu-mensagem" @click="toggleIsMenuOpen" v-tippy :content="dictionary.tit_mais_msg">
96
211
  <fa-icon :icon="['fas', 'chevron-down']" />
97
212
  </span> -->
98
- <span class="menu-mensagem" @click="responderMensagemHandler" v-tippy :content="dictionary.tit_responder_msg">
213
+ <span
214
+ class="menu-mensagem"
215
+ @click="responderMensagemHandler"
216
+ v-tippy
217
+ :content="dictionary.tit_responder_msg"
218
+ >
99
219
  <fa-icon :icon="['fas', 'reply']" />
100
220
  </span>
221
+ <span
222
+ class="menu-mensagem"
223
+ @click="reagirMensagemHandler"
224
+ v-tippy
225
+ :content="dictionary.tit_reagir_msg"
226
+ >
227
+ <fa-icon :icon="['fas', 'smile']" />
228
+ </span>
229
+ </div>
230
+ <div
231
+ class="emoji-message-container"
232
+ v-if="isEmojisOpen"
233
+ v-on-clickaway="closeEmojis"
234
+ >
235
+ <Picker @insert-emoji="addReaction" />
101
236
  </div>
102
237
  <transition name="fade" mode="out-in" v-if="isMenuOpen">
103
238
  <ul class="menu-flutuante" :class="origem" v-on-clickaway="closeMenu">
104
239
  <li @click="responderMensagemHandler">
105
240
  <span> {{ dictionary.tit_responder_msg }} </span>
106
241
  </li>
242
+ <li @click="reagirMensagemHandler">
243
+ <span> {{ dictionary.tit_reagir_msg }} </span>
244
+ </li>
107
245
  </ul>
108
246
  </transition>
247
+ <transition name="fade" mode="out-in" v-if="messageReaction">
248
+ <span
249
+ class="reaction"
250
+ v-tippy
251
+ :content="`${dictionary.tit_mensagem_reagida} ${messageReaction.finalEmoji}`"
252
+ >
253
+ <span v-html="messageReaction.finalEmoji"></span>
254
+ </span>
255
+ </transition>
109
256
  </div>
110
257
  </div>
111
258
  </template>
112
259
 
113
260
  <script>
114
- import AnexoMensagem from "./AnexoMensagem"
115
- import InteratividadeBotoes from "./InteratividadeBotoes"
116
- import InteratividadeFormulario from "./InteratividadeFormulario"
117
- import { formataTimezoneData } from "../../services/textFormatting"
118
- import LinkPreview from './LinkPreview'
119
- import { mixin as clickaway } from 'vue-clickaway'
261
+ import AnexoMensagem from "./AnexoMensagem";
262
+ import InteratividadeBotoes from "./InteratividadeBotoes";
263
+ import InteratividadeFormulario from "./InteratividadeFormulario";
264
+ import Picker from "../Chat/Picker";
265
+ import { formataTimezoneData } from "../../services/textFormatting";
266
+ import LinkPreview from "./LinkPreview";
267
+ import { mixin as clickaway } from "vue-clickaway";
120
268
 
121
269
  export default {
122
- components: { AnexoMensagem, InteratividadeBotoes, InteratividadeFormulario, LinkPreview },
123
- props: ["smartchannel", "messageIndex", "dictionary", "autor", "origem", "msg", "link", "anexo", "imgAnexo", "tipoDoc", "docAnexo", "nomeArquivo", "audio", "video", "horario", "status", "logo", "msgTooltip", "seq", "mapa", "histMsg", "erro", "msgErro", "origemExterna", "anexos", "dominio", "corMsg", "interatividade", "msgReply", "hasReply", "iniDialogo", "dialogoId", "dialogoOrigem", "expSessao", "referenceSelector", "replyMessage", "isReply", "defaultReplyMessage", "showReplyIcon", "showControlFiles", "showMenu", "id_ext_msg"],
270
+ components: {
271
+ AnexoMensagem,
272
+ InteratividadeBotoes,
273
+ InteratividadeFormulario,
274
+ LinkPreview,
275
+ Picker,
276
+ },
277
+ props: [
278
+ "smartchannel",
279
+ "messageIndex",
280
+ "dictionary",
281
+ "autor",
282
+ "origem",
283
+ "msg",
284
+ "link",
285
+ "anexo",
286
+ "imgAnexo",
287
+ "tipoDoc",
288
+ "docAnexo",
289
+ "nomeArquivo",
290
+ "audio",
291
+ "video",
292
+ "horario",
293
+ "status",
294
+ "logo",
295
+ "msgTooltip",
296
+ "seq",
297
+ "mapa",
298
+ "histMsg",
299
+ "erro",
300
+ "msgErro",
301
+ "origemExterna",
302
+ "anexos",
303
+ "dominio",
304
+ "corMsg",
305
+ "interatividade",
306
+ "msgReply",
307
+ "hasReply",
308
+ "iniDialogo",
309
+ "dialogoId",
310
+ "dialogoOrigem",
311
+ "expSessao",
312
+ "referenceSelector",
313
+ "replyMessage",
314
+ "isReply",
315
+ "defaultReplyMessage",
316
+ "showReplyIcon",
317
+ "showControlFiles",
318
+ "showMenu",
319
+ "id_ext_msg",
320
+ ],
124
321
  created() {
125
- if(!this.$root.$refs.chatMessages) this.$root.$refs.chatMessages = this
322
+ if (!this.$root.$refs.chatMessages) this.$root.$refs.chatMessages = this;
126
323
  },
127
324
  mixins: [clickaway],
128
- data(){
129
- return{
325
+ data() {
326
+ return {
130
327
  strTooltipAux: "",
131
328
  linkAux: "",
132
329
  urlSticker: "",
@@ -136,7 +333,11 @@ export default {
136
333
  center: {},
137
334
  marker: {},
138
335
  infos: [],
139
- infoCanalTeste: {PRAZO: "2022-05-05", SITUACAO: {cod: "3", desc: "Em analise pelo fornecedor", cor: "#03A64A"}, DATA_ABERTURA: "2022-05-03 09:43:43"},
336
+ infoCanalTeste: {
337
+ PRAZO: "2022-05-05",
338
+ SITUACAO: { cod: "3", desc: "Em analise pelo fornecedor", cor: "#03A64A" },
339
+ DATA_ABERTURA: "2022-05-03 09:43:43",
340
+ },
140
341
  mapOptions: {
141
342
  zoomControl: true,
142
343
  mapTypeControl: false,
@@ -144,72 +345,82 @@ export default {
144
345
  streetViewControl: false,
145
346
  rotateControl: false,
146
347
  fullscreenControl: false,
147
- disableDefaultUI: false
348
+ disableDefaultUI: false,
148
349
  },
149
350
  isMenuOpen: false,
150
- showMenuOptions: false
151
- }
351
+ showMenuOptions: false,
352
+ isEmojisOpen: false,
353
+ messageReaction: "",
354
+ };
152
355
  },
153
356
  computed: {
154
- hrefAnexo(){
155
- if(this.docAnexo){
156
- if(this.tipoDoc == "erro"){
157
- return this.hrefAnexo = "#"
158
- }else{
159
- return this.docAnexo
357
+ hrefAnexo() {
358
+ if (this.docAnexo) {
359
+ if (this.tipoDoc == "erro") {
360
+ return (this.hrefAnexo = "#");
361
+ } else {
362
+ return this.docAnexo;
160
363
  }
161
364
  }
162
365
  },
163
366
  randomizeValue() {
164
- return `${(Math.floor(Math.random() * 7770))}${Date.now()}`
367
+ return `${Math.floor(Math.random() * 7770)}${Date.now()}`;
165
368
  },
166
369
  contentTooltip: {
167
- get(){
168
- if(this.status && !this.msgTooltip){
169
- const msgStatus = "msg_status_"+this.status
170
- return this.strTooltipAux = this.dictionary[msgStatus]
171
- }else if(this.status && this.msgTooltip){
172
- return this.strTooltipAux = this.msgTooltip
370
+ get() {
371
+ if (this.status && !this.msgTooltip) {
372
+ const msgStatus = "msg_status_" + this.status;
373
+ return (this.strTooltipAux = this.dictionary[msgStatus]);
374
+ } else if (this.status && this.msgTooltip) {
375
+ return (this.strTooltipAux = this.msgTooltip);
173
376
  }
174
377
  },
175
- set(msg){
176
- return this.contentTooltip = msg
177
- }
378
+ set(msg) {
379
+ return (this.contentTooltip = msg);
380
+ },
178
381
  },
179
382
  contentTooltipStar() {
180
383
  let tooltipStar = "";
181
- if(this.iniDialogo == 1){
182
- tooltipStar += this.dictionary['ini_sessao']+"<br/>"
384
+ if (this.iniDialogo == 1) {
385
+ tooltipStar += this.dictionary["ini_sessao"] + "<br/>";
386
+ } else {
387
+ tooltipStar += this.dictionary["ini_sessao_padrao"] + "<br/>";
183
388
  }
184
- else {
185
- tooltipStar += this.dictionary['ini_sessao_padrao']+"<br/>"
186
- }
187
- tooltipStar += this.dialogoId ? this.dictionary['id_conversa']+" - "+ this.dialogoId +"<br/>" : ""
188
- tooltipStar += this.dialogoOrigem ? this.dictionary['origem_conversa']+" - "+ this.dialogoOrigem +"<br/>" : ""
189
- tooltipStar += this.expSessao ? this.dictionary['expiracao_sessao']+" - "+ formataTimezoneData(this.expSessao) +"<br/>" : ""
190
- return tooltipStar
389
+ tooltipStar += this.dialogoId
390
+ ? this.dictionary["id_conversa"] + " - " + this.dialogoId + "<br/>"
391
+ : "";
392
+ tooltipStar += this.dialogoOrigem
393
+ ? this.dictionary["origem_conversa"] + " - " + this.dialogoOrigem + "<br/>"
394
+ : "";
395
+ tooltipStar += this.expSessao
396
+ ? this.dictionary["expiracao_sessao"] +
397
+ " - " +
398
+ formataTimezoneData(this.expSessao) +
399
+ "<br/>"
400
+ : "";
401
+ return tooltipStar;
191
402
  },
192
- validadeSeq(){
193
- if(this.seq && this.seq.substring(0, 2) == "HW") return true
194
- this.reply = "reply reply-with-2-icons"
403
+ validadeSeq() {
404
+ if (this.seq && this.seq.substring(0, 2) == "HW") return true;
405
+ this.reply = "reply reply-with-2-icons";
195
406
  return false;
196
- }
407
+ },
197
408
  },
198
409
  mounted() {
199
- if(this.mapa) this.setMap()
200
- if(this.corMsg) this.setCorMsg()
201
- this.validadeUrlToMsg()
410
+ if (this.mapa) this.setMap();
411
+ if (this.corMsg) this.setCorMsg();
412
+ this.validadeUrlToMsg();
202
413
  },
203
414
  methods: {
204
415
  closeMenu() {
205
- this.isMenuOpen = false
416
+ this.isMenuOpen = false;
206
417
  },
207
418
  toggleIsMenuOpen() {
208
- this.isMenuOpen = !this.isMenuOpen
419
+ this.isMenuOpen = !this.isMenuOpen;
209
420
  },
210
421
  responderMensagemHandler() {
211
- if(this.isMenuOpen) this.closeMenu()
212
- this.$emit('responder-mensagem', {
422
+ if (this.isMenuOpen) this.closeMenu();
423
+ this.$emit("responder-mensagem", {
213
424
  messageIndex: this.messageIndex,
214
425
  autor: this.autor,
215
426
  origem: this.origem,
@@ -226,12 +437,37 @@ export default {
226
437
  anexos: this.anexos,
227
438
  interatividade: this.interatividade,
228
439
  referenceSelector: this.referenceSelector,
229
- id_ext_msg: this.id_ext_msg
230
- })
440
+ id_ext_msg: this.id_ext_msg,
441
+ });
231
442
  },
232
- validateInterativity(){
443
+ reagirMensagemHandler() {
444
+ if (this.isMenuOpen) this.closeMenu();
445
+ this.isEmojisOpen = !this.isEmojisOpen;
446
+ },
447
+ addReaction(emoji) {
448
+ this.messageReaction =
449
+ this.messageReaction && this.messageReaction.hexa === emoji.hexa
450
+ ? ""
451
+ : { hexa: emoji.hexa, finalEmoji: emoji.finalEmoji };
452
+ this.isEmojisOpen = false;
453
+ this.$emit("reagir-mensagem", {
454
+ emoji,
455
+ seq,
456
+ id_ext_msg,
457
+ hasEmojiReaction: this.messageReaction ? true : false,
458
+ });
459
+ },
460
+ closeEmojis() {
461
+ this.isEmojisOpen = false;
462
+ },
463
+ validateInterativity() {
233
464
  try {
234
- if(this.interatividade && (this.interatividade.formulario && this.interatividade.formulario.length) || (this.interatividade.list && this.interatividade.tipo == 'listItem')){
465
+ if (
466
+ (this.interatividade &&
467
+ this.interatividade.formulario &&
468
+ this.interatividade.formulario.length) ||
469
+ (this.interatividade.list && this.interatividade.tipo == "listItem")
470
+ ) {
235
471
  return true;
236
472
  }
237
473
  return false;
@@ -239,478 +475,557 @@ export default {
239
475
  return false;
240
476
  }
241
477
  },
242
- validadeUrlToMsg(){
478
+ validadeUrlToMsg() {
243
479
  try {
244
- this.message = this.msg
245
- if(this.validadeIfExistsSticker()){
246
- this.urlSticker = this.getUrlSticker()
247
- this.urlFileName = this.getUrlFileName()
248
- this.message = this.removeUrlStickerByString(this.urlSticker)
480
+ this.message = this.msg;
481
+ if (this.validadeIfExistsSticker()) {
482
+ this.urlSticker = this.getUrlSticker();
483
+ this.urlFileName = this.getUrlFileName();
484
+ this.message = this.removeUrlStickerByString(this.urlSticker);
249
485
  }
250
486
  } catch (error) {
251
- console.error("Error validating url to msg: ", error)
487
+ console.error("Error validating url to msg: ", error);
252
488
  }
253
489
  },
254
- getUrlFileName(){
490
+ getUrlFileName() {
255
491
  let urlRegex = /(?<=\/)[^\/\?#]+(?=[^\/]*$)/;
256
492
  let urlName = this.urlSticker.match(urlRegex)[0];
257
493
  return urlName;
258
494
  },
259
- removeUrlStickerByString(url){
260
- let msg = this.message.replace(`KSTICKERK ${url}`, '')
495
+ removeUrlStickerByString(url) {
496
+ let msg = this.message.replace(`KSTICKERK ${url}`, "");
261
497
  return msg;
262
498
  },
263
- getUrlSticker(){
499
+ getUrlSticker() {
264
500
  let urlRegex = /(https?:\/\/[^ ]*)/;
265
501
  let url = this.message.match(urlRegex)[1];
266
502
  return url;
267
503
  },
268
- validadeIfExistsSticker(){
269
- if(this.message && this.message.indexOf("KSTICKERK https://") === 0) return true
270
- return false
504
+ validadeIfExistsSticker() {
505
+ if (this.message && this.message.indexOf("KSTICKERK https://") === 0) return true;
506
+ return false;
271
507
  },
272
508
  setCorMsg() {
273
509
  try {
274
- const root = document.documentElement
275
- root.style.setProperty('--message-color', this.corMsg)
276
- this.adjustFontColor(this.corMsg)
277
- }catch(e) {
278
- console.error("Erro ao atribuir a cor as mensagens")
279
- console.error(e)
510
+ const root = document.documentElement;
511
+ root.style.setProperty("--message-color", this.corMsg);
512
+ this.adjustFontColor(this.corMsg);
513
+ } catch (e) {
514
+ console.error("Erro ao atribuir a cor as mensagens");
515
+ console.error(e);
280
516
  }
281
517
  },
282
518
  setMap() {
283
- let objMapa = typeof this.mapa === "string" ? JSON.parse(`${this.mapa}`) : this.mapa
284
- if(objMapa.latitude && objMapa.longitude) {
285
- objMapa.latitude = parseFloat(objMapa.latitude)
286
- objMapa.longitude = parseFloat(objMapa.longitude)
519
+ let objMapa =
520
+ typeof this.mapa === "string" ? JSON.parse(`${this.mapa}`) : this.mapa;
521
+ if (objMapa.latitude && objMapa.longitude) {
522
+ objMapa.latitude = parseFloat(objMapa.latitude);
523
+ objMapa.longitude = parseFloat(objMapa.longitude);
287
524
 
288
- this.center.lat = objMapa.latitude
289
- this.center.lng = objMapa.longitude
525
+ this.center.lat = objMapa.latitude;
526
+ this.center.lng = objMapa.longitude;
290
527
 
291
- this.marker.lat = objMapa.latitude
292
- this.marker.lng = objMapa.longitude
528
+ this.marker.lat = objMapa.latitude;
529
+ this.marker.lng = objMapa.longitude;
293
530
 
294
531
  this.infos.push(
295
532
  { classe: "title", value: objMapa.name },
296
533
  { classe: "address", value: objMapa.address },
297
- { classe: "url", value: `https://www.google.com/maps/search/?api=1&query=${this.marker.lat},${this.marker.lng}`, link: true, textLink: this.dictionary.abrir_mapa }
298
- )
534
+ {
535
+ classe: "url",
536
+ value: `https://www.google.com/maps/search/?api=1&query=${this.marker.lat},${this.marker.lng}`,
537
+ link: true,
538
+ textLink: this.dictionary.abrir_mapa,
539
+ }
540
+ );
299
541
  }
300
542
  },
301
543
  abrirPopup(url) {
302
- window.open(url, "map-popup", "width=auto,height=auto")
544
+ window.open(url, "map-popup", "width=auto,height=auto");
303
545
  },
304
546
  abrirImagem(imagem) {
305
- this.$emit("abrir-imagem", imagem)
547
+ this.$emit("abrir-imagem", imagem);
306
548
  },
307
549
  adjustFontColor(cor) {
308
550
  try {
309
551
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(cor);
310
552
 
311
- if(!result) return
553
+ if (!result) return;
312
554
 
313
555
  var r = parseInt(result[1], 16);
314
556
  var g = parseInt(result[2], 16);
315
557
  var b = parseInt(result[3], 16);
316
558
 
317
- r /= 255, g /= 255, b /= 255;
318
- var max = Math.max(r, g, b), min = Math.min(r, g, b);
319
- var h, s, l = (max + min) / 2;
559
+ (r /= 255), (g /= 255), (b /= 255);
560
+ var max = Math.max(r, g, b),
561
+ min = Math.min(r, g, b);
562
+ var h,
563
+ s,
564
+ l = (max + min) / 2;
320
565
 
321
- if(max == min){
322
- h = s = 0; // achromatic
566
+ if (max == min) {
567
+ h = s = 0; // achromatic
323
568
  } else {
324
- var d = max - min;
325
- s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
326
- switch(max) {
327
- case r: h = (g - b) / d + (g < b ? 6 : 0); break;
328
- case g: h = (b - r) / d + 2; break;
329
- case b: h = (r - g) / d + 4; break;
330
- }
331
- h /= 6;
569
+ var d = max - min;
570
+ s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
571
+ switch (max) {
572
+ case r:
573
+ h = (g - b) / d + (g < b ? 6 : 0);
574
+ break;
575
+ case g:
576
+ h = (b - r) / d + 2;
577
+ break;
578
+ case b:
579
+ h = (r - g) / d + 4;
580
+ break;
581
+ }
582
+ h /= 6;
332
583
  }
333
584
 
334
- s = s*100;
585
+ s = s * 100;
335
586
  s = Math.round(s);
336
- l = l*100;
587
+ l = l * 100;
337
588
  l = Math.round(l);
338
- h = Math.round(360*h);
339
-
340
- const root = document.documentElement
341
- root.style.setProperty('--text-color', l <= 50 ? "#FFF" : "#111B21")
342
- root.style.setProperty('--files-bg', l <= 50 ? "rgba(255, 255, 255, 0.1)" : "rgba(100, 100, 100, 0.1)")
343
- root.style.setProperty('--files-bg-hover', l <= 50 ? "rgba(255, 255, 255, 0.3)" : "rgba(100, 100, 100, 0.3)")
344
- }catch(e) {
345
- console.error("Erro ao ajustar a cor da mensagem: ", e)
589
+ h = Math.round(360 * h);
590
+
591
+ const root = document.documentElement;
592
+ root.style.setProperty("--text-color", l <= 50 ? "#FFF" : "#111B21");
593
+ root.style.setProperty(
594
+ "--files-bg",
595
+ l <= 50 ? "rgba(255, 255, 255, 0.1)" : "rgba(100, 100, 100, 0.1)"
596
+ );
597
+ root.style.setProperty(
598
+ "--files-bg-hover",
599
+ l <= 50 ? "rgba(255, 255, 255, 0.3)" : "rgba(100, 100, 100, 0.3)"
600
+ );
601
+ } catch (e) {
602
+ console.error("Erro ao ajustar a cor da mensagem: ", e);
346
603
  }
347
604
  },
348
605
  formatMsg(msg) {
349
- if(this.status == 'O') return this.dictionary.msg_excluida ? this.dictionary.msg_excluida : 'MENSAGEM DELETADA'
350
- const regex = /(\n|&nbsp;)/g
351
- if(regex.test(msg)) msg = msg.replace(regex, "<br>")
352
- return msg
606
+ if (this.status == "O")
607
+ return this.dictionary.msg_excluida
608
+ ? this.dictionary.msg_excluida
609
+ : "MENSAGEM DELETADA";
610
+ const regex = /(\n|&nbsp;)/g;
611
+ if (regex.test(msg)) msg = msg.replace(regex, "<br>");
612
+ return msg;
353
613
  },
354
- }
355
- }
614
+ },
615
+ };
356
616
  </script>
357
617
 
358
618
  <style>
359
- :root {
360
- --message-color: #373737;
361
- --text-color: #FFF;
362
- --files-bg: rgba(255, 255, 255, 0.1);
363
- --files-bg-hover: rgba(255, 255, 255, 0.1);
364
-
365
- --light: 80;
366
- --threshold: 60;
367
- }
368
-
369
- .fade-enter-active, .fade-leave-active {
370
- transition: opacity .5s;
371
- }
372
- .fade-enter, .fade-leave-to {
373
- opacity: 0;
374
- }
375
-
376
- .mensagem-reply {
377
- padding: 5px 10px;
378
- font-size: .75rem;
379
- color: #666;
380
- transition: background-color 150ms ease-in-out;
381
- border-radius: 5px;
382
- margin: 5px 0;
383
- overflow: hidden;
384
- max-width: 100%;
385
- }
386
- .mensagem-reply p {
387
- overflow: hidden;
388
- text-overflow: ellipsis;
389
- white-space: nowrap;
390
- }
391
-
392
- .message-reply-principal {
393
- border-left: 3px solid transparent;
394
- background-color: rgba(100, 100, 100, 0.1)
395
- }
396
- .message-reply-principal:hover {
397
- background-color: rgba(100, 100, 100, 0.2);
398
- }
399
-
400
- .message-reply-outros {
401
- background-color: rgb(245, 245, 245);
402
- border-left: 3px solid var(--message-color);
403
- }
404
- .message-reply-outros:hover {
405
- background-color: rgb(235, 235, 235)
406
- }
407
-
408
- .mensagem-reply-vazia {
409
- display: flex;
410
- align-items: center;
411
- }
412
- .mensagem-reply-vazia svg {
413
- margin-right: 5px;
414
- color: #ba181b;
415
- }
416
-
417
- .mensagem {
418
- padding: 20px 7px 14px 7px;
419
- border-radius: 5px;
420
- min-width: 150px;
421
- min-height: 60px;
422
- width: -webkit-fit-content;
423
- width: -moz-fit-content;
424
- width: fit-content;
425
- position: relative;
426
- max-width: 80%;
427
- margin-bottom: 10px;
428
- font-size: .75rem;
429
- word-break: break-word;
430
-
431
- -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);
432
- -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);
433
- 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);
434
- }
435
- .mensagem.max-w-60 {
436
- max-width: 60%;
437
- }
438
- .mensagem.mapa {
439
- width: 100%
440
- }
441
- .mensagem.hist-msg {
442
- animation: show 1s;
443
- }
444
- .mensagem a {
445
- margin-right: 5px;
446
- font-weight: 550;
447
- color: inherit;
448
- text-decoration: none;
449
- }
450
- .mensagem a:hover {
451
- text-decoration: underline;
452
- }
453
- .message p {
454
- white-space: pre-wrap;
455
- }
456
- .mensagem:hover .menu-primario {
457
- visibility: visible;
458
- opacity: 1;
459
- }
460
-
461
- .mensagem-anexo a, .mensagem-div-mapa a {
462
- white-space: nowrap;
463
- text-overflow: ellipsis;
464
- overflow: hidden;
465
- }
466
-
467
- .reply {
468
- cursor: pointer;
469
- position: absolute;
470
- right: 53px;
471
- bottom: 5px;
472
- font-size: .6rem;
473
- color: #67a332;
474
- width: .9rem;
475
- height: .9rem;
476
- display: flex;
477
- justify-content: center;
478
- align-items: center;
479
- border-radius: 50%;
480
- background-color: #FFF;
481
- }
482
- .reply svg {
483
- margin-top: -1px;
484
- margin-right: -1px;
485
- }
486
- .reply-with-2-icons{
487
- right: 30px;
488
- }
489
-
490
- .check{
491
- cursor: pointer;
492
- position: absolute;
493
- right: 10px;
494
- bottom: 2px;
495
- font-size: 0.7rem;
496
- }
497
- .check.visualizado, .check.visualizado svg{
498
- color: #006DAA
499
- }
500
- .check.verde, .check.verde svg{
501
- color: #4f772d
502
- }
503
- .check.vermelho, .check.vermelho svg{
504
- color: #ba181b
505
- }
506
- .check.cinza, .check.cinza svg{
507
- color: #999
508
- }
509
- .check.preto, .check.preto svg{
510
- color: #666
511
- }
512
- .star{
513
- cursor: pointer;
514
- position: absolute;
515
- right: 30px;
516
- bottom: 2px;
517
- font-size: 0.4rem;
518
- width: 11.2px;
519
- }
520
- .default-stick-size{
521
- width: 180px;
522
- height: auto;
523
- }
524
- .horario-envio {
525
- margin-right: 15px;
526
- font-size: 0.7rem;
527
- position: absolute;
528
- left: 10px;
529
- bottom: 2px;
530
- }
531
-
532
- .autor-mensagem {
533
- position: absolute;
534
- font-size: 0.6rem;
535
- white-space: nowrap;
536
- text-overflow: ellipsis;
537
- overflow: hidden;
538
- max-width: 90%;
539
- font-weight: bold;
540
- top: 2px;
541
- }
542
-
543
- .menu-primario {
544
- visibility: hidden;
545
- opacity: 0;
546
- transition: opacity 150ms ease-in-out;
547
- position: absolute;
548
- font-size: 0.7rem;
549
- top: 3px;
550
- display: flex;
551
- gap: 5px;
552
- padding: 2px 4px;
553
- }
554
- .menu-primario.principal {
555
- left: 4px;
556
- color: var(--text-color);
557
- background-color: var(--message-color);
558
- }
559
- .menu-primario.outros {
560
- right: 4px;
561
- color: var(--text-color);
562
- background-color: #FFF;
563
- }
564
-
565
- .menu-primario.outros > span:nth-child(1) {
566
- order: 10;
567
- }
568
-
569
- .menu-mensagem {
570
- cursor: pointer;
571
- padding: 1px;
572
- }
573
-
574
- .menu-flutuante {
575
- background-color: #FFF;
576
- -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);
577
- -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);
578
- 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);
579
- border-radius: 10px;
580
- position: absolute;
581
- top: 20px;
582
- width: 120px;
583
- min-height: 50px;
584
- height: 50px;
585
- max-height: 50px;
586
- overflow-x: hidden;
587
- overflow-y: auto;
588
- margin: 0;
589
- padding: 0;
590
- display: flex;
591
- flex-direction: column;
592
- z-index: 1;
593
- }
594
-
595
- .menu-flutuante.principal {
596
- left: 3px
597
- }
598
-
599
- .menu-flutuante.outros {
600
- right: 3px
601
- }
602
-
603
- .menu-flutuante li {
604
- transition: background-color 300ms ease-in-out;
605
- width: 100%;
606
- cursor: pointer;
607
- padding: 5px 10px;
608
- display: flex;
609
- align-items: center;
610
- }
611
-
612
- .menu-flutuante li:hover {
613
- background-color: #e9e9e9;
614
- }
615
-
616
- /* Principal */
617
- .mensagem__principal {
618
- width: 100%;
619
- display: flex;
620
- justify-content: flex-end;
621
- }
622
- .mensagem__principal > .mensagem::after {
623
- content: "";
624
- width: 0;
625
- height: 0;
626
- position: absolute;
627
- border-left: 10px solid transparent;
628
- border-right: 10px solid transparent;
629
- border-top: 10px solid var(--message-color);
630
- bottom: 5px;
631
- right: -10px;
632
- transform: rotate(-90deg);
633
- }
634
- .mensagem__principal > .mensagem {
635
- background-color: var(--message-color);
636
- color: var(--text-color);
637
- }
638
-
639
- .mensagem__principal > .mensagem .horario-envio {
640
- color: var(--text-color);
641
- }
642
- .mensagem__principal > .mensagem .autor-mensagem {
643
- right: 5px;
644
- color: var(--text-color);
645
- }
646
- /* Outros */
647
- .mensagem__outros {
648
- width: 100%;
649
- display: flex;
650
- }
651
- .mensagem__outros > .mensagem{
652
- background-color: #FFF;
653
- color: #333;
654
- }
655
- .mensagem__outros > .mensagem::after{
656
- content: "";
657
- width: 0;
658
- height: 0;
659
- position: absolute;
660
- border-left: 10px solid transparent;
661
- border-right: 10px solid transparent;
662
- border-top: 10px solid #FFF;
663
- bottom: 5px;
664
- left: -10px;
665
- transform: rotate(90deg);
666
- }
667
- /* .mensagem__outros .check{
619
+ :root {
620
+ --message-color: #373737;
621
+ --text-color: #fff;
622
+ --files-bg: rgba(255, 255, 255, 0.1);
623
+ --files-bg-hover: rgba(255, 255, 255, 0.1);
624
+
625
+ --light: 80;
626
+ --threshold: 60;
627
+ }
628
+
629
+ .fade-enter-active,
630
+ .fade-leave-active {
631
+ transition: opacity 0.5s;
632
+ }
633
+ .fade-enter,
634
+ .fade-leave-to {
635
+ opacity: 0;
636
+ }
637
+
638
+ .mensagem-reply {
639
+ padding: 5px 10px;
640
+ font-size: 0.75rem;
641
+ color: #666;
642
+ transition: background-color 150ms ease-in-out;
643
+ border-radius: 5px;
644
+ margin: 5px 0;
645
+ overflow: hidden;
646
+ max-width: 100%;
647
+ }
648
+ .mensagem-reply p {
649
+ overflow: hidden;
650
+ text-overflow: ellipsis;
651
+ white-space: nowrap;
652
+ }
653
+
654
+ .message-reply-principal {
655
+ border-left: 3px solid transparent;
656
+ background-color: rgba(100, 100, 100, 0.1);
657
+ }
658
+ .message-reply-principal:hover {
659
+ background-color: rgba(100, 100, 100, 0.2);
660
+ }
661
+
662
+ .message-reply-outros {
663
+ background-color: rgb(245, 245, 245);
664
+ border-left: 3px solid var(--message-color);
665
+ }
666
+ .message-reply-outros:hover {
667
+ background-color: rgb(235, 235, 235);
668
+ }
669
+
670
+ .mensagem-reply-vazia {
671
+ display: flex;
672
+ align-items: center;
673
+ }
674
+ .mensagem-reply-vazia svg {
675
+ margin-right: 5px;
676
+ color: #ba181b;
677
+ }
678
+
679
+ .mensagem {
680
+ padding: 20px 7px 14px 7px;
681
+ border-radius: 5px;
682
+ min-width: 150px;
683
+ min-height: 60px;
684
+ width: -webkit-fit-content;
685
+ width: -moz-fit-content;
686
+ width: fit-content;
687
+ position: relative;
688
+ max-width: 80%;
689
+ margin-bottom: 10px;
690
+ font-size: 0.75rem;
691
+ word-break: break-word;
692
+
693
+ -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
694
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
695
+ -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
696
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
697
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
698
+ 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
699
+ }
700
+ .mensagem.max-w-60 {
701
+ max-width: 60%;
702
+ }
703
+ .mensagem.mapa {
704
+ width: 100%;
705
+ }
706
+ .mensagem.hist-msg {
707
+ animation: show 1s;
708
+ }
709
+ .mensagem a {
710
+ margin-right: 5px;
711
+ font-weight: 550;
712
+ color: inherit;
713
+ text-decoration: none;
714
+ }
715
+ .mensagem a:hover {
716
+ text-decoration: underline;
717
+ }
718
+ .message p {
719
+ white-space: pre-wrap;
720
+ }
721
+ .mensagem:hover .menu-primario {
722
+ visibility: visible;
723
+ opacity: 1;
724
+ }
725
+
726
+ .mensagem-anexo a,
727
+ .mensagem-div-mapa a {
728
+ white-space: nowrap;
729
+ text-overflow: ellipsis;
730
+ overflow: hidden;
731
+ }
732
+
733
+ .reply {
734
+ cursor: pointer;
735
+ position: absolute;
736
+ right: 53px;
737
+ bottom: 5px;
738
+ font-size: 0.6rem;
739
+ color: #67a332;
740
+ width: 0.9rem;
741
+ height: 0.9rem;
742
+ display: flex;
743
+ justify-content: center;
744
+ align-items: center;
745
+ border-radius: 50%;
746
+ background-color: #fff;
747
+ }
748
+ .reply svg {
749
+ margin-top: -1px;
750
+ margin-right: -1px;
751
+ }
752
+ .reply-with-2-icons {
753
+ right: 30px;
754
+ }
755
+
756
+ .check {
757
+ cursor: pointer;
758
+ position: absolute;
759
+ right: 10px;
760
+ bottom: 2px;
761
+ font-size: 0.7rem;
762
+ }
763
+ .check.visualizado,
764
+ .check.visualizado svg {
765
+ color: #006daa;
766
+ }
767
+ .check.verde,
768
+ .check.verde svg {
769
+ color: #4f772d;
770
+ }
771
+ .check.vermelho,
772
+ .check.vermelho svg {
773
+ color: #ba181b;
774
+ }
775
+ .check.cinza,
776
+ .check.cinza svg {
777
+ color: #999;
778
+ }
779
+ .check.preto,
780
+ .check.preto svg {
781
+ color: #666;
782
+ }
783
+ .star {
784
+ cursor: pointer;
785
+ position: absolute;
786
+ right: 30px;
787
+ bottom: 2px;
788
+ font-size: 0.4rem;
789
+ width: 11.2px;
790
+ }
791
+ .default-stick-size {
792
+ width: 180px;
793
+ height: auto;
794
+ }
795
+ .horario-envio {
796
+ margin-right: 15px;
797
+ font-size: 0.7rem;
798
+ position: absolute;
799
+ left: 10px;
800
+ bottom: 2px;
801
+ }
802
+
803
+ .autor-mensagem {
804
+ position: absolute;
805
+ font-size: 0.6rem;
806
+ white-space: nowrap;
807
+ text-overflow: ellipsis;
808
+ overflow: hidden;
809
+ max-width: 90%;
810
+ font-weight: bold;
811
+ top: 2px;
812
+ }
813
+
814
+ .menu-primario {
815
+ visibility: hidden;
816
+ opacity: 0;
817
+ transition: opacity 150ms ease-in-out;
818
+ position: absolute;
819
+ font-size: 0.7rem;
820
+ top: 3px;
821
+ display: flex;
822
+ gap: 5px;
823
+ padding: 2px 4px;
824
+ }
825
+ .menu-primario.principal {
826
+ left: 4px;
827
+ color: var(--text-color);
828
+ background-color: var(--message-color);
829
+ }
830
+ .menu-primario.outros {
831
+ right: 4px;
832
+ color: var(--text-color);
833
+ background-color: #fff;
834
+ }
835
+
836
+ .menu-primario.outros > span:nth-child(1) {
837
+ order: 10;
838
+ }
839
+
840
+ .menu-mensagem {
841
+ cursor: pointer;
842
+ padding: 1px;
843
+ }
844
+
845
+ .menu-flutuante {
846
+ background-color: #fff;
847
+ -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
848
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
849
+ -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
850
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
851
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
852
+ 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
853
+ border-radius: 10px;
854
+ position: absolute;
855
+ top: 20px;
856
+ width: 120px;
857
+ min-height: 50px;
858
+ height: 50px;
859
+ max-height: 50px;
860
+ overflow-x: hidden;
861
+ overflow-y: auto;
862
+ margin: 0;
863
+ padding: 0;
864
+ display: flex;
865
+ flex-direction: column;
866
+ z-index: 1;
867
+ }
868
+
869
+ .menu-flutuante.principal {
870
+ left: 3px;
871
+ }
872
+
873
+ .menu-flutuante.outros {
874
+ right: 3px;
875
+ }
876
+
877
+ .menu-flutuante li {
878
+ transition: background-color 300ms ease-in-out;
879
+ width: 100%;
880
+ cursor: pointer;
881
+ padding: 5px 10px;
882
+ display: flex;
883
+ align-items: center;
884
+ }
885
+
886
+ .menu-flutuante li:hover {
887
+ background-color: #e9e9e9;
888
+ }
889
+
890
+ /* Principal */
891
+ .mensagem__principal {
892
+ width: 100%;
893
+ display: flex;
894
+ justify-content: flex-end;
895
+ }
896
+ .mensagem__principal > .mensagem::after {
897
+ content: "";
898
+ width: 0;
899
+ height: 0;
900
+ position: absolute;
901
+ border-left: 10px solid transparent;
902
+ border-right: 10px solid transparent;
903
+ border-top: 10px solid var(--message-color);
904
+ bottom: 5px;
905
+ right: -10px;
906
+ transform: rotate(-90deg);
907
+ }
908
+ .mensagem__principal > .mensagem {
909
+ background-color: var(--message-color);
910
+ color: var(--text-color);
911
+ }
912
+
913
+ .mensagem__principal > .mensagem .horario-envio {
914
+ color: var(--text-color);
915
+ }
916
+ .mensagem__principal > .mensagem .autor-mensagem {
917
+ right: 5px;
918
+ color: var(--text-color);
919
+ }
920
+ /* Outros */
921
+ .mensagem__outros {
922
+ width: 100%;
923
+ display: flex;
924
+ }
925
+ .mensagem__outros > .mensagem {
926
+ background-color: #fff;
927
+ color: #333;
928
+ }
929
+ .mensagem__outros > .mensagem::after {
930
+ content: "";
931
+ width: 0;
932
+ height: 0;
933
+ position: absolute;
934
+ border-left: 10px solid transparent;
935
+ border-right: 10px solid transparent;
936
+ border-top: 10px solid #fff;
937
+ bottom: 5px;
938
+ left: -10px;
939
+ transform: rotate(90deg);
940
+ }
941
+ /* .mensagem__outros .check{
668
942
  display: none
669
943
  } */
670
- .mensagem__outros > .autor-mensagem{
671
- left: 5px;
672
- color: #333;
673
- }
674
- /* Mapa */
675
- .mensagem-div-mapa {
676
- width: 100%;
677
- display: flex;
678
- justify-content: center;
679
- align-items: center;
680
- flex-direction: column;
681
- margin-bottom: 5px;
682
- }
683
-
684
- .msg-mapa {
685
- width: 100%;
686
- min-height: 225px;
687
- height: 100%;
688
- box-sizing: initial;
689
- }
690
- .msg-mapa img {
691
- max-width: none!important;
692
- }
693
-
694
- .info-mapa {
695
- list-style-type: none;
696
- }
697
- .info-mapa li.title {
698
- font-size: .85em
699
- }
700
- .info-mapa li.address, .info-mapa li.url {
701
- font-size: .85em
702
- }
703
- .info-mapa li.url {
704
- font-size: .85em
705
- }
706
-
707
- .tooltip-list {
708
- margin: 0;
709
- padding: 0;
710
- display: flex;
711
- flex-direction: column;
712
- justify-content: center;
713
- align-items: flex-start;
714
- }
944
+ .mensagem__outros > .autor-mensagem {
945
+ left: 5px;
946
+ color: #333;
947
+ }
948
+ /* Mapa */
949
+ .mensagem-div-mapa {
950
+ width: 100%;
951
+ display: flex;
952
+ justify-content: center;
953
+ align-items: center;
954
+ flex-direction: column;
955
+ margin-bottom: 5px;
956
+ }
957
+
958
+ .msg-mapa {
959
+ width: 100%;
960
+ min-height: 225px;
961
+ height: 100%;
962
+ box-sizing: initial;
963
+ }
964
+ .msg-mapa img {
965
+ max-width: none !important;
966
+ }
967
+
968
+ .info-mapa {
969
+ list-style-type: none;
970
+ }
971
+ .info-mapa li.title {
972
+ font-size: 0.85em;
973
+ }
974
+ .info-mapa li.address,
975
+ .info-mapa li.url {
976
+ font-size: 0.85em;
977
+ }
978
+ .info-mapa li.url {
979
+ font-size: 0.85em;
980
+ }
981
+
982
+ .tooltip-list {
983
+ margin: 0;
984
+ padding: 0;
985
+ display: flex;
986
+ flex-direction: column;
987
+ justify-content: center;
988
+ align-items: flex-start;
989
+ }
990
+
991
+ .emoji-message-container {
992
+ position: absolute;
993
+ top: 0;
994
+ left: 0;
995
+ right: 0;
996
+ }
997
+
998
+ .emoji-message-container .sm-emoji-picker {
999
+ height: 200px;
1000
+ width: 90% !important;
1001
+ }
1002
+ .emoji-message-container .sm-emoji-picker .sm-emoji-header {
1003
+ overflow-x: auto;
1004
+ overflow-y: hidden;
1005
+ }
1006
+
1007
+ .reaction {
1008
+ position: absolute;
1009
+ bottom: 0;
1010
+ border-radius: 50%;
1011
+ display: flex;
1012
+ justify-content: center;
1013
+ align-items: center;
1014
+ background-color: rgba(100, 100, 100, 0.4);
1015
+ padding: 5px;
1016
+ font-size: 1.3em;
1017
+ }
1018
+
1019
+ .reaction > span {
1020
+ display: block;
1021
+ transform: translateY(-1px);
1022
+ }
1023
+
1024
+ .mensagem__outros .reaction {
1025
+ right: -30px;
1026
+ }
715
1027
 
1028
+ .mensagem__principal .reaction {
1029
+ left: -30px;
1030
+ }
716
1031
  </style>