clean up draggables, gallery, and close buttons

public/css/toggle-dependent.css

@@ -328,9 +328,7 @@ body.movingUI .drawer-content,
 body.movingUI #expression-holder,
 body.movingUI .zoomed_avatar,
 body.movingUI .draggable,
-body.movingUI #floatingPrompt,
+body.movingUI #floatingPrompt {
-body.movingUI #groupMemberListPopout,
-body.movingUI #summaryExtensionPopout {
     resize: both;
 }
 

public/index.html

@@ -4781,6 +4781,7 @@
 
     <template id="generic_draggable_template">
         <div class="draggable">
+            <div class="dragTitle"></div>
             <div class="panelControlBar flex-container">
                 <div class="fa-solid fa-grip drag-grabber"></div>
                 <div class="fa-solid fa-circle-xmark dragClose"></div>
@@ -4838,4 +4839,4 @@
     </script>
 </body>
 
-</html>
+</html>

public/scripts/extensions/gallery/index.js

@@ -5,7 +5,7 @@ import {
     getRequestHeaders,
 } from "../../../script.js";
 import { selected_group } from "../../group-chats.js";
-import { loadFileToDocument } from "../../utils.js";
+import { loadFileToDocument, delay } from "../../utils.js";
 import { loadMovingUIState } from '../../power-user.js';
 import { dragElement } from '../../RossAscends-mods.js';
 import { registerSlashCommand } from "../../slash-commands.js";
@@ -109,6 +109,13 @@ async function initGallery(items, url) {
         let file = e.originalEvent.dataTransfer.files[0];
         uploadFile(file, url);  // Added url parameter to know where to upload
     });
+
+    //let images populate first
+    await delay(100)
+    //unset the height (which must be getting set by the gallery library at some point)
+    $("#dragGallery").css('height', 'unset');
+    //force a resize to make images display correctly
+    jQuery("#dragGallery").nanogallery2('resize');
 }
 
 /**
@@ -247,14 +254,16 @@ $(document).ready(function () {
  * The cloned element has its attributes set, a new child div appended, and is made visible on the body.
  * Additionally, it sets up the element to prevent dragging on its images.
  */
-function makeMovable(id="gallery"){
+function makeMovable(id = "gallery") {
 
     console.debug('making new container from template')
     const template = $('#generic_draggable_template').html();
     const newElement = $(template);
+    newElement.css('background-color', 'var(--SmartThemeBlurTintColor)');
     newElement.attr('forChar', id);
     newElement.attr('id', `${id}`);
     newElement.find('.drag-grabber').attr('id', `${id}header`);
+    newElement.find('.dragTitle').text('Image Gallery')
     //add a div for the gallery
     newElement.append(`<div id="dragGallery"></div>`);
     // add no-scrollbar class to this element
@@ -326,6 +335,8 @@ function makeDragImg(id, url) {
 
         // Ensure that the newly added element is displayed as block
         draggableElem.style.display = 'block';
+        //and has no padding unlike other non-zoomed-avatar draggables
+        draggableElem.style.padding = '0';
 
         // Add an id to the close button
         // If the close button exists, set related-id
@@ -375,11 +386,11 @@ function makeDragImg(id, url) {
  * @param {string} id - The ID to be sanitized.
  * @returns {string} - The sanitized ID.
  */
-function sanitizeHTMLId(id){
+function sanitizeHTMLId(id) {
     // Replace spaces and non-word characters
     id = id.replace(/\s+/g, '-')
-           .replace(/[^\x00-\x7F]/g, '-')
+        .replace(/[^\x00-\x7F]/g, '-')
-           .replace(/\W/g, '');
+        .replace(/\W/g, '');
 
     return id;
 }

public/scripts/extensions/memory/index.js

@@ -571,12 +571,13 @@ function doPopout(e) {
         const template = $('#zoomed_avatar_template').html();
         const controlBarHtml = `<div class="panelControlBar flex-container">
         <div id="summaryExtensionPopoutheader" class="fa-solid fa-grip drag-grabber hoverglow"></div>
-        <div id="summaryExtensionPopoutClose" class="fa-solid fa-circle-xmark hoverglow"></div>
+        <div id="summaryExtensionPopoutClose" class="fa-solid fa-circle-xmark hoverglow dragClose"></div>
     </div>`
         const newElement = $(template);
-        newElement.attr('id', 'summaryExtensionPopout');
+        newElement.attr('id', 'summaryExtensionPopout')
-        newElement.removeClass('zoomed_avatar')
+            .removeClass('zoomed_avatar')
-        newElement.empty()
+            .addClass('draggable')
+            .empty()
         const prevSummaryBoxContents = $('#memory_contents').val(); //copy summary box before emptying
         originalElement.empty();
         originalElement.html(`<div class="flex-container alignitemscenter justifyCenter wide100p"><small>Currently popped out</small></div>`)

public/scripts/group-chats.js

@@ -1555,11 +1555,14 @@ function doCurMemberListPopout() {
         <div id="groupMemberListPopoutClose" class="fa-solid fa-circle-xmark hoverglow"></div>
     </div>`
         const newElement = $(template);
-        newElement.attr('id', 'groupMemberListPopout');
-        newElement.removeClass('zoomed_avatar')
-        newElement.empty()
 
-        newElement.append(controlBarHtml).append(memberListClone)
+        newElement.attr('id', 'groupMemberListPopout')
+            .removeClass('zoomed_avatar')
+            .addClass('draggable')
+            .empty()
+            .append(controlBarHtml)
+            .append(memberListClone)
+
         $('body').append(newElement);
         loadMovingUIState();
         $("#groupMemberListPopout").fadeIn(250)

public/scripts/power-user.js

@@ -1413,12 +1413,14 @@ async function resetMovablePanels(type) {
         'floatingPrompt',
         'expression-holder',
         'groupMemberListPopout',
-        'summaryExtensionPopout'
+        'summaryExtensionPopout',
+        'gallery'
     ];
 
     const panelStyles = ['top', 'left', 'right', 'bottom', 'height', 'width', 'margin',];
 
     panelIds.forEach((id) => {
+        console.log(id)
         const panel = document.getElementById(id);
 
         if (panel) {

public/style.css

@@ -390,7 +390,7 @@ hr {
     display: inline-block;
     height: var(--bottomFormBlockSize);
     position: absolute;
-    border-bottom: 1px solid var(--SmartThemeBorderColor);
+    /* border-bottom: 1px solid var(--SmartThemeBorderColor); */
     box-shadow: 0 2px 20px 0 var(--black70a);
     backdrop-filter: blur(var(--SmartThemeBlurStrength));
     background-color: var(--SmartThemeBlurTintColor);
@@ -422,23 +422,25 @@ hr {
 
 .drag-grabber {
     position: absolute;
-    width: 20px !important;
+    /*     width: 20px !important;
-    height: 20px !important;
+    height: 20px !important; */
+    margin: 0px 5px;
     color: var(--SmartThemeBodyColor);
     z-index: 2000;
     text-align: center;
-    border-radius: 5px;
+    /* border-radius: 5px; */
     vertical-align: middle;
     right: 0px;
     top: 0px;
     opacity: 0.5;
     cursor: grab;
-    border: 1px solid var(--SmartThemeBorderColor);
+    /* border: 1px solid var(--SmartThemeBorderColor); */
     cursor: -moz-grab;
     cursor: -webkit-grab;
     display: none;
     filter: drop-shadow(0px 0px 0px black);
     transition: all 250ms;
+    font-size: calc(var(--mainFontSize)*1.3);
 }
 
 .drag-grabber:hover {
@@ -481,9 +483,9 @@ hr {
     overflow-y: scroll;
     display: flex;
     bottom: 10px;
-    border-bottom: 1px solid var(--SmartThemeBorderColor);
+    /*     border-bottom: 1px solid var(--SmartThemeBorderColor);
     border-left: 1px solid var(--SmartThemeBorderColor);
-    border-right: 1px solid var(--SmartThemeBorderColor);
+    border-right: 1px solid var(--SmartThemeBorderColor); */
     backdrop-filter: blur(var(--SmartThemeBlurStrength));
     background-color: var(--SmartThemeChatTintColor);
     -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
@@ -960,10 +962,10 @@ select {
 #character_cross,
 #select_chat_cross {
     position: absolute;
-    right: 15px;
+    right: 5px;
-    top: 15px;
+    top: 5px;
-    width: 20px;
+    /* width: 20px;
-    height: 20px;
+    height: 20px; */
     cursor: pointer;
     opacity: 0.6;
     font-size: 24px;
@@ -1252,9 +1254,11 @@ input[type="file"] {
 .dragClose {
     height: 15px;
     aspect-ratio: 1 / 1;
-    font-size: 20px;
+    font-size: calc(var(--mainFontSize)*1.3);
     opacity: 0.5;
     transition: all 250ms;
+    filter: drop-shadow(0px 0px 2px black);
+    text-shadow: none;
 }
 
 .dragClose:hover {
@@ -3410,51 +3414,38 @@ a {
     color: var(--SmartThemeBodyColor);
 }
 
-.zoomed_avatar,
-#groupMemberListPopout,
-#summaryExtensionPopout {
-    min-width: 100px;
-    min-height: 100px;
-    max-height: 90vh;
-    max-width: 90vh;
-    width: clamp(100px, 400px, calc((100vw - var(--sheldWidth)) /2));
-    /* width: calc((100vw - var(--sheldWidth)) /2); */
-    position: absolute;
-    padding: 0;
-    /* filter: drop-shadow(2px 2px 2px var(--grey7070a)); */
-    box-shadow: 1px 2px 2px var(--black30a);
-    z-index: 29;
-    overflow: hidden;
-    display: none;
-    bottom: 0;
-    border-radius: 10px;
-}
-
-.zoomed_avatar {
-    aspect-ratio: 2 / 3;
-}
-
-#groupMemberListPopout,
-#summaryExtensionPopout {
-    border: 1px solid var(--SmartThemeBorderColor);
-    padding: 5px;
-}
-
 .draggable {
     min-width: 100px;
     min-height: 100px;
     max-height: 90vh;
-    max-width: 90vh;
+    max-width: 90vw;
-    width: clamp(100px, 400px, calc((100vw - var(--sheldWidth)) /2));
+    width: calc((100vw - var(--sheldWidth)) /2);
     position: absolute;
     padding: 0;
-    filter: drop-shadow(2px 2px 2px var(--grey7070a));
+    filter: drop-shadow(1px 1px 2px var(--black50a));
     z-index: 29;
     overflow: hidden;
     display: none;
     bottom: 0;
-    aspect-ratio: 2 / 3;
     border-radius: 10px;
+    border: 1px solid var(--SmartThemeBorderColor);
+    aspect-ratio: unset;
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
+    background-color: var(--SmartThemeBlurTintColor);
+    padding: 5px;
+}
+
+.zoomed_avatar {
+    aspect-ratio: 2 / 3;
+    padding: 0;
+    border: 0;
+}
+
+.zoomed_avatar img {
+    height: 100%;
+    width: 100%;
+    vertical-align: bottom;
+    object-fit: cover;
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */
@@ -3478,13 +3469,13 @@ a {
     transition: all 250ms;
 }
 
-#groupMemberListPopout,
+/* #groupMemberListPopout,
 #summaryExtensionPopout {
     aspect-ratio: unset;
     backdrop-filter: blur(var(--SmartThemeBlurStrength));
     background-color: var(--SmartThemeBlurTintColor);
     overflow: auto;
-}
+} */
 
 #groupMemberListPopout {
     padding: 0;
@@ -3498,13 +3489,7 @@ a {
 
 }
 
-.zoomed_avatar img {
+
-    border-radius: 20px;
-    height: 100%;
-    width: 100%;
-    vertical-align: bottom;
-    object-fit: cover;
-}
 
 .timestamp {
     font-size: calc(var(--mainFontSize) * 0.7);
@@ -3643,4 +3628,4 @@ a {
         height: 100vh;
         z-index: 9999;
     }
-}
+}