chattigo-webkit 1.19.7

.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;
    }
  }

  .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
<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>

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>

Requires

@function use-color()

@mixin element()

.c-supervisor-message

scss 
.c-supervisor-message {
  border: solid 1px use-color('grey', 'light-iii');
  border-radius: 8px;
  box-shadow: $box-shadow-card-lvl-2;
  display: flex;
  margin-bottom: 0;
  width: 100%;

  @include element('mode') {
    align-items: center;
    background-image: use-color('gradients', 'info-soft');
    border-radius: 8px 0 0 8px;
    display: flex;
    padding: 25px;

    @include if-block-has-modifier('c-supervisor-message', 'whisper') {
      background-image: use-color('gradients', 'grey-soft');

      .c-switch + label {
        background-color: use-color('grey');
        
        &::after {
          color: use-color('grey') !important;
          content: '\e959';
          font-family: 'icomoon' !important;
        }
      }
    }

    // responsive
    @include media-breakpoint-down('tablet') {
      background-image: use-color('gradients', 'info-soft--vertical');
      border-radius: 8px 8px 0 0;
      padding: 12px;

      @include if-block-has-modifier('c-supervisor-message', 'whisper') {
        background-image: use-color('gradients', 'grey-soft--vertical');
      }
    }
  }

  @include element('mode-icon') {
    color: use-color('secondary');
    font-size: 41px;
  }

  @include element('info') {
    @include use-font('caption');
    line-height: 14px;
    margin-left: 16px;
    width: 150px;

    @include media-breakpoint-down('tablet') {
      width: 100%;
    }

    span {
      @include use-font('body', 'bold');
      display: inline-block;
      line-height: 8px;
      width: 100%;
    }
  }

  @include modifier('whisper') {
    border: dashed 1px use-color('grey', 'light') !important;
  }

  // responsive
  @include media-breakpoint-down('tablet') {
    flex-direction: column;
  }

  // overrides
  .c-send-message {
    border: 0;
    border-radius: 0 8px 8px 0;
    width: 100%;

    @include element('input') {
      height: 50px;
    }

    @include media-breakpoint-down('tablet') {
      border-radius: 0 0 8px 8px;
    }
  }

  .c-switch {
    + label {
      background-color: use-color('secondary');
      text-align: center;
      width: 46px;
      
      &::after {
        align-items: center;
        color: use-color('secondary');
        content: '\e958';
        display: flex;
        font-family: 'icomoon' !important;
        justify-content: center;
      }
    }
  }
}

Desarrollado para la intervención del supervisor en un chat.

El elemento c-supervisor-message__mode contiene información del modo de intervención.

  • c-supervisor-message__mode-icon para el icono.
  • c-supervisor-message__info para el contenido de texto.

El elemento c-send-message funciona de la misma manera anteriormente descrita.

Examples

html unassigned 
<div class="u-example-padding">

<div class="c-supervisor-message">
  <div class="c-supervisor-message__mode">
    <span class="c-supervisor-message__mode-icon icon-intervention"></span>
    
    <div class="c-supervisor-message__info">
      <span>Modo intervención</span>
      Lo que escribas será visible para el cliente
    </div>
  </div>

  <div class="c-send-message">
    <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>
</div>

</div>
html whisper mode 
<div class="u-example-padding">

<div class="c-supervisor-message c-supervisor-message--whisper">
  <div class="c-supervisor-message__mode">    
    <input type="checkbox" class="c-switch" id="first">
    <label for="first"></label>
              
    <div class="c-supervisor-message__info">
      <span>Modo susurro</span>
      Lo que escribas solo será visible para el agente
    </div>
    
    <div class="c-supervisor-message__info" style="display: none;">
      <span>Modo intervención</span>
      Lo que escribas será visible para el cliente
    </div>
  </div>

  <div class="c-send-message">
    <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>
</div>

</div>
html intervention mode 
<div class="u-example-padding">

<div class="c-supervisor-message">
  <div class="c-supervisor-message__mode">    
    <input type="checkbox" class="c-switch" id="first">
    <label for="first"></label>
              
    <div class="c-supervisor-message__info" style="display: none;">
      <span>Modo susurro</span>
      Lo que escribas solo será visible para el agente
    </div>
    
    <div class="c-supervisor-message__info">
      <span>Modo intervención</span>
      Lo que escribas será visible para el cliente
    </div>
  </div>

  <div class="c-send-message">
    <textarea class="c-input c-send-message__input" onkeyup="textAreaAdjust(this)" 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>
</div>

</div>

Requires

@function use-color()

@mixin element()

@mixin use-font()