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

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

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