Commit 636f34f0 authored by MrMan's avatar MrMan

Merge branch 'build-lhs-nav'

parents 36097df8 81ed46c1
var LHS_NAV_ITEMS = [
{
title: "Inbox",
iconImgSrc: "static/images/icons/inbox-white.svg",
badgeCSSBgColor: "#2285c6",
badgeContent: 2,
selected: true,
},
{
title: "Starred",
iconImgSrc: "static/images/icons/star-full-white.svg",
},
{
title: "Draft",
iconImgSrc: "static/images/icons/file-line-white.svg",
},
{
title: "Important",
iconImgSrc: "static/images/icons/exclamation-triangle-white.svg",
},
];
var LHS_LABEL_ITEMS = [
{
title: "Work",
badgeCSSBgColor: "#02bfc0",
badgeEmptySquare: true,
},
{
title: "Private",
badgeCSSBgColor: "#f9d47b",
badgeEmptySquare: true,
},
{
title: "Priority",
badgeCSSBgColor: "#9391e5",
badgeEmptySquare: true,
},
];
////////////////////
// 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/";
return m("button", {class: "component header-button"}, [
m("span", text),
m("img", {class: "sm-margin-left icon", src: iconPrefix + iconName }),
]);
}
};
var LHSNavHeader = {
view: function() {
return m("header", [
m(HeaderButton),
]);
}
};
var Badge = {
view: function(vnode) {
var styles = [];
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"];
styles.push("background-color:" + vnode.attrs.cssBgColor);
styles.push("color:" + vnode.attrs.cssColor);
var combinedStyles = styles.join(";");
if (emptySquare) { classes.push("empty-square"); }
return m("div", {class: classes.join(" "), style: combinedStyles}, content);
}
};
var NavItem = {
view: function(vnode) {
var data = vnode.attrs.data || {};
var title = data.title || "Placeholder";
var iconImgSrc = data.iconImgSrc;
var badgeContent = data.badgeContent || 0;
var badgeCSSBgColor = data.badgeCSSBgColor;
var badgeEmptySquare = data.badgeEmptySquare;
var children = [title];
var classes = ["component", "nav-item", "md-padding-horiz"];
if (data.selected) { classes.push("selected"); }
// If there's an icon specified display it
if (iconImgSrc) {
children.unshift(m("img", {class: "sm-margin-left sm-margin-right icon", src: iconImgSrc}));
} else {
children.unshift(m("div", {class: "placeholder-1em"}));
}
// If badgeColor and badgeContent are specified then show a badge
if (badgeEmptySquare && badgeCSSBgColor || badgeContent && badgeCSSBgColor) {
children.push(m("div", {class: "badge-container float-right"}, [
m(Badge, {
class: "float-right",
cssBgColor: badgeCSSBgColor,
content: badgeContent,
emptySquare: badgeEmptySquare
})
]));
}
return m("li", {class: classes.join(" ")}, 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() {
const navItems = LHS_NAV_ITEMS;
return m(NavItemListing, {items: navItems});
}
};
var LHSNavLabelList = {
view: function() {
const 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"),
]);
}
};
var MailContent = {
view: function() {
return m("div", {class: "component mail-content"}, [
m("h1", "RHS Stuff here"),
]);
}
};
var App = {
view: function() {
return m("div", [
m("h1", "MithMail"),
m("span", "Hello world"),
return m("div", {class: "component app"}, [
m(LHSNav),
m(MailContent),
]);
}
};
......
......@@ -4,6 +4,8 @@
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MithMail</title>
<link rel="stylesheet" href="static/css/app.css"/>
</head>
<body>
<script src="static/vendor/mithril/1.1.6/mithril.min.js"></script>
......
......@@ -8,11 +8,11 @@
"license": "MIT",
"private": true,
"scripts": {
"build": "npm run build-html && npm run build-js",
"build": "npm run build-static && npm run build-html && npm run build-js",
"build-html": "cp index.html dist/",
"build-js": "cp app.js dist/",
"build-static": "mkdir -p dist && cp -r static dist/",
"build-watch": "ls index.html app.js | entr -rc npm run build",
"build-watch": "ls index.html app.js static/css/app.css | entr -rc npm run build",
"serve": "./node_modules/.bin/http-server dist/"
},
"devDependencies": {
......
html,body {
margin: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
img.icon {
height: 1em;
}
.sm-margin-top { margin-top: 1em; }
.sm-margin-left { margin-left: 1em; }
.sm-margin-right { margin-right: 1em; }
.sm-margin-bottom { margin-bottom: 1em; }
.sm-padding-horiz {
padding-left: 1em;
padding-right: 1em;
}
.md-margin-top { margin-top: 2em; }
.md-margin-left { margin-left: 2em; }
.md-margin-right { margin-right: 2em; }
.md-margin-bottom { margin-bottom: 2em; }
.md-padding-top { padding-top: 2em; }
.md-padding-left { padding-left: 2em; }
.md-padding-right { padding-right: 2em; }
.md-padding-bottom { padding-bottom: 2em; }
.md-padding-horiz {
padding-left: 2em;
padding-right: 2em;
}
.lg-padding-top { padding-top: 3em; }
.lg-padding-left { padding-left: 3em; }
.lg-padding-right { padding-right: 3em; }
.lg-padding-bottom { padding-bottom: 3em; }
.lg-padding-horiz {
padding-left: 3em;
padding-right: 3em;
}
.float-right { float: right; }
.slim-text { font-weight: 300; }
.slimmer-text { font-weight: 200; }
.placeholder-1em {
width: 1em;
display: inline-block
}
/*******/
/* App */
/*******/
.component.app {
display: flex;
flex-direction: columns;
min-height: 100%;
}
/**********/
/* LHSNav */
/**********/
.component .lhs-nav {
min-width: 25vw;
background-color: #2e3740;
color: white;
}
.component .lhs-nav hr {
width: 80%;
border: 1px solid #202529;
margin: 0 auto;
}
.component .lhs-nav header {
display: flex;
padding: 1em; 0;
justify-content: center;
align-items: center;
}
/****************/
/* HeaderButton */
/****************/
.component.header-button {
border-radius: 20em;
background-color: rgba(0,0,0,0.4);
color: white;
border: 1px solid black;
padding: 0.5em 2em;
box-shadow: inset 0px 0px 5px black;
cursor: pointer
}
/******************/
/* NavItemListing */
/******************/
.component.nav-item-listing {
list-style: none;
padding: 0;
margin: 0;
}
.component.nav-item-listing > .component.nav-item:first-child {
margin-top: 0;
}
/***********/
/* NavItem */
/***********/
.component.nav-item {
padding: 1em; 0;
}
.component.nav-item.selected {
background-color: rgba(0,0,0,0.4);
box-shadow: inset 0 0 5px black;
}
/*********/
/* Badge */
/*********/
.component.badge {
min-width: 1em;
text-align: center;
display: inline-block;
padding: .25em;
border-radius: .25em;
}
.component.badge.empty-square {
min-width: 1em;
height: 1em;
width: 1em;
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="64px" height="64px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 640 640"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
.fil0 {fill:white}
]]>
</style>
</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<path class="fil0" d="M340.882 76.8553l289.563 454.813c8.71664,13.701 16.2404,41.7525 0,41.7525l-620.878 0c-16.2404,0 -8.72845,-28.0515 0,-41.7525l289.551 -454.813c8.72845,-13.701 33.0358,-13.6891 41.7643,0zm-46.2053 375.914l50.4219 0 0 44.5872 -50.4219 0 0 -44.5872zm50.3983 -30.8862l-50.3864 0c-5.01975,-61.2291 -15.5317,-100.088 -15.5317,-161.222 0,-22.5593 18.2837,-40.843 40.843,-40.843 22.5593,0 40.843,18.2837 40.843,40.843 0,61.111 -10.6537,100.041 -15.7679,161.222z"/>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="64px" height="64px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 640 640"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
.fil0 {fill:black}
]]>
</style>
</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<path class="fil0" d="M340.882 76.8553l289.563 454.813c8.71664,13.701 16.2404,41.7525 0,41.7525l-620.878 0c-16.2404,0 -8.72845,-28.0515 0,-41.7525l289.551 -454.813c8.72845,-13.701 33.0358,-13.6891 41.7643,0zm-46.2053 375.914l50.4219 0 0 44.5872 -50.4219 0 0 -44.5872zm50.3983 -30.8862l-50.3864 0c-5.01975,-61.2291 -15.5317,-100.088 -15.5317,-161.222 0,-22.5593 18.2837,-40.843 40.843,-40.843 22.5593,0 40.843,18.2837 40.843,40.843 0,61.111 -10.6537,100.041 -15.7679,161.222z"/>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="64px" height="64px" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 640 640"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<path fill="white" d="M587.062 640l-534.125 0 0 -640 404.473 0 129.651 137.683 0 502.317zm-43.4533 -45.9573l0 -425.497 -118.147 0 0 -127.773 -328.599 0 0 553.271 446.746 0z"/>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="64px" height="64px" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 640 640"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<path fill="black" d="M587.062 640l-534.125 0 0 -640 404.473 0 129.651 137.683 0 502.317zm-43.4533 -45.9573l0 -425.497 -118.147 0 0 -127.773 -328.599 0 0 553.271 446.746 0z"/>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="64px" height="64px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 640 640"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
.fil0 {fill:white}
]]>
</style>
</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<path class="fil0" d="M25.4058 591.598l589.188 0c13.9608,0 25.4058,-11.5277 25.4058,-25.5948l-0.590558 -202.29c-0.0354335,-13.7836 -2.0079,-20.894 -6.96859,-33.8154l-99.2256 -258.676c-4.48824,-11.7167 -10.2639,-22.8192 -22.8074,-22.8192l-376.41 0c-12.5553,0 -18.1656,11.1734 -22.8192,22.8192l-104.836 262.94c-5.03156,12.6261 -5.53944,19.8428 -5.58668,33.5201l-0.755915 198.321c0,14.0671 11.445,25.5948 25.4058,25.5948zm534.467 -243.629l-132.214 0 -40.406 81.3435 -133.962 0 -40.9493 -81.3435 -133.206 0 93.3437 -218.448 297.83 0 89.5641 218.448z"/>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="64px" height="64px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 640 640"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
.fil0 {fill:black}
]]>
</style>
</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<path class="fil0" d="M25.4058 591.598l589.188 0c13.9608,0 25.4058,-11.5277 25.4058,-25.5948l-0.590558 -202.29c-0.0354335,-13.7836 -2.0079,-20.894 -6.96859,-33.8154l-99.2256 -258.676c-4.48824,-11.7167 -10.2639,-22.8192 -22.8074,-22.8192l-376.41 0c-12.5553,0 -18.1656,11.1734 -22.8192,22.8192l-104.836 262.94c-5.03156,12.6261 -5.53944,19.8428 -5.58668,33.5201l-0.755915 198.321c0,14.0671 11.445,25.5948 25.4058,25.5948zm534.467 -243.629l-132.214 0 -40.406 81.3435 -133.962 0 -40.9493 -81.3435 -133.206 0 93.3437 -218.448 297.83 0 89.5641 218.448z"/>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="64px" height="64px" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 640 640"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<path fill="white" d="M529.176 9.69697l98.0681 98.0563c12.945,12.945 12.945,34.1225 0,47.0675l-54.2605 54.2605 -145.136 -145.124 54.2605 -54.2605c12.945,-12.945 34.1225,-12.945 47.0675,0zm-116.612 218.589l0.0236223 0.0236223 0 0.0354335c4.02761,4.03942 6.04732,9.34263 6.04732,14.6104 0,5.25597 -2.01971,10.5474 -6.03551,14.5986l0 0.0354335 -0.0354335 0.0354335 -234.121 234.133 -0.0236223 0.0236223 -0.0354335 0c-1.15749,1.14568 -2.38586,2.1142 -3.66146,2.90555l-0.0354335 0c-1.31104,0.814971 -2.68114,1.46458 -4.08666,1.94884 -7.26387,2.52759 -15.6852,0.897649 -21.4609,-4.87801l-0.0472447 0 -0.0118112 -0.0118112 0 -0.0354335c-1.14568,-1.15749 -2.12601,-2.39767 -2.91736,-3.66146l0 -0.0472447c-0.803159,-1.29923 -1.46458,-2.68114 -1.94884,-4.07485 -2.52759,-7.26387 -0.885838,-15.697 4.87801,-21.4727l0 -0.0354335 234.133 -234.133 0.0236223 -0.0118112 0.0354335 0c4.03942,-4.02761 9.34263,-6.04732 14.6104,-6.04732 5.25597,0 10.5356,2.0079 14.5986,6.0237l0.0354335 0 0.0354335 0.0354335zm-210.57 351.489c-39.2603,12.1537 -78.5325,24.2956 -117.793,36.4375 -92.3161,28.5476 -91.9027,47.5872 -66.7095,-41.3037l39.6737 -139.962 0 -0.0118112 -0.153545 -0.141734 343.374 -343.386 145.136 145.136 -343.374 343.386 -0.153545 -0.153545zm-120.072 -120.072l95.3043 95.3161c-25.7956,7.94892 -51.5912,15.8978 -77.3868,23.8468 -60.6504,18.6971 -60.3669,31.2051 -43.8785,-27.2011l25.9609 -91.9618zm429.879 -392.261l57.6857 57.6976 -20.8231 20.8231 -57.6857 -57.6976 20.8231 -20.8231z"/>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="64px" height="64px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 640 640"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
.fil0 {fill:white}
]]>
</style>
</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<polygon class="fil0" points="320.012,15.6616 408.088,230.908 640,248.153 462.525,398.438 517.79,624.338 320.012,501.975 122.234,624.338 177.498,398.438 0,248.153 231.936,230.908 "/>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="64px" height="64px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 640 640"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
.fil0 {fill:black}
]]>
</style>
</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<polygon class="fil0" points="320.012,15.6616 408.088,230.908 640,248.153 462.525,398.438 517.79,624.338 320.012,501.975 122.234,624.338 177.498,398.438 0,248.153 231.936,230.908 "/>
</g>
</svg>
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