75 lines
2.1 KiB
HTML
75 lines
2.1 KiB
HTML
<!DOCTYPE HTML>
|
|
<head>
|
|
|
|
<style type="text/css">
|
|
.pages
|
|
{
|
|
background-color: #00a403;
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
border-radius: 7px;
|
|
background-image: -webkit-gradient(linear, left top,
|
|
left bottom, color-stop(0, #d6d6d6),
|
|
color-stop(0.4, #c0c0c0), color-stop(1,#a4a4a4));
|
|
margin: 10px 0 16px 0;
|
|
font-size: 0px;
|
|
}
|
|
.pages li:hover { background-color: grey; }
|
|
.pages li:first-child { border-left: none; border-radius: 7px 0 0 7px; }
|
|
.pages li
|
|
{
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
padding: 0.5em 1.5em;
|
|
cursor: pointer;
|
|
color: white;
|
|
border-left: 1px solid #ddd;
|
|
border-right: 1px solid #888;
|
|
}
|
|
.pages li { *display: inline !important; } /* IE7 only */
|
|
.pages .selected
|
|
{
|
|
background-color: #444 !important;
|
|
color: white;
|
|
text-shadow:none;
|
|
border-right-color: #aaa;
|
|
border-left: none;
|
|
box-shadow:inset 1px 2px 6px #070707;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<html>
|
|
|
|
<script src="knockout.js" type="text/javascript"></script>
|
|
|
|
<!-- Todo: Create UI -->
|
|
<ul class="folders" data-bind="foreach: folders">
|
|
<li data-bind="text: $data, css: { selected: $data == $root.chosenFolderId() }, click: $root.goToFolder"></li>
|
|
</ul>
|
|
<!-- Mails grid --> <table class="mails" data-bind="with: chosenFolderData"> <thead><tr><th>From</th><th>To</th><th>Subject</th><th>Date</th></tr></thead> <tbody data-bind="foreach: mails"> <tr> <td data-bind="text: from"></td> <td data-bind="text: to"></td> <td data-bind="text: subject"></td> <td data-bind="text: date"></td> </tr> </tbody> </table>
|
|
|
|
<script>
|
|
function WebmailViewModel() {
|
|
// Data
|
|
var self = this;
|
|
self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
|
|
|
|
self.chosenFolderId = ko.observable();
|
|
|
|
self.chosenFolderData = ko.observable();
|
|
// Behaviours
|
|
self.goToFolder = function(folder) { self.chosenFolderId(folder);
|
|
$.get('/mail', { folder: folder }, self.chosenFolderData);};
|
|
};
|
|
|
|
ko.applyBindings(new WebmailViewModel());
|
|
</script>
|
|
|
|
|
|
|
|
</html>
|