Commit d028f0e2 authored by MrMan's avatar MrMan

Add decent looking header

parent 636f34f0
......@@ -44,6 +44,34 @@ var LHS_LABEL_ITEMS = [
},
];
var MAIL_ITEMS = [
{
from: {name: "Victor Erixon"},
title: "Theories of Design",
text: "Molestias deserunt veritatis modi ut fugiat sint. Dolorum vel autem sint. Dolores accusamus dolores occaecati tenetur adipisci asperiores",
},
{
from: {name: "Jacob Hubertus"},
title: "Street Photography",
text: "Molestias deserunt veritatis modi ut fugiat sint. Dolorum vel autem sint. Dolores accusamus dolores occaecati tenetur adipisci asperiores",
},
{
from: {name: "August Berglund"},
title: "HTML+CSS Tutorials?",
text: "Molestias deserunt veritatis modi ut fugiat sint. Dolorum vel autem sint. Dolores accusamus dolores occaecati tenetur adipisci asperiores",
},
{
from: {name: "Rick Brunstedt"},
title: "Train Crossing",
text: "Molestias deserunt veritatis modi ut fugiat sint. Dolorum vel autem sint. Dolores accusamus dolores occaecati tenetur adipisci asperiores",
},
{
from: {name: "Webydo Team"},
title: "Does Webydo have what you're looking for? ",
text: "Molestias deserunt veritatis modi ut fugiat sint. Dolorum vel autem sint. Dolores accusamus dolores occaecati tenetur adipisci asperiores",
},
];
////////////////////
// LHS Navigation //
////////////////////
......@@ -162,11 +190,75 @@ var LHSNav = {
}
};
///////////////
// RHS Pages //
///////////////
var RHSHeader = {
view: function(vnode) {
const title = vnode.attrs.title || "Title";
const bgColor = vnode.attrs.bgColor || "#2285c6";
const newCount = vnode.attrs.newCount;
return m("div.component.rhs-header.flex", {class: vnode.attrs.class}, [
m(".title-container", [
m("span.title", title),
newCount ? m("span.new-count", "(" + newCount + ")"): undefined,
]),
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"}),
])
]);
}
};
var Inbox = {
view: function(vnode) {
const newCount = vnode.attrs.newCount;
return m(".component.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"),
// ]),
// ]),
// // MailListing
// m(MailListing, {items: MAIL_ITEMS}),
]);
}
}
var MailContent = {
oninit: function() {
this.subpage = "inbox";
},
view: function() {
return m("div", {class: "component mail-content"}, [
m("h1", "RHS Stuff here"),
]);
// TODO: decide *which* view to show
switch (this.subpage) {
case "starred": return m(Starred);
case "draft": return m(Draft);
case "draft": return m(Important);
case "inbox":
default:
return m(Inbox, {newCount: 2});
}
}
};
......
......@@ -13,7 +13,8 @@
"build-js": "cp app.js dist/",
"build-static": "mkdir -p dist && cp -r static dist/",
"build-watch": "ls index.html app.js static/css/app.css | entr -rc npm run build",
"serve": "./node_modules/.bin/http-server dist/"
"serve": "./node_modules/.bin/http-server dist/",
"serve-watch": "ls index.html app.js static/css/app.css | entr -rc bash -c 'npm run build && npm run serve'"
},
"devDependencies": {
"http-server": "^0.11.1"
......
......@@ -52,6 +52,9 @@ img.icon {
display: inline-block
}
.inbox-blue-bg { background-color: #2285c6; }
.white-fg { color: white; }
/*******/
/* App */
/*******/
......@@ -143,3 +146,38 @@ img.icon {
height: 1em;
width: 1em;
}
/*************/
/* RHSHeader */
/*************/
.component.rhs-header {
box-sizing: border-box;
height: 5em;
padding: .5em;
display: flex;
align-items: center;
justify-content: space-between;
}
.component.rhs-header .title { font-size: 2em; }
.component.rhs-header .new-count {
margin-left: .25em;
padding-top: .5em;
}
.component.rhs-header img.avatar {
height: 2em;
vertical-align: middle;
border-radius: 50%;
border: 2px solid #AAA;
}
/*********/
/* Inbox */
/*********/
.component.inbox {
width: 100%;
}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
<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-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></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