RNS-Things/reticulum-meshchatX
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 8 Wiki Activity

improve chat ui

Browse Source
This commit is contained in:
liamcottle
2024-04-30 04:03:01 +12:00
parent 2dca43116d
commit b970515927
1 changed files with 29 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
index.html
View File

@@ -133,7 +133,7 @@
<!-- peer info -->
<div>
<div>{{ selectedPeer.app_data || "Unknown" }}</div>
<div class="font-semibold">{{ selectedPeer.app_data || "Unknown" }}</div>
<div class="text-sm">@<{{ selectedPeer.destination_hash }}></div>
</div>
@@ -154,53 +154,40 @@
<!-- chat items -->
<div id="messages" class="h-full overflow-y-scroll px-3 sm:px-0">
<div class="max-w-xl mx-auto">
<div v-if="selectedPeerChatItems.length > 0" class="flex flex-col space-y-3 py-4">
<div v-for="chatItem of selectedPeerChatItems">
<div v-if="selectedPeerChatItems.length > 0" class="flex flex-col space-y-3 p-3">
<div v-for="chatItem of selectedPeerChatItems" class="max-w-xl" :class="{ 'ml-auto pl-4 md:pl-16': chatItem.is_outbound, 'mr-auto pr-4 md:pr-16': !chatItem.is_outbound }">
<!-- message content -->
<div class="flex space-x-2 border border-gray-300 rounded-lg shadow px-2 py-1.5 bg-white">
<div>
<!-- user -->
<div class="bg-blue-500 text-white rounded-full p-1 shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
</svg>
</div>
<!-- sender name -->
<div v-if="!chatItem.is_outbound" class="text-xs text-gray-500 ml-2">{{ selectedPeer.app_data || "Unknown" }}</div>
<!-- message content -->
<div class="flex space-x-2 border border-gray-300 rounded-xl shadow px-2.5 py-1 bg-white" :class="{ 'bg-[#efefef]': !chatItem.is_outbound, 'bg-[#3b82f6] text-white': chatItem.is_outbound }">
<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.fields?.image" class="grid grid-cols-3 gap-2">
<img @click="openImage(`data:image/${chatItem.lxmf_message.fields.image.image_type};base64,${chatItem.lxmf_message.fields.image.image_bytes}`)" :src="`data:image/${chatItem.lxmf_message.fields.image.image_type};base64,${chatItem.lxmf_message.fields.image.image_bytes}`" class="w-full rounded-md shadow-md cursor-pointer"/>
</div>
<div class="w-full">
<div class="font-semibold leading-5">
<span v-if="chatItem.is_outbound">You</span>
<span v-else>{{ selectedPeer.app_data || "Unknown" }}</span>
</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" class="grid grid-cols-3 gap-2">
<img @click="openImage(`data:image/${chatItem.lxmf_message.fields.image.image_type};base64,${chatItem.lxmf_message.fields.image.image_bytes}`)" :src="`data:image/${chatItem.lxmf_message.fields.image.image_type};base64,${chatItem.lxmf_message.fields.image.image_bytes}`" class="w-full rounded-md shadow-md cursor-pointer"/>
</div>
<div v-if="chatItem.lxmf_message.fields?.file_attachments">
<a target="_blank" :download="file_attachment.file_name" :href="`data:application/octet-stream;base64,${file_attachment.file_bytes}`" v-for="file_attachment of chatItem.lxmf_message.fields?.file_attachments ?? []" class="flex border border-gray-200 hover:bg-gray-100 rounded px-2 py-1 text-sm text-gray-700 font-semibold cursor-pointer">
<div class="mr-2 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-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13"></path>
</svg>
</div>
<div class="my-auto">{{ file_attachment.file_name }}</div>
<div class="ml-auto 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-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg>
</div>
</a>
</div>
<div v-if="chatItem.lxmf_message.fields?.file_attachments">
<a target="_blank" :download="file_attachment.file_name" :href="`data:application/octet-stream;base64,${file_attachment.file_bytes}`" v-for="file_attachment of chatItem.lxmf_message.fields?.file_attachments ?? []" class="flex border border-gray-200 hover:bg-gray-100 rounded px-2 py-1 text-sm text-gray-700 font-semibold cursor-pointer">
<div class="mr-2 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-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13"></path>
</svg>
</div>
<div class="my-auto">{{ file_attachment.file_name }}</div>
<div class="ml-auto 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-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg>
</div>
</a>
</div>
</div>
<!-- message state -->
<div v-if="chatItem.is_outbound" class="text-gray-500">{{ chatItem.lxmf_message.state }}</div>
</div>
<!-- message state -->
<div v-if="chatItem.is_outbound" class="text-gray-500 text-right">{{ chatItem.lxmf_message.state }}</div>
</div>
</div>
</div>