more compact mode work
This commit is contained in:
parent
fd2b369849
commit
4fe7092318
4 changed files with 70 additions and 11 deletions
|
|
@ -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 =
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue