Skip to content

Commit

Permalink
Add missing UI, deprecate old bits
Browse files Browse the repository at this point in the history
  • Loading branch information
@tivac
tivac committed Jan 18, 2016
1 parent 3dff879 commit 7efcee1
Show file tree
Hide file tree
Showing 15 changed files with 451 additions and 838 deletions.
7 changes: 5 additions & 2 deletions src/buttons.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
@value colorRemove: rgb(202, 60, 60);
@value colorAdd: rgb(28, 184, 65);

.button {
composes: global(pure-button);
}
Expand All @@ -16,11 +19,11 @@
.add {
composes: color;

background: rgb(28, 184, 65);
background: colorAdd;
}

.remove {
composes: color;

background: rgb(202, 60, 60);
background: colorRemove;
}
53 changes: 29 additions & 24 deletions src/pages/content-edit.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,29 +5,18 @@
composes: body from "./layout/layout.css";
}

.actions {
composes: menuItem;
.empty {
composes: body;

display: flex;

justify-content: space-between;
align-items: center;
}

.action {
composes: icon from icons_css;

color: #000;
transition: color 0.1s ease-in;
text-align: center;
justify-content: center;
align-content: center;
}



.preview {
composes: action;
.empty p {
color: #666;
}


.heading {
composes: global(pure-g);

Expand All @@ -36,7 +25,6 @@
}

.schema {

margin: 0;
color: #CCC;
font-size: 1em;
Expand All @@ -49,7 +37,6 @@
border-bottom: solid 2px #68A;
}


.title:hover {
border-color: #DDD;
border-bottom-color: #68A;
Expand All @@ -63,20 +50,38 @@

.menu {
composes: head from "./layout/layout.css";

}

.menuItem {
.item {
composes: global(pure-u-1-2);
}

.actions {
composes: item;

display: flex;

justify-content: space-between;
align-items: center;
}

.action {
composes: icon from icons_css;

color: #000;
transition: color 0.1s ease-in;
}

.preview {
composes: action;
}

.publishing {
composes: menuItem;
composes: item;
}

.version {
composes: menuItem;
composes: item;

text-align: right;
}
Expand Down
47 changes: 26 additions & 21 deletions src/pages/content-edit.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
"use strict";

var m = require("mithril"),
var m = require("mithril"),
get = require("lodash.get"),

children = require("../types/children"),
db = require("../lib/firebase"),
update = require("../lib/update"),
watch = require("../lib/watch"),

layout = require("./layout"),
nav = require("./content/nav"),
nav = require("./content-edit/nav"),

publishing = require("./content-edit/publishing"),
versioning = require("./content-edit/versioning"),
Expand All @@ -20,47 +21,48 @@ module.exports = {
var ctrl = this,

id = m.route.param("id"),
ref = db.child("content/" + m.route.param("schema") + "/" + id),
schema = db.child("schemas/" + m.route.param("schema"));

schema = db.child("schemas/" + m.route.param("schema")),
ref = db.child("content/" + m.route.param("schema") + "/" + id);
ctrl.id = id;
ctrl.ref = ref;
ctrl.data = null;
ctrl.schema = null;
ctrl.form = null;

ref.on("value", function(snap) {
if(!snap.exists()) {
return m.route("/content");
}

ctrl.data = snap.val();

m.redraw();
});

schema.on("value", function(snap) {
ctrl.schema = snap.val();
ctrl.schema.key = snap.key();

m.redraw();
});

// No sense doing any work if we don't have an id to operate on
if(!id) {
return;
}

ref.on("value", function(snap) {
ctrl.data = snap.val();

m.redraw();
});

watch(ref);
},

view : function(ctrl) {
if(!ctrl.data || !ctrl.schema) {
if(!ctrl.schema) {
return m.component(layout);
}

return m.component(layout, {
title : ctrl.data.name,
title : get(ctrl.data, "name"),

nav : m.component(nav, { schema : ctrl.schema }),

content : [
m(".head", { class : css.menu },
content : ctrl.id ? [
m("div", { class : css.menu },
m.component(publishing, {
ref : ctrl.ref,
data : ctrl.data,
Expand All @@ -84,7 +86,7 @@ module.exports = {
class : css.version
})
),
m(".body", { class : css.body },
m("div", { class : css.body },
m("h2", { class : css.schema }, m.trust("/"), ctrl.schema.name, m.trust("/")),
m("h1", {
class : css.title,
Expand Down Expand Up @@ -116,7 +118,10 @@ module.exports = {
})
)
)
]
] :
m("div", { class : css.empty },
m("p", "Select an entry from the list")
)
});
}
};
106 changes: 86 additions & 20 deletions src/pages/content/nav.css → src/pages/content-edit/nav.css
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
.nav {
composes: nav from "../layout/layout.css";
}
@value icons_css: "../../icons.css";
@value layout_css: "../layout/layout.css";
@value anchor: #446;
@value iconTransition: color 0.2s ease-in;
@value colorRemove from "../../buttons.css";

.navHidden {
composes: nav;
overflow: visible;
flex: 0 1 0;
.nav {
composes: nav from layout_css;
}

.filter {
composes: head from "../layout/layout.css";
composes: head from layout_css;
composes: global(pure-form);

overflow: hidden;
Expand All @@ -36,11 +36,13 @@
background: #2F343C;
color: white;
}

.hide:hover {
left: auto;
right: 0;
}
.hide:before {

.hide::before {
content: "";
position: absolute;
height: 0;
Expand All @@ -52,21 +54,18 @@
border-right: solid 12px #2F343C;
}

.navHidden .filter {
padding: 0;
overflow: visible;
}

.show {
composes: hide;
left: auto;
right: 0;
}

.show:hover {
right: auto;
left: 0;
}
.show:before {

.show::before {
right: auto;
left: 100%;

Expand All @@ -75,17 +74,18 @@
}

.body {
composes: body from "../layout/layout.css";
composes: body from layout_css;
}


.list {
list-style: none;
margin: 0;
padding: 0;
}

.item {
position: relative;

padding: 0;
border-bottom: solid 1px #CCC;
}
Expand All @@ -98,11 +98,12 @@

.anchor {
display: block;
padding: 1em 16px 1em 20px;
padding: 1em 26px 1em 20px;

text-decoration: none;
color: #446;
color: anchor;
}

.published .anchor {
padding-left: 16px;
}
Expand All @@ -126,4 +127,69 @@
margin: 0;

font-size: 0.8em;
}
}

.actions {
position: absolute;

top: 0;
right: 4px;
bottom: 0;

display: flex;
flex-direction: column;

justify-content: center;
align-items: center;
}

.action {
composes: icon from icons_css;

color: anchor;
transition: iconTransition;
}

.action:hover {
color: #2F343C;

transition: iconTransition;
}

.preview {}

.previewIcon {
composes: action;
}

.remove {
/* Strip <button> styling */
background: none;
outline: none;
border: 0;
padding: 0;
}

.removeIcon {
composes: action;

/* work-around for https://github.com/tivac/modular-css/issues/56 */
background: transparent;
}

.removeIcon:hover {
color: colorRemove;
}

.hidden {
composes: nav;
overflow: visible;
flex: 0 1 0;
}

.hidden .filter {
padding: 0;
overflow: visible;
}


2 comments on commit 7efcee1

@kevinkace
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO the table view (thought redundant) was still useful (sort by column, denser listing, more info per item).
Also I think this removed the only page where one could add a content entry 😆

@tivac
Copy link
Owner Author

@tivac tivac commented on 7efcee1 Jan 19, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Longer-term we should add sorting to the middle column. I dunno that the density of that information was super-valuable, I think we can get the best bang for our buck by being smarter about what information we do show.

We do need an add content button, though. I just ran into that LMAO.

Please sign in to comment.