bn8/ldapsaisie
1
0
Fork 0
mirror of https://gitlab.easter-eggs.com/ee/ldapsaisie.git synced 2024-11-26 11:52:59 +01:00
Code Issues Projects Releases Wiki Activity

LSattr_html::jsonCompositeAttribute: Add fullWidth parameter and improve responsive display

Browse source
This commit is contained in:
Benjamin Renard 2020-12-02 17:43:55 +01:00
parent 2161cc701a
commit c6501d479b
5 changed files with 43 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
doc/conf/LSattribute/LSattr_html/LSattr_html_jsonCompositeAttribute.docbook
View file

@ -2,7 +2,7 @@
<title>LSattr_html_jsonCompositeAttribute</title> <title>LSattr_html_jsonCompositeAttribute</title>
<para>Ce type est utilisé pour la gestion des attributs dont les valeurs sont <para>Ce type est utilisé pour la gestion des attributs dont les valeurs sont
des dictionnaires de valeurs encodées aux formats <emphasis>JSON</emphasis>.</para> des dictionnaires de valeurs encodées aux formats <emphasis>JSON</emphasis>.</para>
<programlisting linenumbering="unnumbered"> <programlisting linenumbering="unnumbered">
<citetitle>Exemple de valeur gérée</citetitle> <citetitle>Exemple de valeur gérée</citetitle>
<![CDATA[{"component1": "value1", "component2": "value2", "component3": "value3"}]]> <![CDATA[{"component1": "value1", "component2": "value2", "component3": "value3"}]]>
@ -12,7 +12,7 @@
par leur clé et stockant une valeur dont le type peut être un texte libre ou par leur clé et stockant une valeur dont le type peut être un texte libre ou
bien être issue d'une liste déroulante configurable selon le même principe que bien être issue d'une liste déroulante configurable selon le même principe que
le type d'attribut &LSattr_html_select_list;.</para> le type d'attribut &LSattr_html_select_list;.</para>
<programlisting linenumbering="unnumbered"> <programlisting linenumbering="unnumbered">
<citetitle>Structure</citetitle>... <citetitle>Structure</citetitle>...
<![CDATA['html_options' => array ( <![CDATA['html_options' => array (
@ -37,6 +37,7 @@
), ),
[...] [...]
), ),
'fullWidth' => [booléen],
),]]> ),]]>
... ...
</programlisting> </programlisting>
@ -108,7 +109,7 @@
<listitem> <listitem>
<simpara>Tableau associatif contenant les règles de vérification syntaxique <simpara>Tableau associatif contenant les règles de vérification syntaxique
des données du composant. Ces règles sont configurables de la même manière des données du composant. Ces règles sont configurables de la même manière
que les celles des valeurs attributs. que les celles des valeurs attributs.
<link linkend='config-LSattribute-check-data'>Voir la section concernée.</link> <link linkend='config-LSattribute-check-data'>Voir la section concernée.</link>
</simpara> </simpara>
</listitem> </listitem>
@ -118,5 +119,13 @@
</listitem> </listitem>
</varlistentry> </varlistentry>
<varlistentry>
<term>fullWidth</term>
<listitem>
<simpara>Booléen permettant de définir si l'affichage dans le formulaire doit se faire
sur toute la largeur disponible de la page (Défaut : <emphasis>Faux</emphasis>).</simpara>
</listitem>
</varlistentry>
</variablelist> </variablelist>
</sect4> </sect4>

21
src/css/default/LSformElement_jsonCompositeAttribute.css
View file

@ -1,6 +1,7 @@
ul.LSformElement_jsonCompositeAttribute li { ul.LSformElement_jsonCompositeAttribute li {
border: 1px dotted #CCC; border: 1px dotted #CCC;
padding: 2px; padding: 2px;
overflow: auto;
} }
ul.LSformElement_jsonCompositeAttribute li.noValue { ul.LSformElement_jsonCompositeAttribute li.noValue {
@ -21,6 +22,10 @@ ul.LSformElement_jsonCompositeAttribute div label {
color: #666; color: #666;
} }
ul.LSformElement_jsonCompositeAttribute_fullWidth div label {
width: 16em;
}
ul.LSformElement_jsonCompositeAttribute div ul { ul.LSformElement_jsonCompositeAttribute div ul {
display: inline-block; display: inline-block;
list-style-type: none; list-style-type: none;
@ -55,8 +60,12 @@ ul.LSformElement_jsonCompositeAttribute div select {
margin: 2px; margin: 2px;
} }
ul.LSformElement_jsonCompositeAttribute_fullWidth, ul.LSformElement_jsonCompositeAttribute_fullWidth > li {
width: 100%;
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
ul.LSformElement_jsonCompositeAttribute { ul.LSformElement_jsonCompositeAttribute:not(.LSformElement_jsonCompositeAttribute_fullWidth) {
width: 40vw; width: 40vw;
} }
@ -64,26 +73,26 @@ ul.LSformElement_jsonCompositeAttribute div select {
width: auto; width: auto;
} }
ul.LSformElement_jsonCompositeAttribute div input[type=text], ul.LSformElement_jsonCompositeAttribute div select { ul.LSformElement_jsonCompositeAttribute:not(.LSformElement_jsonCompositeAttribute_fullWidth) div input[type=text], ul.LSformElement_jsonCompositeAttribute:not(.LSformElement_jsonCompositeAttribute_fullWidth) div select {
width: calc(40vw - 10px); width: calc(40vw - 10px);
box-sizing: border-box; box-sizing: border-box;
} }
} }
@media (max-width: 400px) { @media (max-width: 400px) {
ul.LSformElement_jsonCompositeAttribute { ul.LSformElement_jsonCompositeAttribute:not(.LSformElement_jsonCompositeAttribute_fullWidth), ul.LSformElement_jsonCompositeAttribute_fullWidth {
width: calc(100% - 1em); width: calc(100% - 1em);
} }
ul.LSformElement_jsonCompositeAttribute div ul { ul.LSformElement_jsonCompositeAttribute:not(.LSformElement_jsonCompositeAttribute_fullWidth) div ul, ul.LSformElement_jsonCompositeAttribute_fullWidth div ul {
width: 100%; width: 100%;
} }
ul.LSformElement_jsonCompositeAttribute div ul input[type=text] { ul.LSformElement_jsonCompositeAttribute:not(.LSformElement_jsonCompositeAttribute_fullWidth) div ul input[type=text], ul.LSformElement_jsonCompositeAttribute_fullWidth div ul input[type=text] {
width: 100%; width: 100%;
} }
ul.LSformElement_jsonCompositeAttribute div select { ul.LSformElement_jsonCompositeAttribute:not(.LSformElement_jsonCompositeAttribute_fullWidth) div select, ul.LSformElement_jsonCompositeAttribute_fullWidth div select {
width: calc(100% - 4px); width: calc(100% - 4px);
} }
} }

