Update conversations.php
This commit is contained in:
Lizandro Guarnizo
+127
-5
@@ -514,6 +514,17 @@
|
||||
#mic-btn.recording { background: #c0392b; color: white; }
|
||||
#mic-btn i { font-size: 14px; }
|
||||
|
||||
/* Attach '+' style and menu */
|
||||
#attach-btn { background: transparent; border-radius: 6px; padding: 4px 10px; border: 1px solid transparent; font-weight:700; }
|
||||
#attach-btn:hover { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); }
|
||||
.attach-menu { background:#fff; border:1px solid #ddd; box-shadow:0 6px 18px rgba(0,0,0,0.08); border-radius:6px; padding:6px; display:none; position:absolute; z-index:1300; }
|
||||
.attach-menu .attach-option { display:block; width:100%; text-align:left; padding:6px 10px; border:none; background:transparent; font-size:14px; }
|
||||
.attach-menu .attach-option:hover { background:#f6f6f6; }
|
||||
|
||||
/* Show mic in place of send when input is empty */
|
||||
#send-btn { display: inline-block; }
|
||||
#mic-btn { display: none; }
|
||||
|
||||
.chat-conversations {
|
||||
background-repeat: repeat;
|
||||
background-color: #e9efe9;
|
||||
@@ -719,9 +730,9 @@
|
||||
<div>Cargando conversaciones...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="load-more-container" style="padding:10px; text-align:center; display:none;">
|
||||
<!--div id="load-more-container" style="padding:10px; text-align:center; display:none;">
|
||||
<button id="load-more-btn" class="btn btn-sm btn-outline-primary">Cargar más</button>
|
||||
</div>
|
||||
</div-->
|
||||
</div>
|
||||
|
||||
<!-- Área principal del chat -->
|
||||
@@ -784,11 +795,15 @@
|
||||
<button class="btn btn-sm btn-link" id="cancel-reply-btn" title="Cancelar respuesta">✕</button>
|
||||
</div>
|
||||
|
||||
<div class="chat-input">
|
||||
<div class="chat-input" style="position:relative;">
|
||||
<input type="file" id="file-input" accept="image/*,video/*,audio/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx" style="display: none;">
|
||||
<button class="btn" id="attach-btn" title="Adjuntar archivo">
|
||||
<i class="fas fa-paperclip"></i>
|
||||
<button class="btn" id="attach-btn" title="Opciones">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
<div id="attach-menu" class="attach-menu" style="display:none;">
|
||||
<button class="attach-option" data-action="file">Enviar archivo</button>
|
||||
<button class="attach-option" data-action="template">Enviar plantilla</button>
|
||||
</div>
|
||||
<div style="display:flex; gap:8px; align-items:center;">
|
||||
<select id="message-type" class="form-select form-select-sm" style="width:auto; margin-right:8px;">
|
||||
<option value="text">Texto</option>
|
||||
@@ -1226,6 +1241,16 @@
|
||||
|
||||
// Mic / recording
|
||||
const micBtn = document.getElementById('mic-btn');
|
||||
const sendBtn = document.getElementById('send-btn');
|
||||
const messageInput = document.getElementById('message-input');
|
||||
|
||||
// Move mic button to be next to send (so it appears in the send slot)
|
||||
try {
|
||||
if (micBtn && sendBtn && micBtn.parentNode) {
|
||||
sendBtn.parentNode.insertBefore(micBtn, sendBtn);
|
||||
}
|
||||
} catch (e) { /* ignore */ }
|
||||
|
||||
if (micBtn) {
|
||||
micBtn.addEventListener('click', () => {
|
||||
if (this._mediaRecorder && this._mediaRecorder.state === 'recording') {
|
||||
@@ -1236,6 +1261,99 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Toggle visibility: show mic when input empty, show send when there's text, a file selected, or template mode
|
||||
const updateSendMicVisibility = () => {
|
||||
const text = (messageInput && messageInput.value) ? messageInput.value.trim() : '';
|
||||
const typeSelect = document.getElementById('message-type');
|
||||
const isTemplate = typeSelect && typeSelect.value === 'template';
|
||||
const fileSelected = !!this.selectedFile;
|
||||
// If currently recording, show mic and don't switch to send
|
||||
if (this._mediaRecorder && this._mediaRecorder.state === 'recording') {
|
||||
if (sendBtn) sendBtn.style.display = 'none';
|
||||
if (micBtn) micBtn.style.display = 'inline-flex';
|
||||
return;
|
||||
}
|
||||
if (text.length > 0 || isTemplate || fileSelected) {
|
||||
if (sendBtn) sendBtn.style.display = 'inline-block';
|
||||
if (micBtn) micBtn.style.display = 'none';
|
||||
} else {
|
||||
if (sendBtn) sendBtn.style.display = 'none';
|
||||
if (micBtn) micBtn.style.display = 'inline-flex';
|
||||
}
|
||||
};
|
||||
|
||||
if (messageInput) {
|
||||
messageInput.addEventListener('input', updateSendMicVisibility);
|
||||
}
|
||||
|
||||
// Expose small helper to other methods
|
||||
this._updateSendMicVisibility = updateSendMicVisibility;
|
||||
|
||||
const tplContainer = document.getElementById('templateSelectContainer');
|
||||
tplContainer.style.display = (e.target.value === 'template') ? 'inline-block' : 'none';
|
||||
updateSendMicVisibility();
|
||||
});
|
||||
}
|
||||
|
||||
// File input selected -> show send button
|
||||
const fileInput = document.getElementById('file-input');
|
||||
if (fileInput) {
|
||||
fileInput.addEventListener('change', (ev) => {
|
||||
if (ev.target.files && ev.target.files.length) {
|
||||
// existing showMediaPreview handles storing this.selectedFile
|
||||
this.showMediaPreview(ev.target.files[0]);
|
||||
}
|
||||
updateSendMicVisibility();
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize visibility
|
||||
setTimeout(updateSendMicVisibility, 10);
|
||||
|
||||
// Attach '+' menu handling
|
||||
const attachBtn = document.getElementById('attach-btn');
|
||||
const attachMenu = document.getElementById('attach-menu');
|
||||
if (attachBtn && attachMenu) {
|
||||
attachBtn.addEventListener('click', (ev) => {
|
||||
ev.stopPropagation();
|
||||
const isOpen = attachMenu.style.display === 'block';
|
||||
// position menu under the button
|
||||
const rect = attachBtn.getBoundingClientRect();
|
||||
attachMenu.style.left = (rect.left) + 'px';
|
||||
attachMenu.style.top = (rect.bottom + 8) + 'px';
|
||||
attachMenu.style.display = isOpen ? 'none' : 'block';
|
||||
});
|
||||
|
||||
// Option clicks
|
||||
attachMenu.addEventListener('click', (ev) => {
|
||||
const action = ev.target && ev.target.dataset ? ev.target.dataset.action : null;
|
||||
if (!action) return;
|
||||
ev.stopPropagation();
|
||||
attachMenu.style.display = 'none';
|
||||
if (action === 'file') {
|
||||
if (fileInput) fileInput.click();
|
||||
} else if (action === 'template') {
|
||||
// switch to template mode and focus selector
|
||||
const typeSelect = document.getElementById('message-type');
|
||||
if (typeSelect) {
|
||||
typeSelect.value = 'template';
|
||||
const evt = new Event('change');
|
||||
typeSelect.dispatchEvent(evt);
|
||||
const tplSel = document.getElementById('templateSelect');
|
||||
if (tplSel) tplSel.focus();
|
||||
updateSendMicVisibility();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// close when clicking outside
|
||||
document.addEventListener('click', (ev) => {
|
||||
if (attachMenu && attachMenu.style.display === 'block' && !attachMenu.contains(ev.target) && ev.target !== attachBtn) {
|
||||
attachMenu.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Mobile: sidebar toggle
|
||||
const sidebar = document.querySelector('.chat-sidebar');
|
||||
const sidebarToggle = document.getElementById('sidebar-toggle');
|
||||
@@ -1848,6 +1966,8 @@
|
||||
this._recordingStart = Date.now();
|
||||
document.getElementById('recording-indicator').style.display = 'block';
|
||||
document.getElementById('mic-btn').classList.add('recording');
|
||||
// Ensure UI shows mic and hides send while recording
|
||||
if (this._updateSendMicVisibility) this._updateSendMicVisibility();
|
||||
const update = () => {
|
||||
if (!this._recordingStart) return;
|
||||
const elapsed = Math.floor((Date.now() - this._recordingStart) / 1000);
|
||||
@@ -1871,6 +1991,7 @@
|
||||
this._recordingStart = null;
|
||||
document.getElementById('recording-indicator').style.display = 'none';
|
||||
document.getElementById('mic-btn').classList.remove('recording');
|
||||
if (this._updateSendMicVisibility) this._updateSendMicVisibility();
|
||||
};
|
||||
|
||||
this.cancelRecording = function() {
|
||||
@@ -1884,6 +2005,7 @@
|
||||
this._recordingStart = null;
|
||||
document.getElementById('recording-indicator').style.display = 'none';
|
||||
document.getElementById('mic-btn').classList.remove('recording');
|
||||
if (this._updateSendMicVisibility) this._updateSendMicVisibility();
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user