nucleo000/planilla
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve floating chat

Browse Source
This commit is contained in:
josedario87
2025-06-11 04:49:16 -06:00
parent 2bcf04a027
commit 3282491415
1 changed files with 43 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
ui/src/components/chat/FloatingChat.vue
View File

@@ -7,14 +7,26 @@ const open = ref(false)
<template>
<div>
<button v-if="!open" @click="open = true" class="chat-fab" aria-label="Abrir chat">
<button
v-if="!open"
@click="open = true"
class="chat-fab"
aria-label="Abrir chat"
>
💬
</button>
<transition name="fade">
<div v-if="open" class="chat-window">
<div class="chat-header">
<button @click="open = false" class="close-btn" aria-label="Cerrar chat">✖</button>
</div>
<header class="chat-header">
<h3 class="title">Chat</h3>
<button
@click="open = false"
class="close-btn"
aria-label="Cerrar chat"
>
✕
</button>
</header>
<CanvasChat class="flex-1 min-h-0" />
</div>
</transition>
@@ -43,24 +55,44 @@ const open = ref(false)
right: 1rem;
width: 24rem; /* 384px */
height: 32rem; /* 512px */
background-color: var(--background-color);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
background: var(--background-color);
background-image: linear-gradient(
135deg,
rgba(255, 255, 255, 0.6),
rgba(255, 255, 255, 0.2)
);
border: 1px solid var(--border-color);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
border-radius: 0.5rem;
backdrop-filter: blur(8px);
display: flex;
flex-direction: column;
z-index: 60;
}
.chat-header {
display: flex;
justify-content: flex-end;
padding: 0.25rem;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--border-color);
font-weight: 600;
color: var(--primary-color);
}
.close-btn {
background: transparent;
background: var(--secondary-color);
border: none;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
cursor: pointer;
color: var(--text-color);
font-size: 1.25rem;
color: var(--background-color);
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.close-btn:hover {
filter: brightness(1.1);
}
.fade-enter-active, .fade-leave-active {
transition: opacity 0.2s;