16
src/css/light-blue.css
View file

@ -198,15 +198,27 @@ td.LSobject-list, tr.LSobject-list {
padding: 2px; padding: 2px;
} }
.LSform input[type=text], .LSform input[type=password], .LSform select, .LSform textarea, ul.LSformElement_mail_autocomplete, ul.LSformElement_select_object_edit, div.LSformElement_wysiwyg_container, ul.LSformElement_jsonCompositeAttribute, dd.LSform-errors { .LSform input[type=text], .LSform input[type=password], .LSform select, .LSform textarea, ul.LSformElement_mail_autocomplete, ul.LSformElement_select_object_edit, div.LSformElement_wysiwyg_container, ul.LSformElement_jsonCompositeAttribute:not(.LSformElement_jsonCompositeAttribute_fullWidth), dd.LSform-errors {
width: 32vw; width: 32vw;
} }
ul.LSformElement_jsonCompositeAttribute div label { ul.LSformElement_jsonCompositeAttribute div label {
width: 10rem; width: 10rem;
} }
ul.LSformElement_jsonCompositeAttribute_fullWidth div label {
width: 16rem;
}
ul.LSformElement_jsonCompositeAttribute_fullWidth div ul, ul.LSformElement_jsonCompositeAttribute_fullWidth div select {
width: calc(100% - 16rem - 1em);
}
ul.LSformElement_jsonCompositeAttribute_fullWidth div ul li {
width: 100%;
}
ul.LSformElement_jsonCompositeAttribute_fullWidth div ul li input[type=text] {
width: 100%;
}
ul.LSformElement_jsonCompositeAttribute div input[type=text], ul.LSformElement_jsonCompositeAttribute div select { ul.LSformElement_jsonCompositeAttribute:not(.LSformElement_jsonCompositeAttribute_fullWidth) div input[type=text], ul.LSformElement_jsonCompositeAttribute:not(.LSformElement_jsonCompositeAttribute_fullWidth) div select {
width: calc(32vw - 10rem - 16px); width: calc(32vw - 10rem - 16px);
} }

1
src/includes/class/class.LSformElement_jsonCompositeAttribute.php
View file

@ -95,6 +95,7 @@ class LSformElement_jsonCompositeAttribute extends LSformElement {
$return['html'] = $this -> fetchTemplate(NULL, $return['html'] = $this -> fetchTemplate(NULL,
array( array(
'parseValues' => $parseValues, 'parseValues' => $parseValues,
'fullWidth' => $this -> getParam('html_options.fullWidth', false, 'bool'),
) )
); );
LStemplate :: addCssFile('LSformElement_jsonCompositeAttribute.css'); LStemplate :: addCssFile('LSformElement_jsonCompositeAttribute.css');

2
src/templates/default/LSformElement_jsonCompositeAttribute.tpl
View file

@ -1,4 +1,4 @@
<ul class='LSform {if $multiple && !$freeze} LSformElement_multiple{/if} LSformElement_jsonCompositeAttribute' id='{$attr_name|escape:"quotes"}' data-fieldType='{$fieldType|escape:"quotes"}'> <ul class='LSform {if $multiple && !$freeze} LSformElement_multiple{/if} LSformElement_jsonCompositeAttribute{if $fullWidth} LSformElement_jsonCompositeAttribute_fullWidth{/if}' id='{$attr_name|escape:"quotes"}' data-fieldType='{$fieldType|escape:"quotes"}'>
{foreach from=$parseValues item=parseValue} {foreach from=$parseValues item=parseValue}
<li>{include file="ls:$fieldTemplate"}</li> <li>{include file="ls:$fieldTemplate"}</li>
{foreachelse} {foreachelse}