jinql
/
gentelella
mirror of https://github.com/ColorlibHQ/gentelella
1
0
Fork 0
Code Issues Releases Wiki Activity

Enhance inbox page

Browse Source 
- Change button layout
- Add compose
pull/133/head
christianesperar 9 years ago
parent 30814a1aab
commit 6a22654347
5 changed files with 460 additions and 133 deletions
Show Stats Download Patch File Download Diff File

99
production/css/custom.css
Unescape View File

@ -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;

36
production/form.html
Unescape View File

@ -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 -->

353
production/inbox.html
Unescape View File

@ -13,6 +13,8 @@
<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">
@ -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>

4
production/js/custom.js
Unescape View File

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

99
production/less/custom.css
Unescape View File

@ -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;

Write Preview
Loading…
Cancel
Save