Inbox

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:
  • Tab pane consists of navbar, message list and message footer: 
    

  
    
   ...
  
    

  
    
   ...
  
    

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


  
    
    
    
       
    
         ....
       
    
	   
	   .
	   .
	   .
  • 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 consists of optional parts such as a pagination: 
    
  
    151 messages total
    
  
    
    
      
     ....
    2nd footer style has .message-footer-style2 class: 
    
  
    
    simpler footer
  
    

  
    
    ...
    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's Avatar
     
    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 
     
    
 
    
 
 
      
 
    
 
 
    
    
    
        image 4
		...
    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. 
    
  
    
    
    
        
    
    
  
    

  
    
    
    
        
           
           Back
  • 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 
    
  
    
    
        
        Write Mail
    
  
    
  
    
  

    


    
 
    
   
    
      
    
         ...

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.