Merge pull request #3453 from ProjectSidewalk/3378-adjust-instruction…

…-locations-dynamically Updating the vertical position of the zoom-in text box to have its arrow point to the center of the zoom-in button
ProjectSidewalk · Jan 23, 2024 · e6d786a · e6d786a
2 parents f7c4bcd + 26a1c50
commit e6d786a
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 23 deletions.
diff --git a/public/javascripts/SVLabel/css/svl-onboarding.css b/public/javascripts/SVLabel/css/svl-onboarding.css
@@ -28,6 +28,7 @@
     left: 0;
     z-index: 3;
     font-size: 14pt;
+    transform: None;
 
     border-radius: 3px 3px 3px 3px;
     -webkit-border-radius: 3px 3px 3px 3px;

diff --git a/public/javascripts/SVLabel/src/SVLabel/onboarding/Onboarding.js b/public/javascripts/SVLabel/src/SVLabel/onboarding/Onboarding.js
@@ -369,7 +369,6 @@ function Onboarding(svl, audioEffect, compass, form, handAnimation, mapService,
      */
     function showMessage(parameters) {
         var message = parameters.message;
-
         // Make the message flash yellow once to catch your attention.
         uiOnboarding.messageHolder.toggleClass("yellow-background");
         setTimeout(function () {
@@ -412,6 +411,12 @@ function Onboarding(svl, audioEffect, compass, form, handAnimation, mapService,
             if ("fade-direction" in parameters) {
                 uiOnboarding.messageHolder.addClass("animated " + parameters["fade-direction"]);
             }
+
+            if ("transform" in parameters) {
+                uiOnboarding.messageHolder.css("transform", parameters.transform);
+            } else {
+                uiOnboarding.messageHolder.css("transform", "None");
+            }
         }
 
         uiOnboarding.messageHolder.html((typeof message === "function" ? message() : message));

diff --git a/public/javascripts/SVLabel/src/SVLabel/onboarding/OnboardingStates.js b/public/javascripts/SVLabel/src/SVLabel/onboarding/OnboardingStates.js
@@ -34,7 +34,7 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke
                     return dom ? dom.innerHTML : "";
                 },
                 "width": 1000,
-                "top": -50,
+                "top": -105,
                 "left": -70,
                 "padding": "100px 10px 100px 10px",
                 "background": true
@@ -225,7 +225,7 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke
                 "maxHeading": headingRanges["stage-1"][1]
             },
             "message": {
-                "message": i18next.t('tutorial.select-label-type-2'),
+                "message": i18next.t('tutorial.select-label-type-2')
             },
             "panoId": panoId,
             "annotations": [
@@ -397,9 +397,11 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke
             },
             "message": {
                 "message": i18next.t('tutorial.zoom-in'),
-                "fade-direction": "fadeInRight",
                 "arrow": "left",
-                "top": -44
+                "fade-direction": "fadeIn",
+                "top": 30,
+                "left": 5,
+                "transform": "translateY(-50%)"
             },
             "panoId": panoId,
             "annotations": null,
@@ -975,9 +977,11 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke
             },
             "message": {
                 "message": i18next.t('tutorial.zoom-out'),
-                "fade-direction": "fadeInRight",
+                "fade-direction": "fadeIn",
                 "arrow": "left",
-                "top": 30
+                "top": 80,
+                "left": 5,
+                "transform": "translateY(-50%)"
             },
             "panoId": panoId,
             "annotations": null,
@@ -1794,10 +1798,11 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke
             },
             "message": {
                 "message": i18next.t('tutorial.walk-1'),
-                "fade-direction": "fadeInLeft",
+                "fade-direction": "fadeIn",
                 "arrow": "right",
-                "top": 310,
-                "left": 405
+                "top": 377,
+                "left": 403,
+                "transform": "translateY(-50%)"
             },
             "panoId": panoId,
             "transition": function () {
@@ -1823,10 +1828,11 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke
             },
             "message": {
                 "message": i18next.t('tutorial.walk-2'),
-                "fade-direction": "fadeInDown",
+                "fade-direction": "fadeIn",
                 "arrow": "bottom",
-                "top": 225,
-                "left": 405
+                "top": 391,
+                "left": 590,
+                "transform": "translate(-50%, -100%)"
             },
             "panoId": panoId,
             "annotations": null,
@@ -1867,9 +1873,10 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke
                 "message": i18next.t('tutorial.walk-4'),
                 "width": 350,
                 "arrow": "right",
-                "fade-direction": "fadeInLeft",
-                "top": 254,
-                "left": 350
+                "fade-direction": "fadeIn",
+                "top": 377,
+                "left": 353,
+                "transform": "translateY(-50%)"
             },
             "panoId": afterWalkPanoId,
             "annotations": null,
@@ -1987,9 +1994,10 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke
             "message": {
                 "message": i18next.t('tutorial.instruction-1'),
                 "arrow": "right",
-                "fade-direction": "fadeInLeft",
-                "top": 270,
-                "left": 405
+                "fade-direction": "fadeIn",
+                "top": 377,
+                "left": 403,
+                "transform": "translateY(-50%)"
             },
             "panoId": afterWalkPanoId,
             "annotations": null,
@@ -2006,10 +2014,11 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke
             },
             "message": {
                 "message": i18next.t('tutorial.instruction-2'),
-                "fade-direction": "fadeInRight",
+                "fade-direction": "fadeIn",
                 "arrow": "left",
-                "top": 265,
-                "left": 5
+                "top": 340,
+                "left": 5,
+                "transform": "translateY(-50%)"
             },
             "panoId": afterWalkPanoId,
             "annotations": null,
@@ -2031,7 +2040,7 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke
                     return document.getElementById("onboarding-outro").innerHTML;
                 },
                 "width": 1000,
-                "top": -50,
+                "top": -105,
                 "left": -70,
                 "padding": "100px 10px 100px 10px",
                 "background": true