Initial commit
This commit is contained in:
Ronald Huynen
304
resources/views/vendor/wirechat/livewire/chat/group/info.blade.php
vendored
Normal file
304
resources/views/vendor/wirechat/livewire/chat/group/info.blade.php
vendored
Normal file
@@ -0,0 +1,304 @@
|
||||
<div id="group-info-modal" class="bg-[var(--wc-light-primary)] dark:bg-[var(--wc-dark-primary)] min-h-screen">
|
||||
|
||||
|
||||
@php
|
||||
$authIsAdminInGroup = $participant?->isAdmin();
|
||||
$authIsOwner = $participant?->isOwner();
|
||||
$isGroup = $conversation?->isGroup();
|
||||
$group = $conversation?->group;
|
||||
@endphp
|
||||
|
||||
<section class="cursor-pointer flex gap-4 z-10 items-center p-5 sticky top-0 bg-[var(--wc-light-primary)] dark:bg-[var(--wc-dark-primary)] ">
|
||||
<button wire:click="$dispatch('closeChatDrawer')" class="focus:outline-hidden cursor-pointer"> <svg class="w-7 h-7"
|
||||
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg> </button>
|
||||
<h3>{{__('wirechat::chat.group.info.heading.label')}}</h3>
|
||||
</section>
|
||||
{{-- Details --}}
|
||||
<header>
|
||||
|
||||
{{-- Edit group form --}}
|
||||
@if ($authIsAdminInGroup || $group?->allowsMembersToEditGroupInfo())
|
||||
<div @dusk="edit_group_information_section" class="flex flex-col items-center gap-5 py-5 px-4 ">
|
||||
|
||||
{{-- Avatar --}}
|
||||
<section class="mx-auto items-center justify-center grid">
|
||||
<div @dusk="edit_avatar_label" class="relative h-32 w-32 overflow-clip mx-auto rounded-full">
|
||||
|
||||
<label wire:target="photo" wire:loading.class="cursor-not-allowed" for="photo"
|
||||
class=" cursor-pointer w-full h-full">
|
||||
<x-wirechat::avatar wire:loading.class="cursor-not-allowed" group="{{ $isGroup }}"
|
||||
:src="$cover_url" class="w-full h-full absolute inset-0" />
|
||||
</label>
|
||||
<input accept=".jpg,.jpeg,.png,.webp" wire:loading.attr="disabled" id="photo"
|
||||
wire:model="photo" dusk="add_photo_field" type="file" hidden>
|
||||
|
||||
|
||||
@if (empty($cover_url))
|
||||
{{-- penceil --}}
|
||||
<label wire:target="photo" wire:loading.class="cursor-not-allowed"
|
||||
wire:loading.class.remove="cursor-pointer" for="photo"
|
||||
class=" cursor-pointer bottom-0 inset-x-0 bg-gray-500/40 hover:bg-gray-500/80 dark:bg-white/40 dark:hover:bg-gray-700 transition-colors text-gray-600 flex items-center justify-center absolute ">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
|
||||
class="size-6 w-5 h-5">
|
||||
<path
|
||||
d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z" />
|
||||
</svg>
|
||||
|
||||
</label>
|
||||
@else
|
||||
<button type="button" wire:target="photo" wire:loading.attr="disabled"
|
||||
class="disabled:cursor-not-allowed bottom-0 inset-x-0 bg-gray-500/40 hover:bg-gray-500/80 m-0 p-0 border-0 dark:bg-white/40 dark:hover:bg-gray-700 transition-colors text-red-800 flex items-center justify-center absolute "
|
||||
wire:confirm="Are you sure you want to delete photo ?" wire:click="deletePhoto">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="size-6 w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@error('photo')
|
||||
<span class="text-red-500">{{ $message }}</span>
|
||||
@enderror
|
||||
</section>
|
||||
|
||||
|
||||
{{-- Form --}}
|
||||
<div class="space-y-3 grid overflow-x-hidden">
|
||||
|
||||
{{-- Form to update Group name --}}
|
||||
<form @dusk="edit_group_name_form" wire:submit="updateGroupName" x-data="{ editing: false }"
|
||||
class=" justify-center flex items-center w-full gap-5 px-5 items-center">
|
||||
@csrf
|
||||
|
||||
{{-- Left side input --}}
|
||||
<div class=" max-w-[90%] grid h-auto">
|
||||
<div x-show="!editing">
|
||||
<h4 dusk="form_group_name_when_not_editing" class="font-medium break-all whitespace-pre-line text-2xl ">{{ $groupName }} </h4>
|
||||
</div>
|
||||
|
||||
<input x-cloak maxlength="110" x-show="editing" id='groupName' type="text"
|
||||
wire:model='groupName'
|
||||
class="resize-none text-2xl font-medium border-0 px-0 py-0 py-0 border-b border-[var(--wc-light-border)] dark:border-[var(--wc-dark-border)] bg-inherit dark:text-white outline-hidden w-full focus:outline-hidden focus:ring-0 hover:ring-0">
|
||||
|
||||
|
||||
@error('groupName')
|
||||
<p class="text-red-500 inline">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
{{-- Right Side --}}
|
||||
<span class=" items-center">
|
||||
|
||||
<button type="button" @click="editing=true" x-show="!editing">
|
||||
{{-- pencil/edit --}}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
|
||||
class="size-6 w-5 h-5">
|
||||
<path
|
||||
d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z" />
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
|
||||
<button x-cloak @click="editing=false" x-show="editing">
|
||||
{{-- check/submit --}}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
|
||||
fill="currentColor" class="bi bi-check-lg w-5 h-5" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
</span>
|
||||
|
||||
</form>
|
||||
|
||||
{{-- Members count --}}
|
||||
<p class="mx-auto"> {{ __('wirechat::chat.group.info.labels.members') }} {{ $totalParticipants }} </p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{{-- About --}}
|
||||
<section class=" px-8 py-5 ">
|
||||
<div @dusk="edit_description_section" x-data="{ editing: false }" @click.outside="editing=false"
|
||||
class="grid grid-cols-12 items-center">
|
||||
|
||||
{{-- Left side input --}}
|
||||
<span class="col-span-11">
|
||||
<div x-show="!editing">
|
||||
@if (empty($description))
|
||||
<p class="text-sm" style="color: var(--wirechat-primary-color)">{{ __('wirechat::chat.group.info.labels.add_description') }} </p>
|
||||
@else
|
||||
<p class="font-medium break-all whitespace-pre-line ">{{ $description }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<textarea x-cloak maxlength="501" x-show="editing" id='description' type="text" wire:model.blur='description'
|
||||
class="resize-none font-medium w-full border-0 px-0 py-0 py-0 border-b border-[var(--wc-light-border)] dark:border-[var(--wc-dark-border)] bg-inherit dark:text-white outline-hidden w-full focus:outline-hidden focus:ring-0 hover:ring-0">
|
||||
</textarea>
|
||||
|
||||
@error('description')
|
||||
<p class="text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</span>
|
||||
|
||||
{{-- Right Side --}}
|
||||
<span class="col-span-1 flex items-center justify-end">
|
||||
|
||||
<button @click="editing=true" x-show="!editing">
|
||||
{{-- pencil/edit --}}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
|
||||
class="size-6 w-5 h-5">
|
||||
<path
|
||||
d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z" />
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
|
||||
<button x-cloak @click="editing=false" x-show="editing">
|
||||
{{-- check --}}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
|
||||
fill="currentColor" class="bi bi-check-lg w-5 h-5" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
@else
|
||||
{{-- Plain group information --}}
|
||||
<div @dusk="non_editable_group_information_section" class="flex flex-col items-center gap-5 py-5 px-4 ">
|
||||
<x-wirechat::avatar :src="$cover_url" class=" h-32 w-32 mx-auto" />
|
||||
<h4 dusk="group_name" class="font-medium break-all whitespace-pre-line text-2xl ">{{ $groupName }} </h4>
|
||||
<p class="mx-auto">{{ __('wirechat::chat.group.info.labels.members') }} {{ $totalParticipants }} </p>
|
||||
<p class="font-medium break-all whitespace-pre-line ">{{ $description }} </p>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<x-wirechat::divider />
|
||||
|
||||
{{-- Disappearing Messages Settings --}}
|
||||
@if(timebank_config('wirechat.disappearing_messages.enabled', true))
|
||||
<section class="px-8 py-5">
|
||||
@livewire('wire-chat.disappearing-messages-settings', ['conversationId' => $conversation->id], key('disappearing-'.$conversation->id))
|
||||
</section>
|
||||
<x-wirechat::divider />
|
||||
@endif
|
||||
|
||||
{{-- Members section --}}
|
||||
<section class="my-4 text-left space-y-3">
|
||||
|
||||
{{-- Actiion button to trigger opening members modal --}}
|
||||
<x-wirechat::actions.open-modal component="wirechat.chat.group.members"
|
||||
conversation="{{ $conversation?->id }}" widget="{{ $this->isWidget() }}">
|
||||
{{-- Members count --}}
|
||||
<button class="cursor-pointer flex w-full justify-between items-center px-8 focus:outline-hidden ">
|
||||
<span class="text-gray-600 dark:text-gray-300">{{ __('wirechat::chat.group.info.labels.members') }} {{ $totalParticipants }}</span>
|
||||
{{-- Search icon --}}
|
||||
<span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="size-6 w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</x-wirechat::actions.open-modal>
|
||||
|
||||
{{-- Add Members --}}
|
||||
@if ($authIsAdminInGroup || $group?->allowsMembersToAddOthers())
|
||||
<x-wirechat::actions.open-modal component="wirechat.chat.group.add-members"
|
||||
conversation="{{ $conversation?->id }}" widget="{{ $this->isWidget() }}">
|
||||
<button @dusk="open_add_members_modal_button"
|
||||
class="cursor-pointer w-full py-5 px-8 hover:bg-[var(--wc-light-secondary)] dark:hover:bg-[var(--wc-dark-secondary)] focus:outline-hidden transition flex gap-3 items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
|
||||
class="size-6 w-5 h-5">
|
||||
<path
|
||||
d="M5.25 6.375a4.125 4.125 0 1 1 8.25 0 4.125 4.125 0 0 1-8.25 0ZM2.25 19.125a7.125 7.125 0 0 1 14.25 0v.003l-.001.119a.75.75 0 0 1-.363.63 13.067 13.067 0 0 1-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 0 1-.364-.63l-.001-.122ZM18.75 7.5a.75.75 0 0 0-1.5 0v2.25H15a.75.75 0 0 0 0 1.5h2.25v2.25a.75.75 0 0 0 1.5 0v-2.25H21a.75.75 0 0 0 0-1.5h-2.25V7.5Z" />
|
||||
</svg>
|
||||
|
||||
<span>{{ __('wirechat::chat.group.info.actions.add_members.label') }}</span>
|
||||
</button>
|
||||
</x-wirechat::actions.open-modal>
|
||||
@endif
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<x-wirechat::divider />
|
||||
|
||||
{{-- Footer section --}}
|
||||
<footer class="flex flex-col justify-start w-full">
|
||||
|
||||
@if ($authIsOwner)
|
||||
|
||||
{{-- Delete group --}}
|
||||
<button wire:confirm="{{ __('wirechat::chat.group.info.actions.delete_group.confirmation_message') }}" wire:click="deleteGroup"
|
||||
class="cursor-pointer w-full py-5 px-8 hover:bg-[var(--wc-light-secondary)] dark:hover:bg-[var(--wc-dark-secondary)] transition text-start space-y-2 gap-3 text-red-500">
|
||||
<div class="flex gap-3 items-center ">
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="size-6 w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
|
||||
</svg>
|
||||
<span>{{ __('wirechat::chat.group.info.actions.delete_group.label') }}</span>
|
||||
</div>
|
||||
|
||||
<p class="dark:text-white/60 text-sm text-gray-600/80">@lang('wirechat::chat.group.info.actions.delete_group.helper_text')</p>
|
||||
</button>
|
||||
{{-- Permissions --}}
|
||||
<div>
|
||||
|
||||
<x-wirechat::actions.open-chat-drawer component='wirechat.chat.group.permissions'
|
||||
conversation="{{ $conversation?->id }}">
|
||||
<button
|
||||
class="cursor-pointer w-full py-5 px-8 hover:bg-[var(--wc-light-secondary)] dark:hover:bg-[var(--wc-dark-secondary)] transition text-start space-y-2 gap-3 dark:text-white/90">
|
||||
<div class="flex gap-3 items-center ">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="size-6 w-5 h-5 dark:text-gray-400">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M4.5 12a7.5 7.5 0 0 0 15 0m-15 0a7.5 7.5 0 1 1 15 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077 1.41-.513m14.095-5.13 1.41-.513M5.106 17.785l1.15-.964m11.49-9.642 1.149-.964M7.501 19.795l.75-1.3m7.5-12.99.75-1.3m-6.063 16.658.26-1.477m2.605-14.772.26-1.477m0 17.726-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205 12 12m6.894 5.785-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" />
|
||||
</svg>
|
||||
|
||||
<span>@lang('wirechat::chat.group.info.actions.group_permissions.label')</span>
|
||||
</div>
|
||||
</button>
|
||||
</x-wirechat::actions.open-chat-drawer>
|
||||
</div>
|
||||
@else
|
||||
{{-- Exit Group --}}
|
||||
<button wire:confirm="{{ __('wirechat::chat.group.info.actions.exit_group.confirmation_message') }}" wire:click="exitConversation"
|
||||
class="cursor-pointer w-full py-5 px-8 hover:bg-[var(--wc-light-secondary)] dark:hover:bg-[var(--wc-dark-secondary)] transition flex gap-3 items-center text-red-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
||||
class="bi bi-box-arrow-right w-5 h-5" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0z" />
|
||||
<path fill-rule="evenodd"
|
||||
d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z" />
|
||||
</svg>
|
||||
<span>@lang('wirechat::chat.group.info.actions.exit_group.label')</span>
|
||||
</button>
|
||||
@endif
|
||||
|
||||
</footer>
|
||||
</div>
|
||||
Reference in New Issue
Block a user