Skip to content

Commit 31584e6

Browse files
slax57slax57
committed
fix webm files
1 parent f519477 commit 31584e6

File tree

216 files changed

+427
-106
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

216 files changed

+427
-106
lines changed

‎docs/Architecture.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,10 @@ We spend a great deal of time refining the UI to make it as intuitive as possibl
105105

106106
React-admin produces a user interface that is voluntarily bland by default because we want to emphasize content rather than chrome.
107107

108-
![Sort Button](./img/sort-button.gif)
108+
<video controls autoplay muted loop width="100%">
109+
<source src="./img/sort-button.webm" type="video/webm">
110+
Your browser does not support the video tag.
111+
</video>
109112

110113
As for the developer experience, react-admin is constantly evolving to find the sweet spot between an intuitive API, power user features, not too much magic, and just enough documentation. The core team are the first testers of react-admin, and pay attention to the productivity, debuggability, discoverability, performance, and robustness of all the hooks and components.
111114

‎docs/ArrayInput.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ title: "The ArrayInput Component"
77

88
To edit arrays of data embedded inside a record, `<ArrayInput>` creates a list of sub-forms.
99

10-
![ArrayInput](./img/array-input.gif)
10+
<video controls autoplay muted loop width="100%">
11+
<source src="./img/array-input.webm" type="video/webm">
12+
Your browser does not support the video tag.
13+
</video>
1114

1215
`<ArrayInput>` allows editing of embedded arrays, like the `items` field in the following `order` record:
1316

‎docs/AuthProviderWriting.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -320,7 +320,10 @@ export default {
320320
};
321321
```
322322
323-
![Logout button](./img/logout.gif)
323+
<video controls autoplay muted loop width="100%">
324+
<source src="./img/logout.webm" type="video/webm">
325+
Your browser does not support the video tag.
326+
</video>
324327
325328
The `authProvider.logout()` method is also a good place to notify the authentication backend that the user credentials are no longer valid after logout.
326329

‎docs/Authentication.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@ title: "security"
55

66
# Security
77

8-
![Login](./img/login.gif)
8+
<video controls autoplay muted loop width="100%">
9+
<source src="./img/login.webm" type="video/webm">
10+
Your browser does not support the video tag.
11+
</video>
912

1013
React-admin lets you secure your admin app with the authentication strategy of your choice. Since there are many possible strategies (Basic Auth, JWT, OAuth, etc.), react-admin delegates authentication logic to an `authProvider`.
1114

‎docs/AutocompleteArrayInput.md

+8-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ title: "The AutocompleteArrayInput Component"
88
To let users choose multiple values in a list using a dropdown with autocompletion, use `<AutocompleteArrayInput>`.
99
It renders using MUI [Autocomplete](https://mui.com/components/autocomplete/).
1010

11-
![AutocompleteArrayInput](./img/autocomplete-array-input.gif)
11+
<video controls autoplay muted loop width="100%">
12+
<source src="./img/autocomplete-array-input.webm" type="video/webm">
13+
Your browser does not support the video tag.
14+
</video>
1215

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

@@ -133,7 +136,10 @@ const choices = possibleValues.map(value => ({ id: value, name: ucfirst(value) }
133136

134137
To allow users to add new options, pass a React element as the `create` prop. `<AutocompleteArrayInput>` will then render a "Create" option at the bottom of the choices list. When clicked, it will render the create element.
135138

136-
![create option](./img/autocomplete-array-input-create.gif)
139+
<video controls autoplay muted loop width="100%">
140+
<source src="./img/autocomplete-array-input-create.webm" type="video/webm">
141+
Your browser does not support the video tag.
142+
</video>
137143

138144
{% raw %}
139145
```jsx

‎docs/AutocompleteInput.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ title: "The AutocompleteInput Component"
88
To let users choose a value in a list using a dropdown with autocompletion, use `<AutocompleteInput>`.
99
It renders using [MUI's `<Autocomplete>`](https://mui.com/components/autocomplete/).
1010

11-
![AutocompleteInput](./img/autocomplete-input.gif)
11+
<video controls autoplay muted loop width="100%">
12+
<source src="./img/autocomplete-input.webm" type="video/webm">
13+
Your browser does not support the video tag.
14+
</video>
1215

1316
This input allows editing record fields that are scalar values, e.g. `123`, `'admin'`, etc.
1417

‎docs/BooleanInput.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ title: "The BooleanInput Component"
77

88
`<BooleanInput />` renders a switch allowing users to set the value `true` or `false` to a record field.
99

10-
![BooleanInput](./img/boolean-input.gif)
10+
<video controls autoplay muted loop width="100%">
11+
<source src="./img/boolean-input.webm" type="video/webm">
12+
Your browser does not support the video tag.
13+
</video>
1114

1215
**Tip**: This input doesn't let users set a `null` value - only `true` or `false`. Use the [`<NullableBooleanInput />`](./NullableBooleanInput.md) component if you have to handle non-required booleans.
1316

‎docs/Buttons.md

+8-2
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,10 @@ export const PostList = () => (
256256

257257
This button is an internal component used by react-admin in [the Filter button/form combo](./FilteringTutorial.md#the-filter-buttonform-combo).
258258

259-
![List Filters](./img/list_filter.gif)
259+
<video controls autoplay muted loop width="100%">
260+
<source src="./img/list_filter.webm" type="video/webm">
261+
Your browser does not support the video tag.
262+
</video>
260263

261264
#### `sx`: CSS API
262265

@@ -365,7 +368,10 @@ To override the style of all instances of `<SkipNavigationButton>` using the [MU
365368

366369
The `<MenuItemLink>` component displays a menu item with a label and an icon - or only the icon with a tooltip when the sidebar is minimized. It also handles the automatic closing of the menu on tap on mobile.
367370

368-
![custom menu icons](./img/custom-menu.gif)
371+
<video controls autoplay muted loop width="100%">
372+
<source src="./img/custom-menu.webm" type="video/webm">
373+
Your browser does not support the video tag.
374+
</video>
369375

370376
| Prop | Required | Type | Default | Description |
371377
| ------------- | -------- | -------------------- | ------- | ---------------------------------------- |

‎docs/CheckboxGroupInput.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ title: "The CheckboxGroupInput Component"
77

88
If you want to let the user choose multiple values among a list of possible values by showing them all, `<CheckboxGroupInput>` is the right component.
99

10-
![CheckboxGroupInput](./img/checkbox-group-input.gif)
10+
<video controls autoplay muted loop width="100%">
11+
<source src="./img/checkbox-group-input.webm" type="video/webm">
12+
Your browser does not support the video tag.
13+
</video>
1114

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

‎docs/Configurable.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ title: "The Configurable Component"
77

88
This component makes another component configurable by the end user. When users enter the configuration mode, they can customize the component's settings via the inspector.
99

10-
![SimpleListConfigurable](./img/SimpleListConfigurable.gif)
10+
<video controls autoplay muted loop width="100%">
11+
<source src="./img/SimpleListConfigurable.webm" type="video/webm">
12+
Your browser does not support the video tag.
13+
</video>
1114

1215
Some react-admin components are already configurable - or rather they have a configurable counterpart:
1316

‎docs/Datagrid.md

+20-5
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,10 @@ Finally, `<Datagrid>` inspects children for props that indicate how it should be
140140

141141
## `bulkActionButtons`
142142

143-
![Bulk Action Buttons](./img/bulk-actions-toolbar.gif)
143+
<video controls autoplay muted loop width="100%">
144+
<source src="./img/bulk-actions-toolbar.webm" type="video/webm">
145+
Your browser does not support the video tag.
146+
</video>
144147

145148
Bulk action buttons are buttons that affect several records at once, like mass deletion for instance. In the `<Datagrid>` component, the bulk actions toolbar appears when a user ticks the checkboxes in the first column of the table. The user can then choose a button from the bulk actions toolbar. By default, all Datagrids have a single bulk action button, the bulk delete button. You can add other bulk action buttons by passing a custom element as the `bulkActionButtons` prop of the `<Datagrid>` component:
146149

@@ -388,7 +391,10 @@ const PostList = () => (
388391

389392
## `expand`
390393

391-
![expandable panel](./img/datagrid_expand.gif)
394+
<video controls autoplay muted loop width="100%">
395+
<source src="./img/datagrid_expand.webm" type="video/webm">
396+
Your browser does not support the video tag.
397+
</video>
392398

393399
To show more data from the resource without adding too many columns, you can show data in an expandable panel below the row on demand, using the `expand` prop.
394400

@@ -804,7 +810,10 @@ const PostList = () => (
804810

805811
The [`<SelectColumnsButton>`](./SelectColumnsButton.md) component lets users hide, show, and reorder datagrid columns.
806812

807-
![SelectColumnsButton](./img/SelectColumnsButton.gif)
813+
<video controls autoplay muted loop width="100%">
814+
<source src="./img/SelectColumnsButton.webm" type="video/webm">
815+
Your browser does not support the video tag.
816+
</video>
808817

809818
```jsx
810819
import {
@@ -845,7 +854,10 @@ const PostList = () => (
845854

846855
You can let end users customize the fields displayed in the `<Datagrid>` by using the `<DatagridConfigurable>` component instead.
847856

848-
![DatagridConfigurable](./img/DatagridConfigurable.gif)
857+
<video controls autoplay muted loop width="100%">
858+
<source src="./img/DatagridConfigurable.webm" type="video/webm">
859+
Your browser does not support the video tag.
860+
</video>
849861

850862
```diff
851863
import {
@@ -972,7 +984,10 @@ Check [the `ra-editable-datagrid` documentation](https://marmelab.com/ra-enterpr
972984

973985
## Customizing Column Sort
974986

975-
![Sort Column Header](./img/sort-column-header.gif)
987+
<video controls autoplay muted loop width="100%">
988+
<source src="./img/sort-column-header.webm" type="video/webm">
989+
Your browser does not support the video tag.
990+
</video>
976991

977992
The column headers are buttons allowing users to change the list sort field and order. This feature requires no configuration and works out fo the box. The next sections explain how you can disable or modify the field used for sorting on a particular column.
978993

‎docs/DateInput.md

+8-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ title: "The DateInput Component"
77

88
Ideal for editing dates, `<DateInput>` renders an HTML `<input type="date">` element, that most browsers display as a [date picker](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date).
99

10-
![DateInput](./img/date-input.gif)
10+
<video controls autoplay muted loop width="100%">
11+
<source src="./img/date-input.webm" type="video/webm">
12+
Your browser does not support the video tag.
13+
</video>
1114

1215
The appearance of `<DateInput>` depends on the browser, and falls back to a text input on Safari. The date formatting in this input depends on the user's locale.
1316

@@ -42,4 +45,7 @@ It is not possible to customize the date format. Browsers use the user locale to
4245

4346
If you need to render a UI despite the browser locale, MUI also proposes a [Date Picker](https://mui.com/components/pickers/#date-pickers) component, which is more customizable than the native date picker, but requires additional packages.
4447

45-
![MUI Date picker](./img/date-picker.gif)
48+
<video controls autoplay muted loop width="100%">
49+
<source src="./img/date-picker.webm" type="video/webm">
50+
Your browser does not support the video tag.
51+
</video>

‎docs/DateTimeInput.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ title: "The DateTimeInput Component"
77

88
An input for editing dates with time. `<DateTimeInput>` renders an `<input type="datetime-local" >` element, that most browsers display as [date and time picker](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local).
99

10-
![DateTimeInput](./img/date-time-input.gif)
10+
<video controls autoplay muted loop width="100%">
11+
<source src="./img/date-time-input.webm" type="video/webm">
12+
Your browser does not support the video tag.
13+
</video>
1114

1215
The appearance depends on the browser, and falls back to a text input on safari. The date formatting in this input depends on the user's locale.
1316

‎docs/EditTutorial.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -895,4 +895,7 @@ Users often need to edit data from several resources in the same form. React-adm
895895

896896
![EditInDialogButton](https://marmelab.com/ra-enterprise/modules/assets/ra-form-layout/latest/InDialogButtons.gif)
897897

898-
![ReferenceManyInput](./img/reference-many-input.gif)
898+
<video controls autoplay muted loop width="100%">
899+
<source src="./img/reference-many-input.webm" type="video/webm">
900+
Your browser does not support the video tag.
901+
</video>

‎docs/Features.md

+44-11
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,10 @@ const ProductEdit = () => (
197197
);
198198
```
199199

200-
![ReferenceManyInput](./img/reference-many-input.gif)
200+
<video controls autoplay muted loop width="100%">
201+
<source src="./img/reference-many-input.webm" type="video/webm">
202+
Your browser does not support the video tag.
203+
</video>
201204

202205
Reference Input components are also very useful to filter a view by a related record. For instance, to display the list of books of a given author:
203206

@@ -348,7 +351,10 @@ Check the following chapters to learn more about each search and filtering compo
348351

349352
Users often apply the same filters over and over again. Saved Queries **let users save a combination of filters** and sort parameters into a new, personal filter, that persists between sessions.
350353

351-
[![Saved Queries in FilterList](./img/SavedQueriesList.gif)](./img/SavedQueriesList.gif)
354+
<video controls autoplay muted loop width="100%">
355+
<source src="./img/SavedQueriesList.webm" type="video/webm">
356+
Your browser does not support the video tag.
357+
</video>
352358

353359
Here is an example `<FilterList>` sidebar with saved queries:
354360

@@ -449,7 +455,10 @@ export const PostEdit = () => (
449455
);
450456
```
451457

452-
![Tabbed Form](./img/tabbed-form.gif)
458+
<video controls autoplay muted loop width="100%">
459+
<source src="./img/tabbed-form.webm" type="video/webm">
460+
Your browser does not support the video tag.
461+
</video>
453462

454463
React-admin offers, out of the box, several **form layouts**:
455464

@@ -627,7 +636,10 @@ When a user edits a record and hits the "Save" button, the UI shows a confirmati
627636

628637
But there is an additional benefit: it also allows the "Undo" feature. Undo is already functional in the admin at that point. Try editing a record, then hit the "Undo" link in the black confirmation box before it slides out. You'll see that the app does not send the `UPDATE` query to the API, and displays the non-modified data.
629638

630-
[![Undo Post Editing](./img/tutorial_post_edit_undo.gif)](./img/tutorial_post_edit_undo.gif)
639+
<video controls autoplay muted loop width="100%">
640+
<source src="./img/tutorial_post_edit_undo.webm" type="video/webm">
641+
Your browser does not support the video tag.
642+
</video>
631643

632644
Even though updates appear immediately due to Optimistic Updates, React-admin only sends them to the server after a short delay (about 5 seconds). During this delay, **the user can undo the action**, and react-admin will never send the update.
633645

@@ -792,7 +804,10 @@ Check the following components for more details:
792804

793805
To manage directories, categories, and any other **hierarchical data**, admins often rely on tree structures. Navigating and editing tree structures can be tricky, but React-admin provides a set of components to make it easy.
794806

795-
![TreeWithDetails](./img/treewithdetails.gif)
807+
<video controls autoplay muted loop width="100%">
808+
<source src="./img/treewithdetails.webm" type="video/webm">
809+
Your browser does not support the video tag.
810+
</video>
796811

797812
```jsx
798813
import { Create, Edit, SimpleForm, TextInput } from 'react-admin';
@@ -910,7 +925,10 @@ const PostList = () => (
910925
);
911926
```
912927

913-
![useSubscribeToRecordList](./img/useSubscribeToRecordList.gif)
928+
<video controls autoplay muted loop width="100%">
929+
<source src="./img/useSubscribeToRecordList.webm" type="video/webm">
930+
Your browser does not support the video tag.
931+
</video>
914932

915933
This feature leverages the following hooks:
916934

@@ -954,7 +972,10 @@ This feature leverages the following components:
954972

955973
And last but not least, react-admin provides a **lock mechanism** to prevent two users from editing the same resource at the same time.
956974

957-
![Edit With Locks](./img/locks-demo.gif)
975+
<video controls autoplay muted loop width="100%">
976+
<source src="./img/locks-demo.webm" type="video/webm">
977+
Your browser does not support the video tag.
978+
</video>
958979

959980
A user can lock a resource, either by voluntarily asking for a lock or by editing a resource. When a resource is locked, other users can't edit it. When the lock is released, other users can edit the resource again.
960981

@@ -1012,7 +1033,10 @@ End-users tweak the UI to their liking, and **they expect these preferences to b
10121033
10131034
For instance, the Saved Queries feature lets users **save a combination of filters** and sort parameters into a new, personal filter.
10141035
1015-
[![Saved Queries in FilterList](./img/SavedQueriesList.gif)](./img/SavedQueriesList.gif)
1036+
<video controls autoplay muted loop width="100%">
1037+
<source src="./img/SavedQueriesList.webm" type="video/webm">
1038+
Your browser does not support the video tag.
1039+
</video>
10161040
10171041
Saved queries persist between sessions, so users can find their custom queries even after closing and reopening the admin. Saved queries are available both for the Filter Button/Form combo and for the `<FilterList>` Sidebar. It's enabled by default for the Filter Button/Form combo but you have to add it yourself in the `<FilterList>` Sidebar.
10181042
@@ -1047,7 +1071,10 @@ const SongList = () => (
10471071
10481072
React-admin also **persists the light/dark mode and the language choice** of end-users.
10491073
1050-
![Dark Mode support](./img/ToggleThemeButton.gif)
1074+
<video controls autoplay muted loop width="100%">
1075+
<source src="./img/ToggleThemeButton.webm" type="video/webm">
1076+
Your browser does not support the video tag.
1077+
</video>
10511078
10521079
To learn more about the `Store` and how to use it, check the following sections:
10531080
@@ -1063,7 +1090,10 @@ To learn more about the `Store` and how to use it, check the following sections:
10631090
10641091
An extension of preferences is Configurable components. Because no matter how polished your UI is, it will never fit all use cases. That's why react-admin provides a way to let end users **customize the features of many components visually**, via the inspector.
10651092
1066-
![DatagridConfigurable](./img/DatagridConfigurable.gif)
1093+
<video controls autoplay muted loop width="100%">
1094+
<source src="./img/DatagridConfigurable.webm" type="video/webm">
1095+
Your browser does not support the video tag.
1096+
</video>
10671097
10681098
To enable this feature, replace a component (in that example, `<Datagrid>`) with its configurable counterpart:
10691099
@@ -1213,7 +1243,10 @@ To learn more about theming in react-admin, check the following sections:
12131243
12141244
React-admin is **fully internationalized**.
12151245
1216-
![LocalesMenuButton](./img/LocalesMenuButton.gif)
1246+
<video controls autoplay muted loop width="100%">
1247+
<source src="./img/LocalesMenuButton.webm" type="video/webm">
1248+
Your browser does not support the video tag.
1249+
</video>
12171250
12181251
The default interface messages (for buttons, tooltips, input labels, etc) are in English. You can translate them to any of [the 30+ languages supported by react-admin](./TranslationLocales.md) by importing the appropriate translation package. For instance, to translate to French:
12191252

‎docs/FilterButton.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ title: "The FilterButton Component"
77

88
Part of the filter button/form combo, `<FilterButton>` renders whenever you use the `<List filters>` prop. When clicked, it reveals a dropdown of filter names, allowing users to add a new filter input to the filter form.
99

10-
![filter button/from combo](./img/list_filter.gif)
10+
<video controls autoplay muted loop width="100%">
11+
<source src="./img/list_filter.webm" type="video/webm">
12+
Your browser does not support the video tag.
13+
</video>
1114

1215
It's an internal component that you should only need if you build a custom List layout.
1316

0 commit comments

Comments
 (0)