diff --git a/source/development/messages-to-users.rst b/source/development/messages-to-users.rst index 2eec9d6d8..a935ee855 100644 --- a/source/development/messages-to-users.rst +++ b/source/development/messages-to-users.rst @@ -6,8 +6,8 @@ A copy of the license is included in the section entitled "GNU Free Documentation License". -Messages to users -****************** +Messages to users, flashbags and buttons +**************************************** .. _flashbags : @@ -42,9 +42,9 @@ The four following levels are defined : Buttons ======== -Four actions are available to decorate `a` links and `buttons`. +Some actions are available to decorate ``a`` links and ``buttons``. -To add the action on button, use them as class along with `sc-button` : +To add the action on button, use them as class along with ``sc-button`` : .. code-block:: html @@ -52,20 +52,78 @@ To add the action on button, use them as class along with `sc-button` : -+-----------+--------------+------------------------------------------------------------------------------+ -| Action | Class | Description | -+===========+==============+==============================================================================+ -| Submit | `bt-submit` | Submit a form. | -+-----------+--------------+------------------------------------------------------------------------------+ -| Create | `bt-create` | Link to a form to create an entity | -+-----------+--------------+------------------------------------------------------------------------------+ -| Reset | `bt-reset` | Reset a form | -+-----------+--------------+------------------------------------------------------------------------------+ -| Delete | `bt-delete` | Link to a form to delete an entity | -+-----------+--------------+------------------------------------------------------------------------------+ -| Edit | `bt-edit` | Link to a form to edit an entity | -+-----------+--------------+------------------------------------------------------------------------------+ -| Update | `bt-update` | Submitting this form will update the entity | -+-----------+--------------+------------------------------------------------------------------------------+ -| Action | `bt-action` | Generic link to an action | -+-----------+--------------+------------------------------------------------------------------------------+ ++-----------+----------------+------------------------------------------------------------------------------+ +| Action | Class | Description | ++===========+================+==============================================================================+ +| Submit | ``bt-submit`` | Submit a form. Use only if action is not "save". | ++-----------+----------------+------------------------------------------------------------------------------+ +| Create | ``bt-create`` | - Link to a form to create an entity (alias: ``bt-new``) | +| | or ``bt-new`` | - Submitting this form will create a new entity | ++-----------+----------------+------------------------------------------------------------------------------+ +| Reset | ``bt-reset`` | Reset a form | ++-----------+----------------+------------------------------------------------------------------------------+ +| Delete | ``bt-delete`` | - Link to a form to delete an entity | +| | | - Submitting this form will remove the entity | ++-----------+----------------+------------------------------------------------------------------------------+ +| Edit | ``bt-edit`` or | Link to a form to edit an entity | +| | ``bt-update`` | | ++-----------+----------------+------------------------------------------------------------------------------+ +| Save | ``bt-save`` | Submitting this form will save change on the entity | ++-----------+----------------+------------------------------------------------------------------------------+ +| Action | ``bt-action`` | Generic link to an action | ++-----------+----------------+------------------------------------------------------------------------------+ +| Cancel | ``bt-cancel`` | Cancel an action and go back to another page | ++-----------+----------------+------------------------------------------------------------------------------+ + +Styling buttons +--------------- + +Small buttons, mainly to use inline + +.. code-block:: html + +
+ +You can omit content and show a button with an icon only : + +.. code-block:: html + + + +You can hide content and show it only on hover + +.. code-block:: html + + Showed when mouse pass on + +You can customize the icon : + +.. code-block:: html + + Button with custom icon + +Grouping buttons +---------------- + +Grouping buttons can be done using ``ul.record_actions`` element (an ``ul`` list with class ``record_actions``): + +.. code-block:: html + + + +The element with the ``cancel`` class will be set in first position. + +Inside table, the space between elements will be shorter. + +You can add the class ``record_actions_small`` if you want shorter space between elements. +