Initial commit
This commit is contained in:
Ronald Huynen
156
resources/views/vendor/wirechat/livewire/chat/group/add-members.blade.php
vendored
Normal file
156
resources/views/vendor/wirechat/livewire/chat/group/add-members.blade.php
vendored
Normal file
@@ -0,0 +1,156 @@
|
||||
<div class="bg-[var(--wc-light-primary)] dark:bg-[var(--wc-dark-primary)] dark:text-white border border-[var(--wc-light-secondary)] dark:border-[var(--wc-dark-secondary)] overflow-visible">
|
||||
|
||||
<header class=" sticky top-0 bg-[var(--wc-light-primary)] dark:bg-[var(--wc-dark-primary)] z-10 p-12 pb-2">
|
||||
<div class="flex items-center pb-2">
|
||||
|
||||
<x-wirechat::actions.close-modal>
|
||||
<button
|
||||
class="p-2 ml-0 text-gray-600 hover:bg-[var(--wc-light-secondary)] dark:hover:bg-[var(--wc-dark-secondary)] dark:hover:text-white rounded-full hover:text-gray-800">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class=" w-5 w-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
|
||||
</svg>
|
||||
</button>
|
||||
</x-wirechat::actions.close-modal>
|
||||
|
||||
<h3 class="text-sm mx-auto font-semibold " ><span>{{__('wirechat::chat.group.add_members.heading.label')}} </span> {{$newTotalCount}} / {{$maxGroupMembers}}</h3>
|
||||
|
||||
<x-jetstream.button
|
||||
wire:click="save"
|
||||
wire:loading.attr="disabled"
|
||||
wire:target='save'
|
||||
@disabled(count($selectedMembers)==0)
|
||||
type="button"
|
||||
class="text-xs py-1.5 px-3">
|
||||
{{__('wirechat::chat.group.add_members.actions.save.label')}}
|
||||
</x-jetstream.button>
|
||||
|
||||
</div>
|
||||
|
||||
{{-- Member limit error --}}
|
||||
<div
|
||||
x-data="{ showError:false }"
|
||||
x-on:show-member-limit-error.window="
|
||||
showError=true;
|
||||
setTimeout(()=>{ showError=false; },1500);
|
||||
"
|
||||
class="text-red-500 text-sm mx-auto ">
|
||||
<span x-transition x-show="showError">
|
||||
{{__('wirechat::chat.group.add_members.messages.members_limit_error',['count'=>$maxGroupMembers])}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<section class="flex flex-wrap items-center px-0 border-b border-[var(--wc-light-secondary)] dark:border-[var(--wc-dark-secondary)]">
|
||||
<input type="search" id="users-search-field" wire:model.live.debounce='search' autocomplete="off"
|
||||
placeholder="{{ __('wirechat::chat.group.add_members.inputs.search.placeholder') }}"
|
||||
class=" w-full border-0 w-auto dark:bg-none dark:bg-transparent outline-hidden focus:outline-hidden bg-none rounded-lg focus:ring-0 hover:ring-0">
|
||||
</section>
|
||||
|
||||
|
||||
<section class=" overflow-x-hidden my-2 ">
|
||||
<ul style="-ms-overflow-style: none;scrollbar-width: none;
|
||||
"
|
||||
class="flex w-full overflow-x-auto gap-3">
|
||||
|
||||
@if ($selectedMembers)
|
||||
|
||||
@foreach ($selectedMembers as $key => $member)
|
||||
<li class="flex items-center text-nowrap min-w-fit px-2 py-1 text-sm font-medium text-gray-800 bg-[var(--wc-light-secondary)] rounded-sm dark:bg-[var(--wc-dark-secondary)] dark:text-gray-300"
|
||||
wire:key="selected-member-{{ $member->id }}">
|
||||
{{ $member->display_name }}
|
||||
<button type="button"
|
||||
wire:click="toggleMember('{{ $member->id }}',{{ json_encode(get_class($member)) }})"
|
||||
class="flex items-center p-1 ms-2 text-sm text-gray-400 bg-transparent rounded-xs hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-gray-300"
|
||||
aria-label="Remove">
|
||||
<svg class="w-2 h-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none" viewBox="0 0 14 14">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
|
||||
</svg>
|
||||
<span class="sr-only">Remove badge</span>
|
||||
|
||||
</button>
|
||||
</li>
|
||||
@endforeach
|
||||
@endif
|
||||
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
</header>
|
||||
|
||||
<div class="relative w-full px-12">
|
||||
{{-- <h5 class="text font-semibold text-gray-800 dark:text-gray-100">Recent Chats</h5> --}}
|
||||
<section class="my-4">
|
||||
@if ($users)
|
||||
|
||||
<ul class="overflow-auto flex flex-col">
|
||||
|
||||
@foreach ($users as $key => $user)
|
||||
@php
|
||||
$isAlreadyAParticipant= $user->belongsToConversation($conversation);
|
||||
@endphp
|
||||
<li wire:key="users-{{$key}}" class="flex cursor-pointer group gap-2 items-center p-2">
|
||||
|
||||
<label
|
||||
{{-- The wire:click attribute is only rendered if $isAlreadyAParticipant is false. --}}
|
||||
@if (!$isAlreadyAParticipant)
|
||||
wire:click="toggleMember('{{ $user->id }}', {{ json_encode(get_class($user)) }})"
|
||||
@endif
|
||||
|
||||
class="flex cursor-pointer gap-2 items-center w-full">
|
||||
<x-wirechat::avatar src="{{$user->cover_url}}" class="w-10 h-10" />
|
||||
|
||||
<div @class(['opacity-70' => $isAlreadyAParticipant, 'flex-1 min-w-0']) >
|
||||
<p
|
||||
@class(['transition-all truncate', 'group-hover:underline ' => !$isAlreadyAParticipant])>
|
||||
{{ $user->display_name }}</p>
|
||||
|
||||
<span
|
||||
@class(['text-gray-600 dark:text-gray-400 text-sm'])>
|
||||
@if ($isAlreadyAParticipant)
|
||||
{{__('wirechat::chat.group.add_members.messages.member_already_exists')}}
|
||||
@else
|
||||
@php
|
||||
$location = $user->getLocationFirst();
|
||||
@endphp
|
||||
@if ($location && isset($location['name_short']))
|
||||
{{ $location['name_short'] }}
|
||||
@endif
|
||||
@endif
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="ml-auto">
|
||||
@if ($selectedMembers->contains(fn($member) => $member->id == $user->id && get_class($member) == get_class($user)) || $isAlreadyAParticipant)
|
||||
<div class="w-6 h-6 bg-theme-brand rounded flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-theme-background">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
</div>
|
||||
@else
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
|
||||
fill="currentColor" class="bi bi-plus-square-dotted w-6 h-6 text-gray-400"
|
||||
viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M2.5 0q-.25 0-.487.048l.194.98A1.5 1.5 0 0 1 2.5 1h.458V0zm2.292 0h-.917v1h.917zm1.833 0h-.917v1h.917zm1.833 0h-.916v1h.916zm1.834 0h-.917v1h.917zm1.833 0h-.917v1h.917zM13.5 0h-.458v1h.458q.151 0 .293.029l.194-.981A2.5 2.5 0 0 0 13.5 0m2.079 1.11a2.5 2.5 0 0 0-.69-.689l-.556.831q.248.167.415.415l.83-.556zM1.11.421a2.5 2.5 0 0 0-.689.69l.831.556c.11-.164.251-.305.415-.415zM16 2.5q0-.25-.048-.487l-.98.194q.027.141.028.293v.458h1zM.048 2.013A2.5 2.5 0 0 0 0 2.5v.458h1V2.5q0-.151.029-.293zM0 3.875v.917h1v-.917zm16 .917v-.917h-1v.917zM0 5.708v.917h1v-.917zm16 .917v-.917h-1v.917zM0 7.542v.916h1v-.916zm15 .916h1v-.916h-1zM0 9.375v.917h1v-.917zm16 .917v-.917h-1v.917zm-16 .916v.917h1v-.917zm16 .917v-.917h-1v.917zm-16 .917v.458q0 .25.048.487l.98-.194A1.5 1.5 0 0 1 1 13.5v-.458zm16 .458v-.458h-1v.458q0 .151-.029.293l.981.194Q16 13.75 16 13.5M.421 14.89c.183.272.417.506.69.689l.556-.831a1.5 1.5 0 0 1-.415-.415zm14.469.689c.272-.183.506-.417.689-.69l-.831-.556c-.11.164-.251.305-.415.415l.556.83zm-12.877.373Q2.25 16 2.5 16h.458v-1H2.5q-.151 0-.293-.029zM13.5 16q.25 0 .487-.048l-.194-.98A1.5 1.5 0 0 1 13.5 15h-.458v1zm-9.625 0h.917v-1h-.917zm1.833 0h.917v-1h-.917zm1.834-1v1h.916v-1zm1.833 1h.917v-1h-.917zm1.833 0h.917v-1h-.917zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z" />
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
</label>
|
||||
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
@endif
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user