Commit 6f4a1197 authored by MrMan's avatar MrMan

passable email listing

parent f8206d5c
......@@ -44,43 +44,70 @@ var LHS_LABEL_ITEMS = [
},
];
var MAIL_ITEMS = [
var ONE_MINUTE_MS = 1000 * 60;
var ONE_HOUR_MS = 60 * ONE_MINUTE_MS;
var ONE_DAY_MS = 24 * ONE_HOUR_MS;
var ONE_WEEK_MS = 27 * ONE_DAY_MS;
function randomPastDate() {
var mins = Math.floor(Math.random() * 60) * ONE_MINUTE_MS;
var hours = Math.floor(Math.random() * 24) * ONE_HOUR_MS;
var days = Math.floor(Math.random() * 7) * ONE_DAY_MS;
return new Date(new Date().getTime() - mins - hours - days);
}
var EMAILS = [
{
from: {name: "Victor Erixon"},
title: "Theories of Design",
from: {name: "Victor Erixon", email: "victor.erixon@example.com"},
subject: "Theories of Design",
text: "Molestias deserunt veritatis modi ut fugiat sint. Dolorum vel autem sint. Dolores accusamus dolores occaecati tenetur adipisci asperiores",
sendDate: randomPastDate(),
},
{
from: {name: "Jacob Hubertus"},
title: "Street Photography",
from: {name: "Jacob Hubertus", email: "jacob.hubertus@example.com"},
subject: "Street Photography",
text: "Molestias deserunt veritatis modi ut fugiat sint. Dolorum vel autem sint. Dolores accusamus dolores occaecati tenetur adipisci asperiores",
sendDate: randomPastDate(),
},
{
from: {name: "August Berglund"},
title: "HTML+CSS Tutorials?",
from: {name: "August Berglund", email: "august.berglund@example.com"},
subject: "HTML+CSS Tutorials?",
text: "Molestias deserunt veritatis modi ut fugiat sint. Dolorum vel autem sint. Dolores accusamus dolores occaecati tenetur adipisci asperiores",
sendDate: randomPastDate(),
},
{
from: {name: "Rick Brunstedt"},
title: "Train Crossing",
from: {name: "Rick Brunstedt", email: "rick.brunstedt@example.com"},
subject: "Train Crossing",
text: "Molestias deserunt veritatis modi ut fugiat sint. Dolorum vel autem sint. Dolores accusamus dolores occaecati tenetur adipisci asperiores",
sendDate: randomPastDate(),
},
{
from: {name: "Webydo Team"},
title: "Does Webydo have what you're looking for? ",
from: {name: "Webydo Team", email: "team@webydo.com"},
subject: "Does Webydo have what you're looking for? ",
text: "Molestias deserunt veritatis modi ut fugiat sint. Dolorum vel autem sint. Dolores accusamus dolores occaecati tenetur adipisci asperiores",
sendDate: randomPastDate(),
},
];
EMAILS = EMAILS.sort(function(a, b) {
var aTime = a.sendDate.getTime();
var bTime = b.sendDate.getTime();
if (aTime < aTime) { return -1; }
if (bTime > bTime) { return 1; }
return 0;
});
var ELLIPSIS_CHAR_LIMIT = 60;
////////////////////
// LHS Navigation //
////////////////////
var HeaderButton = {
view: function(vnode) {
const text = vnode.attrs.title || "Compose Mail";
const iconName = vnode.attrs.iconName || "pencil-white.svg";
const iconPrefix = "static/images/icons/";
var text = vnode.attrs.title || "Compose Mail";
var iconName = vnode.attrs.iconName || "pencil-white.svg";
var iconPrefix = "static/images/icons/";
return m("button", {class: "component header-button"}, [
m("span", text),
......@@ -165,14 +192,14 @@ var NavItemListing = {
var LHSNavPageList = {
view: function() {
const navItems = LHS_NAV_ITEMS;
var navItems = LHS_NAV_ITEMS;
return m(NavItemListing, {items: navItems});
}
};
var LHSNavLabelList = {
view: function() {
const labelItems = LHS_LABEL_ITEMS;
var labelItems = LHS_LABEL_ITEMS;
return m(NavItemListing, {items: labelItems});
}
};
......@@ -196,9 +223,9 @@ var LHSNav = {
var RHSHeader = {
view: function(vnode) {
const title = vnode.attrs.title || "Title";
const bgColor = vnode.attrs.bgColor || "#2285c6";
const newCount = vnode.attrs.newCount;
var title = vnode.attrs.title || "Title";
var bgColor = vnode.attrs.bgColor || "#2285c6";
var newCount = vnode.attrs.newCount;
return m("div.component.rhs-header.flex", {class: vnode.attrs.class}, [
m(".title-container", [
......@@ -232,7 +259,7 @@ var ButtonGroup = {
var DropDownButton = {
view: function(vnode) {
const title = vnode.attrs.title || "Button";
var title = vnode.attrs.title || "Button";
return m("button.component.drop-down-button.gray-boxed.clickable", [
m("span", title),
......@@ -243,11 +270,11 @@ var DropDownButton = {
var PaginationControls = {
view: function(vnode) {
const title = vnode.attrs.title || "Button";
const lowerBound = 0;
const upperBound = 50;
const boundStatement = lowerBound + " - " + upperBound;
const total = 100;
var title = vnode.attrs.title || "Button";
var lowerBound = 0;
var upperBound = 50;
var boundStatement = lowerBound + " - " + upperBound;
var total = 100;
return m(".component.pagination-controls", [
m("strong", boundStatement),
......@@ -259,17 +286,63 @@ var PaginationControls = {
}
};
var Inbox = {
var EmailListItem = {
view: function(vnode) {
const newCount = vnode.attrs.newCount;
return m(".component.inbox", [
// Colored header
m(RHSHeader, {class: "inbox-blue-bg white-fg", title: "Inbox", newCount: newCount}),
var email = vnode.attrs.email;
var textContent = email.text || "";
var formattedSendDate = email.sendDate.toLocaleString();
// Container with buttons
m(".subnav", [
return m(".component.email-list-item", [
m(".header", [
m(".lhs", [
m("input[type=checkbox]", {
onclick: function() {
if (vnode.attrs.onSelected) {
vnode.attrs.onSelected(email);
}
}
}),
m("span.sm-margin-left.sender", email.from.name),
m("span.sm-margin-left.tag", email.label),
]),
m(".rhs", [
m(".date", formattedSendDate)
])
]),
m(".blurb.md-margin-top", [
m("p.subject", email.subject),
// This is not a great way to do ellipsis but... it'll work for the demo.
m("p.body-preview", textContent.substring(0, ELLIPSIS_CHAR_LIMIT) + "..."),
]),
]);
}
};
var EmailList = {
oninit: function() {
this.selectedEmails = {};
},
view: function(vnode) {
var emails = vnode.attrs.emails || [];
return m(".component.email-list", emails.map(function(email) {
return m(EmailListItem, {
email: email,
onEmailSelect: function(email) { this.selectedEmails[email.id] = true; },
});
}));
}
};
var MailPageSubNav = {
view: function(vnode) {
// Container with buttons
return m(".component.mail-page-subnav", [
m(".lhs", [
m(MultiSelectCheckbox),
m(ButtonGroup, {class: "sm-margin-left"}, [
m("button.clickable", "Archive"),
......@@ -277,19 +350,83 @@ var Inbox = {
m("button.clickable", "Delete"),
]),
m(ButtonGroup, {class: "sm-margin-left"}, [
m(DropDownButton, {title: "Move to"}),
m(DropDownButton, {title: "Label"}),
]),
m(ButtonGroup, {class: "sm-margin-left"}, [
m(DropDownButton, {title: "Move to"}),
m(DropDownButton, {title: "Label"}),
]),
]),
m(".rhs", [
m(PaginationControls)
]),
m(".rhs", [
m(PaginationControls)
]),
]);
},
};
var InboxPage = {
view: function(vnode) {
var newCount = vnode.attrs.newCount;
return m(".component.inbox-page", [
// Colored header
m(RHSHeader, {class: "inbox-blue-bg white-fg", title: "Inbox", newCount: newCount}),
// Container with buttons
m(MailPageSubNav),
// EmailList
m(EmailList, {emails: EMAILS}),
]);
}
};
var StarredEmailsPage = {
view: function(vnode) {
var newCount = vnode.attrs.newCount;
return m(".component.starred-emails-page", [
// Colored header
m(RHSHeader, {class: "starred-orange-bg white-fg", title: "Inbox", newCount: newCount}),
// Container with buttons
m(MailPageSubNav),
// EmailList
m(EmailList, {emails: EMAILS}),
]);
}
};
var DraftEmailsPage = {
view: function(vnode) {
var newCount = vnode.attrs.newCount;
return m(".component.draft-emails-page", [
// Colored header
m(RHSHeader, {class: "draft-gray-bg white-fg", title: "Inbox", newCount: newCount}),
// Container with buttons
m(MailPageSubNav),
// EmailList
m(EmailList, {emails: EMAILS}),
]);
}
};
var ImportantEmailsPage = {
view: function(vnode) {
var newCount = vnode.attrs.newCount;
return m(".component.important-emails-page", [
// Colored header
m(RHSHeader, {class: "important-gray-bg white-fg", title: "Inbox", newCount: newCount}),
// Container with buttons
m(MailPageSubNav),
// // MailListing
// m(MailListing, {items: MAIL_ITEMS}),
// EmailList
m(EmailList, {emails: EMAILS}),
]);
}
};
......@@ -302,12 +439,12 @@ var MailContent = {
view: function() {
// TODO: decide *which* view to show
switch (this.subpage) {
case "starred": return m(Starred);
case "draft": return m(Draft);
case "draft": return m(Important);
case "starred": return m(StarredEmailsPage);
case "draft": return m(DraftEmailsPage);
case "draft": return m(ImportantEmailsPage);
case "inbox":
default:
return m(Inbox, {newCount: 2});
return m(InboxPage, {newCount: 2});
}
}
};
......
......@@ -72,16 +72,6 @@ img.icon-lg { height: 2em; }
border: 1.5px solid #BBB;
}
.subnav {
background-color: #EEE;
height: 4em;
display: flex;
align-items: center;
padding-left: 1em;
padding-right: 1em;
justify-content: space-between;
}
.clickable { cursor: pointer; }
.valign-mid { vertical-align: middle; }
......@@ -226,18 +216,56 @@ img.icon-lg { height: 2em; }
border-bottom-right-radius: 0.25em;
}
/***********************/
/* MultiSelectCheckbox */
/***********************/
/*************/
/* EmailList */
/*************/
.component.email-list {
overflow: none, scroll;
}
/*****************/
/* EmailListItem */
/*****************/
.component.email-list-item .header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0em 1em;
}
.component.email-list-item {
padding: 1em;
border-bottom: 2px solid #EFEFEF;
}
.component.email-list-item .sender {
font-weight: bold;
}
.component.multi-select-checkbox {
.component.email-list-item .blurb .body-preview {
color: gray;
}
/********************/
/* Mail Page Subnav */
/********************/
.component.mail-page-subnav {
background-color: #EEE;
height: 4em;
display: flex;
align-items: center;
padding-left: 1em;
padding-right: 1em;
justify-content: space-between;
}
/*********/
/* Inbox */
/*********/
.component.inbox {
.component.inbox-page {
width: 100%;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment