refactor slide-out, mode to title, reorder top right

src/kiri/app/init/sync.js

@@ -323,7 +323,4 @@ function setup_keybd_nav() {
     } catch (e) {
         console.log('iOS remediation fail', e);
     }
-
-    // add app name hover info
-    $('app-info').innerText = version;
 }

src/kiri/app/menubar.js

@@ -168,8 +168,12 @@ function content(actions) {
                 toolbarToolScale(actions)
             ]),
             div({ class: 'grow' }),
-            div({ class: 'menubar-mode', id: 'app-mode' }),
+            topMenu(actions, {
-            div({ class: 'menubar-separator' }),
+                text: 'info', lk: 'info', side: 'right', right: true, items: [
+                    menuItem(actions, { id: 'app-help', lk: 'help', text: 'help' }),
+                    menuItem(actions, { id: 'app-don8', lk: 'donate', text: 'donate' }),
+                ]
+            }),
             topMenu(actions, {
                 text: 'mode', lk: 'mo_menu', side: 'right', right: true, items: [
                     menuItem(actions, { id: 'mode-fdm', text: 'FDM', title: '3D Additive Printing Processes', iconClass: 'fas fa-layer-group' }),
@@ -182,14 +186,6 @@ function content(actions) {
                     menuItem(actions, { id: 'mode-drag', text: 'Drag', title: 'Drag Knife Cutting', iconClass: 'fas fa-caret-left' })
                 ]
             }),
-            topMenu(actions, {
-                text: 'info', lk: 'info', side: 'right', right: true, items: [
-                    menuItem(actions, { id: 'app-help', lk: 'help', text: 'help' }),
-                    menuItem(actions, { id: 'app-don8', lk: 'donate', text: 'donate' }),
-                    hr(),
-                    menuItem(actions, { children: label({ id: 'app-info', _: 'version' }) })
-                ]
-            }),
             topMenu(actions, {
                 text: 'setup', lk: 'su_menu', side: 'right', right: true, items: [
                     menuItem(actions, { id: 'set-device', lk: 'machines', text: 'machines', iconClass: 'fas fa-cube' }),

src/kiri/app/mode.js

@@ -63,7 +63,7 @@ function setMode(mode, lock, then) {
     // change mode constants
     current.mode = mode;
     MODE = MODES[mode];
-    $('app-mode').innerText = mode;
+    document.title = 'Kiri:Moto | ' + mode;
     // gcode edit area for any non-SLA mode
     api.uc.setVisible($('gcode-edit'), mode !== 'SLA');
     // highlight selected mode menu item

web/kiri/index.css

@@ -844,47 +844,6 @@ details[open] summary::after {
     text-transform: none !important;
 }
 
-.slideshow #panel-left .settings {
-    transform: translateX(-100%);
-    transition: transform 0.1s ease-in-out;
-    transition-delay: 0.3s;
-}
-.slideshow #panel-left:hover .settings {
-    transform: translateX(0);
-    transition-delay: 0.0s;
-}
-.slideshow #panel-left:hover #slide-show {
-    transform: translateX(-100%);
-    transition-delay: 0.0s;
-}
-.slideshow #slide-show {
-    transition-delay: 0.5s;
-    transform: translateX(-80%);
-    /* transform: translateX(0); */
-    position: absolute;
-    top: 5px;
-    left: 0;
-    bottom: 5px;
-    width: 25px;
-    background-color: var(--slide-bg);
-    border-top: 1px solid var(--blue-1);
-    border-right: 1px solid var(--blue-1);
-    border-bottom: 1px solid var(--blue-1);
-    border-bottom-right-radius: 4px;
-    border-top-right-radius: 4px;
-    z-index: -1;
-}
-.slideshow #slide-show span {
-    display: flex;
-}
-#slide-show {
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;;
-}
-#slide-show span {
-    display: none;
-}
 #panel-right {
     overflow: unset;
 }
@@ -897,6 +856,19 @@ details[open] summary::after {
 #panel-left {
     padding-right: 5px;
 }
+.slideshow #panel-slide {
+    padding-right: 1px;
+    border-right: 20px solid rgba(128,128,128,0.3);
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    transform: translateX(calc(-100% + 20px));
+    transition: transform 0.15s ease-in-out, border 0.15s ease-in-out;
+}
+.slideshow #panel-slide:hover {
+    transition: transform 0.15s ease-in-out, border 0.15s ease-in-out;
+    transform: translateX(0);
+    border-right: 0px solid rgba(128,128,128,0.3);
+}
 #panel-left, #panel-right {
     max-height: 100%;
     background-color: var(--work-area);
@@ -1602,10 +1574,6 @@ details[open] summary::after {
     font-size: larger;
     padding-bottom: 10px;
 }
-#kiri-version {
-    font-family: monospace;
-    padding-top: 5px;
-}
 #export-support {
     padding-top: 10px;
     text-align: center;

web/kiri/index.html

@@ -67,9 +67,7 @@
 
         <!-- left settings menu -->
         <div id="panel-left" class="f-col j-left">
-            <!-- <div class="line-sep2"></div> -->
+            <div id="panel-slide" class="f-col settings">
-            <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>
@@ -103,8 +101,6 @@
                 <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="chonk"></div>
         </div>
 
         <!-- main workspace -->
@@ -130,7 +126,6 @@
             </div>
             <!-- CAM animation controls and readout -->
             <div id="layer-animate" class="f-col a-center set2-group hide"></div>
-            <!-- <div id="layer-toolpos" class="f-row a-center hide"></div> -->
         </div>
 
         <!-- allows right tray to slide/hide but still show speeds menu -->
@@ -182,9 +177,6 @@
                     </div>
                     </details>
                 </div>
-                <div class="grow"></div>
-                <!-- <div class="line-sep2"></div> -->
-                <div class="chonk"></div>
             </div>
         </div>
     </div>