AI_Assistant/grid-apps-cmms
Watch
1
0
Fork
You've already forked grid-apps-cmms
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

bind some menu items. add loading screen. use vars in css

Browse source
This commit is contained in:
Stewart Allen 2020-06-06 16:02:04 -04:00
commit 48f918b177
4 changed files with 79 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/kiri/init.js
View file

@ -1084,19 +1084,23 @@
text: $('alert-text') text: $('alert-text')
}, },
container: container, container: container,
assets: assets, // assets: assets,
control: control, // control: control,
ctrlLeft: $('control-left'), // ctrlLeft: $('control-left'),
ctrlRight: $('control-right'), // ctrlRight: $('control-right'),
layerView: $('layer-view'), // layerView: $('layer-view'),
layerSlider: $('layer-slider'), // layerSlider: $('layer-slider'),
modelOpacity: $('opacity'), // modelOpacity: $('opacity'),
menusep: $('lt-sep'),
rotate: $('lt-rotate'),
scale: $('lt-scale'),
modal: $('modal'), modal: $('modal'),
help: $('mod-help'), help: $('mod-help'),
print: $('mod-print'), print: $('mod-print'),
local: $('mod-local'), local: $('mod-local'),
files: $('mod-files'), files: $('mod-files'),
setup: $('mod-setup'),
catalogBody: $('catalogBody'), catalogBody: $('catalogBody'),
catalogList: $('catalogList'), catalogList: $('catalogList'),
@ -1579,7 +1583,17 @@
// UI.toolMetric.onclick = updateTool; // UI.toolMetric.onclick = updateTool;
// UI.toolType.onchange = updateTool; // UI.toolType.onchange = updateTool;
// bind interface action elements
$('app-name').onclick = API.help.show; $('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( SPACE.platform.setSize(
settings().device.bedWidth, settings().device.bedWidth,
@ -1670,8 +1684,6 @@
let current = settings(), let current = settings(),
control = current.controller; control = current.controller;
SPACE.scene.freeze(true);
platform.deselect(); platform.deselect();
CATALOG.addFileListener(updateCatalog); CATALOG.addFileListener(updateCatalog);
SPACE.view.setZoom(control.reverseZoom, control.zoomSpeed); SPACE.view.setZoom(control.reverseZoom, control.zoomSpeed);
@ -1765,9 +1777,6 @@
// add ability to override // add ability to override
API.show.controls(API.feature.controls); API.show.controls(API.feature.controls);
// show version on startup
$('app-vers').innerHTML = KIRI.version;
// enable modal hiding // enable modal hiding
$('mod-x').onclick = API.modal.hide; $('mod-x').onclick = API.modal.hide;
@ -1776,7 +1785,8 @@
// send init-done event // send init-done event
API.event.emit('init-done', STATS); 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 // if a language needs to load, the script is injected and loaded

26
src/kiri/main.js
View file

@ -1018,7 +1018,10 @@
} }
function platformUpdateSelected() { 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'; // $('ext-sel').style.display = (MODE === MODES.FDM) ? 'inline-block' : 'none';
let extruders = settings.device.extruders; let extruders = settings.device.extruders;
if (extruders) { if (extruders) {
@ -1627,7 +1630,7 @@
visible = modalShowing(), visible = modalShowing(),
info = { pct: 0 }; 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' : ''; UI[name].style.display = name === which ? 'flex' : '';
}); });
@ -1652,6 +1655,7 @@
} }
function hideModal() { function hideModal() {
// console.trace({hideModal: modalShowing()});
if (!modalShowing()) { if (!modalShowing()) {
return; return;
} }
@ -1664,16 +1668,8 @@
start(); start();
} }
function hideDialog() {
hideModal();
}
function showDialog(which) {
showModal(which);
}
function showCatalog() { function showCatalog() {
showDialog("files"); showModal("files");
} }
function getSettings() { function getSettings() {
@ -1730,7 +1726,7 @@
} }
if (!named) { if (!named) {
hideDialog(); hideModal();
} }
updateFields(); updateFields();
@ -1787,7 +1783,7 @@
function showSettings() { function showSettings() {
updateSettingsList(); updateSettingsList();
showDialog("settings"); showModal("settings");
} }
function updateDialogLeft() { function updateDialogLeft() {
@ -1805,7 +1801,7 @@
} }
function showHelpFile(local) { function showHelpFile(local) {
hideDialog(); hideModal();
if (!local) { if (!local) {
WIN.open("//wiki.grid.space/wiki/Kiri:Moto", "_help"); WIN.open("//wiki.grid.space/wiki/Kiri:Moto", "_help");
return; return;
@ -1923,11 +1919,11 @@
function setMode(mode, lock, then) { function setMode(mode, lock, then) {
hideModal(); hideModal();
hideDialog();
if (!MODES[mode]) { if (!MODES[mode]) {
DBUG.log("invalid mode: "+mode); DBUG.log("invalid mode: "+mode);
mode = 'FDM'; mode = 'FDM';
} }
$('app-mode').innerHTML = mode;
settings.mode = mode; settings.mode = mode;
// restore cached device profile for this mode // restore cached device profile for this mode
if (settings.cdev[mode]) { if (settings.cdev[mode]) {

49
web/kiri/index.css
View file

@ -1,3 +1,7 @@
:root {
--fg-blue-gray: #89a;
--bg-blue-gray: #abc;
}
setpopsetpopa, a:hover, a:visited { setpopsetpopa, a:hover, a:visited {
border: none; border: none;
outline: none; outline: none;
@ -88,6 +92,9 @@ th, tr, td {
user-select: none; user-select: none;
} }
.noshow {
display: none;
}
.row { .row {
flex-direction: row; flex-direction: row;
} }
@ -133,9 +140,20 @@ th, tr, td {
margin-bottom: -14px !important; 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 { #container {
position: fixed; position: fixed;
z-index: -1000; z-index: -1;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -154,7 +172,7 @@ th, tr, td {
margin: 0 5px 0 5px; margin: 0 5px 0 5px;
} }
#app-vers, #app-acct { #app-mode, #app-acct {
width: 125px; width: 125px;
} }
@ -178,14 +196,20 @@ th, tr, td {
#lt-top { #lt-top {
height: 10px; height: 10px;
border-top-right-radius: 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; left: -5px;
} }
#lt-end { #lt-end {
height: 10px; height: 10px;
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
background-color: #abc; background-color: var(--bg-blue-gray);
left: -5px; left: -5px;
} }
@ -206,7 +230,7 @@ th, tr, td {
border: 1px solid rgba(0,0,0,0); border: 1px solid rgba(0,0,0,0);
border-radius: 3px; border-radius: 3px;
width: 60px; width: 60px;
color: #89a; color: var(--fg-blue-gray);
} }
.pop-lcol > div:hover { .pop-lcol > div:hover {
@ -222,7 +246,7 @@ th, tr, td {
padding: 5px 5px 5px 10px; padding: 5px 5px 5px 10px;
border: 1px solid rgba(0,0,0,0); border: 1px solid rgba(0,0,0,0);
border-radius: 3px; border-radius: 3px;
color: #89a; color: var(--fg-blue-gray);
left: -5px; left: -5px;
background-color: rgba(255,255,255,0.75); background-color: rgba(255,255,255,0.75);
} }
@ -246,7 +270,7 @@ th, tr, td {
display: flex; display: flex;
} }
#bot { #end {
text-align: center; text-align: center;
font-size: smaller; font-size: smaller;
height: 25px; height: 25px;
@ -282,7 +306,7 @@ th, tr, td {
#modal { #modal {
display: none; display: none;
position: fixed; position: fixed;
z-index: 10000; z-index: 20;
transform: translateY(-50%); transform: translateY(-50%);
top: 50%; top: 50%;
left: 0px; left: 0px;
@ -303,6 +327,7 @@ th, tr, td {
.mdialog { .mdialog {
display: none; display: none;
padding: 10px; padding: 10px;
min-height: 20px;
font-size: smaller; font-size: smaller;
font-family: monospace; font-family: monospace;
background-color: rgba(255,255,255,0.75); background-color: rgba(255,255,255,0.75);
@ -315,7 +340,7 @@ th, tr, td {
} }
#mod-x { #mod-x {
position: absolute; position: absolute;
z-index: 30000; z-index: 30;
bottom: -20px; bottom: -20px;
right: 5px; right: 5px;
} }
@ -406,14 +431,14 @@ th, tr, td {
padding: 1px 10px 2px 2px; padding: 1px 10px 2px 2px;
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
background-color: #abc; background-color: var(--bg-blue-gray);
} }
#set-end { #set-end {
color: black; color: black;
padding: 1px 10px 2px 2px; padding: 1px 10px 2px 2px;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
background-color: #abc; background-color: var(--bg-blue-gray);
height: 10px; height: 10px;
} }
.set-group { .set-group {
@ -424,7 +449,7 @@ th, tr, td {
border-radius: 3px; border-radius: 3px;
margin: 2px 0 2px 4px; margin: 2px 0 2px 4px;
padding: 8px 10px 8px 5px; padding: 8px 10px 8px 5px;
color: #89a; color: var(--fg-blue-gray);
right: -5px; right: -5px;
} }
.set-group:hover { .set-group:hover {

14
web/kiri/index.html
View file

@ -23,7 +23,7 @@
<body class="col"> <body class="col">
<div id="container"></div> <div id="container"></div>
<div id="top" class="row"> <div id="top" class="row">
<div id="app-vers">version</div> <div id="app-mode"></div>
<div class="grow"></div> <div class="grow"></div>
<div id="app-name">Kiri:Moto</div> <div id="app-name">Kiri:Moto</div>
<div class="grow"></div> <div class="grow"></div>
@ -31,6 +31,7 @@
</div> </div>
<div id="mid-sep"></div> <div id="mid-sep"></div>
<div id="mid" class="grow row"> <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="mid-lcol" class="col j-center">
<div id="lt-top"></div> <div id="lt-top"></div>
<div id="lt-setup" class="lt-menu"> <div id="lt-setup" class="lt-menu">
@ -45,7 +46,7 @@
<i class="fas fa-list"></i> <i class="fas fa-list"></i>
<label>recent</label> <label>recent</label>
</div> </div>
<div id="file-recent"> <div id="file-import">
<i class="fas fa-file-upload"></i> <i class="fas fa-file-upload"></i>
<label>import<label> <label>import<label>
</div> </div>
@ -87,14 +88,15 @@
</div> </div>
</div> </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> <i class="fas fa-sync-alt"></i>
<label>rotate</label> <label>rotate</label>
<div id="pop-view" class="pop-lcol row"> <div id="pop-view" class="pop-lcol row">
</div> </div>
</div> </div>
<div id="lt-scale" class="lt-menu"> <div id="lt-scale" class="lt-menu noshow">
<i class="fas fa-expand"></i> <i class="fas fa-expand"></i>
<label>scale</label> <label>scale</label>
<div id="pop-view" class="pop-lcol row"> <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://sienci.com/2016/08/24/the-story-of-kirimoto/">Sienci Labs</a>
<a href="https://www.youtube.com/watch?v=IZ1VG07oFCo">Teaching Tech</a> <a href="https://www.youtube.com/watch?v=IZ1VG07oFCo">Teaching Tech</a>
</div> </div>
<div id="mod-setup" class="mdialog"> <div id="mod-setup" class="mdialog col">
<div id="device">temp device</div> <div id="device">temp device</div>
<div id="layers">temp layers</div> <div id="layers">temp layers</div>
<div id="langpop">temp language</div> <div id="langpop">temp language</div>
@ -148,7 +150,7 @@
</div> </div>
</div> </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="progress"><div id="progbar"><div id="progtxt">loading</div></div></div>
<div id="bottom"></div> <div id="bottom"></div>
<div id="alert-area"> <div id="alert-area">