another fix for meta using compact mode

src/meta.js

@@ -428,7 +428,7 @@ THREE.Face3.prototype.mVisible = function(show) {
         markTypeButtons[MARK.SLIDE] = mtypStop;
         markTypeButtons[MARK.CLEAR] = mtypClear;
 
-        UC.newGroup('workspace', assets);
+        UC.newGroup('workspace', assets, {region:"left"});
         UC.newTableRow([[
             UC.newButton('new',  newWorkspace),
             UC.newButton('fork', forkWorkspace),
@@ -489,25 +489,22 @@ THREE.Face3.prototype.mVisible = function(show) {
         ]);
         UC.newGroup('export').setAttribute("title","send selection to target");
         UC.newTableRow([
-            [
+            [ UC.newButton('to library',  selectionToLibrary ) ],
-                UC.newButton('library',     selectionToLibrary ),
+            [ UC.newButton('to kiri',     selectionToKiri    ) ],
-                UC.newButton('kiri',        selectionToKiri    )
+            [ UC.newButton('download',    downloadSelection  ) ]
-            ],[
-                UC.newButton('download',    downloadSelection  )
-            ]
         ]);
 
         UC.newGroup('options');
         UI.invert = UC.newBoolean('invert zoom', setZoom);
 
-        UC.newGroup('space', control);
+        UC.newGroup('space', control, {region:"right", nocompact: true});
         UI.name = UC.newInput('name', {size:10});
         UI.units = UC.newInput('units');
         UI.grid = UC.newInput('grid');
         UI.version = UC.newInput('version', {disabled:true});
         UC.newTableRow([[ verDown, verUp ]]);
 
-        UC.newGroup('selection');
+        UC.newGroup('selection', undefined, {nocompact: true});
         UI.sel_x = UC.newInput('width', {disabled:true});
         UI.sel_y = UC.newInput('depth', {disabled:true});
         UI.sel_z = UC.newInput('height', {disabled:true});
@@ -516,7 +513,7 @@ THREE.Face3.prototype.mVisible = function(show) {
         UC.newGroup('spaces');
         UI.models = UC.newRow();
 
-        UC.newGroup('import mesh');
+        UC.newGroup('import', undefined, {nocompact: true});
         UI.libdrop = UC.newButton('(drop mesh here)');
         UI.libdrop.id = "dropbutton";
         UC.newRow([UI.libdrop]);
@@ -538,6 +535,8 @@ THREE.Face3.prototype.mVisible = function(show) {
             UI.units, function(ev) { setSpaceUnits(UI.units.value) }
         ]);
 
+        UC.hidePoppers();
+
         /** prevent mouse hover, click in control panels from affecting space */
 
         function killev(ev) { ev.stopImmediatePropagation(); return false }

web/meta/index.css

@@ -115,6 +115,7 @@ th, tr, td, span, div, label, button {
     font-size: 12px;
     font-weight: bold;
     text-align: center;
+    position: relative;
 }
 .grouphead > a {
     text-transform: uppercase;
@@ -519,3 +520,138 @@ button.del {
     background-color: #ccc;
     border-width: 1px;
 }
+
+.compact {
+    overflow: visible !important;
+    bottom: auto !important;
+    border: 0 !important;
+    background-color: rgba(255,255,255,0.5) !important;
+}
+.compact .grouphead {
+    padding: 10px 5px 10px 5px !important;
+    background-color: rgba(170,221,255,0.25);
+}
+.compact .grouphead:hover {
+    background-color: rgba(170,221,255,0.9);
+}
+.compact .grouphead a {
+    font-size: larger !important;
+    margin: 5px !important;
+}
+.compact .flow-row label {
+    font-size: 18px !important;
+}
+.compact .flow-row input {
+    font-size: 18px !important;
+}
+.compact .flow-row select {
+    font-size: 18px !important;
+}
+.compact .flow-row {
+    margin: 3px 0 3px 0;
+}
+.compact .asym {
+    width: auto !important;
+}
+.compact button {
+    font-size: larger !important;
+    padding: 5px 10px 5px 10px;
+}
+:-moz-any(#control-left.compact) {
+ overflow-x: display !important;
+ overflow-y: display !important;
+}
+:-moz-any(#control-right.compact) {
+ overflow-x: display !important;
+ overflow-y: display !important;
+ margin-right: auto !important;
+ margin-bottom: auto !important;
+}
+
+.compact .sel-span .value {
+    font-size: 16px;
+    color: #444466 !important;
+}
+.compact .sel-span label {
+    font-size: 20px;
+}
+.compact .sel-span input {
+    font-size: 18px;
+    margin: 4px;
+}
+
+.popper {
+    position: absolute;
+    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%;
+}
+.popper svg {
+    width: 40px;
+    height: 40px;
+}
+.poprow > div {
+    display: flex;
+    flex-direction: row;
+}
+
+.poptext {
+    display: none;
+    position: absolute;
+    margin-left: 30px;
+    border: 3px solid #ddd;
+    border-radius: 3px;
+    transform: translate(0, -25%);
+    flex-direction: column;
+    align-items: stretch;
+    z-Index: 10000;
+}
+.poptext label {
+    text-align: center !important;
+    border-top: 1px solid #888;
+    border-left: 1px solid #888;
+    border-right: 1px solid #888;
+    background-color: rgba(170,221,255,0.75);
+    padding: 3px 0 3px 0;
+    margin: 0;
+    color: black;
+}
+.poptext textarea {
+    flex-grow: 1;
+    margin: 0;
+    opacity: 0.95;
+    outline: none;
+    overflow-y: scroll !important;
+}
+
+.sel-span {
+    position: relative;
+    display: inline-block;
+}
+.sel-pop {
+    display: none;
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    padding-bottom: 5px;
+}
+.sel-pop div, .sel-pop table {
+    background-color: white;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 5px;
+}
+.sel-span:hover .sel-pop {
+    display: block;
+}

web/meta/index.html

@@ -16,11 +16,11 @@
 </head>
 <body>
     <!-- app title home page links -->
-    <div id="appid"><span><a href="/" id="appname" target="home">Meta:Moto Modeling Tool</a></span></div>
+    <div id="appid"><span><a href="/" id="appname" target="home">Meta:Moto Modeler</a></span></div>
     <!-- left control menu -->
-    <div id="control-left" class="control"><div id="assets"></div></div>
+    <div id="control-left" class="control compact"><div id="assets"></div></div>
     <!-- right control menu -->
-    <div id="control-right" class="control"><div id="control"></div></div>
+    <div id="control-right" class="control compact"><div id="control"></div></div>
     <div id="container"></div>
 </body>
 </html>