start left tool menu

src/mesh/build.js

@@ -340,12 +340,21 @@ api.settings = function() {
     ] ));
 }
 
+// bootstrap icons
+function bicon(name) {
+    return h.i({ class: [ "bi", name ] });
+}
+
+// fontawesome icons
+function facon(name, sub) {
+    return h.i({ class: [ sub || "fa", name ] });
+}
+
 function menu_item(text, fn, short) {
     if (short) {
         short = Array.isArray(short) ? short : [ short ];
         short = h.div({ class: "short" }, short.map(s => s.startsWith('bi-') ?
-            h.i({ class: ["bi", s ]}) :
+            bicon(s) : h.div(s)
-            h.div(s)
         ));
     }
     return h.div({ onclick: fn }, [
@@ -513,31 +522,55 @@ function ui_build() {
         ]),
     ]);
 
-    // create top level app areas
+    // modal dialog and page blocker
-    let bound = h.bind($('app-body'), [
+    h.bind($('modal_page'), [
-        // modal dialog and page blocker
+        h.div({ id: 'modal_frame' }, [
-        h.div({ id: 'modal_page' }, [
+            h.div({ id: 'modal_title'}, [
-            h.div({ id: 'modal_frame' }, [
+                h.div({ id: 'modal_title_text', _: 'title' }),
-                h.div({ id: 'modal_title'}, [
+                h.div({ id: 'modal_title_close', onclick: modal.cancel }, [
-                    h.div({ id: 'modal_title_text', _: 'title' }),
+                    h.i({ class: "far fa-window-close" })
-                    h.div({ id: 'modal_title_close', onclick: modal.cancel }, [
-                        h.i({ class: "far fa-window-close" })
-                    ])
-                ]),
-                h.div({ id: 'modal' }, [
-                    h.div({ _: 'this is a modal test' })
                 ])
             ]),
-            h.div({ id: 'spinner', class: 'spin' })
+            h.div({ id: 'modal' }, [
+                h.div({ _: 'this is a modal test' })
+            ])
         ]),
+        h.div({ id: 'spinner', class: 'spin' })
+    ]);
+
+    // create top level app areas
+    let bound = h.bind($('app-body'), [
         // display and action areas
-        h.div({ id: 'grouplist'}),
+        h.div({ id: 'tools' }, [
-        h.div({ id: 'selectlist'}),
+            h.div({ id: 'sketchtools', class: "tools sketch-on" }),
-        h.div({ id: 'logger', onmouseover() { log.show() } }),
+            h.div({ id: 'objecttools', class: "tools sketch-off" }),
+            h.div({ id: 'logger', onmouseover() { log.show() } }),
+        ]),
+        h.div({ id: 'grouplist' }),
+        h.div({ id: 'selectlist' }),
         h.div({ id: 'download', class: "hide" })
     ]);
 
-    let { actions, grouplist, selectlist, logger } = bound;
+    let { sketchtools, grouplist, selectlist, logger } = bound;
+
+    function tool_item(icon, help, fn) {
+        return h.div({ onclick: fn, class: "tool" }, [ bicon(icon), h.div([ h.label(help) ]) ]);
+    }
+
+    // bind sketch chiclets
+    h.bind(sketchtools, h.div([
+        tool_item('bi-plus', 'New Sketch', add.sketch),
+        tool_item('bi-circle', 'Add Circle', () => { sketch.selected.one?.add.circle() }),
+        tool_item('bi-box', 'Add Rectangle', () => { sketch.selected.one?.add.rectangle() }),
+    ]));
+
+    // bind object chiclets
+    h.bind(objecttools, h.div([
+        tool_item('bi-pencil', 'New Sketch', add.sketch),
+        tool_item('bi-box', 'New Cube', add.cube),
+        tool_item('bi-database', 'New Cylinder', add.cylinder),
+        tool_item('bi-gear', 'New Gear', add.gear),
+    ]));
 
     // create slid in/out logging window
     h.bind(logger, [ h.div({ id: 'logtext' }) ]);

web/mesh/index.css

@@ -1,6 +1,11 @@
 :root {
-    --menu-blue: #007aff;
+    --menu-blue: #0079ff;
-    --menu-back: #ddd;
+    --menu-back: rgba(255,255,255,0.55);
+    --dark-menu-back: rgba(80,80,80,0.75);
+    --border: #888;
+    --dark-border: #888;
+    --selected: rgba(0,255,0,0.5);
+    --selected-hover: rgba(0,255,0,0.8);
 }
 
 @font-face {
@@ -8,12 +13,6 @@
     src: url('/moto/russo-one.ttf');
 }
 
-/** dark overrides */
-
-.dark #logger, .dark #modal_frame, .dark #actions > div, .dark #grouplist > div {
-    border: 1px solid #999;
-}
-
 /** defaults */
 
 a, a:hover, a:visited {
@@ -29,6 +28,7 @@ body, div {
     padding: 0;
     border: 0;
     margin: 0;
+    white-space: nowrap;
 }
 
 hr {
@@ -96,29 +96,16 @@ input {
 
 .dark #top {
     color: #eee;
-    background-color: rgba(80,80,80,0.75);
+    background-color: var(--dark-menu-back);
 }
 
 #top {
     z-index: 50;
     color: #000;
-    font-size: smaller;
+    font-size: 14px;
     flex-direction: row;
-    background-color: rgba(255,255,255,0.55);
+    background-color: var(--menu-back);
-}
+    border-bottom: 1px solid var(--border);
-
-.dark #top-sep {
-    background-image: linear-gradient(to right, #666, #aaa, #666);
-}
-
-#top-sep {
-    z-index: 2;
-    height: 1px;
-    background-image: linear-gradient(to right, #ddd, #666, #ddd);
-}
-
-#top > div {
-    padding: 3px;
 }
 
 .noselect {
@@ -177,9 +164,8 @@ button:hover {
     cursor: default;
     align-self: stretch;
     align-items: center;
-    padding: 6px 12px 6px 12px;
+    padding: 8px 12px 8px 12px;
     border-radius: 6px;
-    white-space: nowrap;
     user-select: none;
 }
 
@@ -187,7 +173,7 @@ button:hover {
     border-top: 0.5px solid rgba(255,255,255,0.5);
 }
 
-.menu:hover, .menu-items > div:hover {
+.menu:hover, .menu-items > div:hover, .tools i:hover {
     background-color: var(--menu-blue);
 }
 
@@ -450,7 +436,11 @@ button:hover {
 
 /** common look & feel */
 
-#logger, #modal_frame, #actions > div, #grouplist > div {
+.dark #modal_frame, .dark #actions > div, .dark #grouplist > div {
+    border: 1px solid #999;
+}
+
+#modal_frame, #actions > div, #grouplist > div {
     border: 1px solid gray;
     border-radius: 3px;
     margin: 0 0 2px 0;
@@ -464,11 +454,11 @@ button:hover {
 }
 
 .menu .selected {
-    background-color: rgba(0,255,0,0.5);
+    background-color: var(--selected);
 }
 
 .menu .selected:hover {
-    background-color: rgba(0,255,0,0.8);
+    background-color: var(--selected-hover);
 }
 
 /* .dark .head {
@@ -477,27 +467,39 @@ button:hover {
 
 /** slide in/out logging window **/
 
+.dark #logger {
+    border-color: var(--dark-border);
+    background-color: var(--dark-menu-back);
+    color: #ddd;
+}
+
 #logger {
+    border-top: 1px solid var(--border);
+    border-right: 1px solid var(--border);
+    background-color: var(--menu-back);
     display: none;
-    color: #88ff88;
+    color: #555;
     min-width: 300px;
     flex-direction: column;
-    background-color: rgba(0,0,0,0.5);
     position: absolute;
-    margin: 0 0 3px 3px;
+    margin: 0 0 0 1px;
     bottom: 0;
-    left: 0;
+    left: 100%;
+    padding: 5px;
 }
 
 #logtext {
     flex-direction: column;
-    font-family: monospace;
-    font-size: smaller;
     max-height: 8em;
     min-height: 1em;
     overflow-y: auto;
 }
 
+#logtext > div {
+    font-family: monospace;
+    font-size: 12px;
+}
+
 #logtext::-webkit-scrollbar {
   width: 6px;
 }
@@ -512,6 +514,66 @@ button:hover {
   border: 3px solid rgba(255,255,255,0.1);
 }
 
+/** left menu sketch and object tool menus */
+
+#tools {
+    border-right: 1px solid var(--border);
+}
+
+.dark .tools {
+    border-color: var(--dark-border);
+    background-color: var(--dark-menu-back);
+}
+
+.dark .tools > div {
+    color: #fff;
+}
+
+.tools {
+    align-items: flex-start;
+    background-color: var(--menu-back);
+}
+
+.tools > div {
+    display: grid;
+    grid-template-columns: 1fr;
+}
+
+.tools i, .tools svg {
+    aspect-ratio: 1;
+    padding: 9px;
+    border-bottom: 1px solid var(--border);
+}
+
+.tool > div {
+    display: none;
+    position: absolute;
+    padding-left: 10px;
+    left: 100%;
+    bottom: 0;
+    top: 0;
+    place-items: center; /* Center the single grid item */
+    height: 100%;
+    width: 100%;
+}
+
+.dark .tool label {
+    background-color: var(--dark-menu-back);
+    border: 1px solid var(--dark-border);
+}
+
+.tool label {
+    font-size: 12px !important;
+    background-color: var(--menu-back);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    padding: 4px 6px 4px 6px;
+}
+
+.tool:hover > div {
+    display: grid;
+}
+
 /** group/model buttons top/right of workspace **/
 
 #grouplist {
@@ -521,6 +583,14 @@ button:hover {
     top: 0;
 }
 
+#grouplist .selected {
+    background-color: var(--selected);
+}
+
+#grouplist .selected:hover {
+    background-color: var(--selected-hover);
+}
+
 #grouplist, #grouplist div {
     flex-direction: column;
     gap: 2px;

web/mesh/index.html

@@ -22,6 +22,7 @@
 <div id="app">
     <div id="curtain"><img id="loading"/>loading...</div>
     <div id="container"></div>
+    <div id="modal_page"></div>
     <div id="top">
         <div id="top-left"></div>
         <div id="top-mid"></div>