Bars

Documentation for chat bar.

Files

app/styles/modules/_chat.scss

Chat bar

Chat bar is chat module element that consists of three sections .chat-bar_section-secondary for avatar, .chat-bar_section-primary for headline and text note and .chat-bar_section-actions for actions. It can be created by wrapping these three sections into element with class .chat-bar and following HTML structure shown in example below.

Example:code
Rooms

Adipisicing

Labore

searchsettings
Code: 
<header class="chat-bar">
  <section class="chat-bar_section-secondary">
    <figure class="avatar">
      <img src="/images/app/avatar-rooms.jpg" alt="Rooms" class="img-fluid img-circle">
    </figure>
  </section>
  <section class="chat-bar_section-primary">
    <h2 class="no-mrg text-color-theme">Adipisicing</h2>
    <p class="no-mrg text-note">Labore</p>
  </section>
  <section class="chat-bar_section-actions">
    <a class="btn btn-flat">
      <i class="icon icon-m">search</i>
    </a>
    <a class="btn btn-flat">
      <i class="icon icon-m">settings</i>
    </a>
  </section>
</header>

Alternative usage

Chat bar can be also used as sub bar which contains list of avatars and actions.

Example:code
add
videocamcallmessageinfo
Code: 
<header class="chat-bar">

  <section class="chat-bar_section-primary">
    <ul class="avatarlist"> 
      ... 
    </ul>
    <a class="btn btn-flat">
      <i class="icon icon-l">add</i>
    </a>
  </section>

  <section class="chat-bar_section-actions">
    <div class="btn-line">
      ...
    </div>
  </section>

</header>