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 tictacs and closers

Browse source
This commit is contained in:
Stewart Allen 2021-10-08 00:22:56 -04:00
commit 3ca563e1a3
3 changed files with 94 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/kiri/init.js
View file

@ -2613,6 +2613,30 @@
// show topline separator when iframed
// try { if (WIN.self !== WIN.top) $('top-sep').style.display = 'flex' } catch (e) { }
// bind movable objects and panel tictacs
let groups = {};
for (let tt of [...document.getElementsByClassName('tictac')]) {
let sid = tt.getAttribute('select');
let gid = tt.getAttribute('group') || 'default';
let grp = groups[gid] = groups[gid] || [];
let target = $(sid);
target.style.display = 'none';
grp.push(target);
tt.onclick = () => {
for (let p of grp) {
p.style.display = p === target ? 'flex' : 'none';
}
};
}
for (let tt of [...document.getElementsByClassName('closer')]) {
let tid = tt.getAttribute('target');
let target = $(tid);
target.style.display = 'none';
tt.onclick = () => {
target.style.display = 'none';
};
}
// warn users they are running a beta release
if (KIRI.beta && KIRI.beta > 0 && SDB.kiri_beta != KIRI.beta) {
API.show.alert("this is a beta / development release");

45
web/kiri/index.css
View file

@ -429,12 +429,53 @@ th, tr, td, label {
background-image: var(--gradbar);
}
.movable {
margin: 5px;
}
.movable .title {
padding: 5px;
background-color: rgba(200,200,200,0.9);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.movable .body {
padding-right: 5px;
padding-bottom: 2px;
background-color: rgba(245,245,245,0.9);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.mover {
}
.closer {
margin-left: 5px;
}
.tictac {
margin: 2px 2px 0 0;
padding: 4px;
border-radius: 3px;
border: 1px solid white;
background-color: rgba(255,255,255,0.7);
}
.tictac:hover {
border: 1px solid #ccc;
}
#float-tools {
display: none;
position: absolute;
left: 100%;
}
#lt-rotate, #lt-scale {
display: none;
}
#lt-top {
height: 10px;
border-top-right-radius: 10px;
@ -529,7 +570,7 @@ th, tr, td, label {
.lt-active .hoverpop {
display: flex;
}
@media only screen and (max-height : 800px) {
@media only screen and (max-height : 750px) {
.lt-menu, .pop-lcol {
font-size: 16px !important;
}

40
web/kiri/index.html
View file

@ -78,12 +78,20 @@
<i class="fas fa-times-circle"></i>
</div>
<div id="lt-top">
<div id="float-tools" class="f-col">
<div id="float-tools" class="f-col movable">
<div id="float-tool-bar" class="floater" target="float-tools">tools</div>
<div id="lt-rotate" xclass="lt-menu">
<div lkt="rotate"><i class="fas fa-sync-alt"></i></div>
<div id="pop-rotate" class="pop-lcol f-row russo">
<div id="float-tools-title" class="title mover" target="float-tools">
<label class="grow">title bar</label>
<div id="float-tools-close" class="closer" target="float-tools">
<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>
<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>
@ -108,26 +116,23 @@
</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="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>
<div id="lt-scale" xclass="lt-menu">
<div lkt="scale"><i class="fas fa-expand"></i></div>
<div id="pop-scale" class="pop-lcol f-row russo">
<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>
<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>
<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>
@ -141,6 +146,15 @@
</div>
</div>
<div id="lt-rotate" xclass="lt-menu">
<div lkt="rotate"><i class="fas fa-sync-alt"></i></div>
<div id="pop-rotate" class="pop-lcol f-row russo"></div>
</div>
<div id="lt-scale" xclass="lt-menu">
<div lkt="scale"><i class="fas fa-expand"></i></div>
<div id="pop-scale" class="pop-lcol f-row russo"></div>
</div>
</div>
</div>
<div id="lt-setup" class="lt-menu lt-active">