Skip to content

Commit

Permalink
fix webm files
Browse files Browse the repository at this point in the history
  • Loading branch information
@slax57
slax57 committed Apr 5, 2023
1 parent f519477 commit 31584e6
Show file tree
Hide file tree
Showing 216 changed files with 427 additions and 106 deletions.
5 changes: 4 additions & 1 deletion docs/Architecture.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,10 @@ We spend a great deal of time refining the UI to make it as intuitive as possibl

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

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

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.

Expand Down
5 changes: 4 additions & 1 deletion docs/ArrayInput.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ title: "The ArrayInput Component"

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

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

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

Expand Down
5 changes: 4 additions & 1 deletion docs/AuthProviderWriting.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -320,7 +320,10 @@ export default {
};
```
![Logout button](./img/logout.gif)
<video controls autoplay muted loop width="100%">
<source src="./img/logout.webm" type="video/webm">
Your browser does not support the video tag.
</video>
The `authProvider.logout()` method is also a good place to notify the authentication backend that the user credentials are no longer valid after logout.
Expand Down
5 changes: 4 additions & 1 deletion docs/Authentication.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,10 @@ title: "security"

# Security

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

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

Expand Down
10 changes: 8 additions & 2 deletions docs/AutocompleteArrayInput.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@ title: "The AutocompleteArrayInput Component"
To let users choose multiple values in a list using a dropdown with autocompletion, use `<AutocompleteArrayInput>`.
It renders using MUI [Autocomplete](https://mui.com/components/autocomplete/).

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

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

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

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.

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

{% raw %}
```jsx
Expand Down
5 changes: 4 additions & 1 deletion docs/AutocompleteInput.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@ title: "The AutocompleteInput Component"
To let users choose a value in a list using a dropdown with autocompletion, use `<AutocompleteInput>`.
It renders using [MUI's `<Autocomplete>`](https://mui.com/components/autocomplete/).

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

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

Expand Down
5 changes: 4 additions & 1 deletion docs/BooleanInput.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ title: "The BooleanInput Component"

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

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

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

Expand Down
10 changes: 8 additions & 2 deletions docs/Buttons.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,7 +256,10 @@ export const PostList = () => (

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

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

#### `sx`: CSS API

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

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.

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

| Prop | Required | Type | Default | Description |
| ------------- | -------- | -------------------- | ------- | ---------------------------------------- |
Expand Down
5 changes: 4 additions & 1 deletion docs/CheckboxGroupInput.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ title: "The CheckboxGroupInput Component"

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.

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

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

Expand Down
5 changes: 4 additions & 1 deletion docs/Configurable.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ title: "The Configurable Component"

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.

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

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

Expand Down
25 changes: 20 additions & 5 deletions docs/Datagrid.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,10 @@ Finally, `<Datagrid>` inspects children for props that indicate how it should be

## `bulkActionButtons`

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

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:

Expand Down Expand Up @@ -388,7 +391,10 @@ const PostList = () => (

## `expand`

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

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.

Expand Down Expand Up @@ -804,7 +810,10 @@ const PostList = () => (

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

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

```jsx
import {
Expand Down Expand Up @@ -845,7 +854,10 @@ const PostList = () => (

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

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

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

## Customizing Column Sort

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

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.

Expand Down
10 changes: 8 additions & 2 deletions docs/DateInput.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ title: "The DateInput Component"

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).

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

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.

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

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.

![MUI Date picker](./img/date-picker.gif)
<video controls autoplay muted loop width="100%">
<source src="./img/date-picker.webm" type="video/webm">
Your browser does not support the video tag.
</video>
5 changes: 4 additions & 1 deletion docs/DateTimeInput.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ title: "The DateTimeInput Component"

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).

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

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.

Expand Down
5 changes: 4 additions & 1 deletion docs/EditTutorial.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -895,4 +895,7 @@ Users often need to edit data from several resources in the same form. React-adm

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

![ReferenceManyInput](./img/reference-many-input.gif)
<video controls autoplay muted loop width="100%">
<source src="./img/reference-many-input.webm" type="video/webm">
Your browser does not support the video tag.
</video>
55 changes: 44 additions & 11 deletions docs/Features.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,10 @@ const ProductEdit = () => (
);
```

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

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:

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

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.

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

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

Expand Down Expand Up @@ -449,7 +455,10 @@ export const PostEdit = () => (
);
```

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

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

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

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.

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

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.

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

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.

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

```jsx
import { Create, Edit, SimpleForm, TextInput } from 'react-admin';
Expand Down Expand Up @@ -910,7 +925,10 @@ const PostList = () => (
);
```

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

This feature leverages the following hooks:

Expand Down Expand Up @@ -954,7 +972,10 @@ This feature leverages the following components:

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

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

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.

Expand Down Expand Up @@ -1012,7 +1033,10 @@ End-users tweak the UI to their liking, and **they expect these preferences to b
For instance, the Saved Queries feature lets users **save a combination of filters** and sort parameters into a new, personal filter.
[![Saved Queries in FilterList](./img/SavedQueriesList.gif)](./img/SavedQueriesList.gif)
<video controls autoplay muted loop width="100%">
<source src="./img/SavedQueriesList.webm" type="video/webm">
Your browser does not support the video tag.
</video>
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.
Expand Down Expand Up @@ -1047,7 +1071,10 @@ const SongList = () => (
React-admin also **persists the light/dark mode and the language choice** of end-users.
![Dark Mode support](./img/ToggleThemeButton.gif)
<video controls autoplay muted loop width="100%">
<source src="./img/ToggleThemeButton.webm" type="video/webm">
Your browser does not support the video tag.
</video>
To learn more about the `Store` and how to use it, check the following sections:
Expand All @@ -1063,7 +1090,10 @@ To learn more about the `Store` and how to use it, check the following sections:
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.
![DatagridConfigurable](./img/DatagridConfigurable.gif)
<video controls autoplay muted loop width="100%">
<source src="./img/DatagridConfigurable.webm" type="video/webm">
Your browser does not support the video tag.
</video>
To enable this feature, replace a component (in that example, `<Datagrid>`) with its configurable counterpart:
Expand Down Expand Up @@ -1213,7 +1243,10 @@ To learn more about theming in react-admin, check the following sections:
React-admin is **fully internationalized**.
![LocalesMenuButton](./img/LocalesMenuButton.gif)
<video controls autoplay muted loop width="100%">
<source src="./img/LocalesMenuButton.webm" type="video/webm">
Your browser does not support the video tag.
</video>
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:
Expand Down
5 changes: 4 additions & 1 deletion docs/FilterButton.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ title: "The FilterButton Component"

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.

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

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

Expand Down
Loading

0 comments on commit 31584e6

Please sign in to comment.