Skip to content

Commit 1eac60f

Browse files
authored
Merge pull request #9006 from marmelab/ee-webm
[Doc] Use WebM and MP4 videos instead of GIF for EE components
2 parents ac1f2a3 + 5add589 commit 1eac60f

27 files changed

+168
-33
lines changed

docs/AccordionForm.md

+11-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ title: "AccordionForm"
77

88
This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" src="./img/premium.svg" /> component offers an alternative layout for Edit and Create forms, where Inputs are grouped into expandable panels.
99

10-
![AccordionForm](https://marmelab.com/ra-enterprise/modules/assets/ra-accordion-form-overview.gif)
10+
<video controls autoplay playsinline muted loop>
11+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-accordion-form-overview.webm" type="video/webm" />
12+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-accordion-form-overview.mp4" type="video/mp4" />
13+
Your browser does not support the video tag.
14+
</video>
1115

1216
Users can open or close each panel independently, and each panel has a header that gets highlighted when the section contains validation errors.
1317

@@ -68,7 +72,11 @@ By default, each child accordion element handles its expanded state independentl
6872

6973
You can also use the `<AccordionSection>` component as a child of `<SimpleForm>` for secondary inputs:
7074

71-
![Accordion section](https://marmelab.com/ra-enterprise/modules/assets/ra-accordion-section-overview.gif)
75+
<video controls autoplay playsinline muted loop>
76+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-accordion-section-overview.webm" type="video/webm" />
77+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-accordion-section-overview.mp4" type="video/mp4" />
78+
Your browser does not support the video tag.
79+
</video>
7280

7381
Check [the `ra-form-layout` documentation](https://marmelab.com/ra-enterprise/modules/ra-form-layout##accordionform) for more details.
7482

@@ -399,6 +407,7 @@ Renders children (Inputs) inside a MUI `<Accordion>` element without a Card styl
399407
<video controls autoplay playsinline muted loop>
400408
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-accordion-section-overview.webm" type="video/webm"/>
401409
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-accordion-section-overview.mp4" type="video/mp4"/>
410+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-accordion-section-overview.mp4" type="video/mp4"/>
402411
Your browser does not support the video tag.
403412
</video>
404413

docs/AppBar.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -383,7 +383,11 @@ export const MyAppBar = () => (
383383

384384
A common use case for app bar customization is to add a site-wide search engine. The `<Search>` component is a good starting point for this.
385385

386-
![ra-search](https://marmelab.com/ra-enterprise/modules/assets/ra-search-demo.gif)
386+
<video controls autoplay playsinline muted loop>
387+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-search-demo.webm" type="video/webm" />
388+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-search-demo.mp4" type="video/mp4" />
389+
Your browser does not support the video tag.
390+
</video>
387391

388392
```jsx
389393
// in src/MyAppBar.jsx

docs/Breadcrumb.md

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ The `<Breadcrumb>` component is designed to be integrated into the app layout. E
1111

1212
<video controls autoplay playsinline muted loop width="100%">
1313
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-navigation/latest/breadcumb-nested-resource.webm" type="video/webm" />
14+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-navigation/latest/breadcumb-nested-resource.mp4" type="video/mp4" />
1415
Your browser does not support the video tag.
1516
</video>
1617

docs/Buttons.md

+10-2
Original file line numberDiff line numberDiff line change
@@ -434,9 +434,17 @@ See [The theming documentation](./Theming.md#menuitemlink) for more details.
434434

435435
**Tip**: If you need a multi-level menu, or a Mega Menu opening panels with custom content, check out [the `ra-navigation`<img class="icon" src="./img/premium.svg" /> module](https://marmelab.com/ra-enterprise/modules/ra-navigation) (part of the [Enterprise Edition](https://marmelab.com/ra-enterprise))
436436

437-
![multi-level menu](https://marmelab.com/ra-enterprise/modules/assets/ra-multilevelmenu-item.gif)
437+
<video controls autoplay playsinline muted loop>
438+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-multilevelmenu-item.webm" type="video/webm" />
439+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-multilevelmenu-item.mp4" type="video/mp4" />
440+
Your browser does not support the video tag.
441+
</video>
438442

439-
![MegaMenu and Breadcrumb](https://marmelab.com/ra-enterprise/modules/assets/ra-multilevelmenu-categories.gif)
443+
<video controls autoplay playsinline muted loop>
444+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-multilevelmenu-categories.webm" type="video/webm" />
445+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-multilevelmenu-categories.mp4" type="video/mp4" />
446+
Your browser does not support the video tag.
447+
</video>
440448

441449
#### `sx`: CSS API
442450

docs/Calendar.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ title: "The Calendar Component"
77

88
This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" src="./img/premium.svg" /> component, part of [the `ra-calendar` module](https://marmelab.com/ra-enterprise/modules/ra-calendar), renders a list of events as a calendar.
99

10-
![the `<Calendar>` component](https://marmelab.com/ra-enterprise/modules/assets/ra-calendar.gif)
10+
<video controls autoplay playsinline muted loop>
11+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-calendar.webm" type="video/webm" />
12+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-calendar.mp4" type="video/mp4" />
13+
Your browser does not support the video tag.
14+
</video>
1115

1216
The user interface offers everything you expect:
1317

docs/Create.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -560,7 +560,11 @@ Note: In order to get the `mutationOptions` being considered, you have to set th
560560

561561
`<Create>` is designed to be a page component, passed to the `create` prop of the `<Resource>` component. But you may want to let users create a record from another page.
562562

563-
![CreateDialog](https://marmelab.com/ra-enterprise/modules/assets/create-dialog.gif)
563+
<video controls autoplay playsinline muted loop>
564+
<source src="https://marmelab.com/ra-enterprise/modules/assets/create-dialog.webm" type="video/webm" />
565+
<source src="https://marmelab.com/ra-enterprise/modules/assets/create-dialog.mp4" type="video/mp4" />
566+
Your browser does not support the video tag.
567+
</video>
564568

565569
* If you want to allow creation from the `list` page, use [the `<CreateDialog>` component](./CreateDialog.md)
566570
* If you want to allow creation from another page, use [the `<CreateInDialogButton>` component](./CreateInDialogButton.md)

docs/CreateDialog.md

+10-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ title: "CreateDialog"
77

88
This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" src="./img/premium.svg" /> component offers a replacement to [the `<Create>` component](./Create.md) allowing users to create records without leaving the context of the list page.
99

10-
![CreateDialog](https://marmelab.com/ra-enterprise/modules/assets/create-dialog.gif)
10+
<video controls autoplay playsinline muted loop>
11+
<source src="https://marmelab.com/ra-enterprise/modules/assets/create-dialog.webm" type="video/webm" />
12+
<source src="https://marmelab.com/ra-enterprise/modules/assets/create-dialog.mp4" type="video/mp4" />
13+
Your browser does not support the video tag.
14+
</video>
1115

1216
## Usage
1317

@@ -75,7 +79,11 @@ This may not be what you want if you need to display the creation dialog in anot
7579

7680
In that case, use [the `<CreateInDialogButton>` component](./CreateInDialogButton.md), which doesn't create a route, but renders the dialog when the user clicks on it.
7781

78-
![CreateInDialogButton](https://marmelab.com/ra-enterprise/modules/assets/ra-form-layout/latest/CreateInDialogButton.gif)
82+
<video controls autoplay playsinline muted loop>
83+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-form-layout/latest/CreateInDialogButton.webm" type="video/webm" />
84+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-form-layout/latest/CreateInDialogButton.mp4" type="video/mp4" />
85+
Your browser does not support the video tag.
86+
</video>
7987

8088
Put `<CreateInDialogButton>` wherever you would put a `<CreateButton>`, and use the same children as you would for a `<Create>` component (e.g. a `<SimpleForm>`). Don't forget to preset the `record` prop if you want to initialize the form with a foreign key.
8189

docs/CreateInDialogButton.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@ This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" s
99

1010
It can be useful in case you want the ability to create a record linked by a reference to the currently edited record, or if you have a nested `<Datagrid>` inside a `<Show>` or an `<Edit>` view.
1111

12-
![CreateInDialogButton](https://marmelab.com/ra-enterprise/modules/assets/ra-form-layout/latest/CreateInDialogButton.gif)
12+
<video controls autoplay playsinline muted loop>
13+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-form-layout/latest/CreateInDialogButton.webm" type="video/webm" />
14+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-form-layout/latest/CreateInDialogButton.mp4" type="video/mp4" />
15+
Your browser does not support the video tag.
16+
</video>
1317

1418
Note that this component doesn't use routing, so it doesn't change the URL. It's therefore not possible to bookmark the creation dialog, or to link to it from another page. If you need that functionality, use [`<CreateDialog>`](./CreateDialog.md) instead.
1519

docs/Datagrid.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -949,7 +949,11 @@ const PostList = () => (
949949

950950
You can combine a datagrid and an edition form into a unified spreadsheet view, "à la" Excel. This is useful when you want to let users edit a large number of records at once.
951951

952-
![Editable Datagrid](https://marmelab.com/ra-enterprise/modules/assets/ra-editable-datagrid-overview.gif)
952+
<video controls autoplay playsinline muted loop>
953+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-editable-datagrid-overview.webm" type="video/webm" />
954+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-editable-datagrid-overview.mp4" type="video/mp4" />
955+
Your browser does not support the video tag.
956+
</video>
953957

954958
`<EditableDatagrid>` is a drop-in replacement for `<Datagrid>`. It expects 2 additional props: `createForm` and `editForm`, the components to be displayed when a user creates or edits a row. The `<RowForm>` component allows to create such forms using react-admin Input components.
955959

docs/DualListInput.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ title: "The DualListInput Component"
77

88
This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" src="./img/premium.svg" /> component allows to edit array values, one-to-many or many-to-many relationships by moving items from one list to another.
99

10-
![DualListInput](https://marmelab.com/ra-enterprise/modules/assets/ra-relationships-duallistinput.gif)
10+
<video controls autoplay playsinline muted loop>
11+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-relationships-duallistinput.webm" type="video/webm" />
12+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-relationships-duallistinput.mp4" type="video/mp4" />
13+
Your browser does not support the video tag.
14+
</video>
1115

1216
This input allows editing values that are arrays of scalar values, e.g. `[123, 456]`.
1317

docs/Edit.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -634,7 +634,11 @@ You can do the same for error notifications, by passing a custom `onError` call
634634

635635
`<Edit>` is designed to be a page component, passed to the `edit` prop of the `<Resource>` component. But you may want to let users edit a record from another page.
636636

637-
![EditDialog](https://marmelab.com/ra-enterprise/modules/assets/edit-dialog.gif)
637+
<video controls autoplay playsinline muted loop>
638+
<source src="https://marmelab.com/ra-enterprise/modules/assets/edit-dialog.webm" type="video/webm" />
639+
<source src="https://marmelab.com/ra-enterprise/modules/assets/edit-dialog.mp4" type="video/mp4" />
640+
Your browser does not support the video tag.
641+
</video>
638642

639643
* If you want to allow edition from the `list` page, use [the `<EditDialog>` component](./EditDialog.md)
640644
* If you want to allow edition from another page, use [the `<EditInDialogButton>` component](./EditInDialogButton.md)

docs/EditDialog.md

+10-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ title: "EditDialog"
77

88
This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" src="./img/premium.svg" /> component offers a replacement to [the `<Edit>` component](./Edit.md) allowing users to update records without leaving the context of the list page.
99

10-
![EditDialog](https://marmelab.com/ra-enterprise/modules/assets/edit-dialog.gif)
10+
<video controls autoplay playsinline muted loop>
11+
<source src="https://marmelab.com/ra-enterprise/modules/assets/edit-dialog.webm" type="video/webm" />
12+
<source src="https://marmelab.com/ra-enterprise/modules/assets/edit-dialog.mp4" type="video/mp4" />
13+
Your browser does not support the video tag.
14+
</video>
1115

1216
## Usage
1317

@@ -76,7 +80,11 @@ This may not be what you want if you need to display the edit dialog in another
7680

7781
In that case, use [the `<EditInDialogButton>` component](./EditInDialogButton.md), which doesn't create a route, but renders the dialog when the user clicks on it.
7882

79-
![EditInDialogButton](https://marmelab.com/ra-enterprise/modules/assets/ra-form-layout/latest/InDialogButtons.gif)
83+
<video controls autoplay playsinline muted loop>
84+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-form-layout/latest/InDialogButtons.webm" type="video/webm" />
85+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-form-layout/latest/InDialogButtons.mp4" type="video/mp4" />
86+
Your browser does not support the video tag.
87+
</video>
8088

8189
Put `<EditInDialogButton>` wherever you would put an `<EditButton>`, and use the same children as you would for an `<Edit>` component (e.g. a `<SimpleForm>`):
8290

docs/EditInDialogButton.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@ This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" s
99

1010
It can be useful in case you want the ability to edit a record linked by a reference to the currently edited record, or if you have a nested `<Datagrid>` inside a `<Show>` or an `<Edit>` view.
1111

12-
![EditInDialogButton](https://marmelab.com/ra-enterprise/modules/assets/ra-form-layout/latest/InDialogButtons.gif)
12+
<video controls autoplay playsinline muted loop>
13+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-form-layout/latest/InDialogButtons.webm" type="video/webm" />
14+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-form-layout/latest/InDialogButtons.mp4" type="video/mp4" />
15+
Your browser does not support the video tag.
16+
</video>
1317

1418
Note that this component doesn't use routing, so it doesn't change the URL. It's therefore not possible to bookmark the edit dialog, or to link to it from another page. If you need that functionality, use [`<EditDialog>`](./EditDialog.md) instead.
1519

docs/EditTutorial.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -948,7 +948,11 @@ Users often need to edit data from several resources in the same form. React-adm
948948
- [`<ReferenceManyInput>`](./ReferenceManyInput.md) lets users edit a list of related records
949949
- [`<ReferenceManyToManyInput>`](./ReferenceManyToManyInput.md) lets users edit a list of related records via an associative table
950950

951-
![EditInDialogButton](https://marmelab.com/ra-enterprise/modules/assets/ra-form-layout/latest/InDialogButtons.gif)
951+
<video controls autoplay playsinline muted loop>
952+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-form-layout/latest/InDialogButtons.webm" type="video/webm" />
953+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-form-layout/latest/InDialogButtons.mp4" type="video/mp4" />
954+
Your browser does not support the video tag.
955+
</video>
952956

953957
<video controls autoplay playsinline muted loop>
954958
<source src="./img/reference-many-input.webm" type="video/webm"/>

docs/EditableDatagrid.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ title: "The EditableDatagrid Component"
77

88
This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" src="./img/premium.svg" /> component offers an "edit-in-place" experience in a `<Datagrid>`.
99

10-
![Editable Datagrid](https://marmelab.com/ra-enterprise/modules/assets/ra-editable-datagrid-overview.gif)
10+
<video controls autoplay playsinline muted loop>
11+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-editable-datagrid-overview.webm" type="video/webm" />
12+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-editable-datagrid-overview.mp4" type="video/mp4" />
13+
Your browser does not support the video tag.
14+
</video>
1115

1216
## Usage
1317

docs/Features.md

+15-3
Original file line numberDiff line numberDiff line change
@@ -773,7 +773,11 @@ To learn more about authentication, roles, and permissions, check out the follow
773773

774774
Most admin and B2B apps require that user actions are recorded for audit purposes. React-admin provides templates for displaying such audit logs, and helpers to automatically **record user actions**.
775775

776-
![Audit log](https://marmelab.com/ra-enterprise/modules/assets/ra-audit-log/latest/ra-audit-log.gif)
776+
<video controls autoplay playsinline muted loop>
777+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-audit-log/latest/ra-audit-log.webm" type="video/webm" />
778+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-audit-log/latest/ra-audit-log.mp4" type="video/mp4" />
779+
Your browser does not support the video tag.
780+
</video>
777781

778782
```jsx
779783
import { useGetList } from "react-admin";
@@ -813,7 +817,11 @@ const dataProvider = addEventsForMutations(
813817

814818
If your app needs to display **events**, **appointments**, **time intervals**, or any other kind of time-based data, you can use the [`<Calendar>`](./Calendar.md) component.
815819

816-
![the `<Calendar>` component](https://marmelab.com/ra-enterprise/modules/assets/ra-calendar.gif)
820+
<video controls autoplay playsinline muted loop>
821+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-calendar.webm" type="video/webm" />
822+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-calendar.mp4" type="video/mp4" />
823+
Your browser does not support the video tag.
824+
</video>
817825

818826
```jsx
819827
import { Calendar, getFilterValuesFromInterval } from '@react-admin/ra-calendar';
@@ -899,7 +907,11 @@ Check out the following components for displaying hierarchical data:
899907

900908
A UI kit like Material UI provides basic building blocks like a button, a form, a table, etc. React-admin goes one level higher and provides a set of **[application components](./Reference.md#components)** specifically designed for building admin and B2B *applications*.
901909

902-
![editable Datagrid](https://marmelab.com/ra-enterprise/modules/assets/ra-editable-datagrid/latest/ra-editable-datagrid-overview.gif)
910+
<video controls autoplay playsinline muted loop>
911+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-editable-datagrid/latest/ra-editable-datagrid-overview.webm" type="video/webm" />
912+
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-editable-datagrid/latest/ra-editable-datagrid-overview.mp4" type="video/mp4" />
913+
Your browser does not support the video tag.
914+
</video>
903915

904916
These building blocks include:
905917

0 commit comments

Comments
 (0)