Skip to content

Commit

Permalink
Merge pull request #55 from abdelmjid-saber/develop
Browse files Browse the repository at this point in the history 
add chat style
  • Loading branch information
@3x1io
3x1io authored Mar 31, 2024
2 parents 2fa8167 + fc7d7ad commit c6aacec
Show file tree
Hide file tree
Showing 4 changed files with 190 additions and 11 deletions.
5 changes: 5 additions & 0 deletions Modules/CircleXO/App/Http/Controllers/ProfileController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,11 @@ public function message(Request $request, AccountContact $message)
return view('circle-xo::profile.message', compact('message'));
}

public function messageInfoProfile(Request $request, $profile)
{
return view('circle-xo::profile.message-profile-info');
}

public function qr()
{
$qr = QrCode::format('png')
Expand Down
44 changes: 44 additions & 0 deletions Modules/CircleXO/resources/views/profile/message-profile-info.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<x-splade-modal>
<div class="py-10 text-center text-sm pt-20">
<img src="{{ asset('placeholder.webp') }}" class="w-24 h-24 rounded-full mx-auto mb-3" alt="">
<div class="mt-8">
<div class="md:text-xl text-base font-medium text-white">Abdelmjid Saber</div>
<div class="text-white/80 text-sm mt-1">@AbdelmjidSaber</div>
</div>
<div class="mt-5">
<a href="#"
class="inline-block rounded-full px-4 py-1.5 text-sm font-semibold bg-zinc-700 text-white">View
profile</a>
</div>
</div>

<hr class="border-zinc-700 opacity-80">

<ul class="text-base font-medium p-3">
<li>
<div class="flex items-center gap-5 rounded-md p-3 w-full hover:bg-zinc-700 text-white">
<i class="bx bx-bell-off text-2xl"></i>
Mute Notification
</div>
</li>
<li>
<button type="button" class="flex items-center gap-5 rounded-md p-3 w-full hover:bg-zinc-700 text-white">
<i class="bx bx-flag text-2xl"></i>
Report
</button>
</li>
<li>
<button type="button" class="flex items-center gap-5 rounded-md p-3 w-full hover:bg-zinc-700 text-white">
<i class="bx bx-stop-circle text-2xl"></i>
Block
</button>
</li>
<li>
<button type="button" class="flex items-center gap-5 rounded-md p-3 w-full hover:bg-red-50 text-red-500">
<i class="bx bx-trash text-2xl"></i>
Delete Chat
</button>
</li>
</ul>
</div>
</x-splade-modal>
151 changes: 140 additions & 11 deletions Modules/CircleXO/resources/views/profile/messages.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,144 @@
<x-circle-xo-profile-layout>
<x-splade-data
default="{
makeMenuHide: false,
}"

remember="admin"
local-storage
>

<div
v-cloak
v-show="data.makeMenuHide"
@click.prevent="data.makeMenuHide = !data.makeMenuHide"
class="fixed inset-0 z-20 w-full h-full filament-sidebar-close-overlay lg:hidden backdrop-blur"
>

</div>

<div class="my-12 mx-8 lg:mx-16">
<x-splade-table :for="$table" striped>
<x-splade-cell name>
<x-tomato-admin-row table :value="$item->name" type="text" />
</x-splade-cell>
<x-splade-cell email>
<x-tomato-admin-row table :value="$item->email" type="email" />
</x-splade-cell>
<x-splade-cell anonymous_message>
<x-tomato-admin-row table :value="$item->anonymous_message" type="bool" />
</x-splade-cell>
</x-splade-table>
<div class="relative overflow-hidden border border-zinc-700 -m-2.5 rounded-xl">
<div class="flex bg-zinc-800">

{{-- sidebar --}}
<aside class="md:w-[360px] relative border-r border-zinc-700" >
<div :class="{'hidden md:block': !data.makeMenuHide}" class="top-0 left-0 max-md:fixed max-md:w-5/6 max-md:h-screen bg-zinc-800 z-50 max-md:shadow max-md:-tranzinc-x-full">
{{-- heading title --}}
<div class="p-4 border-b border-zinc-700">
<div class="flex mt-2 items-center justify-between">
<h2 class="text-2xl font-bold text-white ml-1">Chats</h2>
</div>
{{-- search --}}
<div class="relative mt-4">
<x-splade-form method="GET" action="{{url()->current()}}" :default="['search' => request()->get('search') ?? '']">
<x-splade-input type="search" name="search" placeholder="{{__('Search ...')}}" />
</x-splade-form>
</div>
</div>

{{-- users list --}}
<div class="space-y-2 p-2 overflow-y-auto md:h-[calc(100vh-204px)] h-[calc(100vh-130px)]">
<a href="#" class="relative flex items-center gap-4 p-2 duration-200 rounded-xl hover:bg-zinc-700">
<div class="relative w-14 h-14 shrink-0">
<img src="{{ asset('placeholder.webp') }}" alt="" class="object-cover w-full h-full rounded-full">
<div class="w-4 h-4 absolute bottom-0 right-0 bg-green-500 rounded-full border border-zinc-800"></div>
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2 mb-1.5">
<div class="mr-auto text-sm text-white font-medium">Abdelmjid Saber</div>
<div class="text-xs font-light text-white/70">09:40AM</div>
</div>
<div class="font-medium overflow-hidden text-ellipsis text-sm whitespace-nowrap">Great, thank you.</div>
</div>
</a>
</div>
</div>
</aside>

{{-- message center --}}
<div class="flex-1">
{{-- chat heading --}}
<div class="flex items-center justify-between gap-2 w- px-6 py-3.5 z-10 border-b border-zinc-700 uk-animation-slide-top-medium">
<div class="flex items-center sm:gap-4 gap-2">
{{-- toggle for mobile --}}
<button type="button" @click.prevent="data.makeMenuHide = !data.makeMenuHide" class="md:hidden">
<i class="bx bx-chevron-left text-4xl -ml-4"></i>
</button>
<div class="relative cursor-pointer max-md:hidden">
<img src="{{ asset('placeholder.webp') }}" alt="" class="w-8 h-8 rounded-full shadow">
<div class="w-2 h-2 bg-teal-500 rounded-full absolute right-0 bottom-0 m-px"></div>
</div>
<div class="cursor-pointer">
<div class="text-base font-bold">Abdelmjid Saber</div>
<div class="text-xs text-green-500 font-semibold">Online</div>
</div>
</div>

<div class="flex items-center gap-2">
<Link slideover href="{{ route('profile.messages.profile-info.show', 'abdelmjid') }}" class="hover:bg-zinc-700 p-1.5 rounded-full">
<i class="bx bx-info-circle text-lg"></i>
</Link>
</div>
</div>

{{-- chats bubble --}}
<div class="w-full p-5 py-10 overflow-y-auto md:h-[calc(100vh-204px)] h-[calc(100vh-195px)]">

<div class="py-10 text-center text-sm lg:pt-8">
<img src="{{ asset('placeholder.webp') }}" class="w-24 h-24 rounded-full mx-auto mb-3" alt="">
<div class="mt-8">
<div class="md:text-xl text-base font-medium text-white">Abdelmjid Saber </div>
<div class="text-white/80 text-sm"> @AbdelmjidSaber </div>
</div>
<div class="mt-3.5">
<a href="#" class="inline-block rounded-lg px-4 py-1.5 text-sm font-semibold bg-zinc-700">View profile</a>
</div>
</div>

<div class="text-sm font-medium space-y-6">

{{-- received --}}
<div class="flex gap-3">
<img src="{{ asset('placeholder.webp') }}" alt="" class="w-9 h-9 rounded-full shadow">
<div class="px-4 py-2 rounded-[20px] max-w-sm bg-zinc-700"> Hi, I’m Fady </div>
</div>

{{-- sent --}}
<div class="flex gap-2 flex-row-reverse items-end">
<img src="{{ asset('placeholder.webp') }}" alt="" class="w-5 h-5 rounded-full shadow">
<div class="px-4 py-2 rounded-[20px] max-w-sm bg-gradient-to-tr from-sky-500 to-blue-500 text-white shadow"> I’m Abdelmjid. welcome Fady</div>
</div>

{{-- time --}}
<div class="flex justify-center ">
<div class="font-medium text-white/70 text-sm">
March 29,2024,6:30 PM
</div>
</div>


{{-- sent --}}
<div class="flex gap-2 flex-row-reverse items-end">
<img src="{{ asset('placeholder.webp') }}" alt="" class="w-5 h-5 rounded-full shadow">
<div class="px-4 py-2 rounded-[20px] max-w-sm bg-gradient-to-tr from-sky-500 to-blue-500 text-white shadow">Great, thank you.</div>
</div>
</div>
</div>

{{-- sending message area --}}
<div class="flex items-center md:gap-4 gap-2 md:p-3 p-2 overflow-hidden">
<div class="relative flex-1">
<textarea placeholder="Write your message" rows="1" class="w-full resize-none bg-zinc-700 rounded-full px-4 p-2"></textarea>
<button type="submit" class="text-white shrink-0 p-2 absolute right-0.5 top-0">
<i class="bx bx-send text-xl flex"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>

</x-splade-data>
</x-circle-xo-profile-layout>
1 change: 1 addition & 0 deletions Modules/CircleXO/routes/web.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@
Route::get('/followers', [ProfileController::class, 'followers'])->name('followers');
Route::get('/messages', [ProfileController::class, 'messages'])->name('messages');
Route::get('/messages/{message}', [ProfileController::class, 'message'])->name('messages.show');
Route::get('/messages/info/{profile}', [ProfileController::class, 'messageInfoProfile'])->name('messages.profile-info.show');
Route::get('/edit/social-accounts', [ProfileController::class, 'socialAccounts'])->name('social-accounts.show');
Route::post('/edit/social-accounts', [ProfileController::class, 'socialAccountsUpdate'])->name('social-accounts.update');
Route::get('/edit/password', [ProfileController::class, 'password'])->name('password.show');
Expand Down

0 comments on commit c6aacec

Please sign in to comment.