demo: fixes #11

treehousedev · Feb 15, 2023 · 03a7bf5 · 03a7bf5
1 parent f685a7d
commit 03a7bf5
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/lib/ui/app.tsx b/lib/ui/app.tsx
@@ -59,7 +59,7 @@ export const App: m.Component = {
         <div style={{display: "flex", flexGrow: "1"}}>
           {state.open &&
             <div style={{width: "200px", padding: "var(--padding)"}}>
-              {workspace.nodes.getRoot().getChildren().map(node => <NavNode node={node} expanded={true} workspace={workspace} />)}
+              {workspace.nodes.getRoot().getChildren().map(node => <NavNode node={node} expanded={true} level={0} workspace={workspace} />)}
             </div>
           }
           <div style={{flexGrow: "1", borderLeft: "1px solid var(--dark)"}}>
@@ -79,9 +79,11 @@ export const App: m.Component = {
 };
 
 const NavNode: m.Component = {
-  view ({attrs: {node, workspace, expanded}, state}) {
+  view ({attrs: {node, workspace, expanded, level}, state}) {
     state.expanded = (state.expanded === undefined) ? expanded : state.expanded;
+    const expandable = (node.childCount() > 0 && level < 2);
     const toggle = (e) => {
+      if (!expandable) return;
       if (state.expanded) {
         state.expanded = false;
       } else {
@@ -94,21 +96,21 @@ const NavNode: m.Component = {
     }
     return (
       <div>
-        <div style={{display: "flex"}}>
+        <div style={{display: "flex", paddingBottom: "0.125rem", paddingTop: "0.125rem"}}>
           <svg onclick={toggle} style={{cursor: "pointer", flexShrink: "0", width: "1rem", height: "1rem", marginRight: "0.25rem", paddingLeft: "1px"}} xmlns="http://www.w3.org/2000/svg" fill="gray" viewBox="0 0 16 16">
-            {(node.childCount() > 0)
+            {(expandable)
               ?(state.expanded)
                 ? <path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
                 : <path d="M6 12.796V3.204L11.481 8 6 12.796zm.659.753 5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753z"/>
             :null}
           </svg>
-          <div onclick={open} style={{cursor: "pointer", flexGrow: "1", display: "flex"}}>
+          <div onclick={open} style={{cursor: "pointer", flexGrow: "1", maxWidth: "100%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"}}>
             {node.getName()}
           </div>
         </div>
         {state.expanded && 
-          <div style={{paddingBottom: "0.25rem", marginLeft: "0.5rem"}}>
-            {node.getChildren().filter(n => n.getName() !== "").map(n => <NavNode workspace={workspace} node={n} />)}
+          <div style={{marginLeft: "0.5rem"}}>
+            {node.getChildren().filter(n => n.getName() !== "").map(n => <NavNode workspace={workspace} node={n} level={level+1} />)}
           </div>
         }
       </div>