mod icon
This commit is contained in:
parent
a2889017d8
commit
0b3308ebfd
134
index.html
134
index.html
@ -218,7 +218,8 @@ var Pivot =
|
||||
Row:clone,
|
||||
IndexPivot:indexPivot,
|
||||
IndexSum:inSumIndicies,
|
||||
Leaves:[]
|
||||
Leaves:[],
|
||||
Depth:depth
|
||||
};
|
||||
// grow a child off of the parent using the meta object
|
||||
N.Connect(inParent, N.Create(match), "Hierarchy");
|
||||
@ -543,63 +544,43 @@ let Section = props =>
|
||||
`;
|
||||
}
|
||||
|
||||
let Modifier = props =>
|
||||
{
|
||||
let refNode = N.Step(props.modifier, "ModifyAt", false)[0];
|
||||
|
||||
let handleDelete = () =>
|
||||
{
|
||||
Pivot.Unmodify(props.modifier);
|
||||
Render();
|
||||
};
|
||||
|
||||
let displayFields = [];
|
||||
N.Walk(node=>{
|
||||
displayFields.push(html`<input type='number'/>`)
|
||||
}, Pivot.Schema, "sum");
|
||||
|
||||
|
||||
return html`
|
||||
<div>
|
||||
<div>${refNode.Meta.Label}</div>
|
||||
<button onClick=${handleDelete}>Delete</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
let ModificationsIcon = ({node}) =>
|
||||
{
|
||||
let modsUp = /*N.Step(node, "ModifyUp", false)||[]*/[true];
|
||||
let modsDown = /*N.Step(node, "ModifyDown", false)||[]*/[true, true];
|
||||
let modsAt = /*N.Step(node, "ModifyAt", false)||[]*/[true, true, true];
|
||||
let modsOut = /*N.Step(node, "ModifyOut", false)||[]*/[];
|
||||
let modsUp = N.Step(node, "ModifyUp", false)||[];
|
||||
let modsDown = N.Step(node, "ModifyDown", false)||[];
|
||||
let modsAt = N.Step(node, "ModifyAt", false)||[];
|
||||
let modsOut = N.Step(node, "ModifyOut", false)||[];
|
||||
|
||||
|
||||
let padding = 7;
|
||||
let icon = 0;
|
||||
let styles = css`
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
width:25px;
|
||||
height:25px;
|
||||
margin-left:100px;
|
||||
vertical-align:middle;
|
||||
width:${padding*2 + icon}px;
|
||||
height:${padding*2 + icon}px;
|
||||
margin:${padding};
|
||||
.Icon
|
||||
{
|
||||
position:absolute;
|
||||
display:inline-block;
|
||||
width:25px;
|
||||
height:25px;
|
||||
width:${padding*2 + icon}px;
|
||||
height:${padding*2 + icon}px;
|
||||
text-align:center;
|
||||
font-size:9px;
|
||||
font-family:sans-serif;
|
||||
font-weight:900;
|
||||
line-height:25px;
|
||||
line-height:${padding*2 + icon}px;
|
||||
|
||||
&::after
|
||||
{
|
||||
content:" ";
|
||||
display:block;
|
||||
position:absolute;
|
||||
width:5px;
|
||||
height:5px;
|
||||
border:10px solid transparent;
|
||||
width:${icon}px;
|
||||
height:${icon}px;
|
||||
border:${padding}px solid transparent;
|
||||
}
|
||||
|
||||
&.Down
|
||||
@ -653,63 +634,8 @@ let ModificationsIcon = ({node}) =>
|
||||
|
||||
`;
|
||||
|
||||
let otherStyles = css`
|
||||
position:relative;
|
||||
left:100px;
|
||||
width:5px;
|
||||
height:5px;
|
||||
border:20px solid transparent;
|
||||
background:black;
|
||||
|
||||
&.Down
|
||||
{
|
||||
border-top-color:orange;
|
||||
}
|
||||
&.At
|
||||
{
|
||||
border-right-color:red;
|
||||
}
|
||||
&.Up
|
||||
{
|
||||
border-bottom-color:lightblue;
|
||||
}
|
||||
&.Out
|
||||
{
|
||||
border-left:grey;
|
||||
}
|
||||
|
||||
.Icon
|
||||
{
|
||||
position:absolute;
|
||||
width:20px;
|
||||
height:20px;
|
||||
|
||||
&.Down
|
||||
{
|
||||
bottom:35px;
|
||||
left:0;
|
||||
}
|
||||
&.At
|
||||
{
|
||||
left:35px;
|
||||
top:0;
|
||||
}
|
||||
&.Up
|
||||
{
|
||||
top:35px;
|
||||
left:0;
|
||||
}
|
||||
&.Out
|
||||
{
|
||||
right:35px;
|
||||
top:0;
|
||||
}
|
||||
|
||||
}
|
||||
`;
|
||||
|
||||
return html`
|
||||
<div class=${cx(otherStyles, "At")}>
|
||||
<div class=${styles}>
|
||||
${modsDown.length ? html`<div class="Icon Down">${modsDown.length}</div>` : null}
|
||||
${modsAt.length ? html`<span class="Icon At">${modsAt.length}</span>` : null}
|
||||
${modsUp.length ? html`<span class="Icon Up">${modsUp.length}</span>` : null}
|
||||
@ -736,12 +662,24 @@ let PivotBranch = props =>
|
||||
}
|
||||
});
|
||||
|
||||
let modifier = N.Step(props.node, "ModifyAt", false);
|
||||
let modifierDisplay = false;
|
||||
if(modifier)
|
||||
{
|
||||
modifierDisplay = html`<button onClick=${e=>{Pivot.Unmodify(modifier[0]); Render();}}>-</button>`;
|
||||
}
|
||||
else
|
||||
{
|
||||
modifierDisplay = html`<button onClick=${e=>{Pivot.Modify(props.node); Render();}}>+</button>`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>${props.node.Meta.Label}</strong>
|
||||
<button>Modify</button>
|
||||
<${ModificationsIcon} node=${props.node}><//>
|
||||
<strong class=${css`margin-left:${props.node.Meta.Depth*10}px;`}>${props.node.Meta.Label}</strong>
|
||||
${modifierDisplay}
|
||||
</td>
|
||||
${displayCells}
|
||||
</tr>
|
||||
@ -782,9 +720,6 @@ let PivotRoot = ({pivot}) =>
|
||||
<${Section} key="settings" label=${`Settings`}>
|
||||
<button onClick=${handleDelete}>Destroy Pivot</button>
|
||||
<//>
|
||||
<${Section} key="modifiers" label=${`Modifiers (${modifiers.length})`}>
|
||||
${ !modifiers.length ? html`<em>No modifiers</em>` : modifiers.map( m => html`<${Modifier} modifier=${m}/>`)}
|
||||
<//>
|
||||
<${Section} key="tree" label=${"Tree"}>
|
||||
<table>
|
||||
${rows}
|
||||
@ -799,7 +734,6 @@ let ElRoot = props =>
|
||||
let pivots = N.Step(Pivot.Root, "Pivot")||[];
|
||||
return h("div", null, [
|
||||
h(PivotForm),
|
||||
h(ModificationsIcon, null, null),
|
||||
pivots.map(pivot=>h(PivotRoot, {key:pivot.Meta.Label, pivot}))
|
||||
])
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user