Browse Source

Constructeur de formulaire :

- Barre d'actions : utiliser les nouvelles icônes + ajustements CSS
- Boutons Spip 4
- Adaptations des styles pour Spip 4. On en profite pour ranger et reformater la CSS.
pull/119/head
tcharlss 1 year ago committed by Maïeul Rouquette
parent
commit
60fa23dd21
  1. 239
      css/formulaires_constructeur.css
  2. 22
      formulaires/construire_formulaire.html
  3. 7
      formulaires/construire_formulaire.php
  4. 18
      formulaires/inc-construire_formulaire-actions.html

239
css/formulaires_constructeur.css

@ -1,3 +1,11 @@
/**
* Styles du constructeur de formulaires.
*/
/**
* Conteneur
*/
.formulaire_construire_formulaire {
--saisies-btn-padding-x: var(--spip-btn-padding-x);
--saisies-btn-padding-y: var(--spip-btn-padding-y);
@ -6,115 +14,150 @@
margin-left: calc(var(--spip-form-spacing-x) * -1);
margin-right: calc(var(--spip-form-spacing-x) * -1);
}
.formulaire_spip .formulaire_spip{
border:none;
background:transparent;
.formulaire_spip .formulaire_construire_formulaire {
border: none;
background: transparent;
}
.formulaire_construire_formulaire .actions_formulaire{
margin:0;
padding:1em;
text-align:center;
border:0;
}
.formulaire_construire_formulaire .actions_formulaire img{
vertical-align:middle;
}
.formulaire_construire_formulaire .en_configuration{
border:5px solid #999;
border-radius:5px;
margin:.5em;
/**
* Saisie en configuration, avec le formulaire inséré à la fin.
* Pour les fieldsets, c'est inséré après.
*/
.formulaire_construire_formulaire .en_configuration {
border: 3px solid var(--spip-color-theme);
border-radius: var(--spip-form-border-radius);
padding-top: var(--spip-form-spacing-y);
padding-bottom: 0;
margin: calc(var(--spip-form-spacing-y) / 2) 0;
box-shadow: 0 0 2em var(--spip-color-theme-lightest); /* Pour faire « poper » la saisie */
}
.formulaire_construire_formulaire .fieldset.en_configuration > fieldset,
.formulaire_construire_formulaire .fieldset.en_configuration > .formulaire_configurer {
margin: 0;
}
.formulaire_construire_formulaire fieldset fieldset {
margin-left:0px;
/**
* Formulaire de configuration dans une saisie
*/
.formulaire_construire_formulaire .formulaire_configurer {
margin-top: var(--spip-form-spacing-y);
margin-left: calc((var(--spip-form-label-width) + (var(--spip-form-spacing-x) * 2)) * -1);
margin-right: calc(var(--spip-form-spacing-x) * -1);
padding: var(--spip-form-spacing-y) var(--spip-form-spacing-x) 0;
border-top: 3px dashed var(--spip-color-theme-light);
}
.formulaire_construire_formulaire .sortable-ghost {
opacity:0;
.formulaire_construire_formulaire .editer.pleine_largeur .formulaire_configurer {
margin-left: calc(var(--spip-form-spacing-x) * -1);
}
.formulaire_construire_formulaire .fieldset.configurable>fieldset {
border:1px dashed #999;
.formulaire_construire_formulaire .editer.long_label .formulaire_configurer {
margin-left: calc((var(--spip-form-label-long-width) + (var(--spip-form-spacing-x) * 2)) * -1);
}
.formulaire_construire_formulaire .fieldset.configurable>fieldset>.editer-groupe {
.formulaire_construire_formulaire .formulaire_configurer > .editer-groupe {
margin-left: 0;
margin-right: 0;
}
.formulaire_construire_formulaire .formulaire_configurer{
border-top:3px dashed #999;
margin: 1em -10px 0 -140px;
padding: 1em .5em .5em .5em;
background:white;
clear: both;
/* onglets */
.formulaire_construire_formulaire .formulaire_configurer .saisies-contenus-onglets > .fieldset {
padding-left: 0;
}
.formulaire_construire_formulaire .fieldset > .formulaire_configurer{
margin: 1em 0 0;
/* boutons */
.formulaire_construire_formulaire .formulaire_configurer .boutons {
margin: 0 calc(var(--spip-form-spacing-x) * -1);
}
.formulaire_construire_formulaire .editer-groupe.formulaire_configurer-contenus {
padding: 0;
}
/* boutons des configs */
.formulaire_construire_formulaire .editer-groupe.formulaire_configurer-contenus .boutons {
margin: 0 -0.5em -0.5em; /* idem padding du parent, en négatif */
/**
* Fieldsets
* On ajoute une bordure pour mieux visualiser, il faut donc ajuster les marges et cie.
*/
.formulaire_construire_formulaire .fieldset.configurable:not(.en_configuration) > fieldset {
border: 1px dashed var(--spip-color-gray);
}
/* boutons des options globales */
.formulaire_construire_formulaire .editer-groupe.en_configuration .boutons {
margin: 0.5em 0 0;
.formulaire_construire_formulaire .saisies_presentes .fieldset > fieldset {
margin-left: 0;
margin-right: 0;
}
.formulaire_construire_formulaire .editer.obligatoire .formulaire_configurer label {
color: #666;
font-weight: normal;
.formulaire_construire_formulaire .saisies_presentes .fieldset > fieldset fieldset {
padding-left: var(--spip-form-spacing-x);
padding-right: var(--spip-form-spacing-x);
}
.formulaire_construire_formulaire .editer.obligatoire .formulaire_configurer .obligatoire label {
color: black;
font-weight: bold;
/* Ceux dans le form de config (nb : fieldsets 1er niveaux affichés sous forme d'onglets) */
.formulaire_construire_formulaire .saisies_presentes .formulaire_configurer fieldset fieldset > .editer-groupe > .editer:first-child {
padding-top: 0;
}
.formulaire_construire_formulaire .saisies_presentes .formulaire_configurer .fieldset > fieldset {
padding-left: 0;
padding-right: 0;
}
.formulaire_configurer-contenus > .fieldset > fieldset:first-child {border-top:0;}
.formulaire_configurer-contenus > .fieldset > fieldset {padding: 0}
.formulaire_construire_formulaire .editer-groupe > .configurable,
.formulaire_construire_formulaire .fieldset_onglet {
padding-top: 2em; /* = place pour les boutons d'édition */
position:relative;
/**
* Bouton de configuration des options globales
*/
.formulaire_construire_formulaire .actions-globales {
margin-top: var(--spip-form-spacing-y);
}
.formulaire_construire_formulaire .actions-globales .submit {
margin-bottom: 0; /* déjà la marge nécessaire via .editer-groupe + .editer */
}
.formulaire_construire_formulaire .editer-groupe > .configurable.en_configuration {
padding-top: 1em;
.formulaire_construire_formulaire .actions-globales ~ .editer-groupe {
clear: both;
}
.formulaire_construire_formulaire .editer.saisie_explication > .explication { position:initial; }
.formulaire_construire_formulaire .editer.pleine_largeur .formulaire_configurer { margin-left: 0px; }
.formulaire_construire_formulaire .formulaire_configurer .fieldset {padding-top:0px;}
.formulaire_construire_formulaire .formulaire_configurer fieldset fieldset>.editer-groupe>.editer:first-child {padding-top:0px;}
.formulaire_construire_formulaire .editer.hover {background-color:transparent;}
/**
* Boutons divers au début (réinitialiser, etc.)
*/
.formulaire_construire_formulaire .actions_formulaire {
margin: 0;
text-align: center;
border: 0;
}
.formulaire_construire_formulaire .actions_formulaire img {
vertical-align: middle;
}
/* Actions */
.formulaire_construire_formulaire .actions{
position:absolute;
right:5px;
top:5px;
/**
* Barre de boutons d'actions pour une saisie
*/
.formulaire_construire_formulaire .actionable {
padding-top: calc((var(--spip-form-spacing-y) / 2) + (16px + (var(--spip-btn-padding-y) * 2)));
position: relative;
}
.formulaire_construire_formulaire .fieldset.actionable > .actions {
right: 0;
}
.formulaire_construire_formulaire .actions {
position: absolute;
top: calc(var(--spip-form-spacing-y) / 2);
right: var(--spip-form-spacing-x);
inset-inline-end: var(--spip-form-spacing-x);
display: flex;
justify-content: flex-end;
margin: 0;
}
.formulaire_construire_formulaire .actions button{
cursor:pointer;
background:none;
border:none;
opacity:0.7;
.formulaire_construire_formulaire .actions button,
.formulaire_construire_formulaire .actions .btn {
cursor: pointer;
background-color: var(--spip-color-gray-lightest);
border: none;
margin: 0;
}
.formulaire_construire_formulaire .actions button:hover{
opacity:1;
.formulaire_construire_formulaire .actions button:hover,
.formulaire_construire_formulaire .actions .btn:hover {
background-color: var(--spip-color-gray-lighter);
}
.formulaire_construire_formulaire .actions .move {
cursor:move;
}
/* Groupes de boutons */
/**
* Groupes de boutons d'ajout de saisies
*/
.formulaire_construire_formulaire .fieldset_saisie_categorie legend.legend {
background-color: transparent;
}
@ -135,7 +178,9 @@
}
/* Bouton d'ajout */
/**
* Bouton d'ajout d'une saisie avec icône
*/
.formulaire_construire_formulaire .ajouter_saisie {
color: var(--spip-black, black);
padding: var(--saisies-btn-padding-y) var(--saisies-btn-padding-x);
@ -155,7 +200,45 @@
.formulaire_construire_formulaire .ajouter_saisie:hover {
background-color: var(--spip-color-gray-lighter);
}
.formulaire_construire_formulaire .ajouter_saisie img{
vertical-align:middle;
}
/**
* Divers
*/
/* Bitonio de sortable.js */
.formulaire_construire_formulaire .sortable-ghost {
opacity: 0;
}
/* Labels */
.formulaire_construire_formulaire .editer.obligatoire .formulaire_configurer label {
color: #666;
font-weight: normal;
}
.formulaire_construire_formulaire .editer.obligatoire .formulaire_configurer .obligatoire label {
color: black;
font-weight: bold;
}
/* ? */
.formulaire_construire_formulaire .editer-groupe.formulaire_configurer-contenus {
padding: 0;
}
/* boutons */
.formulaire_construire_formulaire .editer-groupe.en_configuration .boutons {
margin: 0.5em 0 0;
}
/* onglets */
.formulaire_construire_formulaire .saisies-menu-onglets__items {
margin: 0;
}
/* Explication */
.formulaire_construire_formulaire .editer.saisie_explication > .explication {
position: initial;
}
.formulaire_construire_formulaire .editer.hover {
background-color: transparent;
}

22
formulaires/construire_formulaire.html

@ -12,8 +12,8 @@
[(#ENV{_activer_options_globales}|oui)
[(#ENV{erreurs/configurer_globales}|non)
<div class="actions">
<button type="submit" class="submit" name="configurer_globales" value="oui">
<div class="actions-globales float-end">
<button type="submit" class="submit btn_secondaire" name="configurer_globales" value="oui">
<:saisies:construire_configurer_globales_label:>
</button>
</div>
@ -24,20 +24,22 @@
<div class="boutons">
<input type="hidden" name="enregistrer_globales" value="oui" />
<button type="submit" class="submit link noscroll" name="enregistrer_globales" value=""><:bouton_annuler:></button>
<input type="submit" class="submit noscroll" name="enregistrer" value="<:bouton_valider:>" />
<div class="groupe-btns">
<button type="submit" class="submit btn_secondaire noscroll" name="enregistrer_globales" value=""><:bouton_annuler:></button>
<input type="submit" class="submit noscroll" name="enregistrer" value="<:bouton_valider:>" />
</div>
</div>
</div>
]
]
<div id="reinitialiser" class="actions_formulaire">
<button type="submit" class="submit" name="reinitialiser" value="oui" onclick="return confirm('<:saisies:construire_reinitialiser_confirmer:>')">
<img src="#CHEMIN{images/formulaire-reinitialiser-24.png}" alt="" />
<button type="submit" class="submit btn_secondaire" name="reinitialiser" value="oui" onclick="return confirm('<:saisies:construire_reinitialiser_confirmer:>')">
[(#CHEMIN_IMAGE{formulaire-action-reinitialiser-16.png}|balise_img{'','sp-icone'})]
<:saisies:construire_reinitialiser:>
</button>
</div>
<div class="editer-groupe" id="sortable">
<div class="editer-groupe saisies_presentes" id="sortable">
[(#REM)<!-- les choix de saisies -->]
<BOUCLE_contenu(DATA){source tableau, #ENV{_contenu}}>
@ -149,8 +151,6 @@
function(){
$(this)
.addClass('hover')
.find('> .actions')
.show()
.end()
.parents('li.configurable:not(.en_configuration)')
.mouseout();
@ -159,16 +159,12 @@
if (!$(this).is('.en_configuration'))
$(this)
.removeClass('hover')
.find('> .actions')
.hide()
.end()
.parents('.configurable').eq('0')
.mouseover();
}
)
.filter(':not(.en_configuration)')
.find('> .actions')
.hide()
.end()
.end();

7
formulaires/construire_formulaire.php

@ -503,6 +503,7 @@ function construire_formulaire_generer_saisie_configurable($saisie, $env) {
// On ajoute les boutons d'actions, mais seulement s'il n'y a pas de configuration de lancée
if (!$env['erreurs']) {
$saisie['options']['conteneur_class'] .= ' actionable';
$saisie = saisies_inserer_html(
$saisie,
recuperer_fond(
@ -616,8 +617,10 @@ function construire_formulaire_generer_saisie_configurable($saisie, $env) {
)
.'<div class="boutons">
<input type="hidden" name="enregistrer_saisie" value="'.$nom.'" />
<button type="submit" class="submit link noscroll" name="enregistrer_saisie" value="">'._T('bouton_annuler').'</button>
<input type="submit" class="submit noscroll" name="enregistrer" value="'._T('bouton_valider').'" />
<div class="groupe-btns">
<button type="submit" class="submit btn_secondaire noscroll" name="enregistrer_saisie" value="">'._T('bouton_annuler').'</button>
<input type="submit" class="submit noscroll" name="enregistrer" value="'._T('bouton_valider').'" />
</div>
</div>'
.'</div></div>',
'fin'

18
formulaires/inc-construire_formulaire-actions.html

@ -1,27 +1,27 @@
<div class="actions">
<div class="actions groupe-btns">
#SET{nom,#ENV{identifiant,#ENV{nom}}}
[(#ENV{formulaire_config}|is_array|non)
[(#ENV{deplacable}|oui)
<span class="move deplacer_saisie" title="<:saisies:construire_action_deplacer:>">
<img src="[(#CHEMIN{images/formulaire-deplacer-16.png})]" alt="<:saisies:construire_action_deplacer:>"/>
<span class="btn move deplacer_saisie" title="<:saisies:construire_action_deplacer:>">
[(#CHEMIN_IMAGE{formulaire-action-deplacer-16.png}|balise_img{<:saisies:construire_action_deplacer:>})]
</span>
]
<button type="submit" class="submit noscroll configurer_saisie" name="configurer_saisie" value="#GET{nom}" title="<:saisies:construire_action_configurer:>">
<img src="[(#CHEMIN{images/formulaire-configurer-16.png})]" alt="<:saisies:construire_action_configurer:>"/>
[(#CHEMIN_IMAGE{formulaire-action-configurer-16.png}|balise_img{<:saisies:construire_action_configurer:>})]
</button>
<button type="submit" class="submit noscroll dupliquer_saisie" name="dupliquer_saisie" value="#GET{nom}" title="<:saisies:construire_action_dupliquer:>">
<img src="[(#CHEMIN{images/formulaire-dupliquer-16.png})]" alt="<:saisies:construire_action_dupliquer:>"/>
[(#CHEMIN_IMAGE{formulaire-action-dupliquer-16.png}|balise_img{<:saisies:construire_action_dupliquer:>})]
</button>
<button type="submit" class="submit noscroll supprimer_saisie" name="supprimer_saisie" value="#GET{nom}" title="<:saisies:construire_action_supprimer:>" onclick="javascript:return confirm('<:saisies:construire_confirmer_supprimer_champ:>');">
<img src="[(#CHEMIN{images/formulaire-supprimer-16.png})]" alt="<:saisies:construire_action_supprimer:>"/>
[(#CHEMIN_IMAGE{formulaire-action-supprimer-16.png}|balise_img{<:saisies:construire_action_supprimer:>})]
</button>
]
[(#ENV{formulaire_config}|is_array|oui)
<button type="submit" class="submit enregistrer_saisie" name="enregistrer_saisie" value="#GET{nom}" title="<:bouton_enregistrer:>">
<img src="[(#CHEMIN{images/formulaire-enregistrer-16.png})]" alt="<:bouton_enregistrer:>"/>
[(#CHEMIN_IMAGE{formulaire-action-enregistrer-16.png}|balise_img{<:bouton_enregistrer:>})]
</button>
<button type="submit" class="submit annuler" name="enregistrer_saisie" value="" title="<:saisies:construire_action_annuler:>">
<img src="[(#CHEMIN{images/formulaire-annuler-16.png})]" alt="<:saisies:construire_action_annuler:>"/>
[(#CHEMIN_IMAGE{formulaire-action-annuler-16.png}|balise_img{<:saisies:construire_action_annuler:>})]
</button>
]
</div>
</div>
Loading…
Cancel
Save