feat: move image gallery inside more options box

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -252,6 +252,18 @@ function RemoteFunctions(config = {}) {
         _aiPromptBox = new AIPromptBox(element); // create a new one
     }
 
+    /**
+     * This function gets called when the image gallery button is clicked
+     * 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)
+     */
+    function _handleImageGalleryOptionClick(event, element) {
+        if (!_imageRibbonGallery && shouldShowImageRibbon()) {
+            _imageRibbonGallery = new ImageRibbonGallery(element);
+        }
+    }
+
     /**
      * This function gets called when the delete button is clicked
      * it sends a message to the editor using postMessage to delete the element from the source code
@@ -339,6 +351,8 @@ function RemoteFunctions(config = {}) {
             _handleDeleteOptionClick(e, element);
         } else if (action === "ai") {
             _handleAIOptionClick(e, element);
+        } else if (action === "image-gallery") {
+            _handleImageGalleryOptionClick(e, element);
         }
     }
 
@@ -1257,6 +1271,13 @@ function RemoteFunctions(config = {}) {
                   <path d="M6 7V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h3v2h-2l-1.5 12.5a2 2 0 0
                   1-2 1.5H8.5a2 2 0 0 1-2-1.5L5 9H3V7h3zm2 0h8V5H8v2z"/>
                 </svg>
+              `,
+
+                imageGallery: `
+                <svg viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+                  <path d="M1 3v16h2V5h16V3H1z"/>
+                </svg>
               `
             };
 
@@ -1267,6 +1288,13 @@ function RemoteFunctions(config = {}) {
                     ${ICONS.ai}
                 </span>`;
 
+            // if its an image element, we show the image gallery icon
+            if (this.element && this.element.tagName.toLowerCase() === 'img') {
+                content += `<span data-action="image-gallery" title="${config.strings.imageGallery}">
+                    ${ICONS.imageGallery}
+                </span>`;
+            }
+
             // Only include select parent option if element supports it
             if (showSelectParentOption) {
                 content += `<span data-action="select-parent" title="${config.strings.selectParent}">
@@ -3469,13 +3497,6 @@ function RemoteFunctions(config = {}) {
             _nodeMoreOptionsBox = null;
         }
 
-        // if the selected element is an image, show the image ribbon gallery (make sure its enabled in preferences)
-        if(element && element.tagName.toLowerCase() === 'img' && shouldShowImageRibbon()) {
-            if (!_imageRibbonGallery) {
-                _imageRibbonGallery = new ImageRibbonGallery(element);
-            }
-        }
-
         element._originalOutline = element.style.outline;
         element.style.outline = "1px solid #4285F4";
 
@@ -4113,6 +4134,7 @@ function RemoteFunctions(config = {}) {
         dismissNodeMoreOptionsBox();
         dismissAIPromptBox();
         dismissNodeInfoBox();
+        dismissImageRibbonGallery();
     }
 
     /**
@@ -4314,7 +4336,6 @@ function RemoteFunctions(config = {}) {
         "finishEditing"         : finishEditing,
         "hasVisibleLivePreviewBoxes" : hasVisibleLivePreviewBoxes,
         "dismissUIAndCleanupState" : dismissUIAndCleanupState,
-        "dismissImageRibbonGallery" : dismissImageRibbonGallery,
         "enableHoverListeners" : enableHoverListeners,
         "registerHandlers" : registerHandlers
     };

src/LiveDevelopment/LiveDevMultiBrowser.js

@@ -716,16 +716,6 @@ define(function (require, exports, module) {
         if (_protocol) {
             _protocol.evaluate("_LD.enableHoverListeners()"); // so that if hover lock is there it will get cleared
             _protocol.evaluate("_LD.dismissUIAndCleanupState()");
-            _protocol.evaluate("_LD.dismissImageRibbonGallery()");
-        }
-    }
-
-    /**
-     * Dismiss image ribbon gallery if it's open
-     */
-    function dismissImageRibbonGallery() {
-        if (_protocol) {
-            _protocol.evaluate("_LD.dismissImageRibbonGallery()");
         }
     }
 
@@ -815,7 +805,6 @@ define(function (require, exports, module) {
     exports.redrawHighlight     = redrawHighlight;
     exports.hasVisibleLivePreviewBoxes = hasVisibleLivePreviewBoxes;
     exports.dismissLivePreviewBoxes = dismissLivePreviewBoxes;
-    exports.dismissImageRibbonGallery = dismissImageRibbonGallery;
     exports.registerHandlers    = registerHandlers;
     exports.updateConfig        = updateConfig;
     exports.init                = init;

src/LiveDevelopment/LivePreviewEdit.js

@@ -678,10 +678,10 @@ define(function (require, exports, module) {
             _updateImageSrcAttribute(tagId, filename);
         }
 
-        // dismiss the image ribbon gallery
+        // dismiss all UI boxes including the image ribbon gallery
         const currLiveDoc = LiveDevMultiBrowser.getCurrentLiveDoc();
         if (currLiveDoc && currLiveDoc.protocol && currLiveDoc.protocol.evaluate) {
-            currLiveDoc.protocol.evaluate("_LD.dismissImageRibbonGallery()");
+            currLiveDoc.protocol.evaluate("_LD.dismissUIAndCleanupState()");
         }
     }
 

src/LiveDevelopment/main.js

@@ -80,6 +80,7 @@ define(function main(require, exports, module) {
             duplicate: Strings.LIVE_DEV_MORE_OPTIONS_DUPLICATE,
             delete: Strings.LIVE_DEV_MORE_OPTIONS_DELETE,
             ai: Strings.LIVE_DEV_MORE_OPTIONS_AI,
+            imageGallery: Strings.LIVE_DEV_MORE_OPTIONS_IMAGE_GALLERY,
             aiPromptPlaceholder: Strings.LIVE_DEV_AI_PROMPT_PLACEHOLDER,
             imageGalleryUseImage: Strings.LIVE_DEV_IMAGE_GALLERY_USE_IMAGE,
             imageGallerySelectFromComputer: Strings.LIVE_DEV_IMAGE_GALLERY_SELECT_FROM_COMPUTER,
@@ -382,7 +383,7 @@ define(function main(require, exports, module) {
         config.imageRibbon = prefValue !== false; // default to true if undefined
 
         if (MultiBrowserLiveDev && MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
-            if (!prefValue) { MultiBrowserLiveDev.dismissImageRibbonGallery(); } // to remove any existing image ribbons
+            if (!prefValue) { MultiBrowserLiveDev.dismissLivePreviewBoxes(); } // to remove any existing image ribbons and UI boxes
 
             MultiBrowserLiveDev.updateConfig(JSON.stringify(config));
             MultiBrowserLiveDev.registerHandlers();

src/nls/root/strings.js

@@ -189,6 +189,7 @@ define({
     "LIVE_DEV_MORE_OPTIONS_DUPLICATE": "Duplicate",
     "LIVE_DEV_MORE_OPTIONS_DELETE": "Delete",
     "LIVE_DEV_MORE_OPTIONS_AI": "Edit with AI",
+    "LIVE_DEV_MORE_OPTIONS_IMAGE_GALLERY": "Image Gallery",
     "LIVE_DEV_IMAGE_GALLERY_USE_IMAGE": "Use this image",
     "LIVE_DEV_IMAGE_GALLERY_SELECT_FROM_COMPUTER": "Select image from computer",
     "LIVE_DEV_IMAGE_GALLERY_CHOOSE_FOLDER": "Choose download folder",