othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
Ibrahim 2024-10-04 10:03:20 -04:00
parent 3b20d2b816
commit c5752e756a
3 changed files with 63 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

182
platform/app/public/config/default.js
View File

@ -298,21 +298,6 @@ window.config = {
steps: [ steps: [
{ {
id: 'scroll', id: 'scroll',
buttons: [
{
text: 'Skip all',
action() {
this.complete();
},
secondary: true,
},
{
text: 'Next',
action() {
this.next();
},
},
],
title: 'Scrolling Through Images', title: 'Scrolling Through Images',
text: 'You can scroll through the images using the mouse wheel or scrollbar.', text: 'You can scroll through the images using the mouse wheel or scrollbar.',
attachTo: { attachTo: {
@ -333,21 +318,6 @@ window.config = {
element: '.viewport-element', element: '.viewport-element',
on: 'top', on: 'top',
}, },
buttons: [
{
text: 'Skip all',
action() {
this.complete();
},
secondary: true,
},
{
text: 'Next',
action() {
this.next();
},
},
],
advanceOn: { advanceOn: {
selector: '.cornerstone-viewport-element', selector: '.cornerstone-viewport-element',
event: 'CORNERSTONE_TOOLS_MOUSE_UP', event: 'CORNERSTONE_TOOLS_MOUSE_UP',
@ -362,21 +332,6 @@ window.config = {
element: '.viewport-element', element: '.viewport-element',
on: 'top', on: 'top',
}, },
buttons: [
{
text: 'Skip all',
action() {
this.complete();
},
secondary: true,
},
{
text: 'Next',
action() {
this.next();
},
},
],
advanceOn: { advanceOn: {
selector: '.cornerstone-viewport-element', selector: '.cornerstone-viewport-element',
event: 'CORNERSTONE_TOOLS_MOUSE_UP', event: 'CORNERSTONE_TOOLS_MOUSE_UP',
@ -391,21 +346,6 @@ window.config = {
element: '.viewport-element', element: '.viewport-element',
on: 'top', on: 'top',
}, },
buttons: [
{
text: 'Skip all',
action() {
this.complete();
},
secondary: true,
},
{
text: 'Next',
action() {
this.next();
},
},
],
advanceOn: { advanceOn: {
selector: '.cornerstone-viewport-element', selector: '.cornerstone-viewport-element',
event: 'CORNERSTONE_TOOLS_MOUSE_UP', event: 'CORNERSTONE_TOOLS_MOUSE_UP',
@ -420,21 +360,6 @@ window.config = {
element: '[data-cy="MeasurementTools-split-button-primary"]', element: '[data-cy="MeasurementTools-split-button-primary"]',
on: 'bottom', on: 'bottom',
}, },
buttons: [
{
text: 'Skip all',
action() {
this.complete();
},
secondary: true,
},
{
text: 'Next',
action() {
this.next();
},
},
],
advanceOn: { advanceOn: {
selector: '[data-cy="MeasurementTools-split-button-primary"]', selector: '[data-cy="MeasurementTools-split-button-primary"]',
event: 'click', event: 'click',
@ -450,21 +375,6 @@ window.config = {
element: '.viewport-element', element: '.viewport-element',
on: 'top', on: 'top',
}, },
buttons: [
{
text: 'Skip all',
action() {
this.complete();
},
secondary: true,
},
{
text: 'Next',
action() {
this.next();
},
},
],
advanceOn: { advanceOn: {
selector: 'body', selector: 'body',
event: 'event::measurement_added', event: 'event::measurement_added',
@ -483,21 +393,6 @@ window.config = {
selector: '[data-cy="prompt-begin-tracking-yes-btn"]', selector: '[data-cy="prompt-begin-tracking-yes-btn"]',
event: 'click', 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"]'), beforeShowPromise: () => waitForElement('[data-cy="prompt-begin-tracking-yes-btn"]'),
}, },
{ {
@ -508,21 +403,6 @@ window.config = {
element: '#trackedMeasurements-btn', element: '#trackedMeasurements-btn',
on: 'left-start', on: 'left-start',
}, },
buttons: [
{
text: 'Skip all',
action() {
this.complete();
},
secondary: true,
},
{
text: 'Next',
action() {
this.next();
},
},
],
advanceOn: { advanceOn: {
selector: '#trackedMeasurements-btn', selector: '#trackedMeasurements-btn',
event: 'click', event: 'click',
@ -537,21 +417,6 @@ window.config = {
element: '.viewport-element', element: '.viewport-element',
on: 'top', on: 'top',
}, },
buttons: [
{
text: 'Skip all',
action() {
this.complete();
},
secondary: true,
},
{
text: 'Next',
action() {
this.next();
},
},
],
advanceOn: { advanceOn: {
selector: '.cornerstone-viewport-element', selector: '.cornerstone-viewport-element',
event: 'CORNERSTONE_TOOLS_MOUSE_WHEEL', event: 'CORNERSTONE_TOOLS_MOUSE_WHEEL',
@ -566,21 +431,6 @@ window.config = {
element: '[data-cy="measurement-item"]', element: '[data-cy="measurement-item"]',
on: 'left-start', on: 'left-start',
}, },
buttons: [
{
text: 'Skip all',
action() {
this.complete();
},
secondary: true,
},
{
text: 'Next',
action() {
this.next();
},
},
],
advanceOn: { advanceOn: {
selector: '[data-cy="measurement-item"]', selector: '[data-cy="measurement-item"]',
event: 'click', event: 'click',
@ -595,21 +445,6 @@ window.config = {
element: '[data-cy="Layout"]', element: '[data-cy="Layout"]',
on: 'bottom', on: 'bottom',
}, },
buttons: [
{
text: 'Skip all',
action() {
this.complete();
},
secondary: true,
},
{
text: 'Next',
action() {
this.next();
},
},
],
advanceOn: { advanceOn: {
selector: '[data-cy="Layout"]', selector: '[data-cy="Layout"]',
event: 'click', event: 'click',
@ -641,6 +476,23 @@ window.config = {
], ],
tourOptions: { tourOptions: {
useModalOverlay: true, useModalOverlay: true,
defaultStepOptions: {
buttons: [
{
text: 'Skip all',
action() {
this.complete();
},
secondary: true,
},
{
text: 'Next',
action() {
this.next();
},
},
],
},
}, },
}, },
], ],

13
platform/ui-next/src/components/Onboarding/Onboarding.css
View File

@ -1,9 +1,9 @@
.shepherd-header { .shepherd-header {
@apply !bg-popover !p-0; @apply !bg-popover !w-[100%] !p-0;
} }
.shepherd-title { .shepherd-title {
@apply text-highlight text-xl; @apply !text-highlight !w-[100%] !break-words !text-lg !leading-[1.5];
} }
.shepherd-content { .shepherd-content {
@ -11,15 +11,15 @@
} }
.shepherd-element { .shepherd-element {
@apply !bg-popover !min-w-[260px] !max-w-[382px]; @apply !bg-popover !max-w-[260px];
} }
.shepherd-text { .shepherd-text {
@apply text-foreground p-0 text-base leading-normal; @apply text-foreground !w-[100%] p-0 text-base leading-normal;
} }
.shepherd-footer { .shepherd-footer {
@apply p-0; @apply !w-[100%] p-0;
} }
.shepherd-button { .shepherd-button {
@ -35,7 +35,8 @@
} }
.shepherd-element[data-popper-placement^='left'] > .shepherd-arrow { .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 { .shepherd-element[data-popper-placement^='top'] > .shepherd-arrow {

52
platform/ui-next/src/components/Onboarding/Onboarding.tsx
View File

@ -5,12 +5,10 @@ import { useLocation } from 'react-router';
import 'shepherd.js/dist/css/shepherd.css'; import 'shepherd.js/dist/css/shepherd.css';
import './Onboarding.css'; import './Onboarding.css';
const hasTourBeenShown = (tourId: string) => { const getShownTours = () => JSON.parse(localStorage.getItem('shownTours')) || [];
const shownTours = JSON.parse(localStorage.getItem('shownTours')) || []; const hasTourBeenShown = (tourId: string) => getShownTours().includes(tourId);
return shownTours.includes(tourId);
};
const markTourAsShown = (tourId: string) => { const markTourAsShown = (tourId: string) => {
const shownTours = JSON.parse(localStorage.getItem('shownTours')) || []; const shownTours = getShownTours();
if (!shownTours.includes(tourId)) { if (!shownTours.includes(tourId)) {
shownTours.push(tourId); shownTours.push(tourId);
localStorage.setItem('shownTours', JSON.stringify(shownTours)); localStorage.setItem('shownTours', JSON.stringify(shownTours));
@ -26,18 +24,46 @@ const Onboarding = () => {
tourOptions: TourOptions; tourOptions: TourOptions;
steps: StepOptions[]; steps: StepOptions[];
}>; }>;
useEffect(() => { useEffect(() => {
if (!tours) { if (!tours) {
return null; return;
} }
const pathname = location.pathname;
const matchingTour = tours.find(tour => tour.route === pathname); const matchingTour = tours.find(tour => tour.route === location.pathname);
if (matchingTour && !hasTourBeenShown(matchingTour.id)) { if (!matchingTour || hasTourBeenShown(matchingTour.id)) {
const tourInstance = new Shepherd.Tour(matchingTour.tourOptions); return;
matchingTour.steps.forEach(step => tourInstance.addStep(step));
tourInstance.start();
markTourAsShown(matchingTour.id);
} }
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]); }, [Shepherd, tours, location.pathname]);
return null; return null;