more compact mode work

This commit is contained in:
Stewart Allen 2020-03-29 13:15:40 -04:00
commit 4fe7092318
4 changed files with 70 additions and 11 deletions

View file

@ -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 =

View file

@ -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() {
collapseGroup(label, dbkey);
row.onclick = function(ev) {
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;

View file

@ -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;

View file

@ -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;
}