SethTrowbridge/pivot-editor
1
1
Fork 0
Code Issues 1 Pull Requests Projects 1 Releases Wiki Activity

different icon

Browse Source
This commit is contained in:
TreetopFlyer 2021-05-28 16:14:52 -04:00
parent 241fc45d2d
commit a2889017d8
1 changed files with 156 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

194
index.html
View File

@ -545,7 +545,7 @@ let Section = props =>
let Modifier = props =>
{
let refNode = N.Step(props.modifier, "ModifyAt")[0];
let refNode = N.Step(props.modifier, "ModifyAt", false)[0];
let handleDelete = () =>
{
@ -567,6 +567,158 @@ let Modifier = props =>
`;
}
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 styles = css`
position:relative;
display:inline-block;
width:25px;
height:25px;
margin-left:100px;
.Icon
{
position:absolute;
display:inline-block;
width:25px;
height:25px;
text-align:center;
font-size:9px;
font-family:sans-serif;
font-weight:900;
line-height:25px;
&::after
{
content:" ";
display:block;
position:absolute;
width:5px;
height:5px;
border:10px solid transparent;
}
&.Down
{
left:0;
bottom:100%;
&::after
{
top:100%;
border-top-color:green;
border-bottom:0px solid transparent;
}
}
&.At
{
top:0;
left:100%;
&::after
{
top:0;
right:100%;
border-right-color:red;
border-left:0px solid transparent;
}
}
&.Up
{
left:0;
top:100%;
&::after
{
bottom:100%;
border-bottom-color:orange;
border-top:0px solid transparent;
}
}
&.Out
{
top:0;
right:100%;
&::after
{
top:0;
left:100%;
border-left-color:grey;
border-right:0px solid transparent;
}
}
}
`;
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")}>
${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}
${modsOut.length ? html`<span class="Icon Out">${modsOut.length}</span>` : null}
</div>
`;
};
let PivotBranch = props =>
{
let row = props.node.Meta.Row;
@ -586,49 +738,14 @@ let PivotBranch = props =>
return html`
<tbody>
<tr>
<td colspan=${displayCells.length+1}><hr/></td>
</tr>
<tr>
<td>
<strong>${props.node.Meta.Label}</strong>
<button>Modify</button>
</td>
${displayCells}
</tr>
<tr>
<td colspan=${displayCells.length+1}>Modifications</td>
</tr>
<tr>
<td>At</td>
${displayCellsModify}
</tr>
<tr>
<td>Below</td>
${displayCells}
</tr>
<tr>
<td>Above</td>
${displayCells}
</tr>
<tr>
<td>Outside</td>
${displayCells}
</tr>
<tr>
<td>Computed</td>
${displayCells}
</tr>
<tr>
<td colspan=${displayCells.length+1}>Goals</td>
</tr>
<tr>
<td>Max</td>
${displayCells}
</tr>
<tr>
<td>Min</td>
${displayCells}
</tr>
</tbody>
`;
};
@ -682,6 +799,7 @@ 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}))
])
};