<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 ---------->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" ></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<label>This is a very early version of something that has greatly moved forward. If you'd like the newer versions please Like and I'll update. If there's no interest then I won't bother as I need to tear it down from a production environment.</label>
<div class="clientWindow">
<table class="clientTable">
<tr>
<td>
<div id="clientPanelIcons" class="clientPanel">
<ul id="shortcutList">
<li data-target="home" class="menuListItemDefault"><i class="fa fa-home" aria-hidden="true"></i></li>
<li onclick="$('.clientConsole').slideToggle('fast');" data-target="console" class="menuListItemDefault"><i class="fa fa-code" aria-hidden="true"></i></li>
<li onclick="startSearch('mailbox');" class="menuListItemDefault"><i class="fa fa-list" aria-hidden="true"></i></li>
<li onclick="stopSearch('mailbox');" class="menuListItemDefault" style="color: red;"><i class="fa fa-list" aria-hidden="true"></i></li>
<li onclick="startSearch('page');" class="menuListItemDefault"><i class="fa fa-list" aria-hidden="true"></i></li>
<li onclick="stopSearch('page');" class="menuListItemDefault" style="color: red;"><i class="fa fa-list" aria-hidden="true"></i></li>
</ul>
</div>
</td>
<td>
<div id="clientPanelMenu" class="clientPanel">
<div id="menuLogo">Tracker</div>
<ul id="menuList">
<li data-target="all" class="menuListItemDefault">All</li>
<li data-target="mine" class="menuListItemDefault">Mine</li>
<li data-target="drafts" class="menuListItemDefault">Drafts</li>
<li data-target="trash" class="menuListItemDefault">Trash</li>
</ul>
</div>
</td>
<td>
<div id="clientPanelResults" class="clientPanel">
<div class="mailboxListSearch">
<div id="mailboxSearch" class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn"">
<button class="btn btn-primary" type="button">Search</button>
</span>
</div>
<div id="mailboxSearchProgressContainer" class="searchProgressContainerDefault" data-searching="no"></div>
</div>
<ul id="mailboxList">
<li class="mailboxItemDefault" data-mailitem="4" data-newitem="yes">
<table class="mailboxItemTable">
<tr>
<td><div class="mailboxItemReference">INC020394324</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">Upgrade / Replace Hardware</td>
</tr>
<tr>
<td colspan="2">Submitted by Ollie Bott</td>
</tr>
</table>
</li>
<li class="mailboxItemDefault" data-mailitem="2" data-newitem="yes">
<table class="mailboxItemTable">
<tr>
<td><div class="mailboxItemReference">INC020394324</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">Upgrade / Replace Hardware</td>
</tr>
<tr>
<td colspan="2">Submitted by Ollie Bott</td>
</tr>
</table>
</li>
</ul>
<div class="mailboxListFiller"></span>
</div>
</td>
<td>
<div id="clientPanelViewer" class="clientPanel">
<div class="formContainer">
<div id="pageSearchProgressContainer" class="searchProgressContainerDefault" data-searching="no"></div>
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="clientConsole">
<div class="clientConsoleHeader">
Console
<div id="consoleButtonGroup" class="btn-group btn-group-xs" role="group">
<button onclick="$('.clientConsole').slideToggle('fast');" type="button" class="btn btn-primary">Hide Console</button>
<button onclick="clearConsoleLog();" type="button" class="btn btn-default">Clear Log</button>
</div>
</div>
<ul class="clientConsoleLog"></ul>
</div>
.searchProgressContainerDefault {
margin-top: 0px;
height: 0px;
background-color: none;
}
#mailboxSearch {
}
.clientWindow {
height: 1000px;
width: 100%;
background-color: #f5f5f5;
}
.mailboxListSearch {
padding: 10px;
background-color: #f8f8f8;
border-bottom: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
}
#consoleButtonGroup {
margin-left: 20px;
}
.clientConsole {
top: 0;
color: #e0e0e0;
padding: 20px;
display: none;
height: 300px;
width: 100%;
background-color: #17141f;
border-top: 1px solid #120f18;
}
.clientConsoleHeader {
margin-bottom: 20px;
}
.clientConsoleLog {
color: #2aff00;
}
.clientPanel {
height: 100%;
width: 100%;
}
.clientTable {
width: 100%;
height: 100%;
}
.formContainer {
height: 100%;
padding: 20px;
background-color: white;
}
.clientTable td {
vertical-align: top;
height: 100%:
}
.clientTable td:nth-child(1) {
width: 30px;
}
.clientTable td:nth-child(2) {
width: 260px;
}
.clientTable td:nth-child(3) {
width: 360px;
}
.clientTable 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;
}
#mailboxList {
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;
}
#clientPanelResults {
background-color: #eeeeee;
}
#clientPanelViewer {
background-color: #f4f4f4;
}
$( 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);
}
function clearConsoleLog() {
$(".clientConsoleLog").html("");
}
function consoleLog(m) {
var time = new Date();
var log = "<li><span style=\"color: #4a893e;\">" + time + ":</span> " + m + "</li>";
$(".clientConsoleLog").prepend(log);
}
function hideMailbox() {
$("#mailboxList").fadeTo(100, 0);
}
function showMailbox() {
$("#mailboxList").fadeTo(100, 1);
}
function hideForm() {
$(".formContainer").fadeTo(100, 0);
}
function showForm() {
$(".formContainer").fadeTo(100, 1);
}
function startSearch(s) {
if (s == "mailbox") { var t = "mailboxSearchProgressContainer" }
if (s == "page") { var t = "pageSearchProgressContainer" }
showSearchProgress(t);
}
function stopSearch(s) {
if (s == "mailbox") { var t = "mailboxSearchProgressContainer" }
if (s == "page") { var t = "pageSearchProgressContainer" }
hideSearchProgress(t);
}
function hideSearchProgress(s) {
$("#" + s).data("searching", "no");
$("#" + s).stop().animate({marginTop: "0px", height: "0px"},{duration: 100, complete: function() {
startSearchAnimation(s);
}} );
}
function showSearchProgress(s) {
$("#" + s).stop().animate({marginTop: "8px", height: "6px"},{duration: 100, complete: function() {
$("#" + s).data("searching", "yes");
startSearchAnimation(s);
}} );
}
function startSearchAnimation(s) {
var areWeSearching = $("#" + s).data("searching");
if (areWeSearching == "yes") {
$("#" + s).stop().animate({backgroundColor: "#54adff"},{duration: 100, complete: function() {
var areWeSearching = $("#" + s).data("searching");
if (areWeSearching == "yes") {
$("#" + s).stop().animate({backgroundColor: "#13548a"},{duration: 100, complete: function() {
startSearchAnimation(s);
}} );
}
}} );
}
}
