fix lang selection, cleanup drop menus

src/kiri-mode/cam/client.js

@@ -144,9 +144,12 @@ CAM.init = function(kiri, api) {
         isIndexed = undefined;
         isCamMode = mode === 'CAM';
         SPACE.platform.setColor(isCamMode ? 0xeeeeee : 0xcccccc);
-        $('set-tools').style.display = isCamMode ? '' : 'none';
+        api.uc.setVisible($('set-tools'), isCamMode);
-        $('camops').style.display = isCamMode && isArrange ? 'flex' : '';
+        api.uc.setVisible($('camops'), isCamMode && isArrange);
-        UI.func.animate.style.display = isCamMode ? '' : 'none';
+        api.uc.setVisible(UI.func.animate, isCamMode);
+        // $('set-tools').style.display = isCamMode ? '' : 'none';
+        // $('camops').style.display = isCamMode && isArrange ? 'flex' : '';
+        // UI.func.animate.style.display = isCamMode ? '' : 'none';
         if (!isCamMode) {
             func.clearPops();
             func.tabClear();

src/kiri/ui.js

@@ -78,7 +78,14 @@ gapp.register("kiri.ui", [], (root, exports) => {
         confirm,
         prompt,
         alert,
-        onBlur
+        onBlur,
+        setVisible(el, bool) {
+            if (bool) {
+                el.classList.remove('hide');
+            } else {
+                el.classList.add('hide');
+            }
+        }
     };
 
     function onBlur(obj, fn) {

web/kiri/index.css

@@ -13,6 +13,7 @@
     --menu-text: #222;
     --menu-border: #555;
     --dark-menu-text: #111;
+    --menu-hover: #ddd;
 }
 @font-face {
     font-family: 'Russo One';
@@ -97,6 +98,9 @@ a, a:hover, a:visited {
 .top-menu-right {
     align-items: self-end;
 }
+.top-menu-center .content > div > label {
+    text-align: center !important;
+}
 .top-menu-right .content {
     border-top-left-radius: 4px; 
 }
@@ -117,6 +121,10 @@ a, a:hover, a:visited {
     font-size: smaller;
 }
 #top .content {
+    gap: 4px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
     background-color: var(--menu);
     border-top: 1px dashed var(--menu-border);
     border-left: 1px solid var(--menu-border);
@@ -124,29 +132,37 @@ a, a:hover, a:visited {
     border-bottom: 1px solid var(--menu-border);
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
-    padding: 3px 5px 3px 5px;
+}
-    gap: 4px;
+#top .content {
-    display: grid;
+    display: flex;
-    align-items: center;
+    flex-direction: column;
-    grid-template-columns: auto 1fr;
+    align-items: stretch;
+    padding: 2px;
 }
 #top .content > div {
-    display: contents;
+    display: flex;
-}
+    flex-direction: row;
-#top .content > div > span {
-    text-align: center;
-    padding-left: 10px;
 }
 #top .content > div > label {
-    border-radius: 3px;
+    text-align: left;
+    flex-grow: 1;
+}
+#top .content > div > span {
+    text-align: right;
+}
+#top .content > div > span {
+    padding: 2px 7px 2px 7px;
+    padding-left: 10px;
+    text-align: center;
+}
+#top .content > div > label {
+    padding: 2px 7px 2px 7px;
     justify-self: stretch;
     align-self: stretch;
+    border-radius: 3px;
 }
-#top .content > div > label:hover {
+#top .content > div:hover {
-    background-color: #ddd;
+    background-color: var(--menu-hover);
-}
-#top .content.onecol {
-    grid-template-columns: 1fr !important;
 }
 
 #app-name {
@@ -166,15 +182,12 @@ a, a:hover, a:visited {
     display: flex;
 }
 #app-name-pop {
-    /* display: none; */
     color: var(--fg-gray);
     font-family: sans-serif;
     position: absolute;
-    /* right: -6px; */
     top: 100%;
 }
 #app-name-pop .content {
-    /* grid-template-columns: 1fr; */
     text-align: center;
 }
 #app-lang {
@@ -518,31 +531,30 @@ th, tr, td, label {
 #lang-hold {
     background-color: transparent;
     position: absolute;
-    top: 0;
+    top: -35px;
-    left: 0;
+    left: -35px;
-    right: -15px;
+    right: -35px;
-    bottom: 0;
+    bottom: -35px;
 }
 #lang-pop {
-    border: 1px solid red;
     display: none;
     position: absolute;
-    right: 100%;
+    right: calc(100% + 2px);
-    top: -1px;
+    top: 0;
-    align-items: stretch;
+    padding: 1px;
     text-align: right;
-    border-radius: 3px;
+    align-items: stretch;
-    border: 1px solid #ddd;
-    background-color: white;
     white-space: nowrap;
+    background-color: var(--menu);
+    border: 1px solid var(--menu-border);
+    border-radius: 4px;
     flex-direction: column;
 }
 #lang-pop > div {
-    padding: 5px 7px 5px 7px;
+    padding: 2px 7px 2px 7px;
 }
 #lang-pop > div:hover {
-    color: #000;
+    background-color: var(--menu-hover);
-    background-color: #f4f4f4;
 }
 
 #mid {
@@ -888,7 +900,7 @@ th, tr, td, label {
     display: block;
 }
 #camops {
-    display: none;
+    display: flex;
     padding: 0;
     height: 38px;
     margin: 0 0 max(4px, env(safe-area-inset-bottom)) 0;

web/kiri/index.html

@@ -112,7 +112,7 @@
                 <i class="fas fa-map-marker"></i>
                 <label>tool</label>
                 <div class="top-menu-drop top-menu-left">
-                    <div id="pop-nozzle" class="content onecol"></div>
+                    <div id="pop-nozzle" class="content"></div>
                 </div>
             </span>
         </div>
@@ -121,12 +121,12 @@
             <span>
                 <label>Kiri:Moto</label>
                 <div id="app-name-pop" class="top-menu-drop top-menu-center">
-                    <div class="content onecol">
+                    <div class="content">
                         <div id="app-help">
                             <label lk="help">help</label>
                         </div>
-                        <div>
                         <hr width="100%">
+                        <div>
                             <label id="app-info">version</label>
                         </div>
                     </div>
@@ -191,22 +191,23 @@
                 <label>setup</label>
                 <div class="top-menu-drop top-menu-right">
                     <div class="content">
-                        <div id="set-prefs">
-                            <label lk="prefs">prefs</label>
-                            <span><i class="fas fa-sliders-h"></i></span>
-                        </div>
                         <div id="set-device">
                             <label lk="machine">machine</label>
                             <span><i class="fas fa-cube"></i></span>
                         </div>
                         <div id="set-tools">
-                            <label lk="tools">tools<label>
+                            <label lk="tools">tools</label>
                             <span><i class="fas fa-tools"></i></span>
                         </div>
+                        <div id="app-export">
+                            <label lk="export">export</label>
+                            <span><i class="fas fa-download"></i></span>
+                        </div>
                         <div id="app-lang">
                             <label lk="language">language</label>
                             <span><i class="fas fa-language"></i></span>
                             <div id="lang-pop">
+                                <span id="lang-hold"></span>
                                 <div id="lset-zh">简体中文</div>
                                 <div id="lset-da">dansk</div>
                                 <div id="lset-de">deutsch</div>
@@ -215,12 +216,11 @@
                                 <div id="lset-fr">français</div>
                                 <div id="lset-pl">polskie</div>
                                 <div id="lset-pt">português</div>
-                                <span id="lang-hold"></span>
                             </div>
                         </div>
-                        <div id="app-export">
+                        <div id="set-prefs">
-                            <label lk="export">export</label>
+                            <label lk="prefs">prefs</label>
-                            <span><i class="fas fa-download"></i></span>
+                            <span><i class="fas fa-sliders-h"></i></span>
                         </div>
                     </div>
                 </div>