mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-11-19 18:37:45 +00:00
94 lines
3.9 KiB
Markdown
94 lines
3.9 KiB
Markdown
###### Messages to users, flashbags, and buttons
|
|
|
|
## Flashbags
|
|
|
|
The four following levels are defined :
|
|
|
|
+-----------+----------------------------------------------------------------------------------------------+
|
|
|Key|Intent |
|
|
|success|The user action succeeds. |
|
|
|notice|A simple message to give information to the user. The message may be linked or not linked with |
|
|
||the user action. |
|
|
|error|The user's action failed: he must correct something to process the action. |
|
|
|
|
We can use [TranslatableMessage` (and other `TranslatableMessageInterface` instances) into the controller:
|
|
|
|
```php
|
|
// in a controller action:
|
|
if (($session = $request->getSession()) instanceof Session) {
|
|
$session->getFlashBag()->add(
|
|
'success',
|
|
new TranslatableMessage('saved_export.Saved export is saved!')
|
|
);
|
|
}
|
|
```
|
|
|
|
`Flash Messages on Symfony documentation ](http://symfony.com/doc/current/book/controller.html#flash-messages)
|
|
Learn how to use flash messages in a controller.
|
|
|
|
## 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`` :
|
|
|
|
<a class="sc-button bt-create">Create an entity</a>
|
|
|
|
<button class="sc-button bt-submit" type="submit">Submit</button>
|
|
|
|
+-----------+----------------+------------------------------------------------------------------------------+
|
|
| Action | Class | Description |
|
|
| Submit | ``bt-submit`` | Submit a form. Use only if the 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
|
|
|
|
`<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 :
|
|
|
|
`<a class="sc-button bt-create"></a>`
|
|
|
|
You can hide content and show it only on hover
|
|
|
|
`<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 :
|
|
|
|
`<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``):
|
|
|
|
```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 the table, the space between elements will be shorter.
|
|
|
|
You can add the class ``record_actions_small`` if you want shorter space between elements.
|