@abyss-project/commons-front-core 9.4.2 → 9.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,88 +1,88 @@
|
|
|
1
|
-
import { useState } from 'react';
|
|
2
|
-
import Button from '@mui/material/Button';
|
|
3
|
-
import AddRounded from '@mui/icons-material/AddRounded';
|
|
4
|
-
import FileUploadOutlined from '@mui/icons-material/FileUploadOutlined';
|
|
5
|
-
import { ProductTour } from '../../src/components/layers/ProductTour/ProductTour';
|
|
6
|
-
import type { ProductTourStep } from '../../src/components/layers/ProductTour/ProductTour';
|
|
7
|
-
import { Example, LastEvent, Row, Showcase, useEventLog } from '../frame';
|
|
8
|
-
|
|
9
|
-
const STEPS: [ProductTourStep, ...ProductTourStep[]] = [
|
|
10
|
-
{
|
|
11
|
-
target: 'catalog-create-event',
|
|
12
|
-
title: 'Créez votre premier événement',
|
|
13
|
-
description:
|
|
14
|
-
'Donnez-lui un nom et une date : vous obtenez un lien à envoyer à vos invités pour qu’ils déposent leurs photos.',
|
|
15
|
-
},
|
|
16
|
-
{
|
|
17
|
-
target: 'catalog-import',
|
|
18
|
-
title: 'Importez vos photos',
|
|
19
|
-
description:
|
|
20
|
-
'Ajoutez celles que vous avez déjà prises, depuis votre appareil ou AbyssCloud.',
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
target: 'catalog-help',
|
|
24
|
-
title: 'Revoir la visite',
|
|
25
|
-
description:
|
|
26
|
-
'Elle se relance à tout moment depuis le menu d’aide du service.',
|
|
27
|
-
},
|
|
28
|
-
];
|
|
29
|
-
|
|
30
|
-
export const ProductTourPage = () => {
|
|
31
|
-
const { log } = useEventLog();
|
|
32
|
-
// Opened on arrival, so the page shows the first step without a click.
|
|
33
|
-
const [open, setOpen] = useState(true);
|
|
34
|
-
return (
|
|
35
|
-
<Showcase
|
|
36
|
-
family="Couches"
|
|
37
|
-
name="ProductTour"
|
|
38
|
-
description="Visite guidée d'un service : une bulle ancrée sur un élément data-tour, le reste de la page voilé autour d'une découpe. « Étape n sur N » et une croix en en-tête, « Précédent » dès la deuxième étape ; Échap et la croix passent la visite, les flèches changent d'étape ; sous 768 px, une feuille du bas. Une cible cachée est ignorée."
|
|
39
|
-
>
|
|
40
|
-
<Example title="Première visite de Memories">
|
|
41
|
-
<Row>
|
|
42
|
-
<Button
|
|
43
|
-
data-tour="catalog-import"
|
|
44
|
-
variant="outlined"
|
|
45
|
-
startIcon={<FileUploadOutlined />}
|
|
46
|
-
>
|
|
47
|
-
Importer
|
|
48
|
-
</Button>
|
|
49
|
-
{/* A hidden twin of the first target: the tour points at the rendered one. */}
|
|
50
|
-
<Button
|
|
51
|
-
data-tour="catalog-create-event"
|
|
52
|
-
variant="contained"
|
|
53
|
-
sx={{ display: 'none' }}
|
|
54
|
-
>
|
|
55
|
-
Créer un événement
|
|
56
|
-
</Button>
|
|
57
|
-
<Button
|
|
58
|
-
data-tour="catalog-create-event"
|
|
59
|
-
variant="contained"
|
|
60
|
-
startIcon={<AddRounded />}
|
|
61
|
-
>
|
|
62
|
-
Créer un événement
|
|
63
|
-
</Button>
|
|
64
|
-
<Button
|
|
65
|
-
data-tour="catalog-help"
|
|
66
|
-
variant="text"
|
|
67
|
-
onClick={() => setOpen(true)}
|
|
68
|
-
>
|
|
69
|
-
Aide
|
|
70
|
-
</Button>
|
|
71
|
-
</Row>
|
|
72
|
-
</Example>
|
|
73
|
-
<LastEvent />
|
|
74
|
-
<ProductTour
|
|
75
|
-
open={open}
|
|
76
|
-
steps={STEPS}
|
|
77
|
-
onComplete={() => {
|
|
78
|
-
setOpen(false);
|
|
79
|
-
log('visite terminée');
|
|
80
|
-
}}
|
|
81
|
-
onSkip={() => {
|
|
82
|
-
setOpen(false);
|
|
83
|
-
log('visite passée');
|
|
84
|
-
}}
|
|
85
|
-
/>
|
|
86
|
-
</Showcase>
|
|
87
|
-
);
|
|
88
|
-
};
|
|
1
|
+
import { useState } from 'react';
|
|
2
|
+
import Button from '@mui/material/Button';
|
|
3
|
+
import AddRounded from '@mui/icons-material/AddRounded';
|
|
4
|
+
import FileUploadOutlined from '@mui/icons-material/FileUploadOutlined';
|
|
5
|
+
import { ProductTour } from '../../src/components/layers/ProductTour/ProductTour';
|
|
6
|
+
import type { ProductTourStep } from '../../src/components/layers/ProductTour/ProductTour';
|
|
7
|
+
import { Example, LastEvent, Row, Showcase, useEventLog } from '../frame';
|
|
8
|
+
|
|
9
|
+
const STEPS: [ProductTourStep, ...ProductTourStep[]] = [
|
|
10
|
+
{
|
|
11
|
+
target: 'catalog-create-event',
|
|
12
|
+
title: 'Créez votre premier événement',
|
|
13
|
+
description:
|
|
14
|
+
'Donnez-lui un nom et une date : vous obtenez un lien à envoyer à vos invités pour qu’ils déposent leurs photos.',
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
target: 'catalog-import',
|
|
18
|
+
title: 'Importez vos photos',
|
|
19
|
+
description:
|
|
20
|
+
'Ajoutez celles que vous avez déjà prises, depuis votre appareil ou AbyssCloud.',
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
target: 'catalog-help',
|
|
24
|
+
title: 'Revoir la visite',
|
|
25
|
+
description:
|
|
26
|
+
'Elle se relance à tout moment depuis le menu d’aide du service.',
|
|
27
|
+
},
|
|
28
|
+
];
|
|
29
|
+
|
|
30
|
+
export const ProductTourPage = () => {
|
|
31
|
+
const { log } = useEventLog();
|
|
32
|
+
// Opened on arrival, so the page shows the first step without a click.
|
|
33
|
+
const [open, setOpen] = useState(true);
|
|
34
|
+
return (
|
|
35
|
+
<Showcase
|
|
36
|
+
family="Couches"
|
|
37
|
+
name="ProductTour"
|
|
38
|
+
description="Visite guidée d'un service : une bulle ancrée sur un élément data-tour, le reste de la page voilé autour d'une découpe. « Étape n sur N » et une croix en en-tête, « Précédent » dès la deuxième étape ; Échap et la croix passent la visite, les flèches changent d'étape ; sous 768 px, une feuille du bas. Une cible cachée est ignorée."
|
|
39
|
+
>
|
|
40
|
+
<Example title="Première visite de Memories">
|
|
41
|
+
<Row>
|
|
42
|
+
<Button
|
|
43
|
+
data-tour="catalog-import"
|
|
44
|
+
variant="outlined"
|
|
45
|
+
startIcon={<FileUploadOutlined />}
|
|
46
|
+
>
|
|
47
|
+
Importer
|
|
48
|
+
</Button>
|
|
49
|
+
{/* A hidden twin of the first target: the tour points at the rendered one. */}
|
|
50
|
+
<Button
|
|
51
|
+
data-tour="catalog-create-event"
|
|
52
|
+
variant="contained"
|
|
53
|
+
sx={{ display: 'none' }}
|
|
54
|
+
>
|
|
55
|
+
Créer un événement
|
|
56
|
+
</Button>
|
|
57
|
+
<Button
|
|
58
|
+
data-tour="catalog-create-event"
|
|
59
|
+
variant="contained"
|
|
60
|
+
startIcon={<AddRounded />}
|
|
61
|
+
>
|
|
62
|
+
Créer un événement
|
|
63
|
+
</Button>
|
|
64
|
+
<Button
|
|
65
|
+
data-tour="catalog-help"
|
|
66
|
+
variant="text"
|
|
67
|
+
onClick={() => setOpen(true)}
|
|
68
|
+
>
|
|
69
|
+
Aide
|
|
70
|
+
</Button>
|
|
71
|
+
</Row>
|
|
72
|
+
</Example>
|
|
73
|
+
<LastEvent />
|
|
74
|
+
<ProductTour
|
|
75
|
+
open={open}
|
|
76
|
+
steps={STEPS}
|
|
77
|
+
onComplete={() => {
|
|
78
|
+
setOpen(false);
|
|
79
|
+
log('visite terminée');
|
|
80
|
+
}}
|
|
81
|
+
onSkip={() => {
|
|
82
|
+
setOpen(false);
|
|
83
|
+
log('visite passée');
|
|
84
|
+
}}
|
|
85
|
+
/>
|
|
86
|
+
</Showcase>
|
|
87
|
+
);
|
|
88
|
+
};
|
|
@@ -39,6 +39,8 @@ export declare const placeBubble: (target: TourRect, bubble: TourSize, viewport:
|
|
|
39
39
|
export declare const centerBubble: (bubble: TourSize, viewport: TourSize, margin: number) => Pick<BubblePlacement, "top" | "left">;
|
|
40
40
|
/** The rectangle `rect` grown by `by` px on every side. */
|
|
41
41
|
export declare const inflateRect: (rect: TourRect, by: number) => TourRect;
|
|
42
|
+
/** The part of `rect` that lies `inset` px or more inside the viewport. */
|
|
43
|
+
export declare const clampRect: (rect: TourRect, viewport: TourSize, inset: number) => TourRect;
|
|
42
44
|
export declare const toTourRect: (rect: DOMRectReadOnly) => TourRect;
|
|
43
45
|
export declare const sameRect: (a: TourRect | null, b: TourRect | null) => boolean;
|
|
44
46
|
export declare const sameSize: (a: TourSize, b: TourSize) => boolean;
|