tweaking css, move device/profile to left menu

src/kiri/app/conf/manager.js

@@ -172,9 +172,6 @@ function updateSettings(opt = {}) {
             same = false;
         }
     }
-
-    $('mode-device').innerText = device.deviceName;
-    $('mode-profile').innerText = `${cproc[mode]}${same ? '' : ' *'}`;
 }
 
 function updateSettingsFromFields(setrec, uirec = api.ui, changes) {
@@ -279,6 +276,7 @@ function updateFieldsFromSettings(setrec, uirec = api.ui, opt = {}) {
                 let opt = document.createElement('option');
                 opt.appendChild(document.createTextNode(el.name));
                 opt.setAttribute('value', ev);
+                if (id === '#') opt.setAttribute('disabled', true);
                 uie.appendChild(opt);
             });
             if (chosen) {

src/kiri/app/devices.js

@@ -301,9 +301,7 @@ function setDeviceCode(code, devicename) {
  */
 function renderDevices(devices) {
     let selected = api.device.get() || devices[0],
-        features = api.feature,
+        devs = setconf.get().devices;
-        devs = setconf.get().devices,
-        dfilter = typeof(features.device_filter) === 'function' ? features.device_filter : undefined;
 
     for (let local in devs) {
         if (!(devs.hasOwnProperty(local) && devs[local])) {
@@ -367,6 +365,31 @@ function renderDevices(devices) {
         api.device.export(exp, selected, { event, record });
     };
 
+    updateDeviceSelector(devices, api.ui.modeDevice, selected);
+    updateDeviceSelector(devices, $('dev-list'), selected);
+    selectDevice(selected);
+
+    // update related settings list
+    let curr = settings.get();
+    let slist = Object.keys(curr.sproc[settings.mode()]);
+    let cproc = settings.proc().processName;
+
+    h.bind(api.ui.modeProfile, slist.map(profile => {
+        return h.option({
+            _: profile,
+            selected: profile === cproc ? 1 : undefined,
+            onclick() { console.log({ select: profile })}
+        });
+    }));
+
+    api.ui.modeProfile.onchange = () => {
+        api.conf.load(undefined, api.ui.modeProfile.value);
+    };
+}
+
+function updateDeviceSelector(devices, selector, selected) {
+    let features = api.feature;
+    let dfilter = typeof(features.device_filter) === 'function' ? features.device_filter : undefined;
     let dedup = {};
     let list_cdev = [];
     let list_mdev = [];
@@ -388,7 +411,7 @@ function renderDevices(devices) {
         }
     });
 
-    let dev_list = $('dev-list');
+    let dev_list = selector;
     h.bind(dev_list, [
         h.option({ _: '-- My Devices --', disabled: true }),
         ...list_mdev,
@@ -402,6 +425,4 @@ function renderDevices(devices) {
         selectDevice(seldev.innerText);
         api.platform.layout();
     }
-    selectDevice(selected);
+}
-}
-

src/kiri/app/init/input.js

@@ -209,6 +209,10 @@ export function init_input() {
     // api augmentation with local functions
     api.device.export = settingsOps.export_device;
 
+    let driven = true,
+        hideable = true,
+        separator = true;
+
     Object.assign(ui, {
         tracker:            tracker,
         container:          container,
@@ -318,6 +322,10 @@ export function init_input() {
 
         prefadd:          uc.checkpoint($('prefs-add')),
 
+        _____:            newGroup('Machine Profile', $('all-devpro'), { driven, hideable, separator, group: "devpro" }),
+        modeDevice:       newSelect('machine', {title: 'device', class: "tiny"}, "_"),
+        modeProfile:      newSelect('profile', {title: 'profile', class: "tiny"}, "_"),
+
         /** FDM Settings */
         ...menuFDM(),
 

src/kiri/app/init/sync.js

@@ -227,8 +227,6 @@ function setup_keybd_nav() {
     ui.modalBox.onclick = (ev) => { ev.stopPropagation() };
 
     $('export-support-a').onclick = (ev) => { ev.stopPropagation(); api.modal.show('don8') };
-    $('mode-device').onclick = api.show.devices;
-    $('mode-profile').onclick = settingsOps.settings_load;
     $('mode-fdm').onclick = () => api.mode.set('FDM');
     $('mode-cam').onclick = () => api.mode.set('CAM');
     $('mode-sla').onclick = () => api.mode.set('SLA');

src/kiri/app/inputs.js

@@ -889,7 +889,7 @@ function newSelect(label, options = {}, source) {
     } else {
         row.setAttribute("source", source || "tools");
     }
-    row.setAttribute("class", "var-row");
+    row.classList.add('var-row');
     row.style.display = hide ? 'none' : '';
     if (options.id) ip.setAttribute("id", options.id);
     if (options.convert) ip.convert = options.convert.bind(ip);

web/kiri/index.css

@@ -36,42 +36,6 @@
     font-family: 'Russo One';
     src: url('../moto/russo-one.ttf');
 }
-@media only screen and (max-width : 1000px) {
-    .top-menu > span > label {
-        display: none;
-    }
-}
-@media only screen and (max-width : 1200px) {
-    body {
-        font-size: smaller;
-    }
-}
-@media only screen and (max-width : 900px) {
-    body {
-        font-size: x-small;
-    }
-}
-@media only screen and (max-height : 1024px) {
-    body {
-        font-size: smaller;
-    }
-}
-@media only screen and (max-height : 750px) {
-    .lt-menu, .pop-lcol {
-        font-size: 16px !important;
-    }
-    .lt-menu svg {
-        font-size: 30px !important;
-    }
-    .pop-lcol svg {
-        font-size: 20px !important;
-    }
-    .mod-x {
-        position: absolute;
-        font-size: 30px;
-        top: 8px;
-    }
-}
 
 html, body {
     position: relative;
@@ -231,6 +195,7 @@ details[open] summary::after {
 /* container for entire page / app */
 #app {
     position: fixed;
+    font-size: 14px;
     font-weight: normal;
     font-family: sans-serif;
     top: 0;
@@ -248,19 +213,7 @@ details[open] summary::after {
     background-color: rgba(255,255,255,0.7);
 }
 :root[data-theme="dark"] #mesh-info label,
-:root[data-theme="dark"] #mode-info label
-{
-    color: #fff;
-    border-color: #888;
-    background-color: var(--blue-0);
-}
 :root[data-theme="dark"] #mesh-info span,
-:root[data-theme="dark"] #mode-info span
-{
-    color: #fff;
-    border-color: #888;
-    background-color: #333;
-}
 :root[data-theme="dark"] #oplist div .del {
     color: #aaa;
 }
@@ -310,9 +263,6 @@ details[open] summary::after {
     background-color: var(--blue-1);
 }
 :root[data-theme="dark"] .t-body,
-:root[data-theme="dark"] .set2-group {
-    border: 1px solid #444 !important;
-}
 :root[data-theme="dark"] .set2-group .var-row:hover,
 :root[data-theme="dark"] .var-row:hover
 {
@@ -377,12 +327,6 @@ details[open] summary::after {
 :root[data-theme="dark"] #rnfo label {
     color: #ada;
 }
-:root[data-theme="dark"] #slider-center {
-    /* background-color: rgba(255,255,255,0.15); */
-}
-#slider-center {
-    /* background-color: rgba(255,255,255,0.5); */
-}
 :root[data-theme="dark"] #slider-hold .handle {
     background-color: #999;
 }
@@ -836,56 +780,6 @@ details[open] summary::after {
     min-width: 100px;
     background-color: var(--bg-gray-lt);
 }
-#mode-info {
-    white-space: nowrap;
-    font-size: smaller;
-    font-family: sans-serif;
-    align-items: stretch;
-    justify-content: center;
-    padding: 2px 0 2px 0;
-    display: grid !important;
-    margin-right: 0 !important;
-    margin-bottom: 2px !important;
-    grid-template-columns: auto 1fr;
-    row-gap: 1px;
-}
-#mode-info > div {
-    display: contents;
-}
-#mode-info label, #mesh-info label {
-    font-size: smaller;
-    font-weight: bold;
-    align-self: right;
-    margin: 0 0 0 5px;
-    padding: 3px 5px 3px 5px;
-    color: var(--fg-gray);
-    background-color: var(--blue-4);
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
-    border-top: 1px solid var(--blue-3);
-    border-left: 1px solid var(--blue-3);
-    border-right: 0;
-    border-bottom: 1px solid var(--blue-3);
-}
-#mode-info span, #mesh-info span {
-    font-size: smaller;
-    margin: 0 5px 0 0;
-    padding: 3px 5px 3px 5px;
-    color: var(--fg-gray);
-    background-color: white;
-    border-top-left-radius: 0;
-    border-top-right-radius: 5px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 5px;
-    border-top: 1px solid var(--blue-3);
-    border-left: 0;
-    border-right: 1px solid var(--blue-3);
-    border-bottom: 1px solid var(--blue-3);
-}
-#mode-device, #mode-profile {
-    max-width: 100px;
-    overflow: hidden;
-}
 
 #doit {
     display: none;
@@ -1599,9 +1493,6 @@ details[open] summary::after {
     border-top: 1px solid black;
     overflow: hidden;
 }
-#modal button, #modal select {
-    /* color: black !important; */
-}
 #modal > div {
     position: absolute;
     transform: translateX(50%) translateY(-50%);
