bind tictacs and closers

src/kiri/init.js

@@ -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");

web/kiri/index.css

@@ -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;
     }

web/kiri/index.html

@@ -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="float-tools-title" class="title mover" target="float-tools">
-                    <div id="lt-rotate" xclass="lt-menu">
+                        <label class="grow">title bar</label>
-                        <div lkt="rotate"><i class="fas fa-sync-alt"></i></div>
+                        <div id="float-tools-close" class="closer" target="float-tools">
-                        <div id="pop-rotate" class="pop-lcol f-row russo">
+                            <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="ft-scale" class="grow f-row">
-                    <div id="lt-scale" xclass="lt-menu">
+                            <div class="f-col">
-                        <div lkt="scale"><i class="fas fa-expand"></i></div>
-                        <div id="pop-scale" class="pop-lcol f-row russo">
-                            <div>
                                 <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">