# Inbox

- Inbox page consists of several parts and elements wrapped inside a tab:

- You can see the following files for more info:
  `mustache/app/views/pages/inbox.mustache`
  And the files inside:
  `mustache/app/views/pages/partials/inbox`
- New Mail button with `.btn-new-mail` class is (optionally) inside tab list:

               Write Mail

- Tab pane consists of navbar, message list and message footer:

         ...

- ### Message Navbar

  For more info about navbar you can see the following file:
  `mustache/app/views/pages/partials/inbox/navbar.mustache`
  Message navbar `.message-navbar` consists of `.message-bar` which contains title of the pane and toolbar buttons.

          <

  There are also other areas such as "Search box", "Sort Messages", etc, which are inside `.messagebar-item-left` or `.messagebar-item-right` classes:

      ...

- Search box is similar to breadcrumbs searchbox:

### Message List

- `.message-list-container` contains a list of messages wrapped inside `.message-list`:

               ....

      	   .
      	   .
      	   .

- ### Message Item

  A message item in the list consists of different elements:
  1. A checkbox to select the message
  2. `.message-star` A star icon to mark messages as starred/unstarred
  3. `.sender` Which is the sender's name
  4. `.time` Which is the time the message was sent/received
  5. `.attachment` Which indicates there's an attachment
  6. `.summary` Which contains message summary wrapped inside a `.text` and an optional `.mail-tag` or `.message-flags`

         Alex Smith
         1:33 pm

            Click to open this message

- ### Message Footer

  `.message-footer` consists of optional parts such as a pagination:

  2nd footer style has `.message-footer-style2` class:

  See the following file for more info:
  `mustache/app/views/pages/partials/inboxmessage_footer.mustache`

### Message Content

- Message details is inside `.message-content` and consists of `.message-header`, `.message-body` and `.message-attachment`:

          ...

          ...

          ...

- `.message-header` consists of optional elements, for example `.sender`, `.time` and action buttons:

             Message title

          John Doe

          Today, 7:15 pm

- Message body is inside `.message-body` element
- Message attachment consists of optional `.attachment-title`, `.attachment-list` and `.attachment-images`

      		...

  Attachment list consists of `.action-buttons` and `.attached-file` which has `attached-name`:

- Document1.pdf

### Message Compose

- Message compose area consists of a form with optional elements and a navbar with optional buttons.

- See the following files for more info:
  `mustache/app/views/pages/partials/inboxmessage_form.mustache`
  `mustache/app/views/assets/scripts/inbox.js`

### Options

- You can also make inbox message list more compact by adding `.message-condensed` class to `.message-container`
- Remove `.tab-size-bigger` from `ul.inbox-tabs` for smaller tabs
- If you don't want a tabbed inbox, like the image below, you should make the following changes:
  1. Add `.inbox-menu` according to following file:
     `mustache/app/views/pages/partials/inbox/folders.mustache`
  2. Remove `.tabbable` and `.tab-pane` etc:
     `mustache/app/views/pages/inbox.mustache`

               ...

### Notes

- Please note that inbox layout and scripts are for demo only and may not be suitable for your application.
  For example when clicking to open a message, the message content is already inside the page but there's some fake waiting to simulate remote content loading.