Messages

Documentation for message component.

Files

app/styles/modules/_chat.scss

Messages

Message component is complex element which can be used to show message text and description info for message. The message component can be divided into three main elements: message sender, message header and message content.

Example:code

Michel Doe

Lorem ipsum Excepteur mollit ad esse velit Ut ad ex velit voluptate qui dolor eu elit et commodo ad sit adipisicing dolor.

Code: 
<article class="message">
  <aside class="message_sender"> ... </aside>
  <section class="message_body">
    <header class="message_body_header"> ... </header>
    <div class="message_body_content"> ... </div>
  </section>
</article>

Message sender

Message sender is container for avatar. It can be created by using class .message_sender on element and adding avatar inside, as shown in example below.

Example:code
Code: 
<article class="message">
  <aside class="message_sender">
    <figure class="avatar avatar-state avatar-state-green">
      <img src="/images/content/people/michel.jpg" alt="Michel" class="img-fluid img-circle">
    </figure>
  </aside>
  ... rest of message ...
</article>

Message header

Message header is container for message description as sender name and time of send. It can be created by adding element with class .message_body_header into element .message_body and following HTML for description in example below.

Example:code

Michel Doe

Code: 
<article class="message">
  ....
  <section class="message_body">
    <header class="message_body_header">
      <p class="no-mrg"> <strong>Michel Doe</strong>
        <time class="text-color-gray-400">11:19</time>
      </p>
    </header>
  </section>
</article>

Message content

Message content is container for message text or content. It can be created by adding element with class .message_body_content into element .message_body. All message content should be then wrapped in this container.

Example:code

Lorem ipsum Excepteur mollit ad esse velit Ut ad ex velit voluptate qui dolor eu elit et commodo ad sit adipisicing dolor.

Code: 
<article class="message">
  ...
  <section class="message_body">
    ...
    <div class="message_body_content"> 
      <p>Lorem ipsum Excepteur mollit ad esse velit Ut ad ex velit voluptate qui dolor eu elit et commodo ad sit adipisicing dolor.</p>
    </div>
  </section>
</article>

Message types

There are three types of messages: default, own message and notification message. The first two types have same HTML structure except the own message has additional class .message-own which will move avatar on right side and change color of message content element. The notification message type is same as default message except it has no message content and the notification text is inside .message_body_header

Example:code

Michel Doe

Lorem ipsum Excepteur mollit ad esse velit Ut ad ex velit voluptate qui dolor eu elit et commodo ad sit adipisicing dolor.

Clark High

Nulla dolor dolore ut do cupidatat aliqua commodo cupidatat magna Excepteur laboris est Ut aliqua dolore in eu Ut.

John Doeis typing.

Code: 
<!-- default message -->
<article class="message">
  <aside class="message_sender"> ... </aside>
  <section class="message_body"> ... </section>
</article>

<!-- own message -->
<article class="message message-own">
  <aside class="message_sender"> ... </aside>
  <section class="message_body"> ... </section>
</article>

<!-- notification message -->
<article class="message">
  <aside class="message_sender"> ... </aside>
  <section class="message_body">
    <header class="message_body_header">
      <p class="no-mrg"> 
        <strong>John Doe</strong>
        <span class="text-color-gray-400">is typing.</span>
      </p>
    </header>
  </section>
</article>

Messages container

All messages should be wrapped into container with class .messagescontainer as shown in example below.

Example:code

Michel Doe

Lorem ipsum Excepteur mollit ad esse velit Ut ad ex velit voluptate qui dolor eu elit et commodo ad sit adipisicing dolor.

Clark High

Nulla dolor dolore ut do cupidatat aliqua commodo cupidatat magna Excepteur laboris est Ut aliqua dolore in eu Ut.

John Doe

In velit elit in consectetur.

Code: 
<div class="messagescontainer">
  <article class="message"> ... </article>
  <article class="message message-own"> ... </article>
  <article class="message"> ...  </article>
</div>

Divider

Message divider can be used for example to divide messages from another day. It can be created by using class .messagesdivider on element with text information (for example date).

Example:code

Michel Doe

Lorem ipsum Excepteur mollit ad esse velit Ut ad ex velit voluptate qui dolor eu elit et commodo ad sit adipisicing dolor.

03.11.2015

Clark High

Nulla dolor dolore ut do cupidatat aliqua commodo cupidatat magna Excepteur laboris est Ut aliqua dolore in eu Ut.

John Doeis typing.

Code: 
<div class="messagescontainer">
  <article class="message"> ... </article>
  <div class="messagesdivider">03.11.2015</div>
  <article class="message message-own"> ... </article>
  <article class="message"> ...  </article>
</div>