@@ -2321,6 +2212,7 @@ details[open] summary::after {
 }
 
 .settings {
+    gap: 3px;
     max-height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
@@ -2341,12 +2233,9 @@ details[open] summary::after {
     background-color: var(--blue-4);
 }
 .set2-group {
-    border-radius: 3px;
-    border: 1px solid #ddd !important;
     background-color: #fff;
     flex-flow: column;
-    padding: 4px;
+    padding: 0 0 2px 0;
-    margin: 2px;
 }
 .set2-group .var-row, .var-row {
     background: #fff;
@@ -2379,12 +2268,11 @@ details[open] summary::after {
     background-color: #bbb !important;
 }
 .set-header {
+    overflow: hidden;
     white-space: nowrap;
-    border-radius: 2px;
     justify-content: left;
     background-color: var(--blue-3);
     border-left: 3px solid transparent;
-    border-right: 3px solid var(--main-color-hover);
     border-bottom: 0.5px solid var(--main-color-hover);
     padding: 4px;
     margin: 0 0 4px 0;
@@ -2415,7 +2303,7 @@ details[open] summary::after {
 }
 .settings .ext-buttons {
     margin: 0 4px 0 4px;
-    gap: 3px;
+    gap: 2px;
 }
 #layers .var-row {
     border-radius: 10px;
@@ -2436,7 +2324,14 @@ details[open] summary::after {
 #layers button:hover {
     background-color: var(--main-color);
 }
+
+.tiny.var-row select {
+    width: 10em;
+    max-width: 10em;
+    font-size: smaller;
+}
 .var-row {
+    font-size: 13px;
     white-space: nowrap;
     align-items: center;
     gap: 4px;
@@ -2461,6 +2356,13 @@ details[open] summary::after {
     margin-bottom: 1px;
     padding-bottom: 1px;
     padding-top: 1px;
+    border: 0;
+    border-bottom: 1px solid;
+}
+.var-row select {
+    border: 0;
+    border-bottom: 1px solid;
+    border-radius: 0;
 }
 .var-row #tool-name {
     max-width: 15ch;
@@ -2612,3 +2514,7 @@ details[open] summary::after {
 .devel #code-preview-textarea {
     height: 100%;
 }
+
+.em20 {
+    max-width: 20em;
+}

web/kiri/index.html

@@ -70,6 +70,7 @@
             <!-- <div class="line-sep2"></div> -->
             <div id="slide-show"><span><i class="fa-solid fa-arrow-right"></i></span></div>
             <div class="f-col grow settings">
+                <div id="all-devpro" class="set2-group"></div>
                 <!-- FDM -->
                 <div id="fdm-layers" class="set2-group mode-fdm"></div>
                 <div id="fdm-walls" class="set2-group mode-fdm"></div>
@@ -102,7 +103,7 @@
                 <div id="sla-support" class="set2-group mode-sla"></div>
                 <div id="sla-output" class="set2-group mode-sla"></div>
             </div>
-            <div class="line-sep2"></div>
+            <!-- <div class="line-sep2"></div> -->
             <div class="chonk"></div>
         </div>
 
@@ -139,10 +140,6 @@
             </div>
             <!-- vertical separation between workspace and right tray -->
             <div id="panel-right" class="f-col j-start settings">
-                <div id="mode-info">
-                    <div><label lk="mi_devi">Device</label><span id="mode-device"></span></div>
-                    <div><label lk="mi_prof">Profile</label><span id="mode-profile"></span></div>
-                </div>
                 <div class="set2-group f-col">
                     <details open>
                         <summary class="set-header"><a>objects</a></summary>
@@ -186,7 +183,7 @@
                     </details>
                 </div>
                 <div class="grow"></div>
-                <div class="line-sep2"></div>
+                <!-- <div class="line-sep2"></div> -->
                 <div class="chonk"></div>
             </div>
         </div>