clean up draggables, gallery, and close buttons

2023-10-14 00:29:41 +09:00 · 2023-10-14 00:29:41 +09:00 · 19ff0fd618
parent d82eb373a6
commit 19ff0fd618
7 changed files with 75 additions and 74 deletions
--- a/public/css/toggle-dependent.css
+++ b/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 #groupMemberListPopout,
-body.movingUI #summaryExtensionPopout {
+body.movingUI #floatingPrompt {
    resize: both;
 }

--- a/public/index.html
+++ b/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>
--- a/public/scripts/extensions/gallery/index.js
+++ b/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(/\W/g, '');
+        .replace(/[^\x00-\x7F]/g, '-')
+        .replace(/\W/g, '');

    return id;
 }
--- a/public/scripts/extensions/memory/index.js
+++ b/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.removeClass('zoomed_avatar')
-        newElement.empty()
+        newElement.attr('id', 'summaryExtensionPopout')
+            .removeClass('zoomed_avatar')
+            .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>`)
--- a/public/scripts/group-chats.js
+++ b/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)
--- a/public/scripts/power-user.js
+++ b/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) {
--- a/public/style.css
+++ b/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;
-    height: 20px !important;
+    /*     width: 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;
-    top: 15px;
-    width: 20px;
-    height: 20px;
+    right: 5px;
+    top: 5px;
+    /* width: 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;
-    width: clamp(100px, 400px, calc((100vw - var(--sheldWidth)) /2));
+    max-width: 90vw;
+    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;
    }
-}
+}