Commit 81ed46c1 authored by MrMan's avatar MrMan

Add labels listing

parent e8cd7aad
......@@ -3,7 +3,7 @@ var LHS_NAV_ITEMS = [
title: "Inbox",
iconImgSrc: "static/images/icons/inbox-white.svg",
badgeCSSBgColor: "#2285c6",
badgeNumber: 2,
badgeContent: 2,
selected: true,
},
......@@ -24,6 +24,25 @@ var LHS_NAV_ITEMS = [
];
var LHS_LABEL_ITEMS = [
{
title: "Work",
badgeCSSBgColor: "#02bfc0",
badgeEmptySquare: true,
},
{
title: "Private",
badgeCSSBgColor: "#f9d47b",
badgeEmptySquare: true,
},
{
title: "Priority",
badgeCSSBgColor: "#9391e5",
badgeEmptySquare: true,
},
];
////////////////////
// LHS Navigation //
......@@ -56,12 +75,16 @@ var Badge = {
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(";");
return m("span", {class: "component badge", style: combinedStyles}, content);
if (emptySquare) { classes.push("empty-square"); }
return m("div", {class: classes.join(" "), style: combinedStyles}, content);
}
};
......@@ -70,20 +93,30 @@ var NavItem = {
var data = vnode.attrs.data || {};
var title = data.title || "Placeholder";
var iconImgSrc = data.iconImgSrc;
var badgeNumber = data.badgeNumber || 0;
var badgeContent = data.badgeContent || 0;
var badgeCSSBgColor = data.badgeCSSBgColor;
var badgeEmptySquare = data.badgeEmptySquare;
var children = [title];
var classes = ["component", "nav-item", "md-padding-horiz", data.selected ? "selected" : ""];
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 badgeNumber are specified then show a badge
if (badgeNumber && badgeCSSBgColor) {
// 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: badgeNumber})
m(Badge, {
class: "float-right",
cssBgColor: badgeCSSBgColor,
content: badgeContent,
emptySquare: badgeEmptySquare
})
]));
}
......@@ -109,8 +142,12 @@ var LHSNavPageList = {
}
};
var LHSNavLabelList;
var LHSNavItem;
var LHSNavLabelList = {
view: function() {
const labelItems = LHS_LABEL_ITEMS;
return m(NavItemListing, {items: labelItems});
}
};
var LHSNav = {
view: function() {
......@@ -118,7 +155,9 @@ var LHSNav = {
m(LHSNavHeader),
m(LHSNavPageList),
m("hr"),
// m(LHSNavLabelList),
m("h2", {class: "slim-text sm-padding-horiz"}, "Labels"),
m(LHSNavLabelList),
m("hr"),
]);
}
};
......
......@@ -14,6 +14,10 @@ img.icon {
.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; }
......@@ -40,6 +44,14 @@ img.icon {
.float-right { float: right; }
.slim-text { font-weight: 300; }
.slimmer-text { font-weight: 200; }
.placeholder-1em {
width: 1em;
display: inline-block
}
/*******/
/* App */
/*******/
......@@ -50,7 +62,6 @@ img.icon {
min-height: 100%;
}
/**********/
/* LHSNav */
/**********/
......@@ -120,6 +131,15 @@ img.icon {
/*********/
.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;
}
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