Commit e8cd7aad authored by MrMan's avatar MrMan

Add page nav listing

parent 9902754a
var LHS_NAV_ITEMS = [
{
title: "Inbox",
iconImgSrc: "static/images/icons/inbox-white.svg",
badgeCSSBgColor: "#2285c6",
badgeNumber: 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",
},
];
////////////////////
// LHS Navigation //
////////////////////
......@@ -23,7 +50,65 @@ var LHSNavHeader = {
}
};
var LHSNavPageList;
var Badge = {
view: function(vnode) {
var styles = [];
var content = vnode.attrs.content || "";
var bgColor = vnode.attrs.cssBgColor || "gray";
var color = vnode.attrs.cssBgColor || "white";
styles.push("background-color:" + vnode.attrs.cssBgColor);
styles.push("color:" + vnode.attrs.cssColor);
var combinedStyles = styles.join(";");
return m("span", {class: "component badge", style: combinedStyles}, content);
}
};
var NavItem = {
view: function(vnode) {
var data = vnode.attrs.data || {};
var title = data.title || "Placeholder";
var iconImgSrc = data.iconImgSrc;
var badgeNumber = data.badgeNumber || 0;
var badgeCSSBgColor = data.badgeCSSBgColor;
var children = [title];
var classes = ["component", "nav-item", "md-padding-horiz", data.selected ? "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}));
}
// If badgeColor and badgeNumber are specified then show a badge
if (badgeNumber && badgeCSSBgColor) {
children.push(m("div", {class: "badge-container float-right"}, [
m(Badge, {class: "float-right", cssBgColor: badgeCSSBgColor, content: badgeNumber})
]));
}
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;
var LHSNavItem;
......@@ -31,9 +116,8 @@ var LHSNav = {
view: function() {
return m("div", {class: "component lhs-nav"}, [
m(LHSNavHeader),
m(LHSNavPageList),
m("hr"),
// m(LHSNavPageList),
// m("hr"),
// m(LHSNavLabelList),
]);
}
......
......@@ -2,9 +2,10 @@ html,body {
margin: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
button img.icon {
img.icon {
height: 1em;
}
......@@ -14,6 +15,31 @@ button img.icon {
.sm-margin-right { margin-right: 1em; }
.sm-margin-bottom { margin-bottom: 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; }
/*******/
/* App */
/*******/
......@@ -61,3 +87,39 @@ button img.icon {
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 {
padding: .25em;
border-radius: .25em;
}
<?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" 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