reenable basic modal functionality
This commit is contained in:
Stewart Allen
parent
757457fed2
commit
3ea6f400bc
7 changed files with 177 additions and 105 deletions
|
|
@ -78,6 +78,9 @@ select {
|
|||
th, tr, td, span, div, label, button {
|
||||
user-select: none;
|
||||
}
|
||||
th, tr, td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.noselect {
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
|
@ -280,11 +283,47 @@ th, tr, td, span, div, label, button {
|
|||
display: none;
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
top: 0px;
|
||||
transform: translateY(-50%);
|
||||
top: 50%;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
height: 300px;
|
||||
background-color: rgba(0,0,0,0.25);
|
||||
border-bottom: 1px solid black;
|
||||
border-top: 1px solid black;
|
||||
overflow: hidden;
|
||||
}
|
||||
#modal > div {
|
||||
position: absolute;
|
||||
transform: translateX(50%) translateY(-50%);
|
||||
right: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
.mdialog {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
font-size: smaller;
|
||||
font-family: monospace;
|
||||
background-color: rgba(255,255,255,0.75);
|
||||
}
|
||||
#mod-top {
|
||||
height: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
background-color: rgba(0,0,0,0.25);
|
||||
}
|
||||
#mod-x {
|
||||
position: absolute;
|
||||
z-index: 30000;
|
||||
bottom: -20px;
|
||||
right: 5px;
|
||||
}
|
||||
#mod-end {
|
||||
height: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
background-color: rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
#slider {
|
||||
|
|
@ -298,22 +337,18 @@ th, tr, td, span, div, label, button {
|
|||
border: 1px solid #aaa;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#slider > div {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#slider-begin {
|
||||
background-color: #ccc;
|
||||
border-bottom: 1px solid #aaa;
|
||||
}
|
||||
|
||||
#slider-end {
|
||||
background-color: #ccc;
|
||||
border-top: 1px solid #aaa;
|
||||
}
|
||||
|
||||
#slider-hold {
|
||||
background-color: #ccc;
|
||||
position: absolute;
|
||||
|
|
@ -321,7 +356,6 @@ th, tr, td, span, div, label, button {
|
|||
left: 0;
|
||||
border: 3px solid white;
|
||||
}
|
||||
|
||||
#slider-hold .shim {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
|
|
@ -382,7 +416,7 @@ th, tr, td, span, div, label, button {
|
|||
background-color: #abc;
|
||||
height: 10px;
|
||||
}
|
||||
.setgroup {
|
||||
.set-group {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background-color: rgba(255,255,255,0.75);
|
||||
|
|
@ -393,12 +427,12 @@ th, tr, td, span, div, label, button {
|
|||
color: #89a;
|
||||
right: -5px;
|
||||
}
|
||||
.setgroup:hover {
|
||||
.set-group:hover {
|
||||
background-color: #eee;
|
||||
border: 1px solid #aaa;
|
||||
color: #000;
|
||||
}
|
||||
.setpop {
|
||||
.set-pop {
|
||||
top: 50%;
|
||||
right: 100%;
|
||||
position: absolute;
|
||||
|
|
@ -407,11 +441,11 @@ th, tr, td, span, div, label, button {
|
|||
transform: translateY(-50%);
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
margin-right: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
.setpop label {
|
||||
.set-pop label {
|
||||
padding: 2px 4px 2px 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -87,33 +87,54 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lt-rotate" class="lt-menu">
|
||||
<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">
|
||||
<i class="fas fa-expand"></i>
|
||||
<label>scale</label>
|
||||
<div id="pop-view" class="pop-lcol row">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="lt-end"></div>
|
||||
</div>
|
||||
<div id="mid-mcol" class="grow">
|
||||
<div id="modal">
|
||||
<div id="mod-help">
|
||||
<div class="col">
|
||||
<div id="mod-top" class="row"><div id="mod-x"><i class="fas fa-times"></i></div></div>
|
||||
|
||||
<div id="mod-help" class="mdialog col">
|
||||
<a href="https://en.wikipedia.org/wiki/Slicer_(3D_printing)">wikipedia</a>
|
||||
<a href="https://www.onshape.com/cad-blog/partner-spotlight-kirimoto">Onshape</a>
|
||||
<a href="https://www.inov3d.net/3d-printing-slicer-software-download/">slicer news</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>
|
||||
</div>
|
||||
<div id="mod-setup">
|
||||
<div id="mod-setup" class="mdialog">
|
||||
<div id="device">temp device</div>
|
||||
<div id="layers">temp layers</div>
|
||||
<div id="langpop">temp language</div>
|
||||
</div>
|
||||
<div id="mod-tools"></div>
|
||||
<div id="mod-local"></div>
|
||||
<div id="mod-print"></div>
|
||||
<div id="mod-files" class="mdialog"></div>
|
||||
<div id="mod-tools" class="mdialog"></div>
|
||||
<div id="mod-local" class="mdialog"></div>
|
||||
<div id="mod-print" class="mdialog"></div>
|
||||
<!-- hidden file input loader -->
|
||||
<input id="load-file" type="file" name="loadme" style="display:none" accept=".stl,.gcode,.nc"/>
|
||||
|
||||
<div id="mod-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mid-rcol" class="col j-center">
|
||||
<div id="set-top" class="setgroup"><a>settings</a></div>
|
||||
<div id="set-top" class="set-group"><a>settings</a></div>
|
||||
<div id="settings" class="col"></div>
|
||||
<div id="set-end" class="setgroup"></div>
|
||||
<div id="set-end" class="set-group"></div>
|
||||
<div id="slider" class="col">
|
||||
<div id="slider-begin">0</div>
|
||||
<div id="slider-center" class="grow">
|
||||
|
|
|
|||
|
|
@ -1,64 +1,60 @@
|
|||
<button id="help-close" class="modal-x">X</button>
|
||||
<div id="help-body" class="row">
|
||||
|
||||
<div id="help-body" class="flex frow">
|
||||
<div id="help-left" class="col">
|
||||
<p><center><b>Kiri:Moto</b></center></p>
|
||||
|
||||
<div id="help-left">
|
||||
<div class="grouphead">About</div>
|
||||
|
||||
<p><center><b>Kiri:Moto</b></center></p>
|
||||
<div class="content">
|
||||
<a href="#" title="Kiri-e is the Japanese art of papercutting"><b>Kiri:Moto</b></a>
|
||||
is an <a href="https://github.com/GridSpace/grid-apps" target="_github">open-source</a> slicer for
|
||||
<br>
|
||||
Laser cutting, 3D printing, CNC milling
|
||||
</div>
|
||||
|
||||
<div class="grouphead">About</div>
|
||||
<div class="grouphead">File Loading</div>
|
||||
|
||||
<div class="content">
|
||||
<a href="#" title="Kiri-e is the Japanese art of papercutting"><b>Kiri:Moto</b></a>
|
||||
is an <a href="https://github.com/GridSpace/grid-apps" target="_github">open-source</a> slicer for
|
||||
<br>
|
||||
Laser cutting, 3D printing, CNC milling
|
||||
<div class="content">
|
||||
Drag and drop a <a href="https://en.wikipedia.org/wiki/STL_(file_format)" target="_stl">file</a> onto the grid
|
||||
<br>
|
||||
or import from your computer
|
||||
</div>
|
||||
|
||||
<div class="grouphead">Workflow</div>
|
||||
|
||||
<div class="content">
|
||||
Select operating <u>mode</u><br>
|
||||
Select target <u>device</u><br>
|
||||
<u>Slice</u>, <u>Preview</u>, then <u>Export</u> GCode
|
||||
</div>
|
||||
|
||||
<div class="grouphead">Integrations</div>
|
||||
|
||||
<div class="content">
|
||||
Kiri:Moto is also available through<br>
|
||||
<a target="_onshape" href="https://appstore.onshape.com/apps/CAM/EAAEWYIOMQKBENEMYW2N7MF253CT4WYL6SUJGEY=/description">Onshape</a> and
|
||||
<a target="_thingiverse" href="http://www.thingiverse.com/apps/kirimoto/">Thingiverse</a> as apps
|
||||
</div>
|
||||
|
||||
<div class="grouphead">Resources</div>
|
||||
|
||||
<div class="content">
|
||||
Watch <a target="_tutor" href="https://www.youtube.com/playlist?list=PLRoVgyRoWZpumQIKWm7oldx3bjDivqP24">a tutorial</a> on YouTube
|
||||
<br>
|
||||
Follow <a target="_tw" href="https://twitter.com/grid_space_3d">Grid.Space</a> on Twitter
|
||||
<br>
|
||||
Join the <a target="_fb" href="https://www.facebook.com/groups/kirimoto">user group</a> on Facebook
|
||||
<br>
|
||||
Visit the <a target="_help" href="https://wiki.grid.space/wiki/Kiri:Moto">Wiki</a> on Github
|
||||
</div>
|
||||
|
||||
<div class="help-post"><p id="kiri-version"></p></div>
|
||||
</div>
|
||||
|
||||
<div class="grouphead">File Loading</div>
|
||||
|
||||
<div class="content">
|
||||
Drag and drop a <a href="https://en.wikipedia.org/wiki/STL_(file_format)" target="_stl">file</a> onto the grid
|
||||
<br>
|
||||
or import from your computer
|
||||
</div>
|
||||
|
||||
<div class="grouphead">Workflow</div>
|
||||
|
||||
<div class="content">
|
||||
Select operating <u>mode</u><br>
|
||||
Select target <u>device</u><br>
|
||||
<u>Slice</u>, <u>Preview</u>, then <u>Export</u> GCode
|
||||
</div>
|
||||
|
||||
<div class="grouphead">Integrations</div>
|
||||
|
||||
<div class="content">
|
||||
Kiri:Moto is also available through<br>
|
||||
<a target="_onshape" href="https://appstore.onshape.com/apps/CAM/EAAEWYIOMQKBENEMYW2N7MF253CT4WYL6SUJGEY=/description">Onshape</a> and
|
||||
<a target="_thingiverse" href="http://www.thingiverse.com/apps/kirimoto/">Thingiverse</a> as apps
|
||||
</div>
|
||||
|
||||
<div class="grouphead">Resources</div>
|
||||
|
||||
<div class="content">
|
||||
Watch <a target="_tutor" href="https://www.youtube.com/playlist?list=PLRoVgyRoWZpumQIKWm7oldx3bjDivqP24">a tutorial</a> on YouTube
|
||||
<br>
|
||||
Follow <a target="_tw" href="https://twitter.com/grid_space_3d">Grid.Space</a> on Twitter
|
||||
<br>
|
||||
Join the <a target="_fb" href="https://www.facebook.com/groups/kirimoto">user group</a> on Facebook
|
||||
<br>
|
||||
Visit the <a target="_help" href="https://wiki.grid.space/wiki/Kiri:Moto">Wiki</a> on Github
|
||||
</div>
|
||||
|
||||
<div class="help-post"><p id="kiri-version"></p></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="help-right">
|
||||
<div id="help-right" class="col">
|
||||
<p><center><b>Keyboard & Mouse Controls</b></center>
|
||||
<p>
|
||||
<div class="flex frow">
|
||||
<div class="row">
|
||||
<table>
|
||||
<tr><th colspan=2 class="grouphead">Mode</th></tr>
|
||||
<tr><td><label>a</label></td><td>Arrange</td></tr>
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@ kiri.lang['en-us'] = {
|
|||
sl_lbot_l: "number of solid layers\nto enforce at the\nbottom of the print",
|
||||
|
||||
// FDM FILL
|
||||
fi_menu: "fill",
|
||||
fi_menu: "infill",
|
||||
fi_type: "type",
|
||||
fi_pcnt_s: "percentage",
|
||||
fi_pcnt_l: "fill density values\n0.0 - 1.0",
|
||||
|
|
@ -178,7 +178,7 @@ kiri.lang['en-us'] = {
|
|||
fi_over_l: "overlap with shell and fill\nas % of nozzle width\nhigher bonds better\n0.0 - 1.0",
|
||||
|
||||
// FDM FIRST LAYER
|
||||
fl_menu: "first layer",
|
||||
fl_menu: "1st layer",
|
||||
fl_lahi_s: "layer height",
|
||||
fl_lahi_l: "height of each slice\nin millimeters\nshould be >= slice height",
|
||||
fl_rate_s: "shell speed",
|
||||
|
|
|
|||
Loading…
Reference in a new issue