From c5752e756a0073e6dd61e17868b9f78e046e9329 Mon Sep 17 00:00:00 2001 From: Ibrahim Date: Fri, 4 Oct 2024 10:03:20 -0400 Subject: [PATCH] updates --- platform/app/public/config/default.js | 182 ++---------------- .../src/components/Onboarding/Onboarding.css | 13 +- .../src/components/Onboarding/Onboarding.tsx | 52 +++-- 3 files changed, 63 insertions(+), 184 deletions(-) diff --git a/platform/app/public/config/default.js b/platform/app/public/config/default.js index 0008c4672..09fe95531 100644 --- a/platform/app/public/config/default.js +++ b/platform/app/public/config/default.js @@ -298,21 +298,6 @@ window.config = { steps: [ { id: 'scroll', - buttons: [ - { - text: 'Skip all', - action() { - this.complete(); - }, - secondary: true, - }, - { - text: 'Next', - action() { - this.next(); - }, - }, - ], title: 'Scrolling Through Images', text: 'You can scroll through the images using the mouse wheel or scrollbar.', attachTo: { @@ -333,21 +318,6 @@ window.config = { element: '.viewport-element', on: 'top', }, - buttons: [ - { - text: 'Skip all', - action() { - this.complete(); - }, - secondary: true, - }, - { - text: 'Next', - action() { - this.next(); - }, - }, - ], advanceOn: { selector: '.cornerstone-viewport-element', event: 'CORNERSTONE_TOOLS_MOUSE_UP', @@ -362,21 +332,6 @@ window.config = { element: '.viewport-element', on: 'top', }, - buttons: [ - { - text: 'Skip all', - action() { - this.complete(); - }, - secondary: true, - }, - { - text: 'Next', - action() { - this.next(); - }, - }, - ], advanceOn: { selector: '.cornerstone-viewport-element', event: 'CORNERSTONE_TOOLS_MOUSE_UP', @@ -391,21 +346,6 @@ window.config = { element: '.viewport-element', on: 'top', }, - buttons: [ - { - text: 'Skip all', - action() { - this.complete(); - }, - secondary: true, - }, - { - text: 'Next', - action() { - this.next(); - }, - }, - ], advanceOn: { selector: '.cornerstone-viewport-element', event: 'CORNERSTONE_TOOLS_MOUSE_UP', @@ -420,21 +360,6 @@ window.config = { element: '[data-cy="MeasurementTools-split-button-primary"]', on: 'bottom', }, - buttons: [ - { - text: 'Skip all', - action() { - this.complete(); - }, - secondary: true, - }, - { - text: 'Next', - action() { - this.next(); - }, - }, - ], advanceOn: { selector: '[data-cy="MeasurementTools-split-button-primary"]', event: 'click', @@ -450,21 +375,6 @@ window.config = { element: '.viewport-element', on: 'top', }, - buttons: [ - { - text: 'Skip all', - action() { - this.complete(); - }, - secondary: true, - }, - { - text: 'Next', - action() { - this.next(); - }, - }, - ], advanceOn: { selector: 'body', event: 'event::measurement_added', @@ -483,21 +393,6 @@ window.config = { selector: '[data-cy="prompt-begin-tracking-yes-btn"]', event: 'click', }, - buttons: [ - { - text: 'Skip all', - action() { - this.complete(); - }, - secondary: true, - }, - { - text: 'Next', - action() { - this.next(); - }, - }, - ], beforeShowPromise: () => waitForElement('[data-cy="prompt-begin-tracking-yes-btn"]'), }, { @@ -508,21 +403,6 @@ window.config = { element: '#trackedMeasurements-btn', on: 'left-start', }, - buttons: [ - { - text: 'Skip all', - action() { - this.complete(); - }, - secondary: true, - }, - { - text: 'Next', - action() { - this.next(); - }, - }, - ], advanceOn: { selector: '#trackedMeasurements-btn', event: 'click', @@ -537,21 +417,6 @@ window.config = { element: '.viewport-element', on: 'top', }, - buttons: [ - { - text: 'Skip all', - action() { - this.complete(); - }, - secondary: true, - }, - { - text: 'Next', - action() { - this.next(); - }, - }, - ], advanceOn: { selector: '.cornerstone-viewport-element', event: 'CORNERSTONE_TOOLS_MOUSE_WHEEL', @@ -566,21 +431,6 @@ window.config = { element: '[data-cy="measurement-item"]', on: 'left-start', }, - buttons: [ - { - text: 'Skip all', - action() { - this.complete(); - }, - secondary: true, - }, - { - text: 'Next', - action() { - this.next(); - }, - }, - ], advanceOn: { selector: '[data-cy="measurement-item"]', event: 'click', @@ -595,21 +445,6 @@ window.config = { element: '[data-cy="Layout"]', on: 'bottom', }, - buttons: [ - { - text: 'Skip all', - action() { - this.complete(); - }, - secondary: true, - }, - { - text: 'Next', - action() { - this.next(); - }, - }, - ], advanceOn: { selector: '[data-cy="Layout"]', event: 'click', @@ -641,6 +476,23 @@ window.config = { ], tourOptions: { useModalOverlay: true, + defaultStepOptions: { + buttons: [ + { + text: 'Skip all', + action() { + this.complete(); + }, + secondary: true, + }, + { + text: 'Next', + action() { + this.next(); + }, + }, + ], + }, }, }, ], diff --git a/platform/ui-next/src/components/Onboarding/Onboarding.css b/platform/ui-next/src/components/Onboarding/Onboarding.css index 634c0a0a7..3fce45e54 100644 --- a/platform/ui-next/src/components/Onboarding/Onboarding.css +++ b/platform/ui-next/src/components/Onboarding/Onboarding.css @@ -1,9 +1,9 @@ .shepherd-header { - @apply !bg-popover !p-0; + @apply !bg-popover !w-[100%] !p-0; } .shepherd-title { - @apply text-highlight text-xl; + @apply !text-highlight !w-[100%] !break-words !text-lg !leading-[1.5]; } .shepherd-content { @@ -11,15 +11,15 @@ } .shepherd-element { - @apply !bg-popover !min-w-[260px] !max-w-[382px]; + @apply !bg-popover !max-w-[260px]; } .shepherd-text { - @apply text-foreground p-0 text-base leading-normal; + @apply text-foreground !w-[100%] p-0 text-base leading-normal; } .shepherd-footer { - @apply p-0; + @apply !w-[100%] p-0; } .shepherd-button { @@ -35,7 +35,8 @@ } .shepherd-element[data-popper-placement^='left'] > .shepherd-arrow { - right: 4px !important; + right: 3px !important; + top: 6px !important; } .shepherd-element[data-popper-placement^='top'] > .shepherd-arrow { diff --git a/platform/ui-next/src/components/Onboarding/Onboarding.tsx b/platform/ui-next/src/components/Onboarding/Onboarding.tsx index 701a2a7b9..5e5430bf1 100644 --- a/platform/ui-next/src/components/Onboarding/Onboarding.tsx +++ b/platform/ui-next/src/components/Onboarding/Onboarding.tsx @@ -5,12 +5,10 @@ import { useLocation } from 'react-router'; import 'shepherd.js/dist/css/shepherd.css'; import './Onboarding.css'; -const hasTourBeenShown = (tourId: string) => { - const shownTours = JSON.parse(localStorage.getItem('shownTours')) || []; - return shownTours.includes(tourId); -}; +const getShownTours = () => JSON.parse(localStorage.getItem('shownTours')) || []; +const hasTourBeenShown = (tourId: string) => getShownTours().includes(tourId); const markTourAsShown = (tourId: string) => { - const shownTours = JSON.parse(localStorage.getItem('shownTours')) || []; + const shownTours = getShownTours(); if (!shownTours.includes(tourId)) { shownTours.push(tourId); localStorage.setItem('shownTours', JSON.stringify(shownTours)); @@ -26,18 +24,46 @@ const Onboarding = () => { tourOptions: TourOptions; steps: StepOptions[]; }>; + useEffect(() => { if (!tours) { - return null; + return; } - const pathname = location.pathname; - const matchingTour = tours.find(tour => tour.route === pathname); - if (matchingTour && !hasTourBeenShown(matchingTour.id)) { - const tourInstance = new Shepherd.Tour(matchingTour.tourOptions); - matchingTour.steps.forEach(step => tourInstance.addStep(step)); - tourInstance.start(); - markTourAsShown(matchingTour.id); + + const matchingTour = tours.find(tour => tour.route === location.pathname); + if (!matchingTour || hasTourBeenShown(matchingTour.id)) { + return; } + + const defaultShowHandler = () => { + const currentStep = Shepherd.activeTour?.getCurrentStep(); + if (currentStep) { + const progress = document.createElement('span'); + progress.className = 'shepherd-progress text-base text-muted-foreground'; + progress.innerText = `${Shepherd.activeTour?.steps.indexOf(currentStep) + 1}/${Shepherd.activeTour?.steps.length}`; + progress.style.position = 'absolute'; + progress.style.left = '13px'; + progress.style.bottom = '20px'; + progress.style.zIndex = '1'; + + const footer = currentStep?.getElement()?.querySelector('.shepherd-footer'); + footer?.appendChild(progress); + } + }; + + const tourInstance = new Shepherd.Tour({ + ...matchingTour.tourOptions, + defaultStepOptions: { + ...matchingTour.tourOptions.defaultStepOptions, + when: { + ...matchingTour.tourOptions?.defaultStepOptions?.when, + show: matchingTour.tourOptions?.defaultStepOptions?.when?.show || defaultShowHandler, + }, + }, + }); + matchingTour.steps.forEach(step => tourInstance.addStep(step)); + tourInstance.start(); + markTourAsShown(matchingTour.id); }, [Shepherd, tours, location.pathname]); return null;