feat: add woosh-to-target close/open animation for dialogs

Add closeToElement parameter to showModalDialogUsingTemplate() that
animates dialogs opening from and closing toward a target element.
The new project dialog uses this to woosh to/from the #newProject
button, replacing the old notification popup with a natural visual cue.

- Remove _showNewProjectNotification() from guided-tour.js
- Remove unused NEW_PROJECT_NOTIFICATION string and new_project.png
- Add landing pulse animation on target element after close

Author: abose

src/extensionsIntegrated/Phoenix/guided-tour.js

@@ -89,31 +89,6 @@ define(function (require, exports, module) {
         editorContextMenu.on(Menus.EVENT_BEFORE_CONTEXT_MENU_OPEN, _showNotification);
     }
 
-    // 3. When user changes file by clicking on files panel, we show "click here to open new project window"
-    // Only shown once.
-    function _showNewProjectNotification() {
-        if(userAlreadyDidAction.newProjectShown){
-            return;
-        }
-        if(currentlyShowingNotification){
-            setTimeout(_showNewProjectNotification, NOTIFICATION_BACKOFF);
-            return;
-        }
-        userAlreadyDidAction.newProjectShown =  true;
-        PhStore.setItem(GUIDED_TOUR_LOCAL_STORAGE_KEY, JSON.stringify(userAlreadyDidAction));
-        Metrics.countEvent(Metrics.EVENT_TYPE.UI, "guide", "newProj");
-        currentlyShowingNotification = NotificationUI.createFromTemplate(
-            Strings.START_PROJECT, Strings.NEW_PROJECT_NOTIFICATION,
-            "newProject", {
-                allowedPlacements: ['top', 'bottom'],
-                autoCloseTimeS: 15,
-                dismissOnClick: true}
-        );
-        currentlyShowingNotification.done(()=>{
-            currentlyShowingNotification = null;
-        });
-    }
-
     function _showFirstUseSurvey(surveyURL, delayOverride, title,  useDialog) {
         let surveyVersion = 6; // increment this if you want to show this again
         if(userAlreadyDidAction.generalSurveyShownVersion === surveyVersion) {
@@ -302,7 +277,6 @@ define(function (require, exports, module) {
             return;
         }
         tourStarted = true;
-        _showNewProjectNotification();
         _showBeautifyNotification();
         _showSurveys();
     };

src/extensionsIntegrated/Phoenix/new-project.js

@@ -85,7 +85,7 @@ define(function (require, exports, module) {
             newProjectURL: `${window.Phoenix.baseURL}assets/new-project/code-editor.html`
         };
         let dialogueContents = Mustache.render(newProjectTemplate, templateVars);
-        newProjectDialogueObj = Dialogs.showModalDialogUsingTemplate(dialogueContents, true);
+        newProjectDialogueObj = Dialogs.showModalDialogUsingTemplate(dialogueContents, true, "#newProject");
         _focusContentWindow();
         Metrics.countEvent(Metrics.EVENT_TYPE.NEW_PROJECT, "dialogue", "open");
         return newProjectDialogueObj;

src/nls/root/strings.js

@@ -1336,7 +1336,6 @@ define({
     "PREVIEW": "Preview",
     "BUILD_WEBSITE": "Build Website",
     "VIEW_MORE": "View More...",
-    "NEW_PROJECT_NOTIFICATION": "Click this icon to open the `Start Project` window again.</br> See Recent Projects, Open Folder or start projects from templates.</br> <img src=\"styles/images/new_project.png\">",
     "BEAUTIFY_CODE_NOTIFICATION": "Click here or press <b>`{0}`</b> to beautify code. </br> <img src=\"styles/images/beautify.gif\">",
     "DEFAULT_PROJECT_NOTIFICATION": "Open the <b>Default Project</b> in {APP_NAME} to get started quickly (ideal as a scratch pad).</br></br>Or, open a folder from your computer with the <strong>Open Folder</strong> icon below.<br><a href='#' style='float:right;'>ok</a>",
     "DIRECTORY_REPLACE_MESSAGE": "The selected folder <span class='dialog-filename'>{0}</span> is not empty. Are you sure you want to replace the folder contents with the project?",

src/styles/brackets_patterns_override.less

@@ -1046,6 +1046,18 @@ a:focus {
     vertical-align: middle;
 }
 
+@keyframes dialog-woosh-land-pulse {
+    0%   { transform: scale(1); }
+    25%  { transform: scale(1.5); }
+    50%  { transform: scale(0.9); }
+    75%  { transform: scale(1.15); }
+    100% { transform: scale(1); }
+}
+
+.dialog-woosh-land {
+    animation: dialog-woosh-land-pulse 600ms ease-in-out;
+}
+
 .modal {
     background-color: @bc-panel-bg;
     border: 1px solid @bc-panel-border;

src/styles/images/new_project.png

@@ -127,10 +127,51 @@ define(function (require, exports, module) {
      */
     function _dismissDialog($dlg, buttonId) {
         $dlg.data("buttonId", buttonId);
-        $dlg.modal("hide");
 
-        if(!_isAnyDialogShown() && EditorManager.getActiveEditor()){
-            EditorManager.getActiveEditor().focus();
+        let closeToElement = $dlg.data("closeToElement");
+        let $target = closeToElement ? $(closeToElement) : null;
+
+        if ($target && $target.length && $target.is(":visible")) {
+            let targetRect = $target[0].getBoundingClientRect();
+            let targetCenterX = targetRect.left + targetRect.width / 2;
+            let targetCenterY = targetRect.top + targetRect.height / 2;
+
+            let $modal = $dlg;
+            let modalRect = $modal[0].getBoundingClientRect();
+            let modalCenterX = modalRect.left + modalRect.width / 2;
+            let modalCenterY = modalRect.top + modalRect.height / 2;
+
+            let translateX = targetCenterX - modalCenterX;
+            let translateY = targetCenterY - modalCenterY;
+
+            $modal.css({
+                "animation": "none",
+                "transition": "transform 300ms ease-in, opacity 300ms ease-in",
+                "transform": `translate(${translateX}px, ${translateY}px) scale(0.05)`,
+                "opacity": "0"
+            });
+
+            let $backdrop = $modal.next(".modal-backdrop");
+            $backdrop.css({
+                "transition": "opacity 300ms ease-in",
+                "opacity": "0"
+            });
+
+            setTimeout(function () {
+                $dlg.modal("hide");
+                if (!_isAnyDialogShown() && EditorManager.getActiveEditor()) {
+                    EditorManager.getActiveEditor().focus();
+                }
+                $target.addClass("dialog-woosh-land");
+                setTimeout(function () {
+                    $target.removeClass("dialog-woosh-land");
+                }, 600);
+            }, 300);
+        } else {
+            $dlg.modal("hide");
+            if (!_isAnyDialogShown() && EditorManager.getActiveEditor()) {
+                EditorManager.getActiveEditor().focus();
+            }
         }
     }
 
@@ -361,9 +402,12 @@ define(function (require, exports, module) {
      * @param {boolean=} autoDismiss Whether to automatically dismiss the dialog when one of the buttons
      *      is clicked. Default true. If false, you'll need to manually handle button clicks and the Esc
      *      key, and dismiss the dialog yourself when ready by calling `close()` on the returned dialog.
+     * @param {string=} closeToElement A CSS selector for a target element. If specified, the dialog
+     *      will animate open from and close toward the target element (a "woosh" effect). If the target
+     *      is not found or not visible, the dialog opens/closes normally.
      * @return {Dialog}
      */
-    function showModalDialogUsingTemplate(template, autoDismiss) {
+    function showModalDialogUsingTemplate(template, autoDismiss, closeToElement) {
         if (autoDismiss === undefined) {
             autoDismiss = true;
         }
@@ -382,6 +426,10 @@ define(function (require, exports, module) {
         // Save the dialog promise for unit tests
         $dlg.data("promise", promise);
 
+        if (closeToElement) {
+            $dlg.data("closeToElement", closeToElement);
+        }
+
         let keydownHook = function (e) {
             return _keydownHook.call($dlg, e, autoDismiss);
         };
@@ -435,6 +483,51 @@ define(function (require, exports, module) {
 
             // Push our global keydown handler onto the global stack of handlers.
             KeyBindingManager.addGlobalKeydownHook(keydownHook);
+
+            // Animate open from target element if closeToElement is set
+            let openFromEl = $dlg.data("closeToElement");
+            let $openTarget = openFromEl ? $(openFromEl) : null;
+            if ($openTarget && $openTarget.length && $openTarget.is(":visible")) {
+                let targetRect = $openTarget[0].getBoundingClientRect();
+                let targetCenterX = targetRect.left + targetRect.width / 2;
+                let targetCenterY = targetRect.top + targetRect.height / 2;
+
+                let modalRect = $dlg[0].getBoundingClientRect();
+                let modalCenterX = modalRect.left + modalRect.width / 2;
+                let modalCenterY = modalRect.top + modalRect.height / 2;
+
+                let translateX = targetCenterX - modalCenterX;
+                let translateY = targetCenterY - modalCenterY;
+
+                // Disable the default modal CSS animation so our woosh takes over
+                // Start at the target position, scaled down
+                $dlg.css({
+                    "animation": "none",
+                    "transition": "none",
+                    "transform": `translate(${translateX}px, ${translateY}px) scale(0.05)`,
+                    "opacity": "0"
+                });
+
+                let $backdrop = $dlg.next(".modal-backdrop");
+                $backdrop.css({
+                    "transition": "none",
+                    "opacity": "0"
+                });
+
+                // Force reflow then animate to natural position
+                // eslint-disable-next-line no-unused-expressions
+                $dlg[0].offsetHeight;
+
+                $dlg.css({
+                    "transition": "transform 300ms ease-out, opacity 300ms ease-out",
+                    "transform": "translate(0, 0) scale(1)",
+                    "opacity": "1"
+                });
+                $backdrop.css({
+                    "transition": "opacity 300ms ease-out",
+                    "opacity": ""
+                });
+            }
         });
 
         // Click handler for buttons