Commit 44a71dd5 authored by MrMan's avatar MrMan

Write enough SystemJS integration to get inbox to show

parent 1d7af6ca
This diff is collapsed.
var EmailListItem = { /* global System */
view: function(vnode) { System.register([
var email = vnode.attrs.email; "../services/email.js",
var textContent = email.text || ""; ], function(exportModule, moduleCtx) {
var formattedSendDate = email.sendDate.toLocaleString(); return {
execute: function() {
var isSelected = EMAIL_SVC.getEmailSelectedStatusById(email.id); Promise.all([
var isChecked = EMAIL_SVC.getEmailCheckedStatusById(email.id); moduleCtx.import("../services/email.js",)
]).then(function(deps) {
var additionalClasses = []; var EmailSvc = deps.shift().service;
if (isSelected) { additionalClasses.push("selected"); }
var ELLIPSIS_CHAR_LIMIT = 60;
return m(
".component.email-list-item.clickable", var EmailListItem = {
{ view: function(vnode) {
class: additionalClasses.join(" "), var email = vnode.attrs.email;
onclick: function() { EMAIL_SVC.toggleSelectionStatusById(email.id); } var textContent = email.text || "";
}, var formattedSendDate = email.sendDate.toLocaleString();
[
m(".header", [ var isSelected = EmailSvc.getEmailSelectedStatusById(email.id);
m(".lhs", [ var isChecked = EmailSvc.getEmailCheckedStatusById(email.id);
m("input[type=checkbox]", {
checked: isChecked, var additionalClasses = [];
onclick: function() { EMAIL_SVC.toggleCheckedStatusById(email.id); } if (isSelected) { additionalClasses.push("selected"); }
}),
m("span.sm-margin-left.sender", email.from.name), return m(
m("span.sm-margin-left.tag", email.label), ".component.email-list-item.clickable",
]), {
class: additionalClasses.join(" "),
m(".rhs", [ onclick: function() { EmailSvc.toggleSelectionStatusById(email.id); }
m(".date", formattedSendDate) },
]) [
]), m(".header", [
m(".lhs", [
m(".blurb.md-margin-top", [ m("input[type=checkbox]", {
m("p.subject", email.subject), checked: isChecked,
// This is not a great way to do ellipsis but... it'll work for the demo. onclick: function() { EmailSvc.toggleCheckedStatusById(email.id); }
m("p.body-preview", textContent.substring(0, ELLIPSIS_CHAR_LIMIT) + "..."), }),
]), m("span.sm-margin-left.sender", email.from.name),
m("span.sm-margin-left.tag", email.label),
]); ]),
}
}; m(".rhs", [
m(".date", formattedSendDate)
])
var EmailList = { ]),
oninit: function() {
this.selectedEmails = {}; 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.
view: function(vnode) { m("p.body-preview", textContent.substring(0, ELLIPSIS_CHAR_LIMIT) + "..."),
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 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; },
});
}));
}
};
exportModule({component: EmailList});
}); });
}));
} },
}; };
});
var InboxMail = { /* global System */
view: function(vnode) { System.register([
var newCount = vnode.attrs.newCount; "./rhs-header.js",
var emails = vnode.attrs.emails; "./mail-page-subnav.js",
"./email-list.js",
], function(exportModule, moduleCtx) {
return {
execute: function() {
return m(".component.inbox-rhs", [ Promise.all([
// Colored header moduleCtx.import("./rhs-header.js"),
m(RHSHeader, {class: "inbox-blue-bg white-fg", title: "Inbox", newCount: newCount}), moduleCtx.import("./mail-page-subnav.js"),
moduleCtx.import("./email-list.js"),
])
.then(function(deps) {
var RHSHeader = deps.shift().component;
var MailPageSubNav = deps.shift().component;
var EmailList = deps.shift().component;
// Container with buttons var InboxMail = {
m(MailPageSubNav), view: function(vnode) {
var newCount = vnode.attrs.newCount;
var emails = vnode.attrs.emails;
// EmailList return m(".component.inbox-rhs", [
m(EmailList, {emails: vnode.attrs.emails}), // Colored header
]); m(RHSHeader, {class: "inbox-blue-bg white-fg", title: "Inbox", newCount: newCount}),
}
}; // Container with buttons
m(MailPageSubNav),
// EmailList
m(EmailList, {emails: vnode.attrs.emails}),
]);
}
};
exportModule({component: InboxMail});
});
},
};
});
var HeaderButton = { /* global m, System */
view: function(vnode) { System.register([], function(exportModule, moduleCtx) {
var text = vnode.attrs.title || "Compose Mail"; return {
var iconName = vnode.attrs.iconName || "pencil-white.svg"; execute: function() {
var iconPrefix = "static/images/icons/";
var LHS_NAV_ITEMS = [
return m("button", {class: "component header-button"}, [ {
m("span", text), title: "Inbox",
m("img", {class: "sm-margin-left icon", src: iconPrefix + iconName }), iconImgSrc: "static/images/icons/inbox-white.svg",
]); badgeCSSBgColor: "#2285c6",
} badgeContent: 2,
}; route: "/inbox",
},
var LHSNavHeader = {
view: function() { {
return m("header", [ title: "Starred",
m(HeaderButton), iconImgSrc: "static/images/icons/star-full-white.svg",
]); route: "/starred",
} },
};
{
var Badge = { title: "Draft",
view: function(vnode) { iconImgSrc: "static/images/icons/file-line-white.svg",
var styles = []; route: "/draft",
var content = vnode.attrs.content || ""; },
var bgColor = vnode.attrs.cssBgColor || "gray";
var color = vnode.attrs.cssBgColor || "white"; {
var emptySquare = vnode.attrs.emptySquare; title: "Important",
var classes = ["component", "badge"]; iconImgSrc: "static/images/icons/exclamation-triangle-white.svg",
route: "/important",
styles.push("background-color:" + vnode.attrs.cssBgColor); },
styles.push("color:" + vnode.attrs.cssColor);
var combinedStyles = styles.join(";"); ];
if (emptySquare) { classes.push("empty-square"); } var LHS_LABEL_ITEMS = [
{
return m("div", {class: classes.join(" "), style: combinedStyles}, content); title: "Work",
} badgeCSSBgColor: "#02bfc0",
}; badgeEmptySquare: true,
},
var NavItem = {
view: function(vnode) { {
var data = vnode.attrs.data || {}; title: "Private",
var title = data.title || "Placeholder"; badgeCSSBgColor: "#f9d47b",
var iconImgSrc = data.iconImgSrc; badgeEmptySquare: true,
var badgeContent = data.badgeContent || 0; },
var badgeCSSBgColor = data.badgeCSSBgColor;
var badgeEmptySquare = data.badgeEmptySquare; {
var children = [title]; title: "Priority",
var classes = ["component", "nav-item", "md-padding-horiz"]; badgeCSSBgColor: "#9391e5",
badgeEmptySquare: true,
if (data.selected) { classes.push("selected"); } },
];
// If there's an icon specified display it
if (iconImgSrc) { var HeaderButton = {
children.unshift(m("img", {class: "sm-margin-left sm-margin-right icon", src: iconImgSrc})); view: function(vnode) {
} else { var text = vnode.attrs.title || "Compose Mail";
children.unshift(m("div", {class: "placeholder-1em"})); var iconName = vnode.attrs.iconName || "pencil-white.svg";
} var iconPrefix = "static/images/icons/";
// If badgeColor and badgeContent are specified then show a badge return m("button", {class: "component header-button"}, [
if (badgeEmptySquare && badgeCSSBgColor || badgeContent && badgeCSSBgColor) { m("span", text),
children.push(m("div", {class: "badge-container float-right"}, [ m("img", {class: "sm-margin-left icon", src: iconPrefix + iconName }),
m(Badge, { ]);
class: "float-right", }
cssBgColor: badgeCSSBgColor, };
content: badgeContent,
emptySquare: badgeEmptySquare var LHSNavHeader = {
}) view: function() {
])); return m("header", [
} m(HeaderButton),
]);
return m("li.clickable", { }
class: classes.join(" "), };
onclick: function(e) {
// Navigate to the appropriate link for this var Badge = {
m.route.set(data.route); view: function(vnode) {
}, var styles = [];
}, children); var content = vnode.attrs.content || "";
} var bgColor = vnode.attrs.cssBgColor || "gray";
}; var color = vnode.attrs.cssBgColor || "white";
var emptySquare = vnode.attrs.emptySquare;
var classes = ["component", "badge"];
var NavItemListing = {
view: function(vnode) { styles.push("background-color:" + vnode.attrs.cssBgColor);
var navItems = vnode.attrs.items || []; styles.push("color:" + vnode.attrs.cssColor);
var children = navItems.map(function(i) { var combinedStyles = styles.join(";");
return m(NavItem, {data: i});
}); if (emptySquare) { classes.push("empty-square"); }
return m("ul", {class: "component nav-item-listing"}, children); return m("div", {class: classes.join(" "), style: combinedStyles}, content);
} }
}; };
var LHSNavPageList = { var NavItem = {
view: function() { view: function(vnode) {
// Mark the nav items with the correct selected property var data = vnode.attrs.data || {};
var currentPath = m.route.get(); var title = data.title || "Placeholder";
var navItems = LHS_NAV_ITEMS.map(function(item) { var iconImgSrc = data.iconImgSrc;
item.selected = currentPath === item.route; var badgeContent = data.badgeContent || 0;
return item; var badgeCSSBgColor = data.badgeCSSBgColor;
}); var badgeEmptySquare = data.badgeEmptySquare;
var children = [title];
return m(NavItemListing, {items: navItems}); var classes = ["component", "nav-item", "md-padding-horiz"];
}
}; if (data.selected) { classes.push("selected"); }
var LHSNavLabelList = { // If there's an icon specified display it
view: function() { if (iconImgSrc) {
var labelItems = LHS_LABEL_ITEMS; children.unshift(m("img", {class: "sm-margin-left sm-margin-right icon", src: iconImgSrc}));
return m(NavItemListing, {items: labelItems}); } else {
} children.unshift(m("div", {class: "placeholder-1em"}));
}; }
var LHSNav = { // If badgeColor and badgeContent are specified then show a badge
view: function() { if (badgeEmptySquare && badgeCSSBgColor || badgeContent && badgeCSSBgColor) {
return m("div", {class: "component lhs-nav"}, [ children.push(m("div", {class: "badge-container float-right"}, [
m(LHSNavHeader), m(Badge, {
m(LHSNavPageList), class: "float-right",
m("hr"), cssBgColor: badgeCSSBgColor,
m("h2", {class: "slim-text sm-padding-horiz"}, "Labels"), content: badgeContent,
m(LHSNavLabelList), emptySquare: badgeEmptySquare
m("hr"), })
]); ]));
} }
};
return m("li.clickable", {
class: classes.join(" "),
onclick: function(e) {
// Navigate to the appropriate link for this
m.route.set(data.route);
},
}, children);
}
};
var NavItemListing = {
view: function(vnode) {
var navItems = vnode.attrs.items || [];
var children = navItems.map(function(i) {
return m(NavItem, {data: i});
});
return m("ul", {class: "component nav-item-listing"}, children);
}
};
var LHSNavPageList = {
view: function() {
// Mark the nav items with the correct selected property
var currentPath = m.route.get();
var navItems = LHS_NAV_ITEMS.map(function(item) {
item.selected = currentPath === item.route;
return item;
});
return m(NavItemListing, {items: navItems});
}
};
var LHSNavLabelList = {
view: function() {
var labelItems = LHS_LABEL_ITEMS;
return m(NavItemListing, {items: labelItems});
}
};
var LHSNav = {
view: function() {
return m("div", {class: "component lhs-nav"}, [
m(LHSNavHeader),
m(LHSNavPageList),
m("hr"),
m("h2", {class: "slim-text sm-padding-horiz"}, "Labels"),
m(LHSNavLabelList),
m("hr"),
]);
}
};
// SystemJS export
exportModule({component: LHSNav});
},
};
});
var MultiSelectCheckbox = { System.register([
view: function(vnode) { "../services/email.js",
var allEmailsChecked = vnode.attrs.allEmailsChecked; ], function(exportModule, moduleCtx) {
var oneOrMoreEmailsChecked = vnode.attrs.oneOrMoreEmailsChecked; return {
execute: function() {
var dropdownContentClasses = []; Promise.all([
var dropdownContentHidden = "dropdownContentHidden" in vnode.attrs ? vnode.attrs.dropdownContentHidden : true; moduleCtx.import("../services/email.js",)
if (dropdownContentHidden) { dropdownContentClasses.push("hidden"); } ]).then(function(deps) {
var EmailSvc = deps.shift().service;
var selectionIconSrc = "static/images/icons/square.svg";
if (oneOrMoreEmailsChecked) { selectionIconSrc = "static/images/icons/minus-square.svg"; } var MultiSelectCheckbox = {
if (allEmailsChecked) { selectionIconSrc = "static/images/icons/check-square.svg"; } view: function(vnode) {
var allEmailsChecked = vnode.attrs.allEmailsChecked;
var selectionText = "Select All"; var oneOrMoreEmailsChecked = vnode.attrs.oneOrMoreEmailsChecked;
if (oneOrMoreEmailsChecked) { selectionText = "Clear Selection"; }
if (allEmailsChecked) { selectionText = "Unselect All"; } var dropdownContentClasses = [];
var dropdownContentHidden = "dropdownContentHidden" in vnode.attrs ? vnode.attrs.dropdownContentHidden : true;
var clickHandler = function() { EMAIL_SVC.checkAllEmails(); }; if (dropdownContentHidden) { dropdownContentClasses.push("hidden"); }
if (allEmailsChecked || oneOrMoreEmailsChecked) { clickHandler = function() { EMAIL_SVC.clearCheckedEmails(); }; }
var selectionIconSrc = "static/images/icons/square.svg";
return m( if (oneOrMoreEmailsChecked) { selectionIconSrc = "static/images/icons/minus-square.svg"; }
"span.component.multi-select-checkbox.gray-boxed.clickable", if (allEmailsChecked) { selectionIconSrc = "static/images/icons/check-square.svg"; }
{onclick: clickHandler},
[ var selectionText = "Select All";
m("span", [ if (oneOrMoreEmailsChecked) { selectionText = "Clear Selection"; }
m("img.icon", {src: selectionIconSrc}), if (allEmailsChecked) { selectionText = "Unselect All"; }
m("span.xs-margin-left", selectionText),
]), var clickHandler = function() { EmailSvc.checkAllEmails(); };
]); if (allEmailsChecked || oneOrMoreEmailsChecked) { clickHandler = function() { EmailSvc.clearCheckedEmails(); }; }
}
}; return m(
"span.component.multi-select-checkbox.gray-boxed.clickable",
var ButtonGroup = { {onclick: clickHandler},
view: function(vnode) { [
return m("span.component.button-group", {class: vnode.attrs.class}, vnode.children); m("span", [
} m("img.icon", {src: selectionIconSrc}),
}; m("span.xs-margin-left", selectionText),
]),
var DropDownButton = { ]);
view: function(vnode) { }
var title = vnode.attrs.title || "Button"; };
return m("button.component.drop-down-button.gray-boxed.clickable", [ var ButtonGroup = {
m("span", title), view: function(vnode) {
m("img.xs-margin-left.icon", {src: "static/images/icons/chevron-down.svg"}), return m("span.component.button-group", {class: vnode.attrs.class}, vnode.children);
]); }
} };
};
var DropDownButton = {
var PaginationControls = { view: function(vnode) {
view: function(vnode) { var title = vnode.attrs.title || "Button";
var title = vnode.attrs.title || "Button";
var lowerBound = 0; return m("button.component.drop-down-button.gray-boxed.clickable", [
var upperBound = 50; m("span", title),
var boundStatement = lowerBound + " - " + upperBound; m("img.xs-margin-left.icon", {src: "static/images/icons/chevron-down.svg"}),
var total = 100; ]);
}
return m(".component.pagination-controls", [ };
m("strong", boundStatement),
m("span", " of "), var PaginationControls = {
m("strong", total), view: function(vnode) {
m("img.xs-margin-left.icon-lg.gray-boxed.valign-mid", {src: "static/images/icons/chevron-left.svg"}), var title = vnode.attrs.title || "Button";
m("img.xs-margin-left.icon-lg.gray-boxed.valign-mid", {src: "static/images/icons/chevron-right.svg"}), var lowerBound = 0;
]); var upperBound = 50;
} var boundStatement = lowerBound + " - " + upperBound;
}; var total = 100;
var MailPageSubNav = { return m(".component.pagination-controls", [
view: function(vnode) { m("strong", boundStatement),
var allEmailsChecked = EMAIL_SVC.allEmailsChecked(); m("span", " of "),
var oneOrMoreEmailsChecked = EMAIL_SVC.oneOrMoreEmailsChecked(); m("strong", total),
m("img.xs-margin-left.icon-lg.gray-boxed.valign-mid", {src: "static/images/icons/chevron-left.svg"}),
// Container with buttons m("img.xs-margin-left.icon-lg.gray-boxed.valign-mid", {src: "static/images/icons/chevron-right.svg"}),
return m(".component.mail-page-subnav", [ ]);
m(".lhs", [ }
m(MultiSelectCheckbox, { };
allEmailsChecked: allEmailsChecked,
oneOrMoreEmailsChecked: oneOrMoreEmailsChecked, var MailPageSubNav = {
}), view: function(vnode) {
var allEmailsChecked = EmailSvc.allEmailsChecked();
m(ButtonGroup, {class: "sm-margin-left"}, [ var oneOrMoreEmailsChecked = EmailSvc.oneOrMoreEmailsChecked();
m("button.clickable", "Archive"),
m("button.clickable", "Spam"), // Container with buttons
m("button.clickable", "Delete"), return m(".component.mail-page-subnav", [
]), m(".lhs", [
m(MultiSelectCheckbox, {
m(ButtonGroup, {class: "sm-margin-left"}, [ allEmailsChecked: allEmailsChecked,
m(DropDownButton, {title: "Move to"}), oneOrMoreEmailsChecked: oneOrMoreEmailsChecked,
m(DropDownButton, {title: "Label"}), }),
]),
]), m(ButtonGroup, {class: "sm-margin-left"}, [
m("button.clickable", "Archive"),
m(".rhs", [ m("button.clickable", "Spam"),
m(PaginationControls) m("button.clickable", "Delete"),
]), ]),
]);
}, m(ButtonGroup, {class: "sm-margin-left"}, [
}; m(DropDownButton, {title: "Move to"}),
m(DropDownButton, {title: "Label"}),
]),
]),
m(".rhs", [
m(PaginationControls)
]),
]);
},
};
exportModule({component: MailPageSubNav});
});
},
};
});
var MainLayout = { /* global System */
view: function(vnode) {
return m(".component.app-page.important-page", [ System.register([
m(LHSNav), // Declare dependencies
vnode.children, "./lhs-nav.js"
]); ], function(exportModule, moduleCtx) {
}, return {
}; execute: function() {
// Import the module from this module's context
moduleCtx
.import("./lhs-nav.js")
.then(function(LHSNavModule) {
var LHSNav = LHSNavModule.component;
// Use all the imports to actualy do work
var MainLayout = {
view: function(vnode) {
return m(".component.app-page.important-page", [
m(LHSNav),
vnode.children,
]);
},
};
// SystemJS export
exportModule({component: MainLayout});
return Promise.resolve();
});
},
};
});
var RHSHeader = { /* global System */
view: function(vnode) { System.register([], function(exportModule) {
var title = vnode.attrs.title || "Title"; return {
var bgColor = vnode.attrs.bgColor || "#2285c6"; execute: function() {
var newCount = vnode.attrs.newCount;
return m("div.component.rhs-header.flex", {class: vnode.attrs.class}, [ var RHSHeader = {
m(".title-container", [ view: function(vnode) {
m("span.title", title), var title = vnode.attrs.title || "Title";