WIP: element dragging & resizing

- currently enabled on #sheld when window is over 1000px wide.
- click top right gripper dots to drag sheld around
- resize with lower right size dragger.
- snaps to static view and hides grabbers when windows under 1000px
- position not remembered across sessions..yet
- updated styles on dice, options, and send_but

public/index.html

@@ -1814,6 +1814,8 @@
         <div class="typing_indicator"><span class="typing_indicator_name">CHAR</span> is typing</div>
     </div>
     <div id="sheld">
+        <div id="sheldheader" class="fa-solid fa-grip"></div>
+        <div class="pull-tab"></div>
         <div id="chat">
         </div>
         <div id="form_sheld">

public/scripts/RossAscends-mods.js

@@ -304,6 +304,54 @@ function OpenNavPanels() {
     }
 }
 
+// draggable sheld
+
+// Make the DIV element draggable:
+dragElement(document.getElementById("sheld"));
+
+function dragElement(elmnt) {
+    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+    if (document.getElementById(elmnt.id + "header")) { //ex: id="sheldheader"
+        // if present, the header is where you move the DIV from, but this overrides everything else:
+        document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
+    } else {
+        // otherwise, move the DIV from anywhere inside the DIV, b:
+        elmnt.onmousedown = dragMouseDown;
+    }
+
+    function dragMouseDown(e) {
+        e = e || window.event;
+        e.preventDefault();
+        // get the mouse cursor position at startup:
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        document.onmouseup = closeDragElement;
+        // call a function whenever the cursor moves:
+        document.onmousemove = elementDrag;
+    }
+
+    function elementDrag(e) {
+        e = e || window.event;
+        e.preventDefault();
+        // calculate the new cursor position:
+        pos1 = pos3 - e.clientX;
+        pos2 = pos4 - e.clientY;
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        // set the element's new position:
+        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
+        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+    }
+
+    function closeDragElement() {
+        // stop moving when mouse button is released:
+        document.onmouseup = null;
+        document.onmousemove = null;
+    }
+}
+
+// ---------------------------------------------------
+
 $("document").ready(function () {
     // initial status check
     setTimeout(RA_checkOnlineStatus, 100);

public/scripts/extensions/dice/style.css

@@ -8,7 +8,7 @@
     border: none;
     cursor: pointer;
     transition: 0.3s;
-    filter: brightness(0.7);
+    opacity: 0.7;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -17,6 +17,7 @@
 
 #roll_dice:hover {
     opacity: 1;
+    filter: brightness(1.2);
 }
 
 #dice_dropdown {

public/scripts/extensions/expressions/index.js

@@ -273,7 +273,7 @@ function onClickExpressionImage() {
 
 (function () {
     function addExpressionImage() {
-        const html = `<div class="expression-holder"><img class="expression"></div>`;
+        const html = `<div id="expression-holder" class="expression-holder"><img class="expression"></div>`;
         $('body').append(html);
     }
     function addSettings() {

public/style.css

@@ -206,16 +206,52 @@ code {
     overflow-x: hidden;
     max-width: 800px;
     position: absolute;
-    left: 0;
+    left: calc((100svw - var(--sheldWidth))/2);
-    right: 0;
     top: 41px;
-    margin: 0 auto;
+    /* margin: 0 auto; */
     z-index: 2;
+    resize: both;
+}
 
+#sheldheader {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    color: var(--SmartThemeBodyColor);
+    z-index: 2000;
+    text-align: center;
+    border-radius: 5px;
+    vertical-align: middle;
+    right: 5px;
+    top: 5px;
+    opacity: 0.5;
+    cursor: grab;
+    border: 1px solid var(--white30a);
+    cursor: -moz-grab;
+    cursor: -webkit-grab;
+}
+
+#sheldheader:active {
+    cursor: grabbing;
+    cursor: -moz-grabbing;
+    cursor: -webkit-grabbing;
+}
+
+.pull-tab {
+    height: 10px;
+    width: 10px;
+    background-color: var(--SmartThemeEmColor);
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    pointer-events: none;
+    z-index: 2001;
 }
 
 #chat {
     /* margin-top: 5px; */
+    max-height: calc(100vh - 42px);
+
     overflow-x: hidden;
     padding-bottom: 0;
     overflow-y: scroll;
@@ -280,15 +316,12 @@ code {
     border: none;
     cursor: pointer;
     transition: 0.3s;
-    filter: brightness(0.7);
+    opacity: 0.7;
     order: 99999;
     align-items: center;
     justify-content: center;
 }
 
-#send_but:hover {
-    filter: brightness(150%);
-}
 
 #loading_mes {
     display: none;
@@ -302,16 +335,19 @@ code {
 }
 
 #options_button {
+    width: 40px;
+    height: 40px;
+    margin: 0;
+    outline: none;
+    border: none;
     position: relative;
     display: inline;
-    color: var(--white50a);
+    opacity: 0.7;
     cursor: pointer;
     z-index: 2001;
-    -webkit-transition: color .25s ease-in-out;
-    -moz-transition: color .25s ease-in-out;
-    transition: color .25s ease-in-out;
     padding-left: 10px;
     padding-top: 0;
+    transition: 0.3s;
     font-size: 30px;
 }
 
@@ -321,8 +357,10 @@ code {
     font-weight: 400;
 }
 
-#options_button:hover {
+#options_button:hover,
-    color: var(--white100);
+#send_but:hover {
+    opacity: 1;
+    filter: brightness(1.2);
 }
 
 #options {
@@ -3148,7 +3186,8 @@ toolcool-color-picker {
     flex-wrap: wrap;
 }
 
-.reverse_proxy_warning, .neutral_warning {
+.reverse_proxy_warning,
+.neutral_warning {
     color: rgba(255, 0, 0, 0.5)
 }
 
@@ -3223,8 +3262,8 @@ toolcool-color-picker {
     #sheld,
     #character_popup,
     #world_popup {
-        height: calc(100svh - 45px);
+        height: calc(100svh - 45px) !important;
-        width: 100%;
+        width: 100% !important;
         margin: 0 auto;
     }
 
@@ -3243,6 +3282,20 @@ toolcool-color-picker {
         align-content: start;
     }
 
+    #sheld {
+        resize: none;
+
+        left: 0 !important;
+        top: 42px !important;
+
+    }
+
+    #sheldheader,
+    .pull-tab {
+        display: none;
+
+    }
+
     #sheld,
     #character_popup {
         overflow-y: hidden;
@@ -3390,7 +3443,7 @@ body.waifuMode #top-bar {
 }
 
 body.waifuMode #sheld {
-    display: grid;
+    /*     display: grid;
     grid-template-rows: 30vh min-content;
     height: calc(100svh - 42px);
     overflow-x: hidden;
@@ -3401,7 +3454,12 @@ body.waifuMode #sheld {
     top: 41px;
     margin: 0 auto;
     z-index: 2;
+    align-content: end; */
+
     align-content: end;
+    height: 30vh;
+    top: unset;
+    bottom: 0;
 }
 
 body.waifuMode #chat {