Commit b66c090d authored by MrMan's avatar MrMan

Completed parcel integration

parent 3f05a4f7
......@@ -5,6 +5,8 @@ import MainLayout from "./components/main-layout";
import WithRouteTriggeredLoader from "./components/with-route-triggered-loader";
import InboxMail from "./components/inbox-mail";
let StarredMail;
// Set up the app
m.route(document.body, "/inbox", {
......@@ -24,7 +26,7 @@ m.route(document.body, "/inbox", {
onmatch: function() {
// Load starred mail *when we need it*
return import("./components/starred-mail")
.then(({default: StarredMail}) => StarredMail);
.then((mod) => StarredMail = mod.default);
},
},
......
import m from "../static/vendor/mithril/1.1.6/mithril.min";
import EmailSvc from "../services/email";
import RHSHeader from "./rhs-header";
import MailPageSubNav from "./mail-page-subnav";
import EmailList from "./email-list";
import MainLayout from "./main-layout";
import WithRouteTriggeredLoader from "./with-route-triggered-loader";
const DraftMail = {
view: function(vnode) {
const newCount = vnode.attrs.newCount;
return m(MainLayout,
m(".component.draft-rhs", [
// Colored header
m(RHSHeader, {class: "draft-gray-bg white-fg", title: "Draft", newCount: newCount}),
m(WithRouteTriggeredLoader, {
title: "Loading draft emails...",
// This function provides the data
loadFn: function() { return EmailSvc.getEmails(); },
// This function provides the component to WithRouteTriggeredLoader
childFn: (data) => m(".component.draft-rhs", [
// Colored header
m(RHSHeader, {class: "draft-gray-bg white-fg", title: "Draft", newCount: newCount}),
// Container with buttons
m(MailPageSubNav),
// Container with buttons
m(MailPageSubNav),
// EmailList
m(EmailList, {emails: vnode.attrs.emails}),
])
// EmailList
m(EmailList, {emails: data}),
])
})
);
}
},
};
export default DraftMail;
import m from "../static/vendor/mithril/1.1.6/mithril.min";
import EmailSvc from "../services/email";
import RHSHeader from "./rhs-header";
import MailPageSubNav from "./mail-page-subnav";
import EmailList from "./email-list";
import MainLayout from "./main-layout";
import WithRouteTriggeredLoader from "./with-route-triggered-loader";
const ImportantMail = {
view: function(vnode) {
const newCount = vnode.attrs.newCount;
return m(MainLayout,
m(".component.important-rhs", [
// Colored header
m(RHSHeader, {class: "important-red-bg white-fg", title: "Important", newCount: newCount}),
m(WithRouteTriggeredLoader, {
title: "Loading important emails...",
// This function provides the data
loadFn: function() { return EmailSvc.getEmails(); },
// This function provides the component to WithRouteTriggeredLoader
childFn: (data) => m(".component.important-rhs", [
// Colored header
m(RHSHeader, {class: "important-red-bg white-fg", title: "Important", newCount: newCount}),
// Container with buttons
m(MailPageSubNav),
// Container with buttons
m(MailPageSubNav),
// EmailList
m(EmailList, {emails: vnode.attrs.emails}),
])
// EmailList
m(EmailList, {emails: data}),
])
})
);
}
};
......
import m from "../static/vendor/mithril/1.1.6/mithril.min.js";
import InboxWhiteIcon from "../static/images/icons/inbox-white.svg";
import StarFullWhiteIcon from "../static/images/icons/star-full-white.svg";
import FileLineWhiteIcon from "../static/images/icons/file-line-white.svg";
import ExclamationTriangleWhiteIcon from "../static/images/icons/exclamation-triangle-white.svg";
import PencilWhiteIcon from "../static/images/icons/pencil-white.svg";
var LHS_NAV_ITEMS = [
{
title: "Inbox",
iconImgSrc: "static/images/icons/inbox-white.svg",
iconImgSrc: InboxWhiteIcon,
badgeCSSBgColor: "#2285c6",
badgeContent: 2,
route: "/inbox",
......@@ -11,19 +17,19 @@ var LHS_NAV_ITEMS = [
{
title: "Starred",
iconImgSrc: "static/images/icons/star-full-white.svg",
iconImgSrc: StarFullWhiteIcon,
route: "/starred",
},
{
title: "Draft",
iconImgSrc: "static/images/icons/file-line-white.svg",
iconImgSrc: FileLineWhiteIcon,
route: "/draft",
},
{
title: "Important",
iconImgSrc: "static/images/icons/exclamation-triangle-white.svg",
iconImgSrc: ExclamationTriangleWhiteIcon,
route: "/important",
},
......@@ -52,12 +58,10 @@ var LHS_LABEL_ITEMS = [
var HeaderButton = {
view: function(vnode) {
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),
m("img", {class: "sm-margin-left icon", src: iconPrefix + iconName }),
m("img", {class: "sm-margin-left icon", src: PencilWhiteIcon}),
]);
}
};
......
import m from "../static/vendor/mithril/1.1.6/mithril.min.js";
import EmailSvc from "../services/email.js";
import SquareIcon from "../static/images/icons/square.svg";
import MinusSquareIcon from "../static/images/icons/minus-square.svg";
import CheckSquareIcon from "../static/images/icons/check-square.svg";
import ChevronDownIcon from "../static/images/icons/chevron-down.svg";
import ChevronLeftIcon from "../static/images/icons/chevron-left.svg";
import ChevronRightIcon from "../static/images/icons/chevron-right.svg";
const MultiSelectCheckbox = {
view: function(vnode) {
const allEmailsChecked = vnode.attrs.allEmailsChecked;
......@@ -10,9 +17,9 @@ const MultiSelectCheckbox = {
const dropdownContentHidden = "dropdownContentHidden" in vnode.attrs ? vnode.attrs.dropdownContentHidden : true;
if (dropdownContentHidden) { dropdownContentClasses.push("hidden"); }
let selectionIconSrc = "static/images/icons/square.svg";
if (oneOrMoreEmailsChecked) { selectionIconSrc = "static/images/icons/minus-square.svg"; }
if (allEmailsChecked) { selectionIconSrc = "static/images/icons/check-square.svg"; }
let selectionIconSrc = SquareIcon;
if (oneOrMoreEmailsChecked) { selectionIconSrc = MinusSquareIcon; }
if (allEmailsChecked) { selectionIconSrc = CheckSquareIcon; }
let selectionText = "Select All";
if (oneOrMoreEmailsChecked) { selectionText = "Clear Selection"; }
......@@ -45,7 +52,7 @@ const DropDownButton = {
return m("button.component.drop-down-button.gray-boxed.clickable", [
m("span", title),
m("img.xs-margin-left.icon", {src: "static/images/icons/chevron-down.svg"}),
m("img.xs-margin-left.icon", {src: ChevronDownIcon}),
]);
}
};
......@@ -62,8 +69,8 @@ const PaginationControls = {
m("strong", boundStatement),
m("span", " of "),
m("strong", total),
m("img.xs-margin-left.icon-lg.gray-boxed.valign-mid", {src: "static/images/icons/chevron-left.svg"}),
m("img.xs-margin-left.icon-lg.gray-boxed.valign-mid", {src: "static/images/icons/chevron-right.svg"}),
m("img.xs-margin-left.icon-lg.gray-boxed.valign-mid", {src: ChevronLeftIcon}),
m("img.xs-margin-left.icon-lg.gray-boxed.valign-mid", {src: ChevronRightIcon}),
]);
}
};
......
import m from "../static/vendor/mithril/1.1.6/mithril.min.js";
import SettingsWhiteIcon from "../static/images/icons/settings-white.svg";
import ExampleAvatar from "../static/images/example-avatar.jpg";
const RHSHeader = {
view: function(vnode) {
const title = vnode.attrs.title || "Title";
......@@ -14,8 +17,8 @@ const RHSHeader = {
m(".controls", [
m("input.search-box[type='text'][placeholder='Search']"),
m("img.sm-margin-left.icon", {src: "static/images/icons/settings-white.svg"}),
m("img.sm-margin-left.avatar", {src: "static/images/example-avatar.jpg"}),
m("img.sm-margin-left.icon", {src: SettingsWhiteIcon}),
m("img.sm-margin-left.avatar", {src: ExampleAvatar}),
])
]);
}
......
import m from "../static/vendor/mithril/1.1.6/mithril.min";
import EmailSvc from "../services/email";
import RHSHeader from "./rhs-header";
import MailPageSubNav from "./mail-page-subnav";
import EmailList from "./email-list";
......@@ -9,36 +12,24 @@ const StarredMail = {
view: function(vnode) {
const newCount = vnode.attrs.newCount;
// return m(MainLayout, m(WithRouteTriggeredLoader, {
// title: "Loading starred emails...",
// // This function provides the data
// loadFn: function() { return EmailSvc.getEmails(); },
// // This function provides the component to WithRouteTriggeredLoader
// childFn: function(data) {
// return m(".component.starred-rhs", [
// // Colored header
// m(RHSHeader, {class: "starred-orange-bg white-fg", title: "Starred", newCount: newCount}),
// // Container with buttons
// m(MailPageSubNav),
// // EmailList
// m(EmailList, {emails: vnode.attrs.emails}),
// ]);
// }
// }));
return m(MainLayout, m(".component.starred-rhs", [
// Colored header
m(RHSHeader, {class: "starred-orange-bg white-fg", title: "Starred", newCount: newCount}),
// Container with buttons
m(MailPageSubNav),
// EmailList
m(EmailList, {emails: vnode.attrs.emails}),
]));
return m(MainLayout,
m(WithRouteTriggeredLoader, {
title: "Loading starred emails...",
// This function provides the data
loadFn: function() { return EmailSvc.getEmails(); },
// This function provides the component to WithRouteTriggeredLoader
childFn: (data) => m(".component.starred-rhs", [
// Colored header
m(RHSHeader, {class: "starred-orange-bg white-fg", title: "Starred", newCount: newCount}),
// Container with buttons
m(MailPageSubNav),
// EmailList
m(EmailList, {emails: data})
]),
})
);
},
};
......
import m from "../static/vendor/mithril/1.1.6/mithril.min.js";
import LoaderGrayIcon from "../static/images/icons/loader-gray.svg";
const LoadingIndicator = {
view: function(vnode) {
const title = vnode.attrs.title || "Loading...";
return m(".component.loading-indicator", [
m("img.icon.loading-icon", {src: "static/images/icons/loader-gray.svg"}),
m("img.icon.loading-icon", {src: LoaderGrayIcon}),
m(".title", title),
]);
},
......@@ -28,7 +30,9 @@ const WithRouteTriggeredLoader = {
this.loaded = false;
this.loadedData = null;
// Trigger redraw with emptied data
m.redraw();
// NOTE: this redraw doesn't work with onmatch (since we're code splitting) versus `render`
// It will render two components on the page instead of one
// m.redraw();
this.requestInFlight = true;
(this.loadFn ? this.loadFn() : Promise.resolve())
......
......@@ -21,5 +21,7 @@
"http-server": "^0.11.1",
"parcel-bundler": "^1.11.0"
},
"dependencies": {}
"dependencies": {
"static": "^2.0.0"
}
}
This diff is collapsed.
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