Commit 2fa6d5c2 authored by MrMan's avatar MrMan

Decent looking subnav header

parent d028f0e2
......@@ -215,6 +215,50 @@ var RHSHeader = {
}
};
var MultiSelectCheckbox = {
view: function() {
return m("span.component.multi-select-checkbox.gray-boxed.clickable", [
m("input[type=checkbox]"),
m("img.xs-margin-left.icon", {src: "static/images/icons/chevron-down.svg"}),
]);
}
};
var ButtonGroup = {
view: function(vnode) {
return m("span.component.button-group", {class: vnode.attrs.class}, vnode.children);
}
};
var DropDownButton = {
view: function(vnode) {
const title = vnode.attrs.title || "Button";
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"}),
]);
}
};
var PaginationControls = {
view: function(vnode) {
const title = vnode.attrs.title || "Button";
const lowerBound = 0;
const upperBound = 50;
const boundStatement = lowerBound + " - " + upperBound;
const total = 100;
return m(".component.pagination-controls", [
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"}),
]);
}
};
var Inbox = {
view: function(vnode) {
const newCount = vnode.attrs.newCount;
......@@ -223,26 +267,32 @@ var Inbox = {
// Colored header
m(RHSHeader, {class: "inbox-blue-bg white-fg", title: "Inbox", newCount: newCount}),
// // Container with buttons
// m(".subnav-button-container", [
// m(MultiSelectCheckbox),
// m(ButtonGroup, [
// m("button", "Archive"),
// m("button", "Spam"),
// m("button", "Delete"),
// ]),
// m(ButtonGroup, [
// m(DropDownButton, "Move to"),
// m(DropDownButton, "Label"),
// ]),
// ]),
// Container with buttons
m(".subnav", [
m(".lhs", [
m(MultiSelectCheckbox),
m(ButtonGroup, {class: "sm-margin-left"}, [
m("button.clickable", "Archive"),
m("button.clickable", "Spam"),
m("button.clickable", "Delete"),
]),
m(ButtonGroup, {class: "sm-margin-left"}, [
m(DropDownButton, {title: "Move to"}),
m(DropDownButton, {title: "Label"}),
]),
]),
m(".rhs", [
m(PaginationControls)
]),
]),
// // MailListing
// m(MailListing, {items: MAIL_ITEMS}),
]);
}
}
};
var MailContent = {
oninit: function() {
......
......@@ -5,10 +5,21 @@ html,body {
font-family: sans-serif;
}
img.icon {
height: 1em;
* {
box-sizing: border-box;
}
img.icon { height: 1em; }
img.icon-lg { height: 2em; }
.xs-margin-top { margin-top: 0.5em; }
.xs-margin-left { margin-left: 0.5em; }
.xs-margin-right { margin-right: 0.5em; }
.xs-margin-bottom { margin-bottom: 0.5em; }
.xs-padding-horiz {
padding-left: 0.5em;
padding-right: 0.5em;
}
.sm-margin-top { margin-top: 1em; }
.sm-margin-left { margin-left: 1em; }
......@@ -55,6 +66,26 @@ img.icon {
.inbox-blue-bg { background-color: #2285c6; }
.white-fg { color: white; }
.gray-boxed {
padding: 0.5em;
background-color: #DDD;
border: 1.5px solid #BBB;
}
.subnav {
background-color: #EEE;
height: 4em;
display: flex;
align-items: center;
padding-left: 1em;
padding-right: 1em;
justify-content: space-between;
}
.clickable { cursor: pointer; }
.valign-mid { vertical-align: middle; }
/*******/
/* App */
/*******/
......@@ -174,6 +205,35 @@ img.icon {
border: 2px solid #AAA;
}
/***************/
/* ButtonGroup */
/***************/
.component.button-group button {
height: 3em;
padding: 0.5em 1em;
background-color: #EFEFEF;
border: 1.5px solid #BBB;
}
.component.button-group button:first-child {
border-top-left-radius: 0.25em;
border-bottom-left-radius: 0.25em;
}
.component.button-group button:last-child {
border-top-right-radius: 0.25em;
border-bottom-right-radius: 0.25em;
}
/***********************/
/* MultiSelectCheckbox */
/***********************/
.component.multi-select-checkbox {
}
/*********/
/* Inbox */
/*********/
......
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="15 18 9 12 15 6"></polyline></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
\ No newline at end of file
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