Enhance inbox page

- Change button layout
- Add compose

production/css/custom.css

@@ -860,10 +860,6 @@ h2 {
 legend {
   padding-bottom: 7px;
 }
-.modal-title {
-  margin: 0;
-  line-height: 1.42857143;
-}
 .demo-placeholder {
   height: 280px;
 }
@@ -1692,8 +1688,7 @@ h4.graph_title {
 /* *********  /iconts-display  **************************** */
 
 
-/* *********  Tile stats  **************************** */
-
+/** tile stats **/
 .tile-stats {
   position: relative;
   display: block;
@@ -1713,6 +1708,7 @@ h4.graph_title {
   -webkit-transition: all 300ms ease-in-out;
   transition: all 300ms ease-in-out;
 }
+
 .tile-stats:hover .icon i {
   animation-name: tansformAnimation;
   animation-duration: .5s;
@@ -1731,6 +1727,7 @@ h4.graph_title {
   -moz-animation-timing-function: ease;
   -moz-animation-fill-mode: forwards;
 }
+
 .tile-stats .icon {
   width: 20px;
   height: 20px;
@@ -1740,6 +1737,7 @@ h4.graph_title {
   top: 22px;
   z-index: 1;
 }
+
 .tile-stats .icon i {
   margin: 0;
   font-size: 60px;
@@ -1747,11 +1745,13 @@ h4.graph_title {
   vertical-align: bottom;
   padding: 0;
 }
+
 .tile-stats .count {
   font-size: 38px;
   font-weight: bold;
   line-height: 1.65857143
 }
+
 .tile-stats .count, .tile-stats h3, .tile-stats p {
   position: relative;
   margin: 0;
@@ -1759,13 +1759,16 @@ h4.graph_title {
   z-index: 5;
   padding: 0;
 }
+
 .tile-stats h3 {
   color: #BAB8B8;
 }
+
 .tile-stats p {
   margin-top: 5px;
   font-size: 12px;
 }
+
 .tile-stats > .dash-box-footer {
   position: relative;
   text-align: center;
@@ -1778,36 +1781,44 @@ h4.graph_title {
   background: rgba(0, 0, 0, 0.1);
   text-decoration: none;
 }
+
 .tile-stats > .dash-box-footer:hover {
   color: #fff;
   background: rgba(0, 0, 0, 0.15);
 }
+
 .tile-stats > .dash-box-footer:hover {
   color: #fff;
   background: rgba(0, 0, 0, 0.15);
 }
+
 table.tile_info {
   padding: 10px 15px;
 }
+
 table.tile_info span.right {
   margin-right: 0;
   float: right;
   position: absolute;
   right: 4%;
 }
+
 .tile:hover {
   text-decoration: none;
 }
+
 .tile_header {
   border-bottom: transparent;
   padding: 7px 15px;
   margin-bottom: 15px;
   background: #E7E7E7;
 }
+
 .tile_head h4 {
   margin-top: 0;
   margin-bottom: 5px;
 }
+
 .tiles-bottom {
   padding: 5px 10px;
   margin-top: 10px;
@@ -1815,14 +1826,14 @@ table.tile_info span.right {
   text-align: left;
 }
 
-/* *********  /Tile stats  **************************** */
 
+/** /tile stats **/
 
-/* *********  /inbox design  **************************** */
-
+/** inbox **/
 a.star {
   color: #428bca !important
 }
+
 .mail_content {
   background: none repeat scroll 0 0 #FFFFFF;
   border-radius: 4px;
@@ -1831,19 +1842,23 @@ a.star {
   padding: 10px 11px;
   width: 100%;
 }
+
 .list-btn-mail {
   margin-bottom: 15px;
 }
+
 .list-btn-mail.active {
   border-bottom: 1px solid #39B3D7;
   padding: 0 0 14px;
 }
+
 .list-btn-mail > i {
   float: left;
   font-size: 18px;
   font-style: normal;
   width: 33px;
 }
+
 .list-btn-mail > .cn {
   background: none repeat scroll 0 0 #39B3D7;
   border-radius: 12px;
@@ -1852,71 +1867,86 @@ a.star {
   font-style: normal;
   padding: 0 5px;
 }
+
 .button-mail {
   margin: 0 0 15px !important;
   text-align: left;
   width: 100%;
 }
+
 .buttons, button, .btn {
   margin-bottom: 5px;
   margin-right: 5px;
 }
+
 .btn-group-vertical .btn, .btn-group .btn {
   margin-bottom: 0;
   margin-right: 0;
 }
+
 .mail_list_column {
   border-left: 1px solid #DBDBDB;
 }
+
 .mail_view {
   border-left: 1px solid #DBDBDB
 }
+
 .mail_list {
   width: 100%;
   border-bottom: 1px solid #DBDBDB;
   margin-bottom: 2px;
   display: inline-block;
 }
+
 .mail_list .left {
   width: 5%;
   float: left;
   margin-right: 3%
 }
+
 .mail_list .right {
   width: 90%;
   float: left
 }
+
 .mail_list h3 {
   font-size: 15px;
   font-weight: bold;
   margin: 0px 0 6px;
 }
+
 .mail_list h3 small {
   float: right;
   color: #ADABAB;
   font-size: 11px;
   line-height: 20px;
 }
+
 .mail_list .badge {
   padding: 3px 6px;
   font-size: 8px;
   background: #BAB7B7
 }
+
 @media (max-width: 767px) {
   .mail_list {
     margin-bottom: 5px;
     display: inline-block;
   }
 }
+
 .mail_heading h4 {
   font-size: 18px;
   border-bottom: 1px solid #ddd;
   padding-bottom: 10px;
   margin-top: 20px;
 }
+
 .attachment {
   margin-top: 30px;
 }
+
 .attachment ul {
   width: 100%;
   list-style: none;
@@ -1924,31 +1954,78 @@ a.star {
   display: inline-block;
   margin-bottom: 30px;
 }
+
 .attachment ul li {
   float: left;
   width: 150px;
   margin-right: 10px;
   margin-bottom: 10px;
 }
+
 .attachment ul li img {
   height: 150px;
   border: 1px solid #ddd;
   padding: 5px;
   margin-bottom: 10px;
 }
+
 .attachment ul li span {
   float: right;
 }
+
 .attachment .file-name {
   float: left;
 }
+
 .attachment .links {
   width: 100%;
   display: inline-block;
 }
 
-/* *********  /inbox design   **************************** */
+.compose {  
+  padding: 0;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  background: #fff;
+  border: 1px solid #D9DEE4;
+  border-right: 0;
+  border-bottom: 0;
+  border-top-left-radius: 5px;
+  z-index: 9999;
+  display: none;
+}
+
+.compose .compose-header {
+  padding: 5px;
+  background: #169F85;
+  color: #fff;
+  border-top-left-radius: 5px;
+}
+
+.compose .compose-header .close {
+  text-shadow: 0 1px 0 #ffffff;
+  line-height: .8;
+}
+
+.compose .compose-body .editor.btn-toolbar {
+  margin: 0;
+}
 
+.compose .compose-body .editor-wrapper {
+  height: 100%;
+  min-height: 50px;
+  max-height: 180px;
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
+  overflow: auto;
+}
+
+.compose .compose-footer {
+  padding: 10px;
+}
+/** /inbox **/
 
 /* *********  form design  **************************** */
 
@@ -3726,7 +3803,7 @@ header {
 
 
 /** bootstrap-wysiwyg **/
-#editor {
+.editor-wrapper {
   min-height: 250px;
   background-color: white;
   border-collapse: separate; 

production/form.html

@@ -325,13 +325,14 @@
               <div class="title_left">
                 <h3>Form Elements</h3>
               </div>
+
               <div class="title_right">
                 <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
                   <div class="input-group">
                     <input type="text" class="form-control" placeholder="Search for...">
                     <span class="input-group-btn">
-                              <button class="btn btn-default" type="button">Go!</button>
-                          </span>
+                      <button class="btn btn-default" type="button">Go!</button>
+                    </span>
                   </div>
                 </div>
               </div>
@@ -999,20 +1000,17 @@
                           <div class="input-group">
                             <input type="text" class="form-control">
                             <span class="input-group-btn">
-                                              <button type="button" class="btn btn-primary">Go!</button>
-                                          </span>
+                              <button type="button" class="btn btn-primary">Go!</button>
+                            </span>
                           </div>
                         </div>
                       </div>
                     </form>
-
                   </div>
                 </div>
               </div>
             </div>
 
-
-
             <div class="col-md-12 col-sm-12 col-xs-12">
               <div class="x_panel">
                 <div class="x_title">
@@ -1035,8 +1033,6 @@
                   <div class="clearfix"></div>
                 </div>
                 <div class="x_content">
-
-
                   <div id="alerts"></div>
                   <div class="btn-toolbar editor" data-role="editor-toolbar" data-target="#editor">
                     <div class="btn-group">
@@ -1044,6 +1040,7 @@
                       <ul class="dropdown-menu">
                       </ul>
                     </div>
+
                     <div class="btn-group">
                       <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="fa fa-text-height"></i>&nbsp;<b class="caret"></b></a>
                       <ul class="dropdown-menu">
@@ -1064,24 +1061,28 @@
                         </li>
                       </ul>
                     </div>
+
                     <div class="btn-group">
                       <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="fa fa-bold"></i></a>
                       <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="fa fa-italic"></i></a>
                       <a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="fa fa-strikethrough"></i></a>
                       <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="fa fa-underline"></i></a>
                     </div>
+
                     <div class="btn-group">
                       <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="fa fa-list-ul"></i></a>
                       <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="fa fa-list-ol"></i></a>
                       <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="fa fa-dedent"></i></a>
                       <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="fa fa-indent"></i></a>
                     </div>
+
                     <div class="btn-group">
                       <a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="fa fa-align-left"></i></a>
                       <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="fa fa-align-center"></i></a>
                       <a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="fa fa-align-right"></i></a>
                       <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="fa fa-align-justify"></i></a>
                     </div>
+
                     <div class="btn-group">
                       <a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="fa fa-link"></i></a>
                       <div class="dropdown-menu input-append">
@@ -1089,23 +1090,23 @@
                         <button class="btn" type="button">Add</button>
                       </div>
                       <a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="fa fa-cut"></i></a>
-
                     </div>
 
                     <div class="btn-group">
                       <a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="fa fa-picture-o"></i></a>
                       <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
                     </div>
+
                     <div class="btn-group">
                       <a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="fa fa-undo"></i></a>
                       <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="fa fa-repeat"></i></a>
                     </div>
                   </div>
 
-                  <div id="editor">
+                  <div id="editor" class="editor-wrapper"></div>
 
-                  </div>
                   <textarea name="descr" id="descr" style="display:none;"></textarea>
+                  
                   <br />
 
                   <div class="ln_solid"></div>
@@ -1116,12 +1117,10 @@
                       <textarea class="resizable_textarea form-control" placeholder="This text area automatically resizes its height as you fill in more text courtesy of autosize-master it out..."></textarea>
                     </div>
                   </div>
-
                 </div>
               </div>
             </div>
 
-
             <div class="x_panel">
               <div class="x_title">
                 <h2>Form Input Grid <small>form input </small></h2>
@@ -1419,12 +1418,6 @@
 
     <!-- bootstrap-wysiwyg -->
     <script>
-      $(document).ready(function() {
-        $('.xcxc').click(function() {
-          $('#descr').val($('#editor').html());
-        });
-      });
-
       $(document).ready(function() {
         function initToolbarBootstrapBindings() {
           var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
@@ -1484,7 +1477,8 @@
           fileUploadError: showErrorAlert
         });
 
-        window.prettyPrint && prettyPrint();
+        window.prettyPrint;
+        prettyPrint();
       });
     </script>
     <!-- /bootstrap-wysiwyg -->

production/inbox.html

@@ -13,7 +13,9 @@
     <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
     <!-- Font Awesome -->
     <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
-    
+    <!-- bootstrap-wysiwyg -->
+    <link href="../vendors/google-code-prettify/bin/prettify.min.css" rel="stylesheet">
+
     <!-- Custom styling plus plugins -->
     <link href="css/custom.css" rel="stylesheet">
   </head>
@@ -326,20 +328,20 @@
                   <div class="input-group">
                     <input type="text" class="form-control" placeholder="Search for...">
                     <span class="input-group-btn">
-                              <button class="btn btn-default" type="button">Go!</button>
-                          </span>
+                      <button class="btn btn-default" type="button">Go!</button>
+                    </span>
                   </div>
                 </div>
               </div>
             </div>
+
             <div class="clearfix"></div>
 
             <div class="row">
-
               <div class="col-md-12">
                 <div class="x_panel">
                   <div class="x_title">
-                    <h2> Inbox Design<small>User Mail</small></h2>
+                    <h2>Inbox Design<small>User Mail</small></h2>
                     <ul class="nav navbar-right panel_toolbox">
                       <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                       </li>
@@ -358,103 +360,111 @@
                     <div class="clearfix"></div>
                   </div>
                   <div class="x_content">
-
-
                     <div class="row">
-
                       <div class="col-sm-3 mail_list_column">
-
-                        <div class="mail_list">
-                          <div class="left">
-                            <i class="fa fa-circle"></i> <i class="fa fa-edit"></i>
-                          </div>
-                          <div class="right">
-                            <h3>Dennis Mugo <small>3.00 PM</small></h3>
-                            <p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
-                          </div>
-                        </div>
-                        <div class="mail_list">
-                          <div class="left">
-                            <i class="fa fa-star"></i>
-                          </div>
-                          <div class="right">
-                            <h3>Jane Nobert <small>4.09 PM</small></h3>
-                            <p><span class="badge">To</span> Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
-                          </div>
-                        </div>
-                        <div class="mail_list">
-                          <div class="left">
-                            <i class="fa fa-circle-o"></i><i class="fa fa-paperclip"></i>
-                          </div>
-                          <div class="right">
-                            <h3>Musimbi Anne <small>4.09 PM</small></h3>
-                            <p><span class="badge">CC</span> Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
-                          </div>
-                        </div>
-                        <div class="mail_list">
-                          <div class="left">
-                            <i class="fa fa-paperclip"></i>
-                          </div>
-                          <div class="right">
-                            <h3>Jon Dibbs <small>4.09 PM</small></h3>
-                            <p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
-                          </div>
-                        </div>
-                        <div class="mail_list">
-                          <div class="left">
-                            .
+                        <button id="compose" class="btn btn-sm btn-success btn-block" type="button">COMPOSE</button>
+                        <a href="#">
+                          <div class="mail_list">
+                            <div class="left">
+                              <i class="fa fa-circle"></i> <i class="fa fa-edit"></i>
+                            </div>
+                            <div class="right">
+                              <h3>Dennis Mugo <small>3.00 PM</small></h3>
+                              <p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
+                            </div>
                           </div>
-                          <div class="right">
-                            <h3>Debbis & Raymond <small>4.09 PM</small></h3>
-                            <p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
+                        </a>
+                        <a href="#">
+                          <div class="mail_list">
+                            <div class="left">
+                              <i class="fa fa-star"></i>
+                            </div>
+                            <div class="right">
+                              <h3>Jane Nobert <small>4.09 PM</small></h3>
+                              <p><span class="badge">To</span> Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
+                            </div>
                           </div>
-                        </div>
-                        <div class="mail_list">
-                          <div class="left">
-                            .
+                        </a>
+                        <a href="#">
+                          <div class="mail_list">
+                            <div class="left">
+                              <i class="fa fa-circle-o"></i><i class="fa fa-paperclip"></i>
+                            </div>
+                            <div class="right">
+                              <h3>Musimbi Anne <small>4.09 PM</small></h3>
+                              <p><span class="badge">CC</span> Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
+                            </div>
                           </div>
-                          <div class="right">
-                            <h3>Debbis & Raymond <small>4.09 PM</small></h3>
-                            <p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
+                        </a>
+                        <a href="#">
+                          <div class="mail_list">
+                            <div class="left">
+                              <i class="fa fa-paperclip"></i>
+                            </div>
+                            <div class="right">
+                              <h3>Jon Dibbs <small>4.09 PM</small></h3>
+                              <p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
+                            </div>
                           </div>
-                        </div>
-                        <div class="mail_list">
-                          <div class="left">
-                            <i class="fa fa-circle"></i> <i class="fa fa-edit"></i>
+                        </a>
+                        <a href="#">
+                          <div class="mail_list">
+                            <div class="left">
+                              .
+                            </div>
+                            <div class="right">
+                              <h3>Debbis & Raymond <small>4.09 PM</small></h3>
+                              <p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
+                            </div>
                           </div>
-                          <div class="right">
-                            <h3>Dennis Mugo <small>3.00 PM</small></h3>
-                            <p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
+                        </a>
+                        <a href="#">
+                          <div class="mail_list">
+                            <div class="left">
+                              .
+                            </div>
+                            <div class="right">
+                              <h3>Debbis & Raymond <small>4.09 PM</small></h3>
+                              <p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
+                            </div>
                           </div>
-                        </div>
-                        <div class="mail_list">
-                          <div class="left">
-                            <i class="fa fa-star"></i>
+                        </a>
+                        <a href="#">
+                          <div class="mail_list">
+                            <div class="left">
+                              <i class="fa fa-circle"></i> <i class="fa fa-edit"></i>
+                            </div>
+                            <div class="right">
+                              <h3>Dennis Mugo <small>3.00 PM</small></h3>
+                              <p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
+                            </div>
                           </div>
-                          <div class="right">
-                            <h3>Jane Nobert <small>4.09 PM</small></h3>
-                            <p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
+                        </a>
+                        <a href="#">
+                          <div class="mail_list">
+                            <div class="left">
+                              <i class="fa fa-star"></i>
+                            </div>
+                            <div class="right">
+                              <h3>Jane Nobert <small>4.09 PM</small></h3>
+                              <p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
+                            </div>
                           </div>
-                        </div>
-
-
-
+                        </a>
                       </div>
                       <!-- /MAIL LIST -->
 
-
                       <!-- CONTENT MAIL -->
                       <div class="col-sm-9 mail_view">
                         <div class="inbox-body">
                           <div class="mail_heading row">
                             <div class="col-md-8">
-                              <div class="compose-btn">
-                                <a class="btn btn-sm btn-primary" href="mail_compose.html"><i class="fa fa-reply"></i> Reply</a>
-                                <button title="" data-placement="top" data-toggle="tooltip" type="button" data-original-title="Print" class="btn  btn-sm tooltips"><i class="fa fa-print"></i> </button>
-                                <button title="" data-placement="top" data-toggle="tooltip" data-original-title="Trash" class="btn btn-sm tooltips"><i class="fa fa-trash-o"></i>
-                                </button>
+                              <div class="btn-group">
+                                <button class="btn btn-sm btn-primary" type="button"><i class="fa fa-reply"></i> Reply</button>
+                                <button class="btn btn-sm btn-default" type="button"  data-placement="top" data-toggle="tooltip" data-original-title="Forward"><i class="fa fa-share"></i></button>
+                                <button class="btn btn-sm btn-default" type="button" data-placement="top" data-toggle="tooltip" data-original-title="Print"><i class="fa fa-print"></i></button>
+                                <button class="btn btn-sm btn-default" type="button" data-placement="top" data-toggle="tooltip" data-original-title="Trash"><i class="fa fa-trash-o"></i></button>
                               </div>
-
                             </div>
                             <div class="col-md-4 text-right">
                               <p class="date"> 8:02 PM 12 FEB 2014</p>
@@ -539,12 +549,11 @@
 
                             </ul>
                           </div>
-                          <div class="compose-btn pull-left">
-                            <a class="btn btn-sm btn-primary" href="mail_compose.html"><i class="fa fa-reply"></i> Reply</a>
-                            <button class="btn btn-sm "><i class="fa fa-arrow-right"></i> Forward</button>
-                            <button title="" data-placement="top" data-toggle="tooltip" type="button" data-original-title="Print" class="btn  btn-sm tooltips"><i class="fa fa-print"></i> </button>
-                            <button title="" data-placement="top" data-toggle="tooltip" data-original-title="Trash" class="btn btn-sm tooltips"><i class="fa fa-trash-o"></i>
-                            </button>
+                          <div class="btn-group">
+                            <button class="btn btn-sm btn-primary" type="button"><i class="fa fa-reply"></i> Reply</button>
+                            <button class="btn btn-sm btn-default" type="button"  data-placement="top" data-toggle="tooltip" data-original-title="Forward"><i class="fa fa-share"></i></button>
+                            <button class="btn btn-sm btn-default" type="button" data-placement="top" data-toggle="tooltip" data-original-title="Print"><i class="fa fa-print"></i></button>
+                            <button class="btn btn-sm btn-default" type="button" data-placement="top" data-toggle="tooltip" data-original-title="Trash"><i class="fa fa-trash-o"></i></button>
                           </div>
                         </div>
 
@@ -570,6 +579,96 @@
       </div>
     </div>
 
+    <!-- compose -->
+    <div class="compose col-md-6 col-xs-12">
+      <div class="compose-header">
+        New Message
+        <button type="button" class="close compose-close">
+          <span>×</span>
+        </button>
+      </div>
+
+      <div class="compose-body">
+        <div id="alerts"></div>
+
+        <div class="btn-toolbar editor" data-role="editor-toolbar" data-target="#editor">
+          <div class="btn-group">
+            <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i class="fa fa-font"></i><b class="caret"></b></a>
+            <ul class="dropdown-menu">
+            </ul>
+          </div>
+
+          <div class="btn-group">
+            <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="fa fa-text-height"></i>&nbsp;<b class="caret"></b></a>
+            <ul class="dropdown-menu">
+              <li>
+                <a data-edit="fontSize 5">
+                  <p style="font-size:17px">Huge</p>
+                </a>
+              </li>
+              <li>
+                <a data-edit="fontSize 3">
+                  <p style="font-size:14px">Normal</p>
+                </a>
+              </li>
+              <li>
+                <a data-edit="fontSize 1">
+                  <p style="font-size:11px">Small</p>
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <div class="btn-group">
+            <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="fa fa-bold"></i></a>
+            <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="fa fa-italic"></i></a>
+            <a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="fa fa-strikethrough"></i></a>
+            <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="fa fa-underline"></i></a>
+          </div>
+
+          <div class="btn-group">
+            <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="fa fa-list-ul"></i></a>
+            <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="fa fa-list-ol"></i></a>
+            <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="fa fa-dedent"></i></a>
+            <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="fa fa-indent"></i></a>
+          </div>
+
+          <div class="btn-group">
+            <a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="fa fa-align-left"></i></a>
+            <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="fa fa-align-center"></i></a>
+            <a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="fa fa-align-right"></i></a>
+            <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="fa fa-align-justify"></i></a>
+          </div>
+
+          <div class="btn-group">
+            <a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="fa fa-link"></i></a>
+            <div class="dropdown-menu input-append">
+              <input class="span2" placeholder="URL" type="text" data-edit="createLink" />
+              <button class="btn" type="button">Add</button>
+            </div>
+            <a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="fa fa-cut"></i></a>
+          </div>
+
+          <div class="btn-group">
+            <a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="fa fa-picture-o"></i></a>
+            <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
+          </div>
+
+          <div class="btn-group">
+            <a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="fa fa-undo"></i></a>
+            <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="fa fa-repeat"></i></a>
+          </div>
+        </div>
+
+        <div id="editor" class="editor-wrapper"></div>
+      </div>
+
+      <div class="compose-footer">
+        <button id="send" class="btn btn-sm btn-success" type="button">Send</button>
+      </div>
+    </div>
+    <!-- /compose -->
+
     <!-- jQuery -->
     <script src="../vendors/jquery/dist/jquery.min.js"></script>
     <!-- Bootstrap -->
@@ -578,8 +677,86 @@
     <script src="../vendors/fastclick/lib/fastclick.js"></script>
     <!-- NProgress -->
     <script src="../vendors/nprogress/nprogress.js"></script>
+    <!-- bootstrap-wysiwyg -->
+    <script src="../vendors/bootstrap-wysiwyg/js/bootstrap-wysiwyg.min.js"></script>
+    <script src="../vendors/jquery.hotkeys/jquery.hotkeys.js"></script>
+    <script src="../vendors/google-code-prettify/src/prettify.js"></script>
 
     <!-- Custom Theme Scripts -->
     <script src="js/custom.js"></script>
+
+    <!-- bootstrap-wysiwyg -->
+    <script>
+      $(document).ready(function() {
+        function initToolbarBootstrapBindings() {
+          var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
+              'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
+              'Times New Roman', 'Verdana'
+            ],
+            fontTarget = $('[title=Font]').siblings('.dropdown-menu');
+          $.each(fonts, function(idx, fontName) {
+            fontTarget.append($('<li><a data-edit="fontName ' + fontName + '" style="font-family:\'' + fontName + '\'">' + fontName + '</a></li>'));
+          });
+          $('a[title]').tooltip({
+            container: 'body'
+          });
+          $('.dropdown-menu input').click(function() {
+              return false;
+            })
+            .change(function() {
+              $(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');
+            })
+            .keydown('esc', function() {
+              this.value = '';
+              $(this).change();
+            });
+
+          $('[data-role=magic-overlay]').each(function() {
+            var overlay = $(this),
+              target = $(overlay.data('target'));
+            overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
+          });
+
+          if ("onwebkitspeechchange" in document.createElement("input")) {
+            var editorOffset = $('#editor').offset();
+
+            $('.voiceBtn').css('position', 'absolute').offset({
+              top: editorOffset.top,
+              left: editorOffset.left + $('#editor').innerWidth() - 35
+            });
+          } else {
+            $('.voiceBtn').hide();
+          }
+        }
+
+        function showErrorAlert(reason, detail) {
+          var msg = '';
+          if (reason === 'unsupported-file-type') {
+            msg = "Unsupported format " + detail;
+          } else {
+            console.log("error uploading file", reason, detail);
+          }
+          $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>' +
+            '<strong>File upload error</strong> ' + msg + ' </div>').prependTo('#alerts');
+        }
+
+        initToolbarBootstrapBindings();
+
+        $('#editor').wysiwyg({
+          fileUploadError: showErrorAlert
+        });
+
+        prettyPrint();
+      });
+    </script>
+    <!-- /bootstrap-wysiwyg -->
+
+    <!-- compose -->
+    <script>
+      $('#compose, .compose-close').click(function(){
+        $('.compose').slideToggle();
+      });
+    </script>>
+    <!-- /compose -->
   </body>
 </html>

production/js/custom.js

@@ -120,7 +120,9 @@ $(document).ready(function() {
 
 // Tooltip
 $(document).ready(function() {
-    $('[data-toggle="tooltip"]').tooltip();
+    $('[data-toggle="tooltip"]').tooltip({
+        container: 'body'
+    });
 });
 // /Tooltip
 

production/less/custom.css

@@ -860,10 +860,6 @@ h2 {
 legend {
   padding-bottom: 7px;
 }
-.modal-title {
-  margin: 0;
-  line-height: 1.42857143;
-}
 .demo-placeholder {
   height: 280px;
 }
@@ -1692,8 +1688,7 @@ h4.graph_title {
 /* *********  /iconts-display  **************************** */
 
 
-/* *********  Tile stats  **************************** */
-
+/** tile stats **/
 .tile-stats {
   position: relative;
   display: block;
@@ -1713,6 +1708,7 @@ h4.graph_title {
   -webkit-transition: all 300ms ease-in-out;
   transition: all 300ms ease-in-out;
 }
+
 .tile-stats:hover .icon i {
   animation-name: tansformAnimation;
   animation-duration: .5s;
@@ -1731,6 +1727,7 @@ h4.graph_title {
   -moz-animation-timing-function: ease;
   -moz-animation-fill-mode: forwards;
 }
+
 .tile-stats .icon {
   width: 20px;
   height: 20px;
@@ -1740,6 +1737,7 @@ h4.graph_title {
   top: 22px;
   z-index: 1;
 }
+
 .tile-stats .icon i {
   margin: 0;
   font-size: 60px;
@@ -1747,11 +1745,13 @@ h4.graph_title {
   vertical-align: bottom;
   padding: 0;
 }
+
 .tile-stats .count {
   font-size: 38px;
   font-weight: bold;
   line-height: 1.65857143
 }
+
 .tile-stats .count, .tile-stats h3, .tile-stats p {
   position: relative;
   margin: 0;
@@ -1759,13 +1759,16 @@ h4.graph_title {
   z-index: 5;
   padding: 0;
 }
+
 .tile-stats h3 {
   color: #BAB8B8;
 }
+
 .tile-stats p {
   margin-top: 5px;
   font-size: 12px;
 }
+
 .tile-stats > .dash-box-footer {
   position: relative;
   text-align: center;
@@ -1778,36 +1781,44 @@ h4.graph_title {
   background: rgba(0, 0, 0, 0.1);
   text-decoration: none;
 }
+
 .tile-stats > .dash-box-footer:hover {
   color: #fff;
   background: rgba(0, 0, 0, 0.15);
 }
+
 .tile-stats > .dash-box-footer:hover {
   color: #fff;
   background: rgba(0, 0, 0, 0.15);
 }
+
 table.tile_info {
   padding: 10px 15px;
 }
+
 table.tile_info span.right {
   margin-right: 0;
   float: right;
   position: absolute;
   right: 4%;
 }
+
 .tile:hover {
   text-decoration: none;
 }
+
 .tile_header {
   border-bottom: transparent;
   padding: 7px 15px;
   margin-bottom: 15px;
   background: #E7E7E7;
 }
+
 .tile_head h4 {
   margin-top: 0;
   margin-bottom: 5px;
 }
+
 .tiles-bottom {
   padding: 5px 10px;
   margin-top: 10px;
@@ -1815,14 +1826,14 @@ table.tile_info span.right {
   text-align: left;
 }
 
-/* *********  /Tile stats  **************************** */
 
+/** /tile stats **/
 
-/* *********  /inbox design  **************************** */
-
+/** inbox **/
 a.star {
   color: #428bca !important
 }
+
 .mail_content {
   background: none repeat scroll 0 0 #FFFFFF;
   border-radius: 4px;
@@ -1831,19 +1842,23 @@ a.star {
   padding: 10px 11px;
   width: 100%;
 }
+
 .list-btn-mail {
   margin-bottom: 15px;
 }
+
 .list-btn-mail.active {
   border-bottom: 1px solid #39B3D7;
   padding: 0 0 14px;
 }
+
 .list-btn-mail > i {
   float: left;
   font-size: 18px;
   font-style: normal;
   width: 33px;
 }
+
 .list-btn-mail > .cn {
   background: none repeat scroll 0 0 #39B3D7;
   border-radius: 12px;
@@ -1852,71 +1867,86 @@ a.star {
   font-style: normal;
   padding: 0 5px;
 }
+
 .button-mail {
   margin: 0 0 15px !important;
   text-align: left;
   width: 100%;
 }
+
 .buttons, button, .btn {
   margin-bottom: 5px;
   margin-right: 5px;
 }
+
 .btn-group-vertical .btn, .btn-group .btn {
   margin-bottom: 0;
   margin-right: 0;
 }
+
 .mail_list_column {
   border-left: 1px solid #DBDBDB;
 }
+
 .mail_view {
   border-left: 1px solid #DBDBDB
 }
+
 .mail_list {
   width: 100%;
   border-bottom: 1px solid #DBDBDB;
   margin-bottom: 2px;
   display: inline-block;
 }
+
 .mail_list .left {
   width: 5%;
   float: left;
   margin-right: 3%
 }
+
 .mail_list .right {
   width: 90%;
   float: left
 }
+
 .mail_list h3 {
   font-size: 15px;
   font-weight: bold;
   margin: 0px 0 6px;
 }
+
 .mail_list h3 small {
   float: right;
   color: #ADABAB;
   font-size: 11px;
   line-height: 20px;
 }
+
 .mail_list .badge {
   padding: 3px 6px;
   font-size: 8px;
   background: #BAB7B7
 }
+
 @media (max-width: 767px) {
   .mail_list {
     margin-bottom: 5px;
     display: inline-block;
   }
 }
+
 .mail_heading h4 {
   font-size: 18px;
   border-bottom: 1px solid #ddd;
   padding-bottom: 10px;
   margin-top: 20px;
 }
+
 .attachment {
   margin-top: 30px;
 }
+
 .attachment ul {
   width: 100%;
   list-style: none;
@@ -1924,31 +1954,78 @@ a.star {
   display: inline-block;
   margin-bottom: 30px;
 }
+
 .attachment ul li {
   float: left;
   width: 150px;
   margin-right: 10px;
   margin-bottom: 10px;
 }
+
 .attachment ul li img {
   height: 150px;
   border: 1px solid #ddd;
   padding: 5px;
   margin-bottom: 10px;
 }
+
 .attachment ul li span {
   float: right;
 }
+
 .attachment .file-name {
   float: left;
 }
+
 .attachment .links {
   width: 100%;
   display: inline-block;
 }
 
-/* *********  /inbox design   **************************** */
+.compose {  
+  padding: 0;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  background: #fff;
+  border: 1px solid #D9DEE4;
+  border-right: 0;
+  border-bottom: 0;
+  border-top-left-radius: 5px;
+  z-index: 9999;
+  display: none;
+}
+
+.compose .compose-header {
+  padding: 5px;
+  background: #169F85;
+  color: #fff;
+  border-top-left-radius: 5px;
+}
+
+.compose .compose-header .close {
+  text-shadow: 0 1px 0 #ffffff;
+  line-height: .8;
+}
+
+.compose .compose-body .editor.btn-toolbar {
+  margin: 0;
+}
 
+.compose .compose-body .editor-wrapper {
+  height: 100%;
+  min-height: 50px;
+  max-height: 180px;
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
+  overflow: auto;
+}
+
+.compose .compose-footer {
+  padding: 10px;
+}
+/** /inbox **/
 
 /* *********  form design  **************************** */
 
@@ -3726,7 +3803,7 @@ header {
 
 
 /** bootstrap-wysiwyg **/
-#editor {
+.editor-wrapper {
   min-height: 250px;
   background-color: white;
   border-collapse: separate;