message_content.mustache 3.79 KB
<div class="hide message-content" id="id-message-content">
	<!-- #section:pages/inbox.message-header -->
	<div class="message-header clearfix">
		<div class="pull-left">
			<span class="blue bigger-125">
				Clik to open this message
			</span>
			<div class="space-4"></div>
			
			<i class="ace-icon fa fa-star orange2"></i>
			&nbsp;
			<img class="middle" alt="John's Avatar" src="{{path.assets}}/avatars/avatar.png" width="32" />
			&nbsp;
			<a href="#" class="sender">John Doe</a>
			&nbsp;
			<i class="ace-icon fa fa-clock-o bigger-110 orange middle"></i>
			<span class="time grey">Today, 7:15 pm</span>
		</div>
		
		<div class="pull-right action-buttons">
			<a href="#">
				<i class="ace-icon fa fa-reply green icon-only bigger-130"></i>
			</a>
			<a href="#">
				<i class="ace-icon fa fa-mail-forward blue icon-only bigger-130"></i>
			</a>
			<a href="#">
				<i class="ace-icon fa fa-trash-o red icon-only bigger-130"></i>
			</a>
		</div>
	</div>
	<!-- /section:pages/inbox.message-header -->
	
	<div class="hr hr-double"></div>
	
	<!-- #section:pages/inbox.message-body -->
	<div class="message-body">
		<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		<p>
		Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
		<p>
		Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
		<p>
		Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		<p>
		Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
		<p>
		Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
	</div>
	<!-- /section:pages/inbox.message-body -->
	
	<div class="hr hr-double"></div>
	
	<!-- #section:pages/inbox.message-attachment -->
	<div class="message-attachment clearfix">
		<div class="attachment-title">
			<span class="blue bolder bigger-110">Attachments</span>
			&nbsp;
			<span class="grey">(2 files, 4.5 MB)</span>
			<div class="inline position-relative">
				<a href="#" data-toggle="dropdown" class="dropdown-toggle">
					&nbsp;<i class="ace-icon fa fa-caret-down bigger-125 middle"></i>
				</a>
				<ul class="dropdown-menu dropdown-lighter">
				  <li><a href="#">Download all as zip</a></li>
				  <li><a href="#">Display in slideshow</a></li>
				</ul>
			</div>
		</div>
		&nbsp;

		<ul class="attachment-list pull-left list-unstyled">
			<li>
				<a href="#" class="attached-file">
					<i class="ace-icon fa fa-file-o bigger-110"></i>
					<span class="attached-name">Document1.pdf</span>
				</a>
				<span class="action-buttons">
					<a href="#"><i class="ace-icon fa fa-download bigger-125 blue"></i></a>
					<a href="#"><i class="ace-icon fa fa-trash-o bigger-125 red"></i></a>
				</span>
			</li>
			<li>
				<a href="#" class="attached-file">
					<i class="ace-icon fa fa-film bigger-110"></i>
					<span class="attached-name">Sample.mp4</span>
				</a>
				<span class="action-buttons">
					<a href="#"><i class="ace-icon fa fa-download bigger-125 blue"></i></a>
					<a href="#"><i class="ace-icon fa fa-trash-o bigger-125 red"></i></a>
				</span>
			</li>
		</ul>

		<div class="attachment-images pull-right">
			<div class="vspace-4-sm"></div>
			<div>
				<img width="36" alt="image 4" src="{{path.assets}}/images/gallery/thumb-4.jpg" />
				<img width="36" alt="image 3" src="{{path.assets}}/images/gallery/thumb-3.jpg" />
				<img width="36" alt="image 2" src="{{path.assets}}/images/gallery/thumb-2.jpg" />
				<img width="36" alt="image 1" src="{{path.assets}}/images/gallery/thumb-1.jpg" />
			</div>
		</div>
	</div>
	<!-- /section:pages/inbox.message-attachment -->

</div><!-- /.message-content -->