Quelques améliorations de l'interface suite aux retours de différentes personnes (realEt, franck...)

- Dans la partie associer, on ajoute un title et une icone pour mieux comprendre que l'on peut sélectionner plusieurs rôles

+ Corrections graphiques : 
  - couleurs de chosen moins flashy, 
  - largeur homogène (là c'est moins simple car chosen calcule une taille par défaut basée sur la taille du sélect d'origine, mais sa taille change au fur et à mesure des ajouts d'élément dans les cellules du tableau par choosen. C'est cela qui faisait que la taille augmentait peu à peu. On recalcule donc la taille à la fin de tous les chosen !

+ Garder la sélection des roles dans la liste d'association, lorsqu'on ajoute un auteur.

.gitattributes

@@ -19,6 +19,7 @@ lib/chosen/chosen.proto.min.js -text
 /paquet.xml -text
 prive/style_prive_plugin_roles.html -text
 prive/themes/spip/images/inserer-8.png -text
+prive/themes/spip/images/ouvrir_doux-16.png -text
 prive/themes/spip/images/roles-128.png -text
 prive/themes/spip/images/roles-32.png -text
 prive/themes/spip/images/roles-64.png -text

formulaires/editer_liens.php

@@ -121,6 +121,7 @@ function formulaires_editer_liens_charger_dist($a,$b,$c,$editable=true){
 		'visible'=>0,
 		'ajouter_lien'=>'',
 		'supprimer_lien'=>'',
+		'definir_roles'=>'',
 		'_oups' => _request('_oups'),
 		'editable' => $editable,
 	);

formulaires/inc-editer_liens_roles.html

@@ -1,9 +1,11 @@
 #SET{exclus,#ENV{id}|roles_presents_sur_id{#ENV{objet_source},#ENV{objet},#ENV{id_objet},#ENV{_objet_lien}}}
 <B_roles>
-<select class="selection_roles" name="definir_roles\[#ENV{cle}\]\[\]"
+<select class="selection_roles" name="definir_roles\[#ENV{cle}\]\[\]" title="<:roles:selectionner_roles|attribut_html:>"
 	multiple="multiple" data-placeholder="<:roles:choisir_role|attribut_html:>">
 <BOUCLE_roles(DATA){source table,#ENV{roles/roles/choix}}{valeur !IN #GET{exclus}}>
-	<option value="#VALEUR">[(#VALEUR|role{#ENV{table_source}})]</option>
+	<option value="#VALEUR"[ (#VALEUR|in_any{#ENV{definir_roles/#ENV{cle}}})selected='selected']>
+		[(#VALEUR|role{#ENV{table_source}})]
+	</option>
 </BOUCLE_roles>
 </select>
 </B_roles>

javascript/roles.js

@@ -1,7 +1,18 @@
 ;(function ($) {
 jQuery(document).ready(function(){
 	spip_chosen = function() {
+		/* Charger chosen sur les sélecteurs de roles */
 		$("select.selection_roles").chosen();
+		$('.chzn-container').each(function (index) {
+			/* remettre la bonne taille des éléments qui change avec la
+			 * présence de chosen du fait du changement de la largeur de colonne */
+			select = $(this).prev().show(); /* il faut le repasser visible pour avoir une taille correcte ! */
+			width = select.width();
+			select.hide();
+			$(this).css('width', width).find("> .chzn-drop").css('width', width - 2);
+			/* Si un title était sur le sélect d'origine, le remettre sur le html de Chosen */
+			if (title = select.attr('title')) { $(this).attr('title', title); }
+		});
 	}
 	spip_chosen();
 	onAjaxLoad(spip_chosen);

lang/roles_fr.php

@@ -10,6 +10,9 @@ $GLOBALS[$GLOBALS['idx_lang']] = array(
 	// R
 	'roles_titre' => 'Rôles',
 	'role_titre'  => 'Rôle',
+
+	// S
+	'selectionner_roles' => 'Sélectionner le ou les rôles souhaités',
 );
 
 ?>

paquet.xml

@@ -1,7 +1,7 @@
 <paquet
 	prefix="roles"
 	categorie="outil"
-	version="1.0.0"
+	version="1.0.1"
 	etat="dev"
 	compatibilite="[3.0.0-dev;3.1.*]"
 	logo="prive/themes/spip/images/roles-64.png"

prive/style_prive_plugin_roles.html

@@ -1,8 +1,11 @@
+/* alignement des listes lorsqu'elles sont sur 2 lignes */
 .liste-objets-associer td {vertical-align:middle;}
 .liste-objets-associer td {vertical-align:middle;}
+/* quelques modifs de chosen */
 .liste-objets-associer .chzn-container { font-size:1em; top:3px; }
 .liste-objets-associer .chzn-container .chzn-results li { padding:5px 6px; }
 
+/* gérer le sélecteur dropdown, des titres dedans, les boutons.link */
 .dropdown-menu .dropdown-header {font-weight:bold; color:#666;}
 .formulaire_spip .spip .dropdown-menu li:not(.divider) {
     text-align:left;
@@ -10,7 +13,33 @@
 }
 .dropdown-menu button.link {border-radius:0; box-shadow:none;}
 
+#SET{start,#999}#SET{stop,#888}
 
+/* couleurs de chosen */
+.chzn-container .chzn-results .highlighted {
+  background-color: #444;
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#GET{start}', endColorstr='#GET{stop}', GradientType=0 );  
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #GET{start}), color-stop(90%, #GET{stop}));
+  background-image: -webkit-linear-gradient(top, [(#GET{start})] 20%, [(#GET{stop})] 90%);
+  background-image: -moz-linear-gradient(top, [(#GET{start})] 20%, [(#GET{stop})] 90%);
+  background-image: -o-linear-gradient(top, [(#GET{start})] 20%, [(#GET{stop})] 90%);
+  background-image: -ms-linear-gradient(top, [(#GET{start})] 20%, [(#GET{stop})] 90%);
+  background-image: linear-gradient(top, [(#GET{start})] 20%, [(#GET{stop})] 90%);
+  color: #fff;
+}
+.chzn-container-multi .chzn-choices {
+	border-color:#ccc;
+	background:white [url((#CHEMIN_IMAGE{ouvrir_doux-16.png}|image_gamma{70}|extraire_attribut{src}|url_absolue))] right 50% no-repeat;
+}
+.chzn-container-multi .chzn-choices:hover {
+	background-image:[url((#CHEMIN_IMAGE{ouvrir_doux-16.png}|url_absolue))];
+}
+.chzn-container-active .chzn-choices {
+	border-color:#999;
+}
+
+
+/* adapter le dropdown "modifier" et le caler à droite */
 table .role .btn-group:before,
 table .role .btn-group:after {
     display: inline-block;