From 7c5f6be823ba3a8d91d047d54b324af3498435cc Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Tue, 18 Apr 2023 04:34:48 +0900
Subject: [PATCH] - smoother drag bounces - z-index removed for drawer icons -
 draggables can go to Y=0

---
 public/index.html                  | 16 ++++++-------
 public/scripts/RossAscends-mods.js | 37 ++++++++++++++++--------------
 public/style.css                   |  6 +++--
 3 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/public/index.html b/public/index.html
index 6b19904d4..9d4d9da9b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -63,7 +63,7 @@
     <div id="top-settings-holder">
         <!-- background selection menu -->
 
-        <div id="ai-config-button" class="drawer" style="z-index:3002;">
+        <div id="ai-config-button" class="drawer">
             <div class="drawer-toggle drawer-header">
                 <div id="leftNavDrawerIcon" class="drawer-icon fa-solid fa-sliders  closedIcon" title="AI Response Configuration"></div>
             </div>
@@ -800,7 +800,7 @@
             </div>
         </div>
 
-        <div id="sys-settings-button" class="drawer" style="z-index:3001;">
+        <div id="sys-settings-button" class="drawer">
             <div class="drawer-toggle drawer-header">
                 <div id="API-status-top" class="drawer-icon fa-solid fa-plug-circle-exclamation  closedIcon" title="API Connections"></div>
             </div>
@@ -968,7 +968,7 @@
             </div>
         </div>
 
-        <div id="advanced-formatting-button" class="drawer" style="z-index:3005;">
+        <div id="advanced-formatting-button" class="drawer">
             <div class="drawer-toggle">
                 <div class="drawer-icon fa-solid fa-font  closedIcon" title="AI Reponse Formatting"></div>
             </div>
@@ -1080,7 +1080,7 @@
             </div>
         </div>
 
-        <div id="WI-SP-button" class="drawer" style="z-index:3003;">
+        <div id="WI-SP-button" class="drawer">
             <div class="drawer-toggle drawer-header">
                 <div class="drawer-icon fa-solid fa-book-atlas closedIcon " title="World Info & Soft Prompts"></div>
             </div>
@@ -1132,7 +1132,7 @@
             </div>
         </div>
 
-        <div id="user-settings-button" class="drawer" style="z-index:3004;">
+        <div id="user-settings-button" class="drawer">
             <div class="drawer-toggle">
                 <div class="drawer-icon fa-solid fa-face-smile closedIcon" title="User Settings"></div>
             </div>
@@ -1301,7 +1301,7 @@
             </div>
         </div>
 
-        <div id="logo_block" class="drawer" style="z-index:3001;" title="Change Background Image">
+        <div id="logo_block" class="drawer" title="Change Background Image">
             <div id="site_logo" class="drawer-toggle drawer-header">
                 <div class="drawer-icon fa-solid fa-panorama  closedIcon"></div>
             </div>
@@ -1319,7 +1319,7 @@
             </div>
         </div>
 
-        <div id="extensions-settings-button" class="drawer" style="z-index:3004;">
+        <div id="extensions-settings-button" class="drawer">
             <div class="drawer-toggle">
                 <div class="drawer-icon fa-solid fa-cubes  closedIcon" title="Extensions"></div>
             </div>
@@ -1355,7 +1355,7 @@
             </div>
         </div>
 
-        <div id="rightNavHolder" class="drawer" style="z-index:3001;">
+        <div id="rightNavHolder" class="drawer">
             <div id="unimportantYes" class="drawer-toggle drawer-header">
                 <div id="rightNavDrawerIcon" class="drawer-icon fa-solid fa-id-card  closedIcon" title="Character Management">
                 </div>
diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js
index ae9259403..93e1069ee 100644
--- a/public/scripts/RossAscends-mods.js
+++ b/public/scripts/RossAscends-mods.js
@@ -364,24 +364,27 @@ function dragElement(elmnt) {
 
         //fix over/underflows:
 
+        setTimeout(function () {
+            if (elmnt.offsetTop - pos2 <= 0) {
+                //prevent going out of window top + 42px barrier for TopBar (can hide grabber)
+                elmnt.style.top = "0px";
+            } else if (elmnt.offsetLeft - pos1 <= 0) {
+                //prevent moving out of window left
+                elmnt.style.left = "0px";
+            } else if (maxX >= winWidth) {
+                //bounce off right
+                elmnt.style.left = elmnt.offsetLeft - 10 + "px";
+            } else if (maxY >= winHeight) {
+                //bounce off bottom
+                elmnt.style.top = elmnt.offsetTop - 10 + "px";
+            } else {
+                // if no problems, set element's new position
 
-        if (elmnt.offsetTop - pos2 <= 42) {
-            //prevent going out of window top + 42px barrier for TopBar (can hide grabber)
-            elmnt.style.top = "42px";
-        } else if (elmnt.offsetLeft - pos1 <= 0) {
-            //prevent moving out of window left
-            elmnt.style.left = "0px";
-        } else if (maxX >= winWidth) {
-            //bounce off right
-            elmnt.style.left = elmnt.offsetLeft - 20 + "px";
-        } else if (maxY >= winHeight) {
-            //bounce off bottom
-            elmnt.style.top = elmnt.offsetTop - 20 + "px";
-        } else {
-            // if no problems, set element's new position
-            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
-            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
-        }
+                elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+                elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
+
+            }
+        }, 50)
 
         /* console.log("left/top: " + (elmnt.offsetLeft - pos1) + "/" + (elmnt.offsetTop - pos2) +
             ", win: " + winWidth + "/" + winHeight +
diff --git a/public/style.css b/public/style.css
index e7554b23b..2f15c33c5 100644
--- a/public/style.css
+++ b/public/style.css
@@ -157,7 +157,8 @@ code {
     line-height: var(--mainFontSize);
 }
 
-#bg1, #bg_custom {
+#bg1,
+#bg_custom {
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;
@@ -2923,6 +2924,7 @@ label[for="extensions_autoconnect"] {
     display: flex;
     flex-flow: column;
     width: 100%;
+    /* z-index: 3001; */
 
 }
 
@@ -3002,7 +3004,7 @@ label[for="extensions_autoconnect"] {
     backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
     -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
     resize: both;
-    z-index: 9999;
+    z-index: 9999 !important;
 }
 
 .fillRight,