more compact mode work

js/kiri-init.js

@@ -331,7 +331,7 @@ var gs_kiri_init = exports;
                 platform.layout();
                 break;
             case cca('w'): // toggle wireframe on widgets
-                API.view.wireframe(API.color.wireframe, API.opacity.wireframe);
+                API.view.wireframe(API.color.wireframe, API.color.wireframe_opacity);
                 break;
             default:
                 API.event.emit('keypress', evt);
@@ -1180,7 +1180,7 @@ var gs_kiri_init = exports;
             setDevicePre:        UC.newText(LANG.dv_head_s, {title:LANG.dv_head_l, modes:ALL, size:14, height:3}),
             setDevicePost:       UC.newText(LANG.dv_foot_s, {title:LANG.dv_foot_l, modes:ALL, size:14, height:3}),
 
-            mode: UC.newGroup(LANG.mo_menu, assets),
+            mode: UC.newGroup(LANG.mo_menu, assets, {region:"left"}),
             modeTable: UC.newTableRow([
                 [
                     UI.modeFDM =
@@ -1281,7 +1281,7 @@ var gs_kiri_init = exports;
             layerPrint:    UC.newBoolean(LANG.la_prnt, onLayerToggle),
             layerMoves:    UC.newBoolean(LANG.la_move, onLayerToggle),
 
-            settingsGroup: UC.newGroup(LANG.se_menu, control),
+            settingsGroup: UC.newGroup(LANG.se_menu, control, {region:"right"}),
             settingsTable: UC.newTableRow([
                 [
                     UI.settingsLoad =

js/moto-ui.js

@@ -10,6 +10,7 @@ var gs_moto_ui = exports;
     if (moto.ui) return;
 
     let SELF = self,
+        lastRegion = null,
         lastGroup = null,
         lastDiv = null,
         addTo = null,
@@ -59,6 +60,13 @@ var gs_moto_ui = exports;
     };
 
     function setMode(mode) {
+        if (compact) {
+            $('control-left').classList.add('compact');
+            $('control-right').classList.add('compact');
+            Object.keys(groupShow).forEach(group => {
+                updateGroupShow(group);
+            });
+        }
         letMode = mode;
         hasModes.forEach(function(div) {
             div.setMode(div._group && !groupShow[div._group] ? NOMODE : mode);
@@ -71,7 +79,7 @@ var gs_moto_ui = exports;
     }
 
     function checkpoint() {
-        return { addTo, lastDiv, lastGroup, groupName };
+        return { addTo, lastDiv, lastGroup, lastRegion, groupName };
     }
 
     function restore(opt) {
@@ -79,6 +87,7 @@ var gs_moto_ui = exports;
             addTo = opt.addTo;
             lastDiv = opt.lastDiv;
             lastGroup = opt.lastGroup;
+            lastRegion = opt.lastRegion;
             groupName = opt.groupName;
         }
     }
@@ -95,13 +104,16 @@ var gs_moto_ui = exports;
     }
 
     function addCollapsableGroup(label, div, options) {
+        lastRegion = (options || {}).region || lastRegion;
+
         let row = DOC.createElement('div'),
             a = DOC.createElement('a'),
             dbkey = `${prefix}-show-${label}`;
 
         if (compact) {
             let pop = DOC.createElement('div');
-            pop.setAttribute('class','popper');
+            pop.classList.add('popper');
+            if (lastRegion) pop.classList.add(lastRegion);
             row.appendChild(pop);
             addTo = pop;
         } else {
@@ -115,22 +127,51 @@ var gs_moto_ui = exports;
         addModeControls(row, options);
         groupName = label;
         lastGroup = groups[label] = [];
+        lastGroup.key = dbkey;
         groupShow[label] = SDB[dbkey] !== 'false';
-        row.onclick = function() {
+        row.onclick = function(ev) {
-            collapseGroup(label, dbkey);
+            if (ev.target !== a && ev.target !== row) {
+                return;
+            }
+            toggleGroup(label, dbkey);
         };
+        if (compact) row.onmouseenter = function(ev) {
+            if (ev.target !== a && ev.target !== row) {
+                return;
+            }
+            showGroup(label);
+        };
+
+        if (compact) {
+            addTo._group = label;
+            addModeControls(addTo, options);
+            lastGroup.push(addTo);
+        }
 
         return row;
     }
 
-    function collapseGroup(groupname, dbkey) {
+    function showGroup(groupname) {
+        Object.keys(groups).forEach(name => {
+            let group = groups[name];
+            groupShow[name] = SDB[group.key] = (groupname === name);
+            updateGroupShow(name);
+        });
+    }
+
+    function toggleGroup(groupname, dbkey) {
         let show = SDB[dbkey] === 'false';
+        groupShow[groupname] = SDB[dbkey] = show;
+        updateGroupShow(groupname);
+    }
+
+    function updateGroupShow(groupname) {
+        let show = groupShow[groupname];
         let group = groups[groupname];
         group.forEach(div => {
             if (show) div.setMode(letMode);
             else div.setMode(NOMODE);
         });
-        groupShow[groupname] = SDB[dbkey] = show;
     }
 
     function toInt() {
@@ -471,7 +512,7 @@ var gs_moto_ui = exports;
     }
 
     function newRow(children, options) {
-        let row = addCollapsableElement((options && options.noadd) ? null : lastDiv);
+        let row = addCollapsableElement((options && options.noadd) ? null : addTo);
         if (children) children.forEach(function (c) { row.appendChild(c) });
         addModeControls(row, options);
         return row;

web/kiri/style.css

@@ -6,9 +6,20 @@ input[type=range]::-moz-focus-outer {
 }
 .popper {
     position: absolute;
-    right: 50%;
     top: 0;
     z-index: 50000;
+    background-color: white;
+    border: 1px solid #aaa;
+    border-radius: 3px;
+    padding: 5px;
+    white-space: nowrap;
+    text-align: left;
+}
+.popper.left {
+    left: 105%;
+}
+.popper.right {
+    right: 105%;
 }
 .dialog {
     display: none;

web/moto/style.css

@@ -255,6 +255,7 @@ th, tr, td, span, div, label, button {
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
     background-color: rgba(255,255,255,0.75);
+    overflow-x: visible;
     overflow-y: scroll;
 }
 #control-right {
@@ -275,6 +276,12 @@ th, tr, td, span, div, label, button {
     overflow-y: scroll;
     overflow-x: visible;
 }
+.compact {
+    overflow: visible !important;
+    bottom: auto !important;
+    border: 0 !important;
+    background-color: rgba(255,255,255,0.5) !important;
+}
 #control-left::-webkit-scrollbar, #control-right::-webkit-scrollbar {
     display: none;
 }