make it more apparent if a message failed to send
This commit is contained in:
@@ -187,7 +187,7 @@
|
|||||||
<div v-if="!chatItem.is_outbound" class="text-xs text-gray-500 ml-2">{{ selectedPeer.app_data || "Unknown" }}</div>
|
<div v-if="!chatItem.is_outbound" class="text-xs text-gray-500 ml-2">{{ selectedPeer.app_data || "Unknown" }}</div>
|
||||||
|
|
||||||
<!-- message content -->
|
<!-- message content -->
|
||||||
<div class="flex space-x-2 border border-gray-300 rounded-xl shadow px-2.5 py-1" :class="{ 'bg-[#efefef]': !chatItem.is_outbound, 'bg-[#3b82f6] text-white': chatItem.is_outbound }">
|
<div class="flex space-x-2 border border-gray-300 rounded-xl shadow px-2.5 py-1" :class="[ chatItem.lxmf_message.state === 'failed' ? 'bg-red-500 text-white' : chatItem.is_outbound ? 'bg-[#3b82f6] text-white' : 'bg-[#efefef]' ]">
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<div v-if="chatItem.lxmf_message.content" style="white-space:pre-wrap;word-wrap:break-word;font-family:inherit;">{{ chatItem.lxmf_message.content }}</div>
|
<div v-if="chatItem.lxmf_message.content" style="white-space:pre-wrap;word-wrap:break-word;font-family:inherit;">{{ chatItem.lxmf_message.content }}</div>
|
||||||
<div v-if="chatItem.lxmf_message.fields?.image">
|
<div v-if="chatItem.lxmf_message.fields?.image">
|
||||||
@@ -213,7 +213,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- message state -->
|
<!-- message state -->
|
||||||
<div v-if="chatItem.is_outbound" class="flex text-gray-500 text-right">
|
<div v-if="chatItem.is_outbound" class="flex text-right" :class="[ chatItem.lxmf_message.state === 'failed' ? 'text-red-500' : 'text-gray-500' ]">
|
||||||
<div class="flex ml-auto space-x-1">
|
<div class="flex ml-auto space-x-1">
|
||||||
|
|
||||||
<!-- state label -->
|
<!-- state label -->
|
||||||
@@ -230,8 +230,8 @@
|
|||||||
|
|
||||||
<!-- failed icon -->
|
<!-- failed icon -->
|
||||||
<div v-else-if="chatItem.lxmf_message.state === 'failed'" class="my-auto">
|
<div v-else-if="chatItem.lxmf_message.state === 'failed'" class="my-auto">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
|
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user