From 2447f802e6c3fea717f36ca2589e30f67078ca4a Mon Sep 17 00:00:00 2001 From: Srihari Krishnaswamy Date: Thu, 4 Jan 2024 11:14:24 -0800 Subject: [PATCH 1/8] centered the arrow on the message box wrt the zoom-in button in the tutorial --- public/javascripts/SVLabel/css/svl-onboarding.css | 10 ++++++++++ .../SVLabel/src/SVLabel/onboarding/Onboarding.js | 7 ++++++- .../SVLabel/src/SVLabel/onboarding/OnboardingStates.js | 7 ++++--- 3 files changed, 20 insertions(+), 4 deletions(-) diff --git a/public/javascripts/SVLabel/css/svl-onboarding.css b/public/javascripts/SVLabel/css/svl-onboarding.css index 6b1e4f61ea..c9836910c7 100644 --- a/public/javascripts/SVLabel/css/svl-onboarding.css +++ b/public/javascripts/SVLabel/css/svl-onboarding.css @@ -1,3 +1,12 @@ +@keyframes fadeInRightCustom { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + #tracker-holder { position: absolute; top: 0; @@ -28,6 +37,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 index 862d3bfd0e..a4904a85ff 100644 --- 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", "translateY(-50%)"); + } 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 index b7f265fcd5..00df0a237f 100644 --- a/public/javascripts/SVLabel/src/SVLabel/onboarding/OnboardingStates.js +++ b/public/javascripts/SVLabel/src/SVLabel/onboarding/OnboardingStates.js @@ -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,10 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke }, "message": { "message": i18next.t('tutorial.zoom-in'), - "fade-direction": "fadeInRight", "arrow": "left", - "top": -44 + "fade-direction": "fadeInRightCustom", + "top": 30, + "transform": "true" }, "panoId": panoId, "annotations": null, From a761dee03f4d6846b049604e02bbd7bf6e15a86f Mon Sep 17 00:00:00 2001 From: Srihari Krishnaswamy Date: Thu, 4 Jan 2024 11:25:46 -0800 Subject: [PATCH 2/8] added translateY(-50%) as an argument into OnboardingStates --- public/javascripts/SVLabel/src/SVLabel/onboarding/Onboarding.js | 2 +- .../SVLabel/src/SVLabel/onboarding/OnboardingStates.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/public/javascripts/SVLabel/src/SVLabel/onboarding/Onboarding.js b/public/javascripts/SVLabel/src/SVLabel/onboarding/Onboarding.js index a4904a85ff..728ccd3492 100644 --- a/public/javascripts/SVLabel/src/SVLabel/onboarding/Onboarding.js +++ b/public/javascripts/SVLabel/src/SVLabel/onboarding/Onboarding.js @@ -413,7 +413,7 @@ function Onboarding(svl, audioEffect, compass, form, handAnimation, mapService, } if ("transform" in parameters) { - uiOnboarding.messageHolder.css("transform", "translateY(-50%)"); + uiOnboarding.messageHolder.css("transform", parameters.transform); } else { uiOnboarding.messageHolder.css("transform", "None"); } diff --git a/public/javascripts/SVLabel/src/SVLabel/onboarding/OnboardingStates.js b/public/javascripts/SVLabel/src/SVLabel/onboarding/OnboardingStates.js index 00df0a237f..50a26dd167 100644 --- a/public/javascripts/SVLabel/src/SVLabel/onboarding/OnboardingStates.js +++ b/public/javascripts/SVLabel/src/SVLabel/onboarding/OnboardingStates.js @@ -400,7 +400,7 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke "arrow": "left", "fade-direction": "fadeInRightCustom", "top": 30, - "transform": "true" + "transform": "translateY(-50%)" }, "panoId": panoId, "annotations": null, From 395ca12f5c6cc223e7124fa310494fe797f17fb2 Mon Sep 17 00:00:00 2001 From: Srihari Krishnaswamy Date: Thu, 4 Jan 2024 22:17:18 -0800 Subject: [PATCH 3/8] changed the rest of the pop up boxes with arrows, including the one with the arrow in the bottom --- .../SVLabel/css/svl-onboarding.css | 18 +++++++++ .../SVLabel/onboarding/OnboardingStates.js | 40 +++++++++++-------- 2 files changed, 41 insertions(+), 17 deletions(-) diff --git a/public/javascripts/SVLabel/css/svl-onboarding.css b/public/javascripts/SVLabel/css/svl-onboarding.css index c9836910c7..32f8435084 100644 --- a/public/javascripts/SVLabel/css/svl-onboarding.css +++ b/public/javascripts/SVLabel/css/svl-onboarding.css @@ -7,6 +7,24 @@ } } +@keyframes fadeInLeftCustom { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes fadeInDownCustom { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + #tracker-holder { position: absolute; top: 0; diff --git a/public/javascripts/SVLabel/src/SVLabel/onboarding/OnboardingStates.js b/public/javascripts/SVLabel/src/SVLabel/onboarding/OnboardingStates.js index 50a26dd167..c57ab058d1 100644 --- a/public/javascripts/SVLabel/src/SVLabel/onboarding/OnboardingStates.js +++ b/public/javascripts/SVLabel/src/SVLabel/onboarding/OnboardingStates.js @@ -976,9 +976,10 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke }, "message": { "message": i18next.t('tutorial.zoom-out'), - "fade-direction": "fadeInRight", + "fade-direction": "fadeInRightCustom", "arrow": "left", - "top": 30 + "top": 80, + "transform": "translateY(-50%)" }, "panoId": panoId, "annotations": null, @@ -1795,10 +1796,11 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke }, "message": { "message": i18next.t('tutorial.walk-1'), - "fade-direction": "fadeInLeft", + "fade-direction": "fadeInLeftCustom", "arrow": "right", - "top": 310, - "left": 405 + "top": 365, + "left": 405, + "transform": "translateY(-50%)" }, "panoId": panoId, "transition": function () { @@ -1824,10 +1826,11 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke }, "message": { "message": i18next.t('tutorial.walk-2'), - "fade-direction": "fadeInDown", + "fade-direction": "fadeInDownCustom", "arrow": "bottom", - "top": 225, - "left": 405 + "top": 385, + "left": 590, + "transform": "translate(-50%, -100%)" }, "panoId": panoId, "annotations": null, @@ -1868,9 +1871,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": "fadeInLeftCustom", + "top": 330, + "left": 350, + "transform": "translateY(-50%)" }, "panoId": afterWalkPanoId, "annotations": null, @@ -1988,9 +1992,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": "fadeInLeftCustom", + "top": 330, + "left": 405, + "transform": "translateY(-50%)" }, "panoId": afterWalkPanoId, "annotations": null, @@ -2007,10 +2012,11 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke }, "message": { "message": i18next.t('tutorial.instruction-2'), - "fade-direction": "fadeInRight", + "fade-direction": "fadeInRightCustom", "arrow": "left", - "top": 265, - "left": 5 + "top": 340, + "left": 5, + "transform": "translateY(-50%)" }, "panoId": afterWalkPanoId, "annotations": null, From f2d59082bee55933155cb2feacafc3567d0381de Mon Sep 17 00:00:00 2001 From: Srihari Krishnaswamy Date: Fri, 5 Jan 2024 10:35:17 -0800 Subject: [PATCH 4/8] changed CSS fadeInRight, fadeInLeft and FadeInDown animations in the onboarding states to fadeIn since translate in animation was messing with text box positioning --- .../src/SVLabel/onboarding/OnboardingStates.js | 14 +++++++------- public/stylesheets/animate.css | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/public/javascripts/SVLabel/src/SVLabel/onboarding/OnboardingStates.js b/public/javascripts/SVLabel/src/SVLabel/onboarding/OnboardingStates.js index c57ab058d1..49097eb158 100644 --- a/public/javascripts/SVLabel/src/SVLabel/onboarding/OnboardingStates.js +++ b/public/javascripts/SVLabel/src/SVLabel/onboarding/OnboardingStates.js @@ -398,7 +398,7 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke "message": { "message": i18next.t('tutorial.zoom-in'), "arrow": "left", - "fade-direction": "fadeInRightCustom", + "fade-direction": "fadeIn", "top": 30, "transform": "translateY(-50%)" }, @@ -976,7 +976,7 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke }, "message": { "message": i18next.t('tutorial.zoom-out'), - "fade-direction": "fadeInRightCustom", + "fade-direction": "fadeIn", "arrow": "left", "top": 80, "transform": "translateY(-50%)" @@ -1796,7 +1796,7 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke }, "message": { "message": i18next.t('tutorial.walk-1'), - "fade-direction": "fadeInLeftCustom", + "fade-direction": "fadeIn", "arrow": "right", "top": 365, "left": 405, @@ -1826,7 +1826,7 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke }, "message": { "message": i18next.t('tutorial.walk-2'), - "fade-direction": "fadeInDownCustom", + "fade-direction": "fadeIn", "arrow": "bottom", "top": 385, "left": 590, @@ -1871,7 +1871,7 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke "message": i18next.t('tutorial.walk-4'), "width": 350, "arrow": "right", - "fade-direction": "fadeInLeftCustom", + "fade-direction": "fadeIn", "top": 330, "left": 350, "transform": "translateY(-50%)" @@ -1992,7 +1992,7 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke "message": { "message": i18next.t('tutorial.instruction-1'), "arrow": "right", - "fade-direction": "fadeInLeftCustom", + "fade-direction": "fadeIn", "top": 330, "left": 405, "transform": "translateY(-50%)" @@ -2012,7 +2012,7 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke }, "message": { "message": i18next.t('tutorial.instruction-2'), - "fade-direction": "fadeInRightCustom", + "fade-direction": "fadeIn", "arrow": "left", "top": 340, "left": 5, diff --git a/public/stylesheets/animate.css b/public/stylesheets/animate.css index 2cfc3b59a1..daa00875fb 100644 --- a/public/stylesheets/animate.css +++ b/public/stylesheets/animate.css @@ -1350,7 +1350,7 @@ Copyright (c) 2015 Daniel Eden .fadeInRight { -webkit-animation-name: fadeInRight; - animation-name: fadeInRight; + animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { From ebc9dc803abb5c410aefe33505eb3885fe84851f Mon Sep 17 00:00:00 2001 From: Srihari Krishnaswamy Date: Fri, 12 Jan 2024 11:49:36 -0800 Subject: [PATCH 5/8] fixed small UI changes (centering boxes, making distances consistent) --- .../SVLabel/src/SVLabel/onboarding/Onboarding.js | 6 +++++- .../src/SVLabel/onboarding/OnboardingStates.js | 16 +++++++++------- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/public/javascripts/SVLabel/src/SVLabel/onboarding/Onboarding.js b/public/javascripts/SVLabel/src/SVLabel/onboarding/Onboarding.js index 728ccd3492..fdc088bf5d 100644 --- a/public/javascripts/SVLabel/src/SVLabel/onboarding/Onboarding.js +++ b/public/javascripts/SVLabel/src/SVLabel/onboarding/Onboarding.js @@ -397,7 +397,11 @@ function Onboarding(svl, audioEffect, compass, form, handAnimation, mapService, } if ("top" in parameters) { - uiOnboarding.messageHolder.css("top", parameters.top); + if (i18next.language === "zh-TW" && "arrow" in parameters && parameters.arrow === "left") { + uiOnboarding.messageHolder.css("top", parameters.top - 6); + } else { + uiOnboarding.messageHolder.css("top", parameters.top); + } } if ("background" in parameters && parameters.background) { diff --git a/public/javascripts/SVLabel/src/SVLabel/onboarding/OnboardingStates.js b/public/javascripts/SVLabel/src/SVLabel/onboarding/OnboardingStates.js index 49097eb158..092cbfcec7 100644 --- a/public/javascripts/SVLabel/src/SVLabel/onboarding/OnboardingStates.js +++ b/public/javascripts/SVLabel/src/SVLabel/onboarding/OnboardingStates.js @@ -400,6 +400,7 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke "arrow": "left", "fade-direction": "fadeIn", "top": 30, + "left": 5, "transform": "translateY(-50%)" }, "panoId": panoId, @@ -979,6 +980,7 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke "fade-direction": "fadeIn", "arrow": "left", "top": 80, + "left": 5, "transform": "translateY(-50%)" }, "panoId": panoId, @@ -1798,8 +1800,8 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke "message": i18next.t('tutorial.walk-1'), "fade-direction": "fadeIn", "arrow": "right", - "top": 365, - "left": 405, + "top": 377, + "left": 403, "transform": "translateY(-50%)" }, "panoId": panoId, @@ -1828,7 +1830,7 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke "message": i18next.t('tutorial.walk-2'), "fade-direction": "fadeIn", "arrow": "bottom", - "top": 385, + "top": 391, "left": 590, "transform": "translate(-50%, -100%)" }, @@ -1872,8 +1874,8 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke "width": 350, "arrow": "right", "fade-direction": "fadeIn", - "top": 330, - "left": 350, + "top": 377, + "left": 353, "transform": "translateY(-50%)" }, "panoId": afterWalkPanoId, @@ -1993,8 +1995,8 @@ function OnboardingStates (contextMenu, compass, mapService, statusModel, tracke "message": i18next.t('tutorial.instruction-1'), "arrow": "right", "fade-direction": "fadeIn", - "top": 330, - "left": 405, + "top": 377, + "left": 403, "transform": "translateY(-50%)" }, "panoId": afterWalkPanoId, From 0b5e45c4e5ea512395038a0544524979557dec4a Mon Sep 17 00:00:00 2001 From: Srihari Krishnaswamy Date: Fri, 12 Jan 2024 15:36:35 -0800 Subject: [PATCH 6/8] reneged chinese language label buffer change --- .../SVLabel/src/SVLabel/onboarding/Onboarding.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/public/javascripts/SVLabel/src/SVLabel/onboarding/Onboarding.js b/public/javascripts/SVLabel/src/SVLabel/onboarding/Onboarding.js index fdc088bf5d..728ccd3492 100644 --- a/public/javascripts/SVLabel/src/SVLabel/onboarding/Onboarding.js +++ b/public/javascripts/SVLabel/src/SVLabel/onboarding/Onboarding.js @@ -397,11 +397,7 @@ function Onboarding(svl, audioEffect, compass, form, handAnimation, mapService, } if ("top" in parameters) { - if (i18next.language === "zh-TW" && "arrow" in parameters && parameters.arrow === "left") { - uiOnboarding.messageHolder.css("top", parameters.top - 6); - } else { - uiOnboarding.messageHolder.css("top", parameters.top); - } + uiOnboarding.messageHolder.css("top", parameters.top); } if ("background" in parameters && parameters.background) { From e0161dca55cad5f164652fecefd9db6ff64787f5 Mon Sep 17 00:00:00 2001 From: Mikey Saugstad Date: Tue, 23 Jan 2024 10:10:34 -0800 Subject: [PATCH 7/8] fixes final page of tutorial in German language --- .../SVLabel/src/SVLabel/onboarding/OnboardingStates.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/javascripts/SVLabel/src/SVLabel/onboarding/OnboardingStates.js b/public/javascripts/SVLabel/src/SVLabel/onboarding/OnboardingStates.js index 092cbfcec7..6774d04c59 100644 --- 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 @@ -2040,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 From 26a1c50ce244ad75bbb5b44c283360d76f0cc02a Mon Sep 17 00:00:00 2001 From: Mikey Saugstad Date: Tue, 23 Jan 2024 10:11:16 -0800 Subject: [PATCH 8/8] removes unused CSS --- .../SVLabel/css/svl-onboarding.css | 27 ------------------- public/stylesheets/animate.css | 2 +- 2 files changed, 1 insertion(+), 28 deletions(-) diff --git a/public/javascripts/SVLabel/css/svl-onboarding.css b/public/javascripts/SVLabel/css/svl-onboarding.css index 32f8435084..d344017d69 100644 --- a/public/javascripts/SVLabel/css/svl-onboarding.css +++ b/public/javascripts/SVLabel/css/svl-onboarding.css @@ -1,30 +1,3 @@ -@keyframes fadeInRightCustom { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -@keyframes fadeInLeftCustom { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -@keyframes fadeInDownCustom { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - #tracker-holder { position: absolute; top: 0; diff --git a/public/stylesheets/animate.css b/public/stylesheets/animate.css index daa00875fb..2cfc3b59a1 100644 --- a/public/stylesheets/animate.css +++ b/public/stylesheets/animate.css @@ -1350,7 +1350,7 @@ Copyright (c) 2015 Daniel Eden .fadeInRight { -webkit-animation-name: fadeInRight; - animation-name: fadeInRight; + animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig {