Skip to content

Commit

Permalink
Merge pull request #508 from canyongbs/advapp-305
Browse files Browse the repository at this point in the history 
[ADVAPP-305]: Introduce insert emoji to realtime chat.
  • Loading branch information
@Orrison
Orrison authored Feb 8, 2024
2 parents 5f4853d + 2102aeb commit 08d3d6f
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 10 deletions.
3 changes: 3 additions & 0 deletions app-modules/in-app-communication/resources/js/userToUserChat.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -411,6 +411,9 @@ document.addEventListener('alpine:init', () => {
removeColor() {
editor.chain().focus().unsetColor().run();
},
insertContent(content) {
editor.chain().focus().insertContent(content).run();
},
};
});
});
55 changes: 45 additions & 10 deletions app-modules/in-app-communication/resources/views/filament/pages/user-chat.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,12 +256,13 @@ class="w-full overflow-hidden rounded-xl border border-gray-950/5 bg-gray-50 sha
<div
x-data="chatEditor({ currentUser: @js(auth()->id()), users: @js($users) })"
x-model="message"
x-on:click.outside="$refs.colorPicker.close"
x-on:click.outside="$refs.colorPicker.close(); $refs.emojiPicker.close()"
wire:ignore
x-modelable="content"
>
<template x-if="isLoaded()">
<div class="flex flex-wrap gap-1 border-b px-3 py-2 dark:border-gray-700">
<div
class="flex flex-wrap items-center gap-1 border-b px-3 py-2 dark:border-gray-700">
<button
class="rounded p-0.5"
type="button"
Expand Down Expand Up @@ -373,8 +374,9 @@ class="flex h-5 w-5 items-center rounded-full border bg-gray-50 dark:border-gray
type="button"
x-on:click="removeColor()"
x-bind:class="{
'ring-2 ring-offset-2 ring-primary-600': !isActive(
'textStyle', updatedAt),
'ring-2 ring-offset-2 ring-primary-600 dark:ring-offset-gray-900':
!isActive(
'textStyle', updatedAt),
}"
>
<span class="sr-only">
Expand All @@ -391,7 +393,7 @@ class="h-5 w-5 rounded-full bg-[#ef4444]"
type="button"
x-on:click="setColor('#ef4444')"
x-bind:class="{
'ring-2 ring-offset-2 ring-primary-600': updatedAt &&
'ring-2 ring-offset-2 ring-primary-600 dark:ring-offset-gray-900': updatedAt &&
isActive('textStyle', { color: '#ef4444' }),
}"
>
Expand All @@ -405,7 +407,7 @@ class="h-5 w-5 rounded-full bg-[#ec4899]"
type="button"
x-on:click="setColor('#ec4899')"
x-bind:class="{
'ring-2 ring-offset-2 ring-primary-600': updatedAt &&
'ring-2 ring-offset-2 ring-primary-600 dark:ring-offset-gray-900': updatedAt &&
isActive('textStyle', { color: '#ec4899' }),
}"
>
Expand All @@ -419,7 +421,7 @@ class="h-5 w-5 rounded-full bg-[#3b82f6]"
type="button"
x-on:click="setColor('#3b82f6')"
x-bind:class="{
'ring-2 ring-offset-2 ring-primary-600': updatedAt &&
'ring-2 ring-offset-2 ring-primary-600 dark:ring-offset-gray-900': updatedAt &&
isActive('textStyle', { color: '#3b82f6' }),
}"
>
Expand All @@ -433,7 +435,7 @@ class="h-5 w-5 rounded-full bg-[#22c55e]"
type="button"
x-on:click="setColor('#22c55e')"
x-bind:class="{
'ring-2 ring-offset-2 ring-primary-600': updatedAt &&
'ring-2 ring-offset-2 ring-primary-600 dark:ring-offset-gray-900': updatedAt &&
isActive('textStyle', { color: '#22c55e' }),
}"
>
Expand All @@ -447,7 +449,7 @@ class="h-5 w-5 rounded-full bg-[#eab308]"
type="button"
x-on:click="setColor('#eab308')"
x-bind:class="{
'ring-2 ring-offset-2 ring-primary-600': updatedAt &&
'ring-2 ring-offset-2 ring-primary-600 dark:ring-offset-gray-900': updatedAt &&
isActive('textStyle', { color: '#eab308' }),
}"
>
Expand All @@ -461,7 +463,7 @@ class="h-5 w-5 rounded-full bg-[#737373]"
type="button"
x-on:click="setColor('#737373')"
x-bind:class="{
'ring-2 ring-offset-2 ring-primary-600': updatedAt &&
'ring-2 ring-offset-2 ring-primary-600 dark:ring-offset-gray-900': updatedAt &&
isActive('textStyle', { color: '#737373' }),
}"
>
Expand All @@ -472,6 +474,39 @@ class="h-5 w-5 rounded-full bg-[#737373]"
</div>
</div>
</div>

<div>
<button
class="rounded p-0.5"
type="button"
x-on:click="$refs.emojiPicker.toggle"
>
@svg('heroicon-c-face-smile', 'mt-0.5 h-4 w-4')
</button>

<div
class="absolute z-10 max-w-xs divide-y divide-gray-100 rounded-lg bg-white px-4 py-3 shadow-lg ring-1 ring-gray-950/5 transition dark:divide-white/5 dark:bg-gray-900 dark:ring-white/10"
x-cloak
x-float.offset.placement.top-start="{ offset: 8 }"
x-ref="emojiPicker"
x-transition:enter-start="opacity-0"
x-transition:leave-end="opacity-0"
>
<div class="flex flex-wrap items-center gap-2">
<template
x-for="emoji in ['😀', '😂', '👍', '👎', '🙏', '😕', '🤔', '😊', '🎉', '💼', '🕒', '📅', '🔒', '❗', '❓', '💡', '🚫', '✅', '🤖', '📧', '🌐', '💬', '📈', '📉', '🤝']"
>
<button
class="h-5 w-5 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
type="button"
x-on:click="insertContent(emoji)"
x-text="emoji"
x-bind:key="emoji"
></button>
</template>
</div>
</div>
</div>
</div>
</template>

Expand Down

0 comments on commit 08d3d6f

Please sign in to comment.