table layout
This commit is contained in:
parent
87903308e9
commit
005ff073e4
86
index.html
86
index.html
@ -166,7 +166,6 @@ console.log(d.Link);
|
|||||||
var Pivot =
|
var Pivot =
|
||||||
{
|
{
|
||||||
Leaves:{},
|
Leaves:{},
|
||||||
Root:{},
|
|
||||||
|
|
||||||
Init(inRows)
|
Init(inRows)
|
||||||
{
|
{
|
||||||
@ -245,7 +244,7 @@ var Pivot =
|
|||||||
let gatherOut = n => N.Connect(modifier, n, "ModifyOut");
|
let gatherOut = n => N.Connect(modifier, n, "ModifyOut");
|
||||||
|
|
||||||
N.Walk(gatherUp, inNode, "Hierarchy", false);
|
N.Walk(gatherUp, inNode, "Hierarchy", false);
|
||||||
N.Connect(modifier, inNode, "ModifyDown");
|
N.Connect(modifier, inNode, "ModifyAt");
|
||||||
N.Walk(gatherDown, inNode, "Hierarchy");
|
N.Walk(gatherDown, inNode, "Hierarchy");
|
||||||
leaves.forEach(leaf=>N.Walk(gatherOut, leaf, "Hierarchy", false));
|
leaves.forEach(leaf=>N.Walk(gatherOut, leaf, "Hierarchy", false));
|
||||||
|
|
||||||
@ -294,53 +293,70 @@ let StoreReducer = (inState, inAction) =>
|
|||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
let ElNode = ({node}) =>
|
let ElNode = ({node, depth}) =>
|
||||||
{
|
{
|
||||||
var nodeChildren = N.Step(node, "Hierarchy");
|
var color;
|
||||||
var children = [];
|
|
||||||
var table = [];
|
|
||||||
|
|
||||||
let styles = {
|
if(N.Step(node, "ModifyDown"))
|
||||||
};
|
|
||||||
if(node.Link["ModifyOut"])
|
|
||||||
{
|
{
|
||||||
styles.backgroundColor = "lightgrey";
|
color = `yellow`;
|
||||||
}
|
}
|
||||||
if(node.Link["ModifyDown"])
|
if(N.Step(node, "ModifyUp"))
|
||||||
{
|
{
|
||||||
styles.backgroundColor = "yellow";
|
color = `skyblue`;
|
||||||
}
|
}
|
||||||
if(node.Link["ModifyUp"])
|
if(N.Step(node, "ModifyOut"))
|
||||||
{
|
{
|
||||||
styles.backgroundColor = "lavender";
|
color = `lightgrey`;
|
||||||
|
}
|
||||||
|
if(N.Step(node, "ModifyAt"))
|
||||||
|
{
|
||||||
|
color = `red`;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(node.Meta.Row)
|
let nodeBase = css`
|
||||||
{
|
position:relative;
|
||||||
table = node.Meta.Row.map( cell => h("span", {style:{padding:"10px"}}, cell));
|
padding:0;
|
||||||
}
|
margin:0;
|
||||||
children = [
|
border-top:1px solid lightgrey;
|
||||||
h("strong", {style:styles}, node.Meta.Label||"a node"),
|
|
||||||
...table,
|
.Label
|
||||||
h(Store.Consumer, null, value=>
|
|
||||||
{
|
{
|
||||||
return value.get.count;
|
display:inline-block;
|
||||||
})
|
width:200px;
|
||||||
];
|
background:${color};
|
||||||
|
}
|
||||||
|
.Label::before
|
||||||
|
{
|
||||||
|
content:" ";
|
||||||
|
display:inline-block;
|
||||||
|
width:${depth*15}px;
|
||||||
|
}
|
||||||
|
.Table
|
||||||
|
{
|
||||||
|
display:inline-block;
|
||||||
|
text-align:right;
|
||||||
|
}
|
||||||
|
.Cell
|
||||||
|
{
|
||||||
|
width:50px;
|
||||||
|
display:inline-block;
|
||||||
|
padding:10px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
if(nodeChildren.length)
|
return h("div", {className:css(nodeBase)}, [
|
||||||
{
|
h("div", {className:"Upper"}, [
|
||||||
children = [
|
h("div", {className:"Label"}, (node.Meta.Label || "a node") ),
|
||||||
...children,
|
h("div", {className:"Table"}, (node.Meta.Row || []).map( cell => h("div", {className:"Cell"}, cell)) )
|
||||||
...nodeChildren.map( inChild => h(ElNode, {node:inChild}))
|
]),
|
||||||
];
|
h("div", {className:"Nodes"}, N.Step(node, "Hierarchy").map(child=>h(ElNode, {node:child, depth:depth+1})) )
|
||||||
}
|
]);
|
||||||
return h("div", {style:{padding:"10px"}}, children);
|
|
||||||
}
|
}
|
||||||
let ElPivot = ({pivot}) =>
|
let ElPivot = ({pivot}) =>
|
||||||
{
|
{
|
||||||
return h("div", {style:{display:"inline-block"}}, [
|
return h("div", {style:{display:"inline-block", width:"500px"}}, [
|
||||||
h(ElNode, {node:pivot})
|
h(ElNode, {node:pivot, depth:0})
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
let ElRoot = ({pivots}) =>
|
let ElRoot = ({pivots}) =>
|
||||||
|
Loading…
Reference in New Issue
Block a user