move mode tools into menubar build

src/kiri/app/init/sync.js

@@ -223,10 +223,6 @@ function setup_keybd_nav() {
     ui.acct.don8.onclick = (ev) => { ev.stopPropagation(); api.modal.show('don8') };
     ui.acct.export.onclick = (ev) => { ev.stopPropagation(); settingsOps.export_profile() };
     ui.acct.export.title = LANG.acct_xpo;
-    ui.func.slice.onclick = (ev) => { ev.stopPropagation(); api.function.slice() };
-    ui.func.preview.onclick = (ev) => { ev.stopPropagation(); api.function.print() };
-    ui.func.animate.onclick = (ev) => { ev.stopPropagation(); api.function.animate() };
-    ui.func.export.onclick = (ev) => { ev.stopPropagation(); api.function.export() };
     // prevent modal input from propagating to parents
     ui.modalBox.onclick = (ev) => { ev.stopPropagation() };
 
@@ -247,7 +243,6 @@ function setup_keybd_nav() {
     $('file-new').onclick = (ev) => { ev.stopPropagation(); settingsOps.new_workspace() };
     $('file-recent').onclick = () => { api.modal.show('files') };
     $('file-import').onclick = (ev) => { api.event.import(ev); };
-    $('view-arrange').onclick = api.platform.layout;
     $('view-top').onclick = space.view.top;
     $('view-home').onclick = space.view.home;
 

src/kiri/app/menubar.js

@@ -217,12 +217,42 @@ function content(actions) {
     ];
 }
 
+function modeTools(actions) {
+    const t = (key, fallback) => tr(key, fallback);
+    return [
+        span({ id: 'view-arrange', ...on(actions, 'view-arrange') }, [
+            span([icon('fas fa-shapes')]),
+            span({ lk: 'arrange', _: t('arrange', 'arrange') })
+        ]),
+        span({ id: 'act-slice', ...on(actions, 'act-slice') }, [
+            span([icon('fas fa-bars')]),
+            label({ id: 'label-slice', title: 'generate layer slices', lk: 'slice', _: t('slice', 'slice') })
+        ]),
+        span({ id: 'act-preview', ...on(actions, 'act-preview') }, [
+            span([icon('fas fa-layer-group')]),
+            label({ id: 'label-preview', title: 'show routing and paths', lk: 'preview', _: t('preview', 'preview') })
+        ]),
+        span({ id: 'act-animate', ...on(actions, 'act-animate') }, [
+            span([icon('fas fa-film')]),
+            label({ id: 'label-animate', title: 'render routing on a mesh', lk: 'animate', _: t('animate', 'animate') })
+        ]),
+        span({ id: 'act-export', ...on(actions, 'act-export') }, [
+            span([icon('fas fa-file-download')]),
+            label({ id: 'label-export', title: 'generate gcode', lk: 'export', _: t('export', 'export') })
+        ])
+    ];
+}
+
 export const menubar = {
     build(actions = {}) {
-        const node = $('menubar');
+        const menubarNode = $('menubar');
-        if (!node) {
+        const modeToolsNode = $('mode-tools');
+        if (!menubarNode) {
             return;
         }
-        h.bind(node, content(actions));
+        h.bind(menubarNode, content(actions));
+        if (modeToolsNode) {
+            h.bind(modeToolsNode, modeTools(actions));
+        }
     }
 };

src/kiri/app/toolbar.js

@@ -1,10 +1,22 @@
 /** Copyright Stewart Allen <sa@grid.space> -- All Rights Reserved */
 
 import { menubar } from './menubar.js';
+import { api } from './api.js';
 
 const toolbar = {
-    build(actions) {
+    build(actions = {}) {
-        menubar.build(actions);
+        const stop = (fn) => (ev) => {
+            ev?.stopPropagation?.();
+            return fn?.(ev);
+        };
+        menubar.build({
+            ...actions,
+            'view-arrange': stop(() => api.platform.layout()),
+            'act-slice': stop(() => api.function.slice()),
+            'act-preview': stop(() => api.function.print()),
+            'act-animate': stop(() => api.function.animate()),
+            'act-export': stop(() => api.function.export())
+        });
     }
 };
 

web/kiri/index.css

@@ -1179,6 +1179,10 @@ details[open] summary::after {
     border-color: var(--appname-blue);
     background-color: rgba(0,0,0,0.4);
 }
+#mode-tools > span.selected {
+    border-color: var(--appname-blue);
+    background-color: rgba(0,0,0,0.4);
+}
 /** fdm extruder drop-down */
 #ft-nozzle .splat {
     width: 10px;

web/kiri/index.html

@@ -60,28 +60,7 @@
     <div id="progress"><div id="progbar"></div><div id="progtxt">loading</div></div>
 
     <!-- toolbar with mesh and rendering options -->
-    <div id="mode-tools">
+    <div id="mode-tools"></div>
-        <span id="view-arrange">
-            <span><i class="fas fa-shapes"></i></span>
-            <span lk="arrange">arrange</span>
-        </span>
-        <span id="act-slice">
-            <span><i class="fas fa-bars"></i></span>
-            <label id="label-slice" title="generate layer slices" lk="slice">preview</label>
-        </span>
-        <span id="act-preview">
-            <span><i class="fas fa-layer-group"></i></span>
-            <label id="label-preview" title="show routing and paths" lk="preview">preview</label>
-        </span>
-        <span id="act-animate">
-            <span><i class="fas fa-film"></i></span>
-            <label id="label-animate" title="render routing on a mesh" lk="animate">animate</label>
-        </span>
-        <span id="act-export">
-            <span><i class="fas fa-file-download"></i></span>
-            <label id="label-export" title="generate gcode" lk="export">export</label>
-        </span>
-    </div>
 
     <div id="mid" class="grow f-row">