mod icon

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 modsUp   = N.Step(node, "ModifyUp",   false)||[];
-    let modsDown = /*N.Step(node, "ModifyDown", false)||[]*/[true, true];
+    let modsDown = N.Step(node, "ModifyDown", false)||[];
-    let modsAt   = /*N.Step(node, "ModifyAt",   false)||[]*/[true, true, true];
+    let modsAt   = N.Step(node, "ModifyAt",   false)||[];
-    let modsOut  = /*N.Step(node, "ModifyOut",  false)||[]*/[];
+    let modsOut  = N.Step(node, "ModifyOut",  false)||[];
 
+
+    let padding = 7;
+    let icon = 0;
     let styles = css`
         position:relative;
         display:inline-block;
-        width:25px;
+        vertical-align:middle;
-        height:25px;
+        width:${padding*2 + icon}px;
-        margin-left:100px;
+        height:${padding*2 + icon}px;
+        margin:${padding};
         .Icon
         {
             position:absolute;
             display:inline-block;
-            width:25px;
+            width:${padding*2 + icon}px;
-            height:25px;
+            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;
+                width:${icon}px;
-                height:5px;
+                height:${icon}px;
-                border:10px solid transparent;
+                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>
+                <${ModificationsIcon} node=${props.node}><//>
-                <button>Modify</button>
+                <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}))
     ])
 };