Skip to content

Commit e05a6c0

Browse files
fzaninottofzaninotto
authored
Merge pull request #8767 from marmelab/gif-to-webm
[Doc] Convert GIF files to WebM
2 parents 6b8386e + 8ab5ea5 commit e05a6c0

File tree

220 files changed

+586
-119
lines changed

Some content is hidden

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

220 files changed

+586
-119
lines changed

‎docs/AppBar.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ export const MyAppBar = () => (
228228
If your app uses [authentication](./Authentication.md), the `<AppBar>` component displays a button to display the user menu on the right side. By default, the user menu only contains a logout button.
229229

230230
<video controls autoplay muted loop width="100%">
231-
<source src="./img/AppBar-user-menu.webm" type="video/webm">
231+
<source src="./img/AppBar-user-menu.webm" type="video/webm"/>
232232
Your browser does not support the video tag.
233233
</video>
234234

@@ -440,7 +440,7 @@ export const MyLayout = (props) => (
440440
By default, users can override the page title [in configurable mode](./Features.md#configurable-ui).
441441

442442
<video controls autoplay muted loop width="100%">
443-
<source src="./img/TitleConfigurable.webm" type="video/webm">
443+
<source src="./img/TitleConfigurable.webm" type="video/webm"/>
444444
Your browser does not support the video tag.
445445
</video>
446446

‎docs/Architecture.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,11 @@ 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>
109+
<source src="./img/sort-button.webm" type="video/webm"/>
110+
Your browser does not support the video tag.
111+
</video>
112+
109113

110114
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.
111115

‎docs/ArrayInput.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ 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>
11+
<source src="./img/array-input.webm" type="video/webm"/>
12+
Your browser does not support the video tag.
13+
</video>
14+
1115

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

‎docs/AuthProviderWriting.md

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

‎docs/Authentication.md

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

66
# Security
77

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

1014
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`.
1115

‎docs/AutocompleteArrayInput.md

+10-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ 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 Material UI [Autocomplete](https://mui.com/material-ui/react-autocomplete/).
1010

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

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

@@ -133,7 +137,11 @@ const choices = possibleValues.map(value => ({ id: value, name: ucfirst(value) }
133137

134138
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.
135139

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

138146
{% raw %}
139147
```jsx

‎docs/AutocompleteInput.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ 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 [Material UI's `<Autocomplete>`](https://mui.com/material-ui/react-autocomplete/).
1010

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

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

‎docs/BooleanInput.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ 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>
11+
<source src="./img/boolean-input.webm" type="video/webm"/>
12+
Your browser does not support the video tag.
13+
</video>
14+
1115

1216
**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.
1317

‎docs/Buttons.md

+10-2
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,11 @@ 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>
260+
<source src="./img/list_filter.webm" type="video/webm"/>
261+
Your browser does not support the video tag.
262+
</video>
263+
260264

261265
#### `sx`: CSS API
262266

@@ -365,7 +369,11 @@ To override the style of all instances of `<SkipNavigationButton>` using the [Ma
365369

366370
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.
367371

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

370378
| Prop | Required | Type | Default | Description |
371379
| ------------- | -------- | -------------------- | ------- | ---------------------------------------- |

‎docs/CheckboxGroupInput.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ 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>
11+
<source src="./img/checkbox-group-input.webm" type="video/webm"/>
12+
Your browser does not support the video tag.
13+
</video>
14+
1115

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

‎docs/Configurable.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ 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>
11+
<source src="./img/SimpleListConfigurable.webm" type="video/webm"/>
12+
Your browser does not support the video tag.
13+
</video>
14+
1115

1216
Some react-admin components are already configurable - or rather they have a configurable counterpart:
1317

‎docs/Datagrid.md

+25-5
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,11 @@ 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>
144+
<source src="./img/bulk-actions-toolbar.webm" type="video/webm"/>
145+
Your browser does not support the video tag.
146+
</video>
147+
144148

145149
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:
146150

@@ -388,7 +392,11 @@ const PostList = () => (
388392

389393
## `expand`
390394

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

393401
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.
394402

@@ -804,7 +812,11 @@ const PostList = () => (
804812

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

807-
![SelectColumnsButton](./img/SelectColumnsButton.gif)
815+
<video controls autoplay muted loop>
816+
<source src="./img/SelectColumnsButton.webm" type="video/webm"/>
817+
Your browser does not support the video tag.
818+
</video>
819+
808820

809821
```jsx
810822
import {
@@ -845,7 +857,11 @@ const PostList = () => (
845857

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

848-
![DatagridConfigurable](./img/DatagridConfigurable.gif)
860+
<video controls autoplay muted loop>
861+
<source src="./img/DatagridConfigurable.webm" type="video/webm"/>
862+
Your browser does not support the video tag.
863+
</video>
864+
849865

850866
```diff
851867
import {
@@ -972,7 +988,11 @@ Check [the `ra-editable-datagrid` documentation](https://marmelab.com/ra-enterpr
972988

973989
## Customizing Column Sort
974990

975-
![Sort Column Header](./img/sort-column-header.gif)
991+
<video controls autoplay muted loop>
992+
<source src="./img/sort-column-header.webm" type="video/webm"/>
993+
Your browser does not support the video tag.
994+
</video>
995+
976996

977997
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.
978998

‎docs/DateInput.md

+10-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ 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>
11+
<source src="./img/date-input.webm" type="video/webm"/>
12+
Your browser does not support the video tag.
13+
</video>
14+
1115

1216
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.
1317

@@ -42,4 +46,8 @@ It is not possible to customize the date format. Browsers use the user locale to
4246

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

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

‎docs/DateTimeInput.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ 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>
11+
<source src="./img/date-time-input.webm" type="video/webm"/>
12+
Your browser does not support the video tag.
13+
</video>
14+
1115

1216
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.
1317

‎docs/EditTutorial.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -895,4 +895,8 @@ 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>
899+
<source src="./img/reference-many-input.webm" type="video/webm"/>
900+
Your browser does not support the video tag.
901+
</video>
902+

0 commit comments

Comments
 (0)