Browse Source

On allège un peu l'UX du formulaire de logo : sus aux labels redondants + pétouilles sur le formulaire de roles de docs.

master
Charles Razack 3 years ago
parent
commit
ee7142265f
  1. 32
      formulaires/editer_logo.html
  2. 7
      formulaires/editer_logo.php
  3. 2
      formulaires/editer_roles_document.html
  4. 131
      formulaires/inc-selecteur_role.html
  5. 2
      paquet.xml
  6. 86
      prive/style_prive_plugin_roles_documents.html
  7. 4
      roles_documents_pipelines.php

32
formulaires/editer_logo.html

@ -5,9 +5,12 @@
On utilise à la place les documents avec des rôles de logo
]
<div class='formulaire_spip formulaire_editer formulaire_editer_logo formulaire_editer_logo_#ENV{objet}' id="editer_logo">
<div class='formulaire_spip formulaire_editer formulaire_editer_logo formulaire_editer_logo_#ENV{objet}[ (#ENV{logos}|non)no-logo]' id="editer_logo">
[(#REM) On n'affiche le titre que s'il n'y a pas de logo ]
[(#ENV{logos}|non)
[<h3 class="titrem">(#ENV*{_options/titre})</h3>]
]
[<p class="reponse_formulaire reponse_formulaire_ok">(#ENV**{message_ok})</p>]
[<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV**{message_erreur})</p>]
@ -18,22 +21,22 @@
sinon c'est un vieux logo
]
<B_logos>
<div class="apercu liste_items documents spip_logo">
<BOUCLE_logos(DATA){source table, #ENV{logos}}>
<div class="apercu liste_items documents">
<BOUCLE_logos(DATA) {source table, #ENV{logos}}>
#SET{type, #VALEUR{5}|intval|?{document,logo}}
[(#GET{type}|=={document}|oui)
<legend><:roles_documents:champ_role_label:>&nbsp;: [(#VALEUR{6}|role{document})]</legend>
<h3 class="titrem">[(#VALEUR{6}|role{document})]</h3>
<INCLURE{
fond=modeles/document_desc,
id_document=#VALEUR{5},
objet,
id_objet,
role=#VALEUR{6},
uniqueid=logo,
uniqueid=#VALEUR{6},
variante=editer_logo,
}/>
][(#GET{type}|=={logo}|oui)
<legend>[(#VAL{roles_documents:mode_#VALEUR{6}}|_T)]</legend>
<h3 class="titrem">[(#VAL{roles_documents:mode_#VALEUR{6}}|_T)]</h3>
<INCLURE{
fond=formulaires/inc-apercu-logo,
logo=#VALEUR,
@ -51,18 +54,11 @@
[(#REM) declarer les hidden qui declencheront le service du formulaire
parametre : url d'action ]
#ACTION_FORMULAIRE
<div class="editer-groupe">
<div class="editer editer_logo joindre_document pleine_largeur">
<legend><:roles_documents:titre_ajouter_logo:></legend>
<INCLURE{
fond=formulaires/inc-upload_document,
mediatheque=#ENV{objet}|et{#ENV{proposer_media}},
env
}/>
</div>
</div>
<INCLURE{
fond=formulaires/inc-upload_document,
mediatheque=#ENV{objet}|et{#ENV{proposer_media}},
env
}/>
[(#REM) ajouter les saisies supplementaires : extra et autre, a cet endroit ]
<!--extra-->

7
formulaires/editer_logo.php

@ -119,7 +119,7 @@ function formulaires_editer_logo_charger_dist($objet, $id_objet, $retour = '', $
// 2) Cherchons ensuite les vieux logos
// ====================================
$etats = array('on', 'off');
foreach($etats as $k => $etat) {
foreach ($etats as $k => $etat) {
if ($config[$k] == 'oui'
and $logo = $chercher_logo($id_objet, $id_table_objet, $etat, true)
) {
@ -169,9 +169,8 @@ function formulaires_editer_logo_charger_dist($objet, $id_objet, $retour = '', $
// Si le logo n'est pas editable et qu'il n'y en a pas,
// on n'affiche pas du tout le formulaire
if ((!$valeurs['editable']
and empty($logos)
)
if (
(!$valeurs['editable'] and empty($logos))
or (lire_config('activer_logos') != 'oui')
) {
return false;

2
formulaires/editer_roles_document.html

@ -13,7 +13,7 @@
[(#REM) Liste des rôles attribués ]
<B_roles>
[<span class="label">(#TOTAL_BOUCLE|singulier_ou_pluriel{roles:role_titre,roles:roles_titre})</span> : ]
[<span class="label">(#TOTAL_BOUCLE|singulier_ou_pluriel{roles:role_titre,roles:roles_titre}) :</span> ]
<BOUCLE_roles(documents_liens)
{id_document}
{objet}

131
formulaires/inc-selecteur_role.html

@ -1,6 +1,6 @@
[(#REM)
Sélection d'un role à attribuer à un document
Sélection d'un rôle à attribuer à un document
Identifiant du champ (name) : « roles »
@ -14,76 +14,79 @@
**obligatoire
*conseillé
- roles : rôle(s) sélectionné(s)
- roles : rôle(s) sélectionné(s)
- **roles_attribuables : tableau linéaire des rôles possibles
- multiple : 'oui' pour permettre une sélection de plusieurs rôles
- readonly : 'oui' pour interdire l'édition
- multiple : 'oui' pour permettre une sélection de plusieurs rôles
- readonly : 'oui' pour interdire l'édition
- editer_logo : indique si on est dans le formualire d'édition de logo
]
#SET{nb_roles, #ENV{roles_attribuables}|count}
#SET{multiple, #ENV{multiple}|=={oui}|?{multiple}}
#SET{readonly, #ENV{readonly}|=={oui}|?{readonly}}
<div class="editer editer-role">
[(#REM) Cas 1 : un seul rôle attribuable -> input hidden avec label ]
<BOUCLE_roles_un(CONDITION){si #GET{nb_roles}|<={1}}>
#SET{role,#ENV{roles_attribuables/0}}
<label><:roles_documents:champ_role_label:> : [(#GET{role}|role{document})]
</label>
<input
type="hidden"
id="champ_roles"
name="roles"
value="#GET{role}"
>
</BOUCLE_roles_un>
[(#REM) Cas 2 : plusieurs rôles attribuables ]
<label><:roles_documents:champ_roles_label:></label>
[(#REM) Cas 2.1 : moins de 5 rôles -> radio ou checkbox ]
<BOUCLE_roles_peu(DATA)
{source table, #ENV{roles_attribuables}}
{si #GET{nb_roles}|<{5}}
>
#SET{type,#GET{multiple}|?{checkbox,radio}}
#SET{checked, #VALEUR|=={#ENV{role}}|ou{#ENV{role}|non|et{#COMPTEUR_BOUCLE|=={1}}}|?{checked}}
<div class="choix">
#SET{nb_roles, #ENV{roles_attribuables}|count}
#SET{multiple, #ENV{multiple}|=={oui}|?{multiple}}
#SET{readonly, #ENV{readonly}|=={oui}|?{readonly}}
#SET{role_unique, #ENV{roles_attribuables/0}}
<div class="editer-groupe roles">
<div class="editer pleine_largeur">
[(#ENV{editer_logo}|?{
[<h3 class="titrem">(#GET{nb_roles}|=={1}|?{
[(#GET{role_unique}|role{document})],
<:roles_documents:titre_ajouter_logo:>,
})</h3>],
[<label for="champ_roles">(#GET{nb_roles}|=={1}|?{
<:roles_documents:champ_role_label:> : [(#GET{role_unique}|role{document})],
<:roles_documents:champ_role_label:>
})</pan>]
})]
[(#REM) Si un seul rôle attribuable : input hidden avec label ]
<BOUCLE_roles_un(CONDITION) {si #GET{nb_roles}|=={1}}>
<input
type="#GET{type}"
class="#GET{type}"
id="champ_roles_#COMPTEUR_BOUCLE"
type="hidden"
id="champ_roles"
name="roles"
value="#VALEUR"
[checked="(#GET{checked})"]
[readonly="(#GET{readonly})"]
value="#GET{role_unique}"
>
<label for="champ_roles_#COMPTEUR_BOUCLE">[(#VALEUR|role{document})]</label>
</div>
</BOUCLE_roles_peu>
</BOUCLE_roles_un>
[(#REM) Cas 2.2 : plus de 5 rôles -> select ]
<B_roles_beaucoup>
<select
class="select chosen"
id="champ_roles"
name="roles[(#GET{multiple}|oui)\[\]]"
[multiple="(#GET{multiple})"]
>
<BOUCLE_roles_beaucoup(DATA)
[(#REM) Moins de 5 rôles : radio ou checkbox ]
<BOUCLE_roles_peu(DATA)
{source table, #ENV{roles_attribuables}}
{si #GET{nb_roles}|>={5}}
{si #GET{nb_roles}|>{1}|et{#GET{nb_roles}|<{5}}}
>
#SET{selected, #VALEUR|=={#ENV{role}}|ou{#ENV{role}|non|et{#COMPTEUR_BOUCLE|=={1}}}|?{selected}}
<option value="#VALEUR"[ selected="(#GET{selected})"]>[(#VALEUR|role{document})]</option>
</BOUCLE_roles_beaucoup>
</select>
</B_roles_beaucoup>
<//B_roles_un>
#SET{type,#GET{multiple}|?{checkbox,radio}}
#SET{checked, #VALEUR|=={#ENV{role}}|ou{#ENV{role}|non|et{#COMPTEUR_BOUCLE|=={1}}}|?{checked}}
<div class="choix">
<input
type="#GET{type}"
class="#GET{type}"
id="champ_roles_#COMPTEUR_BOUCLE"
name="roles"
value="#VALEUR"
[checked="(#GET{checked})"]
[readonly="(#GET{readonly})"]
>
<label for="champ_roles_#COMPTEUR_BOUCLE">[(#VALEUR|role{document})]</label>
</div>
</BOUCLE_roles_peu>
[(#REM) 5 rôles ou plus : select ]
<B_roles_beaucoup>
<select
class="select chosen"
id="champ_roles"
name="roles[(#GET{multiple}|oui)\[\]]"
[multiple="(#GET{multiple})"]
>
<BOUCLE_roles_beaucoup(DATA)
{source table, #ENV{roles_attribuables}}
{si #GET{nb_roles}|>={5}}
>
#SET{selected, #VALEUR|=={#ENV{role}}|ou{#ENV{role}|non|et{#COMPTEUR_BOUCLE|=={1}}}|?{selected}}
<option value="#VALEUR"[ selected="(#GET{selected})"]>[(#VALEUR|role{document})]</option>
</BOUCLE_roles_beaucoup>
</select>
</B_roles_beaucoup>
</div>
</div>

2
paquet.xml

@ -1,7 +1,7 @@
<paquet
prefix="roles_documents"
categorie="edition"
version="1.2.26"
version="1.2.27"
etat="dev"
compatibilite="[3.2.0;3.2.*]"
logo="prive/themes/spip/images/roles_documents-48.png"

86
prive/style_prive_plugin_roles_documents.html

@ -7,41 +7,36 @@
/**
* Formulaire d'édition de rôle
*/
.formulaire_editer_roles_document {
.fiche_objet .formulaire_editer_roles_document {
margin: 0.5em 0 0;
padding: 0;
background: transparent;
border: 0 none;
}
/* Conteneur liste des rôles + bouton */
.roles-documents {
display: inline-block;
display: flex;
flex-flow: row wrap;
}
.roles-documents > *:not(:first-of-type) {
margin-#ENV{left}: 0.5em;
}
/* Bouton modifier adjacent */
.roles-documents .btn-group {
display: inline-block;
position: relative;
margin-#ENV{left}: 0.5em;
vertical-align: middle;
}
.roles-documents .label {}
.roles-documents .btn {
padding: 0 0.2em;
border-radius: 5px;
background-color: #GET{claire};
color: inherit;
}
.roles-documents .caret {
vertical-align: middle; /* Top par défaut, pourquoi ??? */
}
/* Exposer les rôles de logos */
[class*=role-logo] {
font-weight: bold;
}
[class*=role-logo]:before {
content: "";
display: inline-block;
background: url(#CHEMIN_IMAGE{media-logo-16});
width: 16px;
height: 16px;
margin-right: 0.2em;
vertical-align: middle;
}
small[class*=role-logo]:before {
background: url(#CHEMIN_IMAGE{media-logo-12});
width: 12px;
height: 12px;
}
/* fix pour s'assurer que le dropdown soit visible */
.portfolios.portfolios .item,
.portfolios.portfolios .item .descriptions {
@ -83,51 +78,38 @@ small[class*=role-logo]:before {
float: none;
}
/**
* Formulaire de logo
*/
.formulaire_editer_logo h3.titrem {
margin-bottom: 0;
}
.formulaire_editer_logo .editer-groupe{
padding-top: 0;
padding-bottom: 0;
.formulaire_editer_logo .titrem {
text-align: center;
}
/* Apercu */
#navigation .formulaire_editer_logo .apercu {
margin: 0;
border: none;
text-align: left;
.formulaire_editer_logo .apercu {
border: 0;
}
.formulaire_editer_logo .apercu .liste_items {
.formulaire_editer_logo .item {
margin: 0;
padding: 0;
border: 0;
}
.formulaire_editer_logo .apercu .vignette,
.formulaire_editer_logo .apercu .titrem {
text-align: center;
.formulaire_editer_logo .descriptions {
text-align: #ENV{left};
}
.formulaire_editer_logo .apercu .detaillees {
.formulaire_editer_logo .detaillees,
.formulaire_editer_logo .mode,
.formulaire_editer_logo .deplacer-document {
display: none;
}
.formulaire_editer_logo .apercu .titrem {
text-transform: none;
margin: 0 0 0.5em;
/* Ajouts */
.formulaire_editer_logo .editer-groupe.roles,
.formulaire_editer_logo .editer-groupe.roles .editer {
padding: 0;
}
.formulaire_editer_logo .apercu .mode,
.formulaire_editer_logo .apercu .deplacer-document {
.formulaire_editer_logo.no-logo .editer .titrem {
display: none;
}
.formulaire_editer_logo .apercu .editbox {
font-weight: bold;
}
.lat .editer-role {
font-size: 0.9em;
}
/* Ajout */
.lat .editer_logo.joindre_document {
padding-bottom: 0;
}
/**
* Fix plugin médias < r109742

4
roles_documents_pipelines.php

@ -324,7 +324,8 @@ function roles_documents_formulaire_traiter($flux) {
function roles_documents_recuperer_fond($flux) {
// Ajout de document
if ($flux['args']['fond'] == 'formulaires/inc-upload_document'
if (
$flux['args']['fond'] == 'formulaires/inc-upload_document'
and isset($flux['args']['contexte']['objet'])
and isset($flux['args']['contexte']['id_objet'])
) {
@ -350,6 +351,7 @@ function roles_documents_recuperer_fond($flux) {
'roles' => (isset($flux['args']['contexte']['roles']) ? $flux['args']['contexte']['roles'] : ''),
'roles_attribuables' => $roles_attribuables,
'multiple' => $multiple,
'editer_logo' => $editer_logo,
);
// On place le sélecteur au début (compliqué de le placer juste avant les boutons, déplacés en JS, et des blocs cachés)

Loading…
Cancel
Save