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

reflow device selection and editing

Browse source
This commit is contained in:
Stewart Allen 2020-12-13 23:58:03 -05:00
commit fc8fc62297
5 changed files with 155 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

81
web/kiri/index.css
View file

@ -100,12 +100,6 @@ select {
background-color: rgba(255,255,255,0.5);
border-radius: 3px;
}
select option[local="1"] {
color: #55d;
}
select option[favorite="1"] {
font-weight: bold;
}
th, tr, td, span, div, label, button {
user-select: none;
}
@ -161,6 +155,9 @@ th, tr, td, label {
.j-end {
justify-content: flex-end;
}
.space-around {
justify-content: space-around;
}
.space-between {
justify-content: space-between;
}
@ -182,6 +179,9 @@ th, tr, td, label {
.mh0 {
min-height: 0;
}
.mh35 {
max-height: 35%;
}
.mh85 {
max-height: 85%;
}
@ -469,6 +469,13 @@ th, tr, td, label {
}
}
.dev-buttons {
margin: 5px 15px 0 15px;
}
.dev-buttons button {
margin-left: 2px;
margin-right: 2px;
}
.ext-buttons button {
justify-content: center;
align-items: center;
@ -587,6 +594,46 @@ th, tr, td, label {
}
#mod-setup {
height: 500px;
width: 700px;
padding-bottom: 5px;
}
#mod-setup .header {
text-align: center;
border-bottom: 1px solid rgba(150,130,200,0.5);
padding-bottom: 5px;
margin-bottom: 5px;
}
#mod-setup .header.sub {
padding-top: 10px;
}
#mod-setup .left {
width: 180px;
padding-right: 10px;
margin-right: 10px;
border-right: 1px solid #ddd;
}
#mod-setup .footer {
padding-top: 5px;
margin-top: 5px;
border-top: 1px solid rgba(150,130,200,0.5);
}
.devlist button {
margin: 1px;
padding: 2px;
border: 1px solid rgba(0,0,0,0);
border-radius: 0;
font-size: 11px;
font-family: sans-serif;
background-color: rgba(255,255,255,0.9);
text-align: left;
min-height: 1.5em;
}
.devlist button:hover {
background-color: rgba(200,200,200,0.9);
}
.devlist button.selected {
background-color: rgba(200,220,220,0.9);
border: 1px splid rgba(200,220,200,1);
}
#mod-print {
background-color: rgba(255,255,255,0.85);
@ -809,9 +856,12 @@ th, tr, td, label {
align-items: center;
background-color: rgba(255,255,255,0.75);
border-radius: 5px;
width: 100px;
margin: 5px;
}
.dev-type svg {
width: 60px;
height: 30px;
}
.dev-sel {
color: #033;
background-color: #bbb;
@ -845,29 +895,24 @@ th, tr, td, label {
}
.t-pad {
width: 5px;
height: 5px;
}
.t-pad2 {
width: 10px;
}
#devices {
width: 200px;
width: 225px;
}
#device {
width: 200px;
}
#gcode-edit {
width: 200px;
#device1, #device2 {
width: 225px;
}
#dev-gcode textarea {
font-family: monospace;
overflow: auto;
padding: 5px;
width: 100%;
}
#device-exp {
position: absolute;
left: 0;
z-index: 10;
}
#device-action, #tool-action {
margin-top: 5px;
}

71
web/kiri/index.html
View file

@ -247,35 +247,52 @@
<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 f-col">
<div class="f-row j-center">
<button id="mode-fdm" class="dev-type"><label>FDM</label></button>
<button id="mode-sla" class="dev-type"><label>SLA</label></button>
<button id="mode-cam" class="dev-type"><label>CNC</label></button>
<button id="mode-laser" class="dev-type"><label>LASER</label></button>
</div>
<div class="f-row mh0 grow">
<div id="devices" class="t-33 f-col"><select id="device-list" size="15" class="grow"></select></div>
<div class="t-pad"></div>
<div id="device" class="f-col t-body t-inset overy"></div>
<div class="t-pad"></div>
<div id="gcode-edit" class="t-body t-inset f-col">
<div id="dg" class="f-col t-body t-inset"></div>
<hr width="80%">
<div id="dev-gcode" class="grow overy"></div>
<div id="mod-setup" class="mdialog f-row">
<div class="f-col left a-stretch">
<label class="header">select device type</label>
<div class="f-col">
<table><tr>
<th><button id="mode-fdm" class="dev-type"><label>FDM</label></button></th>
<th><button id="mode-sla" class="dev-type"><label>SLA</label></button></th>
</tr><tr>
<th><button id="mode-cam" class="dev-type"><label>CNC</label></button></th>
<th><button id="mode-laser" class="dev-type"><label>LASER</label></button></th>
</tr></table>
</div>
<label class="header sub">standard devices</label>
<div class="f-col mh0 mh35 j-center a-stretch">
<div id="device-list" class="devlist f-col overy"></div>
</div>
<label class="header sub">my devices</label>
<div class="f-col grow">
<div id="device-my" class="devlist f-col grow overy"></div>
<div class="f-row footer">
<div class="grow"></div>
<button id="device-add">copy</button>
<button id="device-del">delete</button>
<button id="device-exp">export</button>
<div class="grow"></div>
</div>
</div>
</div>
<div id="device-action" class="f-row">
<button id="device-exp">export</button>
<div class="grow"></div>
<button id="device-add"><i class="fas fa-plus"></i></button>
<button id="device-del"><i class="fas fa-minus"></i></button>
<div class="t-pad2"></div>
<button id="device-favorites">favorites</button>
<button id="device-all">all</button>
<div class="t-pad2"></div>
<button id="device-save">save</button>
<div class="grow"></div>
<div class="f-col grow a-stretch">
<label class="header">details</label>
<div class="f-row">
<div id="device1" class="f-col t-body t-inset overy grow"></div>
<div class="t-pad"></div>
<div id="device2" class="f-col t-body t-inset overy grow"></div>
</div>
<div class="t-pad"></div>
<div id="gcode-edit" class="f-col grow">
<div id="dg" class="f-col t-body t-inset"></div>
<div class="t-pad"></div>
<div id="dev-gcode" class="grow"></div>
</div>
<div id="device-action" class="f-row footer">
<div class="grow"></div>
<button id="device-save">save</button>
<div class="grow"></div>
</div>
</div>
</div>
<div id="mod-files" class="mdialog f-col">

2
web/kiri/lang/en.js
View file

@ -11,7 +11,7 @@ kiri.lang['en-us'] = {
dv_gr_dev: "device",
dv_gr_ext: "extruder",
dv_gr_out: "output",
dv_gr_gco: "gcode",
dv_gr_gco: "gcode macros",
// DEVICE dialog (_s = label, _l = hover help)
dv_name_s: "name",