Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

documentation of message to users

Browse Source
This commit is contained in:
Julien Fastré 2017-08-19 23:11:51 +02:00
parent b0ca01b2ec
commit a052dd7d7c
1 changed files with 79 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
source/development/messages-to-users.rst
View File

@ -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` :
<button class="sc-button bt-submit" type="submit">Submit</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
<p><a class="sc-button bt-create bt-small">You button</a></p>
You can omit content and show a button with an icon only :
.. code-block:: html
<a class="sc-button bt-create"></a>
You can hide content and show it only on hover
.. code-block:: html
<a class="sc-button bt-create has-hidden"><span class="show-on-hover">Showed when mouse pass on</span></a>
You can customize the icon :
.. code-block:: html
<a class="sc-button bt-create change-icon"><i class="fa fa-icon"></i>Button with custom icon</a>
Grouping buttons
----------------
Grouping buttons can be done using ``ul.record_actions`` element (an ``ul`` list with class ``record_actions``):
.. code-block:: html
<ul class="record_actions">
<li class="cancel">
<a class="sc-button bt-cancel">Cancel</a>
<li>
<li>
<a class="sc-button bt-save">Save</a>
</li>
</ul>
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.