fix: image gallery toggle button should stay in place when toggling gallery

Author: abose

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -305,7 +305,8 @@ function RemoteFunctions(config = {}) {
             startEditing(element);
         }else if(LivePreviewView.getNodeMoreOptionsHandler(action)) {
             const handler = LivePreviewView.getNodeMoreOptionsHandler(action);
-            return handler && handler.handleClick && handler.handleClick(e, element);
+            return handler && handler.handleClick &&
+                handler.handleClick(e, element, _nodeMoreOptionsBox && _nodeMoreOptionsBox._shadow);
         }
     }
 

src/extensionsIntegrated/phoenix-pro/browser-context/image-gallery.js

@@ -40,8 +40,9 @@ function scrollImageToViewportIfRequired(element, imageGalleryElement) {
  * it shows the image ribbon gallery at the bottom of the live preview
  * @param {Event} event
  * @param {DOMElement} element - the HTML DOM element that was clicked (should be an image)
+ * @param {DOMElement} toolBoxShadow - the HTML DOM element that was clicked (should be an image)
  */
-function handleImageGalleryOptionClick(event, element) {
+function handleImageGalleryOptionClick(event, element, toolBoxShadow) {
     dismissImageRibbonGallery();
 
     if (imageGallerySelected) {
@@ -53,6 +54,19 @@ function handleImageGalleryOptionClick(event, element) {
     }
 
     handleImageGalleryStateChange();
+    event.preventDefault();
+    event.stopPropagation();
+    if(!toolBoxShadow || !toolBoxShadow.querySelector(".img-gallery-toggle")){
+        console.warn("No toolbox shadow div found to update image gallery state");
+        return true;
+    }
+    const imgGalleryIcon = toolBoxShadow.querySelector(".img-gallery-toggle");
+    if(imageGallerySelected) {
+        imgGalleryIcon.classList.add("selected");
+    } else {
+        imgGalleryIcon.classList.remove("selected");
+    }
+    return true;
 }
 
 /**
@@ -1239,7 +1253,7 @@ function handleDownloadEvent(eventType, data) {
 
 function renderImageGalleryIcon(element, shadow) {
     if (element && element.tagName.toLowerCase() === 'img') {
-        const selectedClass = imageGallerySelected ? 'class="selected"' : "";
+        const selectedClass = imageGallerySelected ? 'class="img-gallery-toggle selected"' : "img-gallery-toggle";
 
         return {
             listOrder: proConstants.TOOLBOX_ORDERING.IMAGE_GALLERY,