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: [
{
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();
},
},
],
},
},
},
],

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

@ -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 {

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 './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;