add back button, more prominent help

src/kiri/init.js

@@ -1437,15 +1437,22 @@
                 drag.mdat = drag.mid = UI.sliderMid.clientHeight;
                 drag.mdmax = drag.height - 20 - drag.hiat;
                 drag.himax = drag.height - 20 - drag.mdat;
-                tracker.onmousemove = (ev) => {
-                    ev.stopPropagation();
-                    if (delta) delta(ev.screenY - drag.start);
-                };
-                tracker.onmouseout = tracker.onmouseup = (ev) => {
-                    ev.stopPropagation();
+                let cancel_drag = tracker.onmouseup = (ev) => {
+                    if (ev) {
+                        ev.stopPropagation();
+                        ev.preventDefault();
+                    }
                     slider.onmousemove = undefined;
                     tracker.style.display = 'none';
                 };
+                tracker.onmousemove = (ev) => {
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                    if (ev.buttons === 0) {
+                        return cancel_drag();
+                    }
+                    if (delta) delta(ev.screenY - drag.start);
+                };
             };
         }
 
@@ -1717,7 +1724,7 @@
         API.focus();
 
         // restore expert setting preference
-        UC.setExpert(control.expert);
+        API.mode.set_expert(control.expert);
 
         // setup tab visibility watcher
         // DOC.addEventListener('visibilitychange', function() { document.title = document.hidden });
@@ -1770,8 +1777,10 @@
         $('set-tools').onclick = (ev) => { ev.stopPropagation(); showTools() };
         $('set-prefs').onclick = (ev) => { ev.stopPropagation(); API.modal.show('prefs') };
         $('set-help').onclick = (ev) => { ev.stopPropagation(); API.help.show() };
+        $('acct-help').onclick = (ev) => { ev.stopPropagation(); API.help.show() };
         $('file-recent').onclick = () => { API.modal.show('files') };
         $('file-import').onclick = () => { API.event.import() };
+        $('lt-back').onclick = API.platform.layout;
         $('lt-action').onclick = API.platform.layout;
         $('act-slice').onclick = (ev) => { ev.stopPropagation(); API.function.slice() };
         $('act-preview').onclick = (ev) => { ev.stopPropagation(); API.function.print() };

src/kiri/main.js

@@ -1858,15 +1858,18 @@
         updateSelectedInfo();
         switch (mode) {
             case VIEWS.ARRANGE:
+                $('lt-back').style.display = '';
                 KIRI.work.clear();
                 hideSlider();
                 clearWidgetCache();
                 updateSliderMax();
                 break;
             case VIEWS.SLICE:
+                $('lt-back').style.display = 'flex';
                 updateSliderMax();
                 break;
             case VIEWS.PREVIEW:
+            $('lt-back').style.display = 'flex';
                 break;
             default:
                 DBUG.log("invalid view mode: "+mode);
@@ -1877,6 +1880,8 @@
 
     function setExpert(bool) {
         UC.setExpert(UI.expert.checked = settings.controller.expert = bool);
+        $('lt-sep-help').style.display = bool ? 'none' : '';
+        $('set-help').style.display = bool ? 'none' : '';
     }
 
     function getMode() {

web/kiri/index.css

@@ -262,15 +262,16 @@ th, tr, td {
 }
 #acct-pop > div {
     margin-top: 5px;
+    align-items: stretch;
     background-color: white;
     border: 1px solid #ddd;
     border-radius: 3px;
-    padding: 5px 0 5px 0;
+    padding: 0;
 }
 #acct-pop > div > div {
-    padding: 0 5px 0 5px;
+    padding: 5px;
 }
-#acct-pop > div:hover {
+#acct-pop > div > div:hover {
     color: #000;
     background-color: #f4f4f4;
 }
@@ -281,7 +282,7 @@ th, tr, td {
     display: none;
     position: absolute;
     right: 100%;
-    top: -6px;
+    top: -1px;
     align-items: stretch;
     text-align: right;
     border-radius: 3px;
@@ -289,7 +290,7 @@ th, tr, td {
     background-color: white;
 }
 #lang-pop > div {
-    padding: 4px 6px 4px 6px;
+    padding: 5px 7px 5px 7px;
 }
 #lang-pop > div:hover {
     color: #000;
@@ -320,7 +321,12 @@ th, tr, td {
     left: -5px;
 }
 
-#lt-sep {
+#lt-back {
+    position: absolute;
+    display: none;
+    top: 0;
+}
+#lt-sep, #lt-sep-help {
     background-color: var(--bg-gray);
     height: 10px;
     left: -5px;

web/kiri/index.html

@@ -51,6 +51,9 @@
                             <div id="lset-da">danish</div>
                         </div>
                     </div>
+                    <div id="acct-help" class="col a-end">
+                        <label>help</label>
+                    </div>
                 </div>
             </div>
         </div>
@@ -59,6 +62,9 @@
     <div id="mid" class="grow row">
         <div id="progress"><div id="progbar"><div id="progtxt">loading</div></div></div>
         <div id="mid-lcol" class="col j-center noshow">
+            <div id="lt-back" class="lt-menu">
+                <i class="fas fa-arrow-circle-left"></i>
+            </div>
             <div id="lt-top"></div>
             <div id="lt-setup" class="lt-menu">
                 <i class="fas fa-cogs"></i>
@@ -76,10 +82,6 @@
                         <i class="fas fa-sliders-h"></i>
                         <label>prefs<label>
                     </div>
-                    <div id="set-help">
-                        <i class="far fa-question-circle"></i>
-                        <label>help<label>
-                    </div>
                 </div>
             </div>
             <div id="lt-file" class="lt-menu">
@@ -182,6 +184,11 @@
                 <label>nozzle</label>
                 <div id="pop-nozzle" class="pop-lcol row fillh russo"></div>
             </div>
+            <div id="lt-sep-help"></div>
+            <div id="set-help" class="lt-menu">
+                <i class="far fa-question-circle"></i>
+                <label>help<label>
+            </div>
             <div id="lt-end"></div>
         </div>
         <div id="mid-mcol" class="grow">