composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-23 18:48:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

FAF: Documentation UI Twig Blocks

Browse Source
This commit is contained in:
Eric
2021-05-28 07:53:08 +02:00
parent 6191719f50
commit f90799d046
3 changed files with 68 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
.doc/UI/source/Component/Alert/Alert.rst
View File

@@ -13,21 +13,7 @@ Alerts are a rectangular component displaying a title and a message.
Output Result
-------------
:Success Alert:
.. image:: AlertSuccess.png
:Failure Alert:
.. image:: AlertFailure.png
:Information Alert:
.. image:: AlertInformation.png
:Warning Alert:
.. image:: AlertWarning.png
.. include:: OutputExamples.rst
----
@@ -87,46 +73,4 @@ Twig Tag
Examples
--------
Example to generate an temporary information with a spinner (on the real display the spinner is animated)::
{% UIAlert ForInformation {'sId':'header-requirements', 'IsCollapsible':false, 'IsClosable':false} %}
{% UIContentBlock Standard {'aContainerClasses':['ibo-update-core-header-requirements'],
'sId':'can-core-update'} %}
{{ 'iTopUpdate:UI:CanCoreUpdate:Loading'|dict_s }}
{% UISpinner Standard {} %}
{% EndUIContentBlock %}
{% EndUIAlert %}
The information displayed:
.. image:: AlertInformationExample.png
The javascript to set a success or a failure in return of an ajax call::
function (data) {
var oRequirements = $("#header-requirements");
var oCanCoreUpdate = $("#can-core-update");
oCanCoreUpdate.html(data.sMessage);
oRequirements.removeClass("ibo-is-information");
if (data.bStatus) {
oRequirements.addClass("ibo-is-success");
} else {
oRequirements.addClass("ibo-is-failure");
}
}
----
Example to generate a hidden alert to display using javascript in case of error::
{% UIAlert ForFailure {sId:"dir_error_outer", IsCollapsible:false, IsClosable:false, IsHidden:true} %}
*The content goes here*
{% EndUIAlert %}
The javascript to show the alert::
$("#dir_error_outer").removeClass("ibo-is-hidden");
The error displayed:
.. image:: AlertFailureExample.png
.. include:: Examples.rst

47
.doc/UI/source/Component/Alert/Examples.rst Normal file
View File

@@ -0,0 +1,47 @@
.. Copyright (C) 2010-2021 Combodo SARL
.. http://opensource.org/licenses/AGPL-3.0
Example to generate an temporary information with a spinner (on the real display the spinner is animated)::
{% UIAlert ForInformation {'sId':'header-requirements', 'IsCollapsible':false, 'IsClosable':false} %}
{% UIContentBlock Standard {'aContainerClasses':['ibo-update-core-header-requirements'],
'sId':'can-core-update'} %}
{{ 'iTopUpdate:UI:CanCoreUpdate:Loading'|dict_s }}
{% UISpinner Standard {} %}
{% EndUIContentBlock %}
{% EndUIAlert %}
The information displayed:
.. image:: AlertInformationExample.png
The javascript to set a success or a failure in return of an ajax call::
function (data) {
var oRequirements = $("#header-requirements");
var oCanCoreUpdate = $("#can-core-update");
oCanCoreUpdate.html(data.sMessage);
oRequirements.removeClass("ibo-is-information");
if (data.bStatus) {
oRequirements.addClass("ibo-is-success");
} else {
oRequirements.addClass("ibo-is-failure");
}
}
----
Example to generate a hidden alert to display using javascript in case of error::
{% UIAlert ForFailure {sId:"dir_error_outer", IsCollapsible:false, IsClosable:false, IsHidden:true} %}
*The content goes here*
{% EndUIAlert %}
The javascript to show the alert::
$("#dir_error_outer").removeClass("ibo-is-hidden");
The error displayed:
.. image:: AlertFailureExample.png

19
.doc/UI/source/Component/Alert/OutputExamples.rst Normal file
View File

@@ -0,0 +1,19 @@
.. Copyright (C) 2010-2021 Combodo SARL
.. http://opensource.org/licenses/AGPL-3.0
:Success Alert:
.. image:: AlertSuccess.png
:Failure Alert:
.. image:: AlertFailure.png
:Information Alert:
.. image:: AlertInformation.png
:Warning Alert:
.. image:: AlertWarning.png