Skip to content

Commit 5299f9f

Browse files
andreiaandreia
committed
Update post comment reaction
1 parent 44af989 commit 5299f9f

1 file changed

Lines changed: 37 additions & 37 deletions

File tree

‎resources/views/livewire/forum-comment-reactions.blade.php‎

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,55 @@
1-
<div class="flex items-center justify-between">
2-
{{-- Existing Reactions Display --}}
3-
<div class="flex items-center space-x-1">
4-
@foreach($reactionCounts as $type => $count)
5-
@if($count > 0)
6-
<button
7-
wire:click="toggleReaction('{{ $type }}')"
8-
@class([
9-
'flex items-center space-x-1 px-2 py-1 rounded-full text-sm transition-colors border',
10-
'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900 dark:text-blue-300 dark:border-blue-700' => in_array($type, $userReactions),
11-
'hover:bg-gray-100 text-gray-600 border-gray-200 dark:hover:bg-gray-700 dark:text-gray-400 dark:border-gray-600' => !in_array($type, $userReactions),
12-
])
13-
@auth
14-
title="{{ $availableReactions[$type] ?? $type }}"
15-
@else
16-
disabled
17-
title="{{ __('filament-forum::filament-forum.comments.login-to-react') }}"
18-
@endauth
19-
>
20-
<span>{{ $type }}</span>
21-
<span class="text-xs font-medium">{{ $count }}</span>
22-
</button>
23-
@endif
24-
@endforeach
25-
</div>
1+
<div class="flex items-center gap-1">
2+
{{-- Existing Reactions Display (clickable to toggle) --}}
3+
@foreach($reactionCounts as $type => $count)
4+
@if($count > 0)
5+
<button
6+
wire:click="toggleReaction('{{ $type }}')"
7+
@class([
8+
'flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-sm transition-colors border',
9+
'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900 dark:text-blue-300 dark:border-blue-700' => in_array($type, $userReactions),
10+
'hover:bg-gray-100 text-gray-600 border-gray-200 dark:hover:bg-gray-700 dark:text-gray-400 dark:border-gray-600' => !in_array($type, $userReactions),
11+
])
12+
@auth
13+
x-tooltip.raw="{{ $availableReactions[$type] ?? $type }}"
14+
@else
15+
disabled
16+
x-tooltip.raw="{{ __('filament-forum::filament-forum.comments.login-to-react') }}"
17+
@endauth
18+
>
19+
<span>{{ $type }}</span>
20+
<span class="text-xs font-medium">{{ $count }}</span>
21+
</button>
22+
@endif
23+
@endforeach
2624

27-
{{-- Add Reaction Button --}}
25+
{{-- Smiley icon to open reaction picker --}}
2826
<div class="relative" x-data="{ open: @entangle('showReactionPicker') }" x-on:click.outside="open = false">
2927
@auth
3028
<button
3129
wire:click="toggleReactionPicker"
32-
class="flex items-center space-x-1 px-2 py-1 rounded-full text-sm transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400"
33-
title="{{ __('filament-forum::filament-forum.comments.add-reaction') }}"
30+
class="flex items-center justify-center w-7 h-7 rounded-full transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
31+
x-tooltip.raw="{{ __('filament-forum::filament-forum.comments.add-reaction') }}"
3432
>
35-
<span class="text-lg">😊</span>
36-
<span class="text-xs">{{ __('filament-forum::filament-forum.comments.add-reaction') }}</span>
33+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-5 h-5">
34+
<path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" />
35+
</svg>
3736
</button>
3837

3938
{{-- Reaction Picker --}}
40-
<div x-show="open"
39+
<div x-show="open"
4140
x-transition:enter="transition ease-out duration-100"
4241
x-transition:enter-start="transform opacity-0 scale-95"
4342
x-transition:enter-end="transform opacity-100 scale-100"
4443
x-transition:leave="transition ease-in duration-75"
4544
x-transition:leave-start="transform opacity-100 scale-100"
4645
x-transition:leave-end="transform opacity-0 scale-95"
47-
class="absolute bottom-full left-0 mb-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg p-2 z-10">
46+
class="absolute bottom-full right-0 mb-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg p-2 z-10">
4847
<div class="flex space-x-1">
4948
@foreach($availableReactions as $emoji => $label)
5049
<button
5150
wire:click="toggleReaction('{{ $emoji }}')"
5251
class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
53-
title="{{ $label }}"
52+
x-tooltip.raw="{{ $label }}"
5453
>
5554
<span class="text-lg">{{ $emoji }}</span>
5655
</button>
@@ -60,11 +59,12 @@ class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
6059
@else
6160
<button
6261
disabled
63-
class="flex items-center space-x-1 px-2 py-1 rounded-full text-sm text-gray-400 cursor-not-allowed"
64-
title="{{ __('filament-forum::filament-forum.comments.login-to-react') }}"
62+
class="flex items-center justify-center w-7 h-7 rounded-full text-gray-300 cursor-not-allowed dark:text-gray-600"
63+
x-tooltip.raw="{{ __('filament-forum::filament-forum.comments.login-to-react') }}"
6564
>
66-
<span class="text-lg">😊</span>
67-
<span class="text-xs">{{ __('filament-forum::filament-forum.comments.add-reaction') }}</span>
65+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-5 h-5">
66+
<path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" />
67+
</svg>
6868
</button>
6969
@endauth
7070
</div>

0 commit comments

Comments
 (0)