diff --git a/content/developer/reference/frontend/images/actionswiper.png b/content/developer/reference/frontend/images/actionswiper.png new file mode 100644 index 000000000..7472f6247 Binary files /dev/null and b/content/developer/reference/frontend/images/actionswiper.png differ diff --git a/content/developer/reference/frontend/owl_components.rst b/content/developer/reference/frontend/owl_components.rst index ba1c31130..6a3203368 100644 --- a/content/developer/reference/frontend/owl_components.rst +++ b/content/developer/reference/frontend/owl_components.rst @@ -47,19 +47,19 @@ can make a simple component in Odoo. `; This example shows that Owl is available as a library in the global namespace as -``owl``: it can simply be used like most libraries in Odoo. Note that we +`owl`: it can simply be used like most libraries in Odoo. Note that we defined here the template as a static property, but without using the `static` keyword, which is not available in some browsers (Odoo javascript code should be Ecmascript 2019 compliant). -We define here the template in the javascript code, with the help of the ``xml`` +We define here the template in the javascript code, with the help of the `xml` helper. However, it is only useful to get started. In practice, templates in Odoo should be defined in an xml file, so they can be translated. In that case, the component should only define the template name. In practice, most components should define 2 or 3 files, located at the same -place: a javascript file (``my_component.js``), a template file (``my_component.xml``) -and optionally a scss (or css) file (``my_component.scss``). These files should +place: a javascript file (`my_component.js`), a template file (`my_component.xml`) +and optionally a scss (or css) file (`my_component.scss`). These files should then be added to some assets bundle. The web framework will take care of loading the javascript/css files, and loading the templates into Owl. @@ -92,11 +92,11 @@ And the template is now located in the corresponding xml file: Odoo code is not yet completely made in Owl, so it needs a way to tell the difference between Owl templates (new code) and old templates (for components). To do that in a backward-compatible way, all new templates should be defined with -the ``owl`` attribute set to 1. +the `owl` attribute set to 1. .. note:: - Do not forget to set ``owl="1"`` in your Owl templates! + Do not forget to set `owl="1"` in your Owl templates! .. note:: @@ -150,6 +150,8 @@ checkboxes or datepickers. This page explains how to use these generic component * - Technical Name - Short Description + * - :ref:`ActionSwiper ` + - a swiper component to perform actions on touch swipe * - :ref:`CheckBox ` - a simple checkbox component with a label next to it * - :ref:`Dropdown ` @@ -157,6 +159,130 @@ checkboxes or datepickers. This page explains how to use these generic component * - :ref:`Pager ` - a small component to handle pagination +.. _frontend/owl/actionswiper: + +ActionSwiper +------------ + +.. note:: This component is a mobile feature, only supported in the Enterprise version of Odoo. + +Location +~~~~~~~~ + +`@web_enterprise/core/action_swiper/action_swiper` + +Description +~~~~~~~~~~~ + +This is a component that can perform actions when an element is swiped +horizontally. The swiper is wrapping a target element to add actions to it. +The action is executed once the user has released the swiper passed +half of its width. + +.. code-block:: xml + + + + + +The simplest way to use the component is to use it around your target element directly +in an xml template as shown above. But sometimes, you may want to extend an existing element +and would not want to duplicate the template. It is possible to do just that. + +If you want to extend the behavior of an existing element, you must place the element +inside, by wrapping it directly. Also, you can conditionnally add props to manage when the +element might be swipable or not. + +You can use the component to interact easily with records, messages, items in lists and much more. + +.. image:: ./images/actionswiper.png + :width: 400 px + :alt: Example of ActionSwiper usage + :align: center + +The following example creates a basic ActionSwiper component. +Here, the swipe is enabled in both directions. + +.. code-block:: xml + + +
+ Swipable item +
+ + +.. note:: Actions are permuted when using right-to-left (RTL) languages. + +Props +~~~~~ + +.. list-table:: + :widths: 20 20 60 + :header-rows: 1 + + * - Name + - Type + - Description + * - `onLeftSwipe` + - `Object` + - if present, the actionswiper can be swiped to the left + * - `onRightSwipe` + - `Object` + - if present, the actionswiper can be swiped to the right + +You can use both `onLeftSwipe` and `onRightSwipe` props at the same time. + +Those `Object`'s must contain: + + - `action`, which is the callable `Function` serving as a callback. + Once the swipe has been completed in the given direction, that action + is performed. + - `icon` is the icon class to use, usually to represent the action. + It must be a `string`. + - `bgColor` is the background color, given to decorate the action. + can be one of the following `bootstrap contextual color + `_ (`danger`, + `info`, `secondary`, `success` or `warning`). + + Those values must be given to define the behavior and the visual aspect + of the swiper. + +Example: Extending existing components +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +In the following example, you can use `xpath`'s to wrap an existing element +in the ActionSwiper component. Here, a swiper has been added to mark +a message as read in mail. + +.. code-block:: xml + + + + + + + + .. _frontend/owl/checkbox: CheckBox @@ -256,38 +382,38 @@ being present in the DOM or not. * - Dropdown - Type - Description - * - ``startOpen`` + * - `startOpen` - boolean - initial dropdown open state (defaults to `false`) - * - ``menuClass`` + * - `menuClass` - string - - additional css class applied to the dropdown menu ``
`` - * - ``togglerClass`` + - additional css class applied to the dropdown menu `
` + * - `togglerClass` - string - - additional css class applied to the toggler ``