Chat

The chat module must be placed inside .app-layout to function correctly. Chat uses Slideover to toggle its visibility.

Note

Please note that this preview overrides some styles for it to be shown inline.

Files

app/styles/modules/chat/config.scss
app/styles/modules/chat/style.scss
app/views/modules/chat/_chat-base.pug
app/views/modules/chat/_chat-compose.pug
app/views/modules/chat/_chat-messages.pug
app/views/modules/chat/_chat-recipient-select.pug

Chat

Example:
Code:
<div class="slideover" id="chat" data-toggle-expand="" aria-expanded="false">
  <div class="pane">
    <div class="pane__header">
      ...
    </div>
    <div class="pane__body">
      <div class="pane__content pane__content--fill">

        <article class="chat-message">
          <div class="bar bar--small align-items-middle mb-small">
            <div class="bar__item">
              // avatar
            </div>
            <div class="bar__item"><span class="text-vam">...</span></div>
            <div class="bar__item bar__item--fill"><span class="text-vam text-color-grey">...</span></div>
            <div class="bar__item">
              // Badge
            </div>
          </div>
          <p class="chat-message___text text-small">...</p>
        </article>
        
        ...
          
      </div>
    </div>
    <div class="pane__content border-top">
      <form>
        <div class="form-control form-control--textarea">
          <textarea class="input" rows="1" data-autosize=""></textarea>
        </div>
        <div class="bar mb-none">
          <div class="bar__item">
            <div class="bar bar--small mb-none">
              <div class="bar__item">
                <div class="form-label">
                  <label class="text-vam" for="recipients-toggle">To</label>
                </div>
              </div>
              <div class="bar__item">
                <button class="btn btn--hollow mb-none" type="button" id="recipients-toggle" name="recipients-toggle" data-toggle="#chat-recipients">
                  ...
                </button>
              </div>
            </div>
          </div>
          <div class="bar__item align-self-right">
            <button class="btn mb-none" type="submit">
              ...
            </button>
          </div>
        </div>
      </form>
    </div>

    <div class="slideover slideover--to-top" id="chat-recipients" data-toggle-expand="" aria-expanded="false">
      <div class="pane">
        <div class="pane__header">
          ...
        </div>
        <div class="pane__body">

          <ul class="list list--condensed list--clean">

            <li class="list__item list__item--clickable"> 
              <div class="bar bar--small">
                <div class="bar__item">
                  // avatar
                </div>
                <div class="bar__item"><span class="text-vam">All</span></div>
              </div>
            </li>

            <li class="list__item border-bottom">
              <div class="text-small text-color-grey">People</div>
            </li>

            <li class="list__item list__item--clickable"> 
              <div class="bar bar--small">
                <div class="bar__item">
                  // avatar
                </div>
                <div class="bar__item"><span class="text-vam">Mario Speedwagon</span></div>
              </div>
            </li>

            ...
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>