Ajout des 3 points lors de l'ecriture d'un message.
This commit is contained in:
Bilal Dieumegard
parent
5e1630af28
commit
f11be741c5
5 changed files with 77 additions and 51 deletions
|
|
@ -2,10 +2,10 @@
|
|||
import Button from '$lib/components/ui/button/button.svelte';
|
||||
|
||||
export let user;
|
||||
export let userId;
|
||||
export let show = false; // Contrôle si la carte est visible
|
||||
export let onClose = () => {}; // Fonction pour fermer la carte
|
||||
|
||||
console.log(user)
|
||||
|
||||
const disconnect = async () => {
|
||||
try {
|
||||
|
|
@ -35,10 +35,11 @@
|
|||
<div class="flex flex-col gap-2">
|
||||
<div class="profile-header">
|
||||
<!-- Image de profil -->
|
||||
<img src={user.profilePicture} alt="Profile" class="profile-image" />
|
||||
<img src="http://localhost:5173/{user.profilePicture}" alt="Profile" class="profile-image" />
|
||||
<h2 id="profile-card-title" class="profile-name">{user.username}</h2>
|
||||
</div>
|
||||
<p>{user.name} {user.surname}</p>
|
||||
<p>{user.email}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-3">
|
||||
|
|
|
|||
|
|
@ -2,49 +2,29 @@
|
|||
export let user;
|
||||
</script>
|
||||
|
||||
<div class="flex items-center gap-4 p-3 cursor-pointer hover:bg-gray-100 rounded-lg border border-gray-300 shadow-sm">
|
||||
<img
|
||||
src={`http://localhost:5173/${user.profilePicture}`}
|
||||
alt="Profile"
|
||||
class="h-12 w-12 rounded-full border border-gray-300"
|
||||
/>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-medium text-gray-800">{user.username}</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-xs text-gray-500">{user.state}</span>
|
||||
{#if user.state === "En ligne"}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-3 w-3 text-green-500"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
|
||||
/>
|
||||
</svg>
|
||||
{:else if status === "Ecrit"}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-3 w-3 text-blue-500"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
|
||||
/>
|
||||
</svg>
|
||||
{/if}
|
||||
<div class="flex items-center gap-4 justify-between p-3 cursor-pointer hover:bg-gray-100 rounded-lg border border-gray-300 shadow-sm">
|
||||
<div class="flex items-center gap-4">
|
||||
<img
|
||||
src={`http://localhost:5173/${user.profilePicture}`}
|
||||
alt="Profile"
|
||||
class="h-12 w-12 rounded-full border border-gray-300"
|
||||
/>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-medium text-gray-800">{user.username}</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-xs text-gray-500">{user.state}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if user.state === "En ligne"}
|
||||
<div class="online-indicator"></div>
|
||||
{:else if user.state === "Ecrit"}
|
||||
<div class="typing-animation">
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
@ -53,4 +33,45 @@
|
|||
background-color: #f3f4f6;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* Styles pour le point vert (En ligne) */
|
||||
.online-indicator {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #22c55e; /* Couleur verte */
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 4px rgba(34, 197, 94, 0.6); /* Glow léger */
|
||||
}
|
||||
|
||||
/* Styles pour l'animation des trois points */
|
||||
.typing-animation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: #3b82f6; /* Couleur bleue */
|
||||
border-radius: 50%;
|
||||
animation: bounce 1.2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.dot:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.dot:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -75,6 +75,12 @@ export async function GET({ url }) {
|
|||
|
||||
channels = channels.concat(canaux);
|
||||
|
||||
channels = channels.filter((channel, index, self) =>
|
||||
index === self.findIndex((t) => (
|
||||
t.id === channel.id
|
||||
))
|
||||
);
|
||||
|
||||
channels = sortChannels(channels);
|
||||
|
||||
channels = channels.slice(0, 10);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export async function load({ fetch }) {
|
||||
export async function load({ fetch, locals }) {
|
||||
|
||||
try {
|
||||
// Appel API ou récupération de données
|
||||
|
|
@ -12,12 +12,14 @@ export async function load({ fetch }) {
|
|||
|
||||
// Retourner les données à la page sous forme de props
|
||||
return {
|
||||
channels
|
||||
channels,
|
||||
userId: locals.userId
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement des canaux:', error);
|
||||
return {
|
||||
channels: []
|
||||
channels: [],
|
||||
userId: locals.userId
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -35,22 +35,18 @@
|
|||
});
|
||||
|
||||
function openProfileCard() {
|
||||
console.log('openProfileCard');
|
||||
showProfileCard = true; // Inverser l'état pour afficher/masquer le ProfilCard
|
||||
}
|
||||
|
||||
function closeProfileCard() {
|
||||
console.log('closeProfileCard');
|
||||
showProfileCard = false; // Inverser l'état pour afficher/masquer le ProfilCard
|
||||
}
|
||||
|
||||
function openCreateChat() {
|
||||
console.log('openCreateChat');
|
||||
showCreateChat = true; // Afficher le composant CreateChat
|
||||
}
|
||||
|
||||
function closeCreateChat() {
|
||||
console.log('closeCreateChat');
|
||||
showCreateChat = false; // Fermer le composant CreateChat
|
||||
}
|
||||
|
||||
|
|
@ -112,7 +108,7 @@
|
|||
|
||||
</div>
|
||||
<CreateChat show={showCreateChat} socket={socket} onClose={closeCreateChat} listRef={chatListRef} />
|
||||
<ProfileCard user={data.user} show={showProfileCard} onClose={closeProfileCard} />
|
||||
<ProfileCard user={data.user} userId={data.userId} show={showProfileCard} onClose={closeProfileCard} />
|
||||
|
||||
<style>
|
||||
.h-full {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue