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

complete basic scale/rotate. add 'w' hotkey

Browse source
This commit is contained in:
Stewart Allen 2021-10-08 14:55:46 -04:00
commit 9491aa00e8
3 changed files with 212 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

130
web/kiri/index.css
View file

@ -156,7 +156,10 @@ th, tr, td, label {
.noshow {
display: none;
}
.f-row {
.grid {
display: grid;
}
.frow {
flex-direction: row;
}
.f-col {
@ -201,6 +204,11 @@ th, tr, td, label {
.center {
text-align: center;
}
.middle {
display: flex;
align-items: center;
justify-content: center;
}
.t-just {
text-align: justify;
}
@ -434,25 +442,36 @@ th, tr, td, label {
}
.movable .title {
padding: 5px;
background-color: rgba(200,200,200,0.9);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: white;
padding: 2px 3px 1px 3px;
background-color: var(--main-color);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
font-size: smaller;
text-align: center;
}
.movable .body {
padding-right: 5px;
padding-bottom: 2px;
margin: 0;
padding: 0 5px 0 0;
background-color: rgba(245,245,245,0.9);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.mover {
.movable .footer {
height: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background-color: var(--main-color);
}
.closer {
margin-left: 5px;
position: absolute;
top: 3px;
right: 6px;
z-index: 200;
}
.closer:hover {
color: #555;
}
.tictac {
@ -461,6 +480,13 @@ th, tr, td, label {
border-radius: 3px;
border: 1px solid white;
background-color: rgba(255,255,255,0.7);
display: flex;
align-items: center;
justify-content: center;
}
.tictac.selected {
background-color: var(--main-color);
color: #fff;
}
.tictac:hover {
@ -469,11 +495,63 @@ th, tr, td, label {
#float-tools {
position: absolute;
margin: 0 0 0 5px;
top: 0;
left: 100%;
z-index: 16;
}
#float-tools button {
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
}
#lt-rotate, #lt-scale {
display: none;
#float-tools .menu {
margin-right: 5px;
border-right: 3px solid var(--main-color);
}
#ft-rotate {
grid-gap: 2px;
grid-template-rows: auto auto auto 1fr;
grid-template-columns: auto auto auto auto;
}
#ft-rotate label, #ft-rotate svg {
text-align: center;
}
#ft-rotate > div {
display: flex;
align-items: center;
justify-content: center;
}
#ft-rotate .buttons {
grid-column: 1/4;
align-items: stretch;
min-width: 150px;
}
#ft-scale {
grid-gap: 2px;
grid-template-rows: auto auto auto 1fr;
grid-template-columns: auto auto auto 1fr;
}
#ft-scale label {
text-align: center;
flex-grow: 1;
}
#ft-scale button {
grid-column: 1/4;
margin-left: 0;
margin-right: 0;
}
#ft-mesh, #ft-select {
min-width: 200px;
}
#lock_x, #lock_y, #lock_z {
position: absolute;
right: 2px;
top: 7px;
}
#lt-top {
@ -616,29 +694,6 @@ th, tr, td, label {
.txt-sel button, .btn-sel {
background-color: var(--highlight);
}
#pop-rotate input.value, #pop-scale input.value {
width: 90%;
}
#pop-rotate label {
padding: 3px;
}
#pop-rotate svg {
padding: 3px;
font-size: 20px;
border-radius: 3px;
border: 1px solid rgba(0,0,0,0);
}
#pop-rotate svg:hover {
color: #345;
font-size: 20px;
background-color: rgba(255,255,255,0.5);
border: 1px solid #aaa;
}
#lock_x, #lock_y, #lock_z {
position: absolute;
left: 2px;
top: 7px;
}
#end {
left: 0;
@ -761,8 +816,6 @@ th, tr, td, label {
position: absolute;
right: 0;
top: 0;
xtransform: translateX(-100%);
xtransform: translateY(-50%);
}
#progress {
@ -1649,7 +1702,6 @@ th, tr, td, label {
}
#lab-axis, #lab-scale {
padding: 0 6px 0 6px;
border-radius: 3px;
}
#lab-axis:hover, #lab-scale:hover {

103
web/kiri/index.html
View file

@ -81,70 +81,53 @@
<div id="float-tools" class="f-col movable">
<div id="float-tools-title" class="title mover">
<label class="grow">title bar</label>
<div id="float-tools-close" class="closer">
<i class="fas fa-times"></i>
</div>
<label id="ft-label" class="grow">title bar</label>
<div id="float-tools-close" class="closer"><i class="fas fa-times"></i></div>
</div>
<div class="body f-row">
<div class="f-col">
<div lkt="rotate" class="tictac" select="ft-rotate"><i class="fas fa-sync-alt"></i></div>
<div lkt="scale" class="tictac" select="ft-scale"><i class="fas fa-expand"></i></div>
<div class="f-col menu">
<div lkt="rotate" class="tictac" select="ft-rotate" label="ft-label"><i class="fas fa-sync-alt"></i></div>
<div lkt="scale" class="tictac" select="ft-scale" label="ft-label"><i class="fas fa-expand"></i></div>
<div lkt="mesh" class="tictac" select="ft-mesh" label="ft-label"><i class="fas fa-dice-d20"></i></div>
<div lkt="select" class="tictac" select="ft-select" label="ft-label"><i class="fas fa-mouse-pointer"></i></div>
</div>
<div id="ft-rotate" class="grow f-col">
<div>
<div class="grow a-center">
<i id="rot_x_lt" class="fas fa-chevron-left"></i>
<label>X</label>
<i id="rot_x_gt" class="fas fa-chevron-right"></i>
</div>
<input id="rot_x" class="value center" size="5"/ value="0">
</div>
<div>
<div class="grow a-center">
<i id="rot_y_lt" class="fas fa-chevron-left"></i>
<label>Y</label>
<i id="rot_y_gt" class="fas fa-chevron-right"></i>
</div>
<input id="rot_y" class="value center" size="5"/ value="0">
</div>
<div>
<div class="grow a-center">
<i id="rot_z_lt" class="fas fa-chevron-left"></i>
<label>Z</label>
<i id="rot_z_gt" class="fas fa-chevron-right"></i>
</div>
<input id="rot_z" class="value center" size="5"/ value="0">
</div>
<div id="lay-flat" class="f-col j-center center">lay flat</div>
<div id="unrotate" class="f-col j-center" lk="reset">reset</div>
</div>
<div id="ft-scale" class="grow f-row">
<div class="f-col">
<input id="lock_x" type="checkbox" checked/>
<div><label>X</label></div>
<div><input id="size_x" xsize="8" class="value"/></div>
<div><input id="scale_x" xsize="8" class="value" value="1"/></div>
</div>
<div class="f-col">
<input id="lock_y" type="checkbox" checked/>
<div><label>Y</label></div>
<div><input id="size_y" xsize="8" class="value"/></div>
<div><input id="scale_y" xsize="8" class="value" value="1"/></div>
</div>
<div class="f-col">
<input id="lock_z" type="checkbox" checked/>
<div><label>Z</label></div>
<div><input id="size_z" xsize="8" class="value"/></div>
<div><input id="scale_z" xsize="8" class="value" value="1"/></div>
</div>
<div class="f-col j-center">
<div><label id="lab-axis" lk="axis">axis</label></div>
<div><label id="lab-size" lk="size">size</label></div>
<div><label id="lab-scale" lk="scale">scale</label></div>
<div id="ft-rotate" class="grow grid">
<div><i id="rot_x_lt" class="fas fa-chevron-left"></i></div>
<label>X</label>
<div><i id="rot_x_gt" class="fas fa-chevron-right"></i></div>
<input id="rot_x" class="value center" size="6" value="0">
<div><i id="rot_y_lt" class="fas fa-chevron-left"></i></div>
<label>Y</label>
<div><i id="rot_y_gt" class="fas fa-chevron-right"></i></div>
<input id="rot_y" class="value center" size="6" value="0">
<div><i id="rot_z_lt" class="fas fa-chevron-left"></i></div>
<label>Z</label>
<div><i id="rot_z_gt" class="fas fa-chevron-right"></i></div>
<input id="rot_z" class="value center" size="6" value="0">
<div class="buttons f-row">
<!-- <button id="lay-flat" class="grow">lay flat</button> -->
<button id="unrotate" class="grow" lk="reset">reset</button>
</div>
</div>
<div id="ft-scale" class="grow grid">
<div><label>X</label><input id="lock_x" type="checkbox" checked/></div>
<div><label>Y</label><input id="lock_y" type="checkbox" checked/></div>
<div><label>Z</label><input id="lock_z" type="checkbox" checked/></div>
<div><label id="lab-axis" lk="axis">axis</label></div>
<div><input id="size_x" size="8" class="value"/></div>
<div><input id="size_y" size="8" class="value"/></div>
<div><input id="size_z" size="8" class="value"/></div>
<div><label id="lab-size" lk="size">size</label></div>
<div><input id="scale_x" size="8" class="value" value="1"/></div>
<div><input id="scale_y" size="8" class="value" value="1"/></div>
<div><input id="scale_z" size="8" class="value" value="1"/></div>
<div><label id="lab-scale" lk="scale">scale</label></div>
<button id="scale-reset" class="gr4">reset</button>
</div>
<div id="ft-mesh" class="grow middle">coming soon</div>
<div id="ft-select" class="grow middle">coming soon</div>
</div>
<div class="footer"></div>
</div>
</div>
<div id="lt-setup" class="lt-menu lt-active">
@ -254,11 +237,11 @@
<i class="fas fa-expand"></i>
<label lk="scale">scale</label>
</div>
<div class="grow a-center">
<div id="tool-mesh" class="grow a-center">
<i class="fas fa-dice-d20"></i>
<label lk="mesh">mesh</label>
</div>
<div class="grow a-center">
<div id="tool-select" class="grow a-center">
<i class="fas fa-mouse-pointer"></i>
<label lk="select">select</label>
</div>