<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<ul id="ItemsBoxList">
<li class="mailboxItemDefault" data-mailitem="4" data-newitem="yes">
<table class="mailboxItemTable">
<tr>
<td><div class="mailboxItemReference">Наименование</div><div class="mailboxItemNew"><span id="mailboxItemNewIcon" class="badge">new</span></div></td>
<td>20:10 10/05/2016</td>
</tr>
<tr>
<td colspan="2">Описание этого элемента, оно может быть даже длинным, или очень длинным</td>
</tr>
<tr>
<td colspan="2">здесь дополнительная информация</td>
</tr>
</table>
</li>
<li class="mailboxItemDefault" data-mailitem="4" data-newitem="yes">
<table class="mailboxItemTable">
<tr>
<td><div class="mailboxItemReference">Наименование</div><div class="mailboxItemNew"><span id="mailboxItemNewIcon" class="badge">new</span></div></td>
<td>20:10 10/05/2016</td>
</tr>
<tr>
<td colspan="2">Описание этого элемента, оно может быть даже длинным, или очень длинным</td>
</tr>
<tr>
<td colspan="2">здесь дополнительная информация</td>
</tr>
</table>
</li>
<li class="mailboxItemDefault" data-mailitem="4" data-newitem="yes">
<table class="mailboxItemTable">
<tr>
<td><div class="mailboxItemReference">Наименование</div><div class="mailboxItemNew"><span id="mailboxItemNewIcon" class="badge">new</span></div></td>
<td>20:10 10/05/2016</td>
</tr>
<tr>
<td colspan="2">Описание этого элемента, оно может быть даже длинным, или очень длинным</td>
</tr>
<tr>
<td colspan="2">здесь дополнительная информация</td>
</tr>
</table>
</li>
</ul>
.Listbox {
width: 100%;
height: 100%;
}
.Listbox td {
vertical-align: top;
height: 100%:
}
.Listbox td:nth-child(1) {
width: 30px;
}
.Listbox td:nth-child(2) {
width: 260px;
}
.Listbox td:nth-child(3) {
width: 360px;
}
.Listbox td:nth-child(4) {
}
.mailboxItemTable td {
vertical-align: top;
height: 100%:
}
.mailboxItemTable tr:nth-child(1) td:nth-child(1) {
font-size: 12pt;
font-weight: bold;
width: 100%;
}
.mailboxItemTable tr:nth-child(1) td:nth-child(2) {
font-size: 9pt;
color: #c2c2c2;
white-space: nowrap;
}
.mailboxItemTable tr:nth-child(2) td:nth-child(1) {
padding-top: 6px;
padding-bottom: 8px;
color: #616161;
}
.mailboxItemTable tr:nth-child(3) td:nth-child(1) {
font-size: 9pt;
color: #a7a7a7;
}
#clientPanelIcons {
background-color: #201c2b;
color: #dad8de;
}
#clientPanelMenu {
background-color: #17141f;
color: #dad8de;
}
#menuLogo {
text-align: center;
padding: 10px;
}
#menuList {
list-style: none;
margin: 0;
padding: 0;
}
#shortcutList {
color: #b8b5c0;
text-align: center;
font-size: 16pt;
list-style: none;
margin: 0;
padding: 0;
}
.menuListItemDefault {
color: #b8b5c0;
cursor: pointer;
width: 100%;
padding: 10px;
}
.menuListItemSelected {
color: #fff;
cursor: pointer;
width: 100%;
padding: 10px;
}
#ItemsBoxList {
list-style: none;
margin: 0;
padding: 0;
}
.mailboxItemDefault {
border-right: 1px solid #e5e5e5;
border-left: 0px solid #54adff;
border-bottom: 1px solid #e5e5e5;
cursor: pointer;
width: 100%;
padding: 10px;
background-color: #f4f4f4;
}
.mailboxItemSelected {
border-left: 4px solid #54adff;
border-bottom: 1px solid #e5e5e5;
cursor: pointer;
width: 100%;
padding: 10px;
background-color: #fff;
}
.mailboxItemReference {
display: inline-block;
}
.mailboxItemNew {
display: inline-block;
}
#mailboxItemNewIcon {
background-color: #54adff;
margin-left: 6px;
font-size: 7pt;
vertical-align: middle;
}
.mailboxListFiller {
height: 100%;
border-right: 1px solid #e5e5e5;
}
$( document ).ready(function() {
initUI();
});
function initUI() {
$("#menuList li").click(function(){
var thisItem = this;
var currentClass = $(this).attr("class");
$(this).attr("class", "menuListItemSelected");
loadMailbox($(this).data("target"));
$("#menuList li").each(function(){
if (this !== thisItem) {
$(this).attr("class", "menuListItemDefault").animate({backgroundColor: "#17141f", color: "#b8b5c0"},{duration: 170, complete: function() {}} ); ;;
}
});
});
$("#menuList li").hover(function(){
var currentClass = $(this).attr("class");
if (currentClass == "menuListItemDefault") {
$(this).stop().animate({backgroundColor: "#201c2b", color: "#f3f3f3"},{duration: 170, complete: function() {}} );
} else if (currentClass == "menuListItemSelected") {
$(this).stop().animate({backgroundColor: "#201c2b", color: "#fff"},{duration: 170, complete: function() {}} );
}
}, function () {
var currentClass = $(this).attr("class");
if (currentClass == "menuListItemDefault") {
$(this).stop().animate({backgroundColor: "#17141f", color: "#b8b5c0"},{duration: 170, complete: function() {}} );
} else if (currentClass == "menuListItemSelected") {
$(this).stop().animate({backgroundColor: "#201c2b", color: "#fff"},{duration: 170, complete: function() {}} );
}
});
$("#mailboxList li").click(function(){
var thisItem = this;
var currentClass = $(this).attr("class");
$(this).attr("class", "mailboxItemSelected");
loadMailboxItem($(this).data("mailitem"));
$("#mailboxList li").each(function(){
if (this !== thisItem) {
$(this).attr("class", "mailboxItemDefault").animate({backgroundColor: "#f4f4f4", borderLeftWidth: "0px"},{duration: 100, complete: function() {}} ); ;;
}
});
});
$("#mailboxList li").hover(function(){
var currentClass = $(this).attr("class");
if (currentClass == "mailboxItemDefault") {
$(this).stop().animate({backgroundColor: "#fff", borderLeftWidth: "4px"},{duration: 100, complete: function() {}} );
} else if (currentClass == "mailboxItemSelected") {
$(this).stop().animate({backgroundColor: "#fff"},{duration: 100, complete: function() {}} );
}
}, function () {
var currentClass = $(this).attr("class");
var thisMailboxItem = $(this);
var selectedMailboxItemNew = $(this).data("newitem");
var selectedMailboxItem = $(this).data("mailitem");
$(this).find(".mailboxItemNew").animate({opacity: 0},{duration: 100, complete: function() {
if (selectedMailboxItemNew == "yes") {
$(thisMailboxItem).data("newitem", "no");
setMailboxItemAsRead(selectedMailboxItem);
}
} });
if (currentClass == "mailboxItemDefault") {
$(this).stop().animate({backgroundColor: "#f4f4f4", borderLeftWidth: "0px"},{duration: 100, complete: function() {}} );
} else if (currentClass == "mailboxItemSelected") {
$(this).stop().animate({backgroundColor: "#fff"},{duration: 100, complete: function() {}} );
}
});
$("#shortcutList li").hover(function(){
$(this).stop().animate({color: "#fff"},{duration: 170, complete: function() {}} );
}, function () {
$(this).stop().animate({color: "#b8b5c0"},{duration: 170, complete: function() {}} );
});
}
function loadMailbox(t) {
//hideMailbox();
consoleLog("Loading mailbox: " + t);
}
function loadMailboxItem(i) {
//hideForm();
consoleLog("Loading mailbox item: " + i);
}
function setMailboxItemAsRead(i) {
consoleLog("Setting mailbox item as read: " + i);
}
