tweaking css, move device/profile to left menu
This commit is contained in:
Stewart Allen
parent
891f054bfe
commit
4a343c7e5a
7 changed files with 64 additions and 136 deletions
|
|
@ -172,9 +172,6 @@ function updateSettings(opt = {}) {
|
|||
same = false;
|
||||
}
|
||||
}
|
||||
|
||||
$('mode-device').innerText = device.deviceName;
|
||||
$('mode-profile').innerText = `${cproc[mode]}${same ? '' : ' *'}`;
|
||||
}
|
||||
|
||||
function updateSettingsFromFields(setrec, uirec = api.ui, changes) {
|
||||
|
|
@ -279,6 +276,7 @@ function updateFieldsFromSettings(setrec, uirec = api.ui, opt = {}) {
|
|||
let opt = document.createElement('option');
|
||||
opt.appendChild(document.createTextNode(el.name));
|
||||
opt.setAttribute('value', ev);
|
||||
if (id === '#') opt.setAttribute('disabled', true);
|
||||
uie.appendChild(opt);
|
||||
});
|
||||
if (chosen) {
|
||||
|
|
|
|||
|
|
@ -301,9 +301,7 @@ function setDeviceCode(code, devicename) {
|
|||
*/
|
||||
function renderDevices(devices) {
|
||||
let selected = api.device.get() || devices[0],
|
||||
features = api.feature,
|
||||
devs = setconf.get().devices,
|
||||
dfilter = typeof(features.device_filter) === 'function' ? features.device_filter : undefined;
|
||||
devs = setconf.get().devices;
|
||||
|
||||
for (let local in devs) {
|
||||
if (!(devs.hasOwnProperty(local) && devs[local])) {
|
||||
|
|
@ -367,6 +365,31 @@ function renderDevices(devices) {
|
|||
api.device.export(exp, selected, { event, record });
|
||||
};
|
||||
|
||||
updateDeviceSelector(devices, api.ui.modeDevice, selected);
|
||||
updateDeviceSelector(devices, $('dev-list'), selected);
|
||||
selectDevice(selected);
|
||||
|
||||
// update related settings list
|
||||
let curr = settings.get();
|
||||
let slist = Object.keys(curr.sproc[settings.mode()]);
|
||||
let cproc = settings.proc().processName;
|
||||
|
||||
h.bind(api.ui.modeProfile, slist.map(profile => {
|
||||
return h.option({
|
||||
_: profile,
|
||||
selected: profile === cproc ? 1 : undefined,
|
||||
onclick() { console.log({ select: profile })}
|
||||
});
|
||||
}));
|
||||
|
||||
api.ui.modeProfile.onchange = () => {
|
||||
api.conf.load(undefined, api.ui.modeProfile.value);
|
||||
};
|
||||
}
|
||||
|
||||
function updateDeviceSelector(devices, selector, selected) {
|
||||
let features = api.feature;
|
||||
let dfilter = typeof(features.device_filter) === 'function' ? features.device_filter : undefined;
|
||||
let dedup = {};
|
||||
let list_cdev = [];
|
||||
let list_mdev = [];
|
||||
|
|
@ -388,7 +411,7 @@ function renderDevices(devices) {
|
|||
}
|
||||
});
|
||||
|
||||
let dev_list = $('dev-list');
|
||||
let dev_list = selector;
|
||||
h.bind(dev_list, [
|
||||
h.option({ _: '-- My Devices --', disabled: true }),
|
||||
...list_mdev,
|
||||
|
|
@ -402,6 +425,4 @@ function renderDevices(devices) {
|
|||
selectDevice(seldev.innerText);
|
||||
api.platform.layout();
|
||||
}
|
||||
selectDevice(selected);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -209,6 +209,10 @@ export function init_input() {
|
|||
// api augmentation with local functions
|
||||
api.device.export = settingsOps.export_device;
|
||||
|
||||
let driven = true,
|
||||
hideable = true,
|
||||
separator = true;
|
||||
|
||||
Object.assign(ui, {
|
||||
tracker: tracker,
|
||||
container: container,
|
||||
|
|
@ -318,6 +322,10 @@ export function init_input() {
|
|||
|
||||
prefadd: uc.checkpoint($('prefs-add')),
|
||||
|
||||
_____: newGroup('Machine Profile', $('all-devpro'), { driven, hideable, separator, group: "devpro" }),
|
||||
modeDevice: newSelect('machine', {title: 'device', class: "tiny"}, "_"),
|
||||
modeProfile: newSelect('profile', {title: 'profile', class: "tiny"}, "_"),
|
||||
|
||||
/** FDM Settings */
|
||||
...menuFDM(),
|
||||
|
||||
|
|
|
|||
|
|
@ -227,8 +227,6 @@ function setup_keybd_nav() {
|
|||
ui.modalBox.onclick = (ev) => { ev.stopPropagation() };
|
||||
|
||||
$('export-support-a').onclick = (ev) => { ev.stopPropagation(); api.modal.show('don8') };
|
||||
$('mode-device').onclick = api.show.devices;
|
||||
$('mode-profile').onclick = settingsOps.settings_load;
|
||||
$('mode-fdm').onclick = () => api.mode.set('FDM');
|
||||
$('mode-cam').onclick = () => api.mode.set('CAM');
|
||||
$('mode-sla').onclick = () => api.mode.set('SLA');
|
||||
|
|
|
|||
|
|
@ -889,7 +889,7 @@ function newSelect(label, options = {}, source) {
|
|||
} else {
|
||||
row.setAttribute("source", source || "tools");
|
||||
}
|
||||
row.setAttribute("class", "var-row");
|
||||
row.classList.add('var-row');
|
||||
row.style.display = hide ? 'none' : '';
|
||||
if (options.id) ip.setAttribute("id", options.id);
|
||||
if (options.convert) ip.convert = options.convert.bind(ip);
|
||||
|
|
|
|||
|
|
@ -36,42 +36,6 @@
|
|||
font-family: 'Russo One';
|
||||
src: url('../moto/russo-one.ttf');
|
||||
}
|
||||
@media only screen and (max-width : 1000px) {
|
||||
.top-menu > span > label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width : 1200px) {
|
||||
body {
|
||||
font-size: smaller;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width : 900px) {
|
||||
body {
|
||||
font-size: x-small;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-height : 1024px) {
|
||||
body {
|
||||
font-size: smaller;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-height : 750px) {
|
||||
.lt-menu, .pop-lcol {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
.lt-menu svg {
|
||||
font-size: 30px !important;
|
||||
}
|
||||
.pop-lcol svg {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
.mod-x {
|
||||
position: absolute;
|
||||
font-size: 30px;
|
||||
top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
html, body {
|
||||
position: relative;
|
||||
|
|
@ -231,6 +195,7 @@ details[open] summary::after {
|
|||
/* container for entire page / app */
|
||||
#app {
|
||||
position: fixed;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-family: sans-serif;
|
||||
top: 0;
|
||||
|
|
@ -248,19 +213,7 @@ details[open] summary::after {
|
|||
background-color: rgba(255,255,255,0.7);
|
||||
}
|
||||
:root[data-theme="dark"] #mesh-info label,
|
||||
:root[data-theme="dark"] #mode-info label
|
||||
{
|
||||
color: #fff;
|
||||
border-color: #888;
|
||||
background-color: var(--blue-0);
|
||||
}
|
||||
:root[data-theme="dark"] #mesh-info span,
|
||||
:root[data-theme="dark"] #mode-info span
|
||||
{
|
||||
color: #fff;
|
||||
border-color: #888;
|
||||
background-color: #333;
|
||||
}
|
||||
:root[data-theme="dark"] #oplist div .del {
|
||||
color: #aaa;
|
||||
}
|
||||
|
|
@ -310,9 +263,6 @@ details[open] summary::after {
|
|||
background-color: var(--blue-1);
|
||||
}
|
||||
:root[data-theme="dark"] .t-body,
|
||||
:root[data-theme="dark"] .set2-group {
|
||||
border: 1px solid #444 !important;
|
||||
}
|
||||
:root[data-theme="dark"] .set2-group .var-row:hover,
|
||||
:root[data-theme="dark"] .var-row:hover
|
||||
{
|
||||
|
|
@ -377,12 +327,6 @@ details[open] summary::after {
|
|||
:root[data-theme="dark"] #rnfo label {
|
||||
color: #ada;
|
||||
}
|
||||
:root[data-theme="dark"] #slider-center {
|
||||
/* background-color: rgba(255,255,255,0.15); */
|
||||
}
|
||||
#slider-center {
|
||||
/* background-color: rgba(255,255,255,0.5); */
|
||||
}
|
||||
:root[data-theme="dark"] #slider-hold .handle {
|
||||
background-color: #999;
|
||||
}
|
||||
|
|
@ -836,56 +780,6 @@ details[open] summary::after {
|
|||
min-width: 100px;
|
||||
background-color: var(--bg-gray-lt);
|
||||
}
|
||||
#mode-info {
|
||||
white-space: nowrap;
|
||||
font-size: smaller;
|
||||
font-family: sans-serif;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
padding: 2px 0 2px 0;
|
||||
display: grid !important;
|
||||
margin-right: 0 !important;
|
||||
margin-bottom: 2px !important;
|
||||
grid-template-columns: auto 1fr;
|
||||
row-gap: 1px;
|
||||
}
|
||||
#mode-info > div {
|
||||
display: contents;
|
||||
}
|
||||
#mode-info label, #mesh-info label {
|
||||
font-size: smaller;
|
||||
font-weight: bold;
|
||||
align-self: right;
|
||||
margin: 0 0 0 5px;
|
||||
padding: 3px 5px 3px 5px;
|
||||
color: var(--fg-gray);
|
||||
background-color: var(--blue-4);
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-top: 1px solid var(--blue-3);
|
||||
border-left: 1px solid var(--blue-3);
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--blue-3);
|
||||
}
|
||||
#mode-info span, #mesh-info span {
|
||||
font-size: smaller;
|
||||
margin: 0 5px 0 0;
|
||||
padding: 3px 5px 3px 5px;
|
||||
color: var(--fg-gray);
|
||||
background-color: white;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-top: 1px solid var(--blue-3);
|
||||
border-left: 0;
|
||||
border-right: 1px solid var(--blue-3);
|
||||
border-bottom: 1px solid var(--blue-3);
|
||||
}
|
||||
#mode-device, #mode-profile {
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#doit {
|
||||
display: none;
|
||||
|
|
@ -1599,9 +1493,6 @@ details[open] summary::after {
|
|||
border-top: 1px solid black;
|
||||
overflow: hidden;
|
||||
}
|
||||
#modal button, #modal select {
|
||||
/* color: black !important; */
|
||||
}
|
||||
#modal > div {
|
||||
position: absolute;
|
||||
transform: translateX(50%) translateY(-50%);
|
||||
|
|
@ -2321,6 +2212,7 @@ details[open] summary::after {
|
|||
}
|
||||
|
||||
.settings {
|
||||
gap: 3px;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -2341,12 +2233,9 @@ details[open] summary::after {
|
|||
background-color: var(--blue-4);
|
||||
}
|
||||
.set2-group {
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ddd !important;
|
||||
background-color: #fff;
|
||||
flex-flow: column;
|
||||
padding: 4px;
|
||||
margin: 2px;
|
||||
padding: 0 0 2px 0;
|
||||
}
|
||||
.set2-group .var-row, .var-row {
|
||||
background: #fff;
|
||||
|
|
@ -2379,12 +2268,11 @@ details[open] summary::after {
|
|||
background-color: #bbb !important;
|
||||
}
|
||||
.set-header {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
border-radius: 2px;
|
||||
justify-content: left;
|
||||
background-color: var(--blue-3);
|
||||
border-left: 3px solid transparent;
|
||||
border-right: 3px solid var(--main-color-hover);
|
||||
border-bottom: 0.5px solid var(--main-color-hover);
|
||||
padding: 4px;
|
||||
margin: 0 0 4px 0;
|
||||
|
|
@ -2415,7 +2303,7 @@ details[open] summary::after {
|
|||
}
|
||||
.settings .ext-buttons {
|
||||
margin: 0 4px 0 4px;
|
||||
gap: 3px;
|
||||
gap: 2px;
|
||||
}
|
||||
#layers .var-row {
|
||||
border-radius: 10px;
|
||||
|
|
@ -2436,7 +2324,14 @@ details[open] summary::after {
|
|||
#layers button:hover {
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
.tiny.var-row select {
|
||||
width: 10em;
|
||||
max-width: 10em;
|
||||
font-size: smaller;
|
||||
}
|
||||
.var-row {
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
|
@ -2461,6 +2356,13 @@ details[open] summary::after {
|
|||
margin-bottom: 1px;
|
||||
padding-bottom: 1px;
|
||||
padding-top: 1px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
.var-row select {
|
||||
border: 0;
|
||||
border-bottom: 1px solid;
|
||||
border-radius: 0;
|
||||
}
|
||||
.var-row #tool-name {
|
||||
max-width: 15ch;
|
||||
|
|
@ -2612,3 +2514,7 @@ details[open] summary::after {
|
|||
.devel #code-preview-textarea {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.em20 {
|
||||
max-width: 20em;
|
||||
}
|
||||
|
|
@ -70,6 +70,7 @@
|
|||
<!-- <div class="line-sep2"></div> -->
|
||||
<div id="slide-show"><span><i class="fa-solid fa-arrow-right"></i></span></div>
|
||||
<div class="f-col grow settings">
|
||||
<div id="all-devpro" class="set2-group"></div>
|
||||
<!-- FDM -->
|
||||
<div id="fdm-layers" class="set2-group mode-fdm"></div>
|
||||
<div id="fdm-walls" class="set2-group mode-fdm"></div>
|
||||
|
|
@ -102,7 +103,7 @@
|
|||
<div id="sla-support" class="set2-group mode-sla"></div>
|
||||
<div id="sla-output" class="set2-group mode-sla"></div>
|
||||
</div>
|
||||
<div class="line-sep2"></div>
|
||||
<!-- <div class="line-sep2"></div> -->
|
||||
<div class="chonk"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -139,10 +140,6 @@
|
|||
</div>
|
||||
<!-- vertical separation between workspace and right tray -->
|
||||
<div id="panel-right" class="f-col j-start settings">
|
||||
<div id="mode-info">
|
||||
<div><label lk="mi_devi">Device</label><span id="mode-device"></span></div>
|
||||
<div><label lk="mi_prof">Profile</label><span id="mode-profile"></span></div>
|
||||
</div>
|
||||
<div class="set2-group f-col">
|
||||
<details open>
|
||||
<summary class="set-header"><a>objects</a></summary>
|
||||
|
|
@ -186,7 +183,7 @@
|
|||
</details>
|
||||
</div>
|
||||
<div class="grow"></div>
|
||||
<div class="line-sep2"></div>
|
||||
<!-- <div class="line-sep2"></div> -->
|
||||
<div class="chonk"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue