bind some menu items. add loading screen. use vars in css
This commit is contained in:
Stewart Allen
parent
3ea6f400bc
commit
48f918b177
4 changed files with 79 additions and 46 deletions
|
|
@ -1084,19 +1084,23 @@
|
|||
text: $('alert-text')
|
||||
},
|
||||
container: container,
|
||||
assets: assets,
|
||||
control: control,
|
||||
ctrlLeft: $('control-left'),
|
||||
ctrlRight: $('control-right'),
|
||||
layerView: $('layer-view'),
|
||||
layerSlider: $('layer-slider'),
|
||||
modelOpacity: $('opacity'),
|
||||
// assets: assets,
|
||||
// control: control,
|
||||
// ctrlLeft: $('control-left'),
|
||||
// ctrlRight: $('control-right'),
|
||||
// layerView: $('layer-view'),
|
||||
// layerSlider: $('layer-slider'),
|
||||
// modelOpacity: $('opacity'),
|
||||
menusep: $('lt-sep'),
|
||||
rotate: $('lt-rotate'),
|
||||
scale: $('lt-scale'),
|
||||
|
||||
modal: $('modal'),
|
||||
help: $('mod-help'),
|
||||
print: $('mod-print'),
|
||||
local: $('mod-local'),
|
||||
files: $('mod-files'),
|
||||
setup: $('mod-setup'),
|
||||
catalogBody: $('catalogBody'),
|
||||
catalogList: $('catalogList'),
|
||||
|
||||
|
|
@ -1579,7 +1583,17 @@
|
|||
// UI.toolMetric.onclick = updateTool;
|
||||
// UI.toolType.onchange = updateTool;
|
||||
|
||||
// bind interface action elements
|
||||
$('app-name').onclick = API.help.show;
|
||||
$('lt-setup').onclick = () => { API.modal.show('setup') };
|
||||
$('file-recent').onclick = () => { API.modal.show('files') };
|
||||
$('file-import').onclick = API.event.import;
|
||||
$('act-slice').onclick = API.function.slice;
|
||||
$('act-preview').onclick = API.function.print;
|
||||
$('act-export').onclick = API.function.export;
|
||||
$('view-arrange').onclick = API.platform.layout;
|
||||
$('view-top').onclick = SPACE.view.top;
|
||||
$('view-home').onclick = SPACE.view.home;
|
||||
|
||||
SPACE.platform.setSize(
|
||||
settings().device.bedWidth,
|
||||
|
|
@ -1670,8 +1684,6 @@
|
|||
let current = settings(),
|
||||
control = current.controller;
|
||||
|
||||
SPACE.scene.freeze(true);
|
||||
|
||||
platform.deselect();
|
||||
CATALOG.addFileListener(updateCatalog);
|
||||
SPACE.view.setZoom(control.reverseZoom, control.zoomSpeed);
|
||||
|
|
@ -1765,9 +1777,6 @@
|
|||
// add ability to override
|
||||
API.show.controls(API.feature.controls);
|
||||
|
||||
// show version on startup
|
||||
$('app-vers').innerHTML = KIRI.version;
|
||||
|
||||
// enable modal hiding
|
||||
$('mod-x').onclick = API.modal.hide;
|
||||
|
||||
|
|
@ -1776,7 +1785,8 @@
|
|||
// send init-done event
|
||||
API.event.emit('init-done', STATS);
|
||||
|
||||
SPACE.scene.freeze(false);
|
||||
// lift curtain
|
||||
$('curtain').style.display = 'none';
|
||||
}
|
||||
|
||||
// if a language needs to load, the script is injected and loaded
|
||||
|
|
|
|||
|
|
@ -1018,7 +1018,10 @@
|
|||
}
|
||||
|
||||
function platformUpdateSelected() {
|
||||
// UI.selection.style.display = platform.selected_count() ? 'inline' : 'none';
|
||||
let menu_show = platform.selected_count() ? 'flex': '';
|
||||
UI.scale.style.display = menu_show;
|
||||
UI.rotate.style.display = menu_show;
|
||||
UI.menusep.style.display = menu_show;
|
||||
// $('ext-sel').style.display = (MODE === MODES.FDM) ? 'inline-block' : 'none';
|
||||
let extruders = settings.device.extruders;
|
||||
if (extruders) {
|
||||
|
|
@ -1627,7 +1630,7 @@
|
|||
visible = modalShowing(),
|
||||
info = { pct: 0 };
|
||||
|
||||
["print","help","files","local"].forEach(function(name) {
|
||||
["setup","print","help","files","local"].forEach(function(name) {
|
||||
UI[name].style.display = name === which ? 'flex' : '';
|
||||
});
|
||||
|
||||
|
|
@ -1652,6 +1655,7 @@
|
|||
}
|
||||
|
||||
function hideModal() {
|
||||
// console.trace({hideModal: modalShowing()});
|
||||
if (!modalShowing()) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -1664,16 +1668,8 @@
|
|||
start();
|
||||
}
|
||||
|
||||
function hideDialog() {
|
||||
hideModal();
|
||||
}
|
||||
|
||||
function showDialog(which) {
|
||||
showModal(which);
|
||||
}
|
||||
|
||||
function showCatalog() {
|
||||
showDialog("files");
|
||||
showModal("files");
|
||||
}
|
||||
|
||||
function getSettings() {
|
||||
|
|
@ -1730,7 +1726,7 @@
|
|||
}
|
||||
|
||||
if (!named) {
|
||||
hideDialog();
|
||||
hideModal();
|
||||
}
|
||||
|
||||
updateFields();
|
||||
|
|
@ -1787,7 +1783,7 @@
|
|||
|
||||
function showSettings() {
|
||||
updateSettingsList();
|
||||
showDialog("settings");
|
||||
showModal("settings");
|
||||
}
|
||||
|
||||
function updateDialogLeft() {
|
||||
|
|
@ -1805,7 +1801,7 @@
|
|||
}
|
||||
|
||||
function showHelpFile(local) {
|
||||
hideDialog();
|
||||
hideModal();
|
||||
if (!local) {
|
||||
WIN.open("//wiki.grid.space/wiki/Kiri:Moto", "_help");
|
||||
return;
|
||||
|
|
@ -1923,11 +1919,11 @@
|
|||
|
||||
function setMode(mode, lock, then) {
|
||||
hideModal();
|
||||
hideDialog();
|
||||
if (!MODES[mode]) {
|
||||
DBUG.log("invalid mode: "+mode);
|
||||
mode = 'FDM';
|
||||
}
|
||||
$('app-mode').innerHTML = mode;
|
||||
settings.mode = mode;
|
||||
// restore cached device profile for this mode
|
||||
if (settings.cdev[mode]) {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
:root {
|
||||
--fg-blue-gray: #89a;
|
||||
--bg-blue-gray: #abc;
|
||||
}
|
||||
setpopsetpopa, a:hover, a:visited {
|
||||
border: none;
|
||||
outline: none;
|
||||
|
|
@ -88,6 +92,9 @@ th, tr, td {
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
.noshow {
|
||||
display: none;
|
||||
}
|
||||
.row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
|
@ -133,9 +140,20 @@ th, tr, td {
|
|||
margin-bottom: -14px !important;
|
||||
}
|
||||
|
||||
#curtain {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
font-family: 'Russo One', sans-serif;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#container {
|
||||
position: fixed;
|
||||
z-index: -1000;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -154,7 +172,7 @@ th, tr, td {
|
|||
margin: 0 5px 0 5px;
|
||||
}
|
||||
|
||||
#app-vers, #app-acct {
|
||||
#app-mode, #app-acct {
|
||||
width: 125px;
|
||||
}
|
||||
|
||||
|
|
@ -178,14 +196,20 @@ th, tr, td {
|
|||
#lt-top {
|
||||
height: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
background-color: #abc;
|
||||
background-color: var(--bg-blue-gray);
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
#lt-sep {
|
||||
background-color: var(--bg-blue-gray);
|
||||
height: 10px;
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
#lt-end {
|
||||
height: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
background-color: #abc;
|
||||
background-color: var(--bg-blue-gray);
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
|
|
@ -206,7 +230,7 @@ th, tr, td {
|
|||
border: 1px solid rgba(0,0,0,0);
|
||||
border-radius: 3px;
|
||||
width: 60px;
|
||||
color: #89a;
|
||||
color: var(--fg-blue-gray);
|
||||
}
|
||||
|
||||
.pop-lcol > div:hover {
|
||||
|
|
@ -222,7 +246,7 @@ th, tr, td {
|
|||
padding: 5px 5px 5px 10px;
|
||||
border: 1px solid rgba(0,0,0,0);
|
||||
border-radius: 3px;
|
||||
color: #89a;
|
||||
color: var(--fg-blue-gray);
|
||||
left: -5px;
|
||||
background-color: rgba(255,255,255,0.75);
|
||||
}
|
||||
|
|
@ -246,7 +270,7 @@ th, tr, td {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
#bot {
|
||||
#end {
|
||||
text-align: center;
|
||||
font-size: smaller;
|
||||
height: 25px;
|
||||
|
|
@ -282,7 +306,7 @@ th, tr, td {
|
|||
#modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
z-index: 20;
|
||||
transform: translateY(-50%);
|
||||
top: 50%;
|
||||
left: 0px;
|
||||
|
|
@ -303,6 +327,7 @@ th, tr, td {
|
|||
.mdialog {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
min-height: 20px;
|
||||
font-size: smaller;
|
||||
font-family: monospace;
|
||||
background-color: rgba(255,255,255,0.75);
|
||||
|
|
@ -315,7 +340,7 @@ th, tr, td {
|
|||
}
|
||||
#mod-x {
|
||||
position: absolute;
|
||||
z-index: 30000;
|
||||
z-index: 30;
|
||||
bottom: -20px;
|
||||
right: 5px;
|
||||
}
|
||||
|
|
@ -406,14 +431,14 @@ th, tr, td {
|
|||
padding: 1px 10px 2px 2px;
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 0;
|
||||
background-color: #abc;
|
||||
background-color: var(--bg-blue-gray);
|
||||
}
|
||||
#set-end {
|
||||
color: black;
|
||||
padding: 1px 10px 2px 2px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 10px;
|
||||
background-color: #abc;
|
||||
background-color: var(--bg-blue-gray);
|
||||
height: 10px;
|
||||
}
|
||||
.set-group {
|
||||
|
|
@ -424,7 +449,7 @@ th, tr, td {
|
|||
border-radius: 3px;
|
||||
margin: 2px 0 2px 4px;
|
||||
padding: 8px 10px 8px 5px;
|
||||
color: #89a;
|
||||
color: var(--fg-blue-gray);
|
||||
right: -5px;
|
||||
}
|
||||
.set-group:hover {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
<body class="col">
|
||||
<div id="container"></div>
|
||||
<div id="top" class="row">
|
||||
<div id="app-vers">version</div>
|
||||
<div id="app-mode"></div>
|
||||
<div class="grow"></div>
|
||||
<div id="app-name">Kiri:Moto</div>
|
||||
<div class="grow"></div>
|
||||
|
|
@ -31,6 +31,7 @@
|
|||
</div>
|
||||
<div id="mid-sep"></div>
|
||||
<div id="mid" class="grow row">
|
||||
<div id="curtain" class="j-center a-center">loading...</div>
|
||||
<div id="mid-lcol" class="col j-center">
|
||||
<div id="lt-top"></div>
|
||||
<div id="lt-setup" class="lt-menu">
|
||||
|
|
@ -45,7 +46,7 @@
|
|||
<i class="fas fa-list"></i>
|
||||
<label>recent</label>
|
||||
</div>
|
||||
<div id="file-recent">
|
||||
<div id="file-import">
|
||||
<i class="fas fa-file-upload"></i>
|
||||
<label>import<label>
|
||||
</div>
|
||||
|
|
@ -87,14 +88,15 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lt-rotate" class="lt-menu">
|
||||
<div id="lt-sep" class="noshow"></div>
|
||||
<div id="lt-rotate" class="lt-menu noshow">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
<label>rotate</label>
|
||||
<div id="pop-view" class="pop-lcol row">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="lt-scale" class="lt-menu">
|
||||
<div id="lt-scale" class="lt-menu noshow">
|
||||
<i class="fas fa-expand"></i>
|
||||
<label>scale</label>
|
||||
<div id="pop-view" class="pop-lcol row">
|
||||
|
|
@ -115,7 +117,7 @@
|
|||
<a href="https://sienci.com/2016/08/24/the-story-of-kirimoto/">Sienci Labs</a>
|
||||
<a href="https://www.youtube.com/watch?v=IZ1VG07oFCo">Teaching Tech</a>
|
||||
</div>
|
||||
<div id="mod-setup" class="mdialog">
|
||||
<div id="mod-setup" class="mdialog col">
|
||||
<div id="device">temp device</div>
|
||||
<div id="layers">temp layers</div>
|
||||
<div id="langpop">temp language</div>
|
||||
|
|
@ -148,7 +150,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bot" class="col a-center">
|
||||
<div id="end" class="col a-center">
|
||||
<div id="progress"><div id="progbar"><div id="progtxt">loading</div></div></div>
|
||||
<div id="bottom"></div>
|
||||
<div id="alert-area">
|
||||
|
|
|
|||
Loading…
Reference in a new issue