.c-send-message
scss
.c-send-message {
background-color: use-color(base, true-white);
border-top: solid 1px use-color('grey', light-i);
display: flex;
flex-direction: column;
@include element('attachments') {
padding: 8px;
}
@include element('input') {
background: transparent;
border: 0;
height: 40px;
margin: 0;
overflow: hidden;
padding: 8px;
resize: none;
&:focus {
box-shadow: none;
}
}
@include element('actions') {
display: flex;
margin-bottom: 8px;
a {
color: use-color('grey', light);
padding: 6px 8px;
text-decoration: none;
&:nth-last-child(1) {
margin-left: auto;
}
}
[class^='icon-'],
[class*=' icon-'] {
font-size: 19px;
padding: 0 8px;
}
}
@include element('closed-chat') {
background-color: use-color('base', 'true-white');
display: none;
height: 100%;
padding-top: 1%;
position: absolute;
text-align: center;
width: 100%;
@include if-block-has-modifier('c-send-message', 'closed-chat') {
display: block;
}
@include modifier('message') {
@include use-font('caption');
color: use-color('grey', 'light');
margin: 4px 0;
}
.c-button {
max-width: 196px;
}
}
.attachment {
@include element('item') {
display: flex;
height: 80px;
justify-content: center;
overflow: hidden;
position: relative;
text-align: center;
width: 80px;
}
@include element('image') {
border-radius: 8px;
display: inline-block;
height: 80px;
}
@include element('close') {
background-color: transparentize(use-color(base, 'black'), 0.6);
border-radius: 50%;
display: flex;
height: 14px;
justify-content: center;
position: absolute;
right: 4px;
top: 4px;
width: 14px;
[class^='icon-'],
[class*=' icon-'] {
align-self: center;
color: use-color(base, true-white);
font-size: 6px;
}
}
}
}Componente para Envio de Mensajes
Este componente contempla todo lo necesario (soportado) por chattigo
para el envío de mensajes.
.c-send-message- bloque principal.c-send-message__attachments- bloque para almacenar elementos adjuntos.attachment__item- item adjunto.attachment__close- icono X para cancelar la subida.attachment__image- imagen del tipo de archivo
.c-send-message__input- input del tipo textarea.c-send-message__actions- anchor tags con iconos según acciones
Input behavior
En la implementación real de este componente, el textarea debería crecer según la cantidad de contenido que tenga este, para mantener todo el contenido siempre visible.
Para realizar esta tarea en necesario agregar una pequeña funcionalidad con javascript, usando JS HOOKS para cumplir este cometido.
Agregar las siguientes clases:
- Send Message .c-send-message
.widget-send-message-box-js- .c-input.c-send-message__input
.widget-message-input-js
- .c-input.c-send-message__input
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
findMessageBox = document.getElementsByClassName('widget-send-message-box-js');
if(findMessageBox.length) {
sendMessageBox = findMessageBox[0];
inputMessage = sendMessageBox.getElementsByClassName('widget-message-input-js')[0];
if (inputMessage) {
inputMessage.addEventListener("keyup", function() {
// set new height of the input message
inputMessage.style.height = "1px";
inputMessage.style.height = (2 + inputMessage.scrollHeight) + "px";
});
}
}
});
</script>
Closed Chat [new]
Agregamos el elemento c-send-message__closed-chat para cuando un chat este cerrado, puede estar siempre
presente y cuando se agregue la clase modificadora c-send-message--closed-chat al block c-send-message se hara visible:
<div class="c-send-message__closed-chat">
*
*
*
<div class="c-send-message__closed-chat">
<p class="c-send-message__closed-chat--message">
Este chat se cerró porque el cliente abandonó la conversación
</p>
<a class="c-button c-button--secondary c-button--thin">
Aceptar
</a>
</div>
</div>
Si quieres ver un ejemplo funcional, puedes visitar Widget Examples.
Examples
html
<div class="c-send-message widget-send-message-box-js">
<textarea class="c-input c-send-message__input widget-message-input-js" placeholder="Envía un mensaje..."></textarea>
<div class="c-send-message__actions">
<a href="#">
<span class="icon-attachment"></span>
</a>
<a href="#">
<span class="icon-emoji"></span>
</a>
<a class="c-send-button" href="#">
<span class="icon-send"></span>
</a>
</div>
</div>
html
w/ attachments
<div class="c-send-message">
<div class="c-send-message__attachments">
<div class="attachment__item">
<div class="attachment__close">
<span class="icon-close"></span>
</div>
<img class="attachment__image" src="https://cdn.chattigo.com/assets/img/attachment/preview/PDF.svg" />
</div>
</div>
<textarea class="c-input c-send-message__input" placeholder="Envía un mensaje..."></textarea>
<div class="c-send-message__actions">
<a href="#">
<span class="icon-attachment"></span>
</a>
<a href="#">
<span class="icon-emoji"></span>
</a>
<a class="c-send-button c-send-button--ready" href="#">
<span class="icon-send"></span>
</a>
</div>
</div>
html
closed chat
<div class="c-send-message c-send-message--closed-chat">
<textarea class="c-input c-send-message__input" placeholder="Envía un mensaje..."></textarea>
<div class="c-send-message__actions">
<a href="#">
<span class="icon-attachment"></span>
</a>
<a href="#">
<span class="icon-emoji"></span>
</a>
<a class="c-send-button" href="#">
<span class="icon-send"></span>
</a>
</div>
<div class="c-send-message__closed-chat">
<p class="c-send-message__closed-chat--message">
Este chat se cerró porque el cliente abandonó la conversación
</p>
<a class="c-button c-button--secondary c-button--thin">
Aceptar
</a>
</div>
</div>