Valider 5f8235b9 rédigé par RastaPopoulos's avatar RastaPopoulos
Parcourir les fichiers

Modifs ergo du navigateur/sélecteur générique qui simplifie l'interface (avant... 

Modifs ergo du navigateur/sélecteur générique qui simplifie l'interface (avant c'était surcharge cognitive, trop d'infos, trop d'images, trop de boutons).

- Un seul panneau suffit, le chemin hiérarchique permet de revenir facilement en arrière (et c'est alors déjà préchargé donc très rapide).
- On vire toutes les icônes d'objet, mais on les rajoute sur le *titre* du type d'objet des listes. Ainsi il n'y a pas de redondance, on ne voit qu'une fois cette icône devant "Rubriques" par exemple, pas à chaque ligne.
- Chaque ligne est un "split button" comportant deux zones cliquables : une pour naviguer, une pour sélectionner, et *sans vide* dans une ligne, tout est cliquable.
- La zone principale de clic est celle de *navigation* car c'est celle qui ne fait pas disparaitre le navigateur. De plus, quand on navigue dans un élément (ouvrir une rubrique par exemple) il est *toujours* possible de sélectionner cette élément à l'étape suivante. Une image de flèche est placé alignée tout à droite des textes.
- La deuxième zone de clique, plus petite, est celle de sélection de l'objet sur cette ligne. Cette zone se trouvre *tout à droite*, donc à droite de la flèche. Ainsi il n'y a aucune confusion possible entre les deux images : seule la flèche est lié au texte, alors qu'avant on avait une image à gauche, une image à droite, ce qui faisait qu'on ne pouvait rendre le texte cliquable sans être confus (le texte pouvait être lié à l'une ou l'autre des deux images).
- Un bouton de sélection propre à l'objet "en cours" (celui qui a le titre principale) se trouve toujours au début de chaque liste (donc même quand il n'y a pas d'enfants).
- On vire tous les historiques ajax dans l'URL.
- Au passage ça simplifie le code des squelettes aussi, car il y a moins de choses.

Il reste que le mini formulaire "Ajout rapide" n'est pas encore générique, il ne reconnaît toujours que rubrique et article.
parent eb4e0a60

prive/formulaires/selecteur/ajax.html

+6 −4
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -2,12 +2,12 @@ 


[(#REM) Afficher un bouton ajax Modifier a la premiere fois ]

[(#ENV{picker,''}|non)

<div class='picker_bouton'>&#91;<a href='[(#SELF|parametre_url{picker,1})]' class="ajax nohistory">#GET{bouton_modif}</a>&#93;</div>

<div class='picker_bouton'><a href='[(#SELF|parametre_url{picker,1})]' class="ajax nohistory">#GET{bouton_modif}</a></div>

]



[(#REM) Afficher un bouton Fermer/Modifier ensuite ]

[(#ENV{picker,''}|oui)

<div class='picker_bouton'>

<div class="picker_bouton">

<a

	class="close"

	href="[(#SELF|parametre_url{picker,0})]"
@@ -19,8 +19,8 @@ 
	style="display:none;">#GET{bouton_modif}</a>

</div>



[(#REM) et enfin le navigateur ------]

<div class='browser'>

[(#REM) et enfin le navigateur (et l'ajout rapide) ------]

<div class="browser">

	<div class="choix choix_rapide">

		<label for="picker_rapide_#ENV{name}"><:label_ajout_id_rapide:></label>

		<input type="text" value="" id="picker_rapide_#ENV{name}" size="10" />
@@ -62,6 +62,8 @@ 
	[(#ENV{objet}|=={racine}|ou{#ENV{id_objet}|=={0}}|non)

		[(#SET{skel, [(#ENV{objet}|table_objet)]})]

	]

	<div class="navigateur">

	<INCLURE{fond=formulaires/selecteur/hierarchie-#GET{skel}, env}>

	</div>

</div>

]

prive/formulaires/selecteur/generique_fonctions.php

+3 −3
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -38,7 +38,7 @@ function selecteur_lister_objets($whitelist=array(), $blacklist=array()){ 
	// Ensuite on cherche ce qu'on doit afficher : au moins ceux qu'on peut sélectionner

	$objets_afficher = $objets_selectionner;

	

	// Il faut alors chercher d'éventuels parents obligatoires :

	// Il faut alors chercher d'éventuels parents obligatoires en plus :

	// lister-trucs-bidules.html => on doit afficher des "trucs" pour trouver des "bidules"

	if (!$liste_parents){

		$liste_parents = find_all_in_path('formulaires/selecteur/', 'lister-[\w]+-[\w]+[.]html$');
@@ -47,8 +47,8 @@ function selecteur_lister_objets($whitelist=array(), $blacklist=array()){ 
		preg_match('/^lister-([\w]+)-([\w]+)[.]html$/', $fichier, $captures);

		$parent = $captures[1];

		$type = $captures[2];

		// Si le type fait partie de ce qu'on veut sélectionner alors on ajoute le parent à l'affichage

		if (in_array($type, $objets_selectionner)){

		// Si le type fait partie de ce qu'on doit afficher alors on ajoute aussi le parent à l'affichage

		if (in_array($type, $objets_afficher)){

			$objets_afficher[] = $parent;

		}

	}

prive/formulaires/selecteur/hierarchie-articles.html

+4 −22
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff 
<BOUCLE_art(ARTICLES){tout}{id_article=#ENV{id_objet}}{statut?}>

	<div class="chemin">

		<a href="[(#SELF|parametre_url{objet,racine}|parametre_url{id_objet,0})]" class="ajax"><:info_racine_site:></a>

		<BOUCLE_chemin(HIERARCHIE){id_rubrique}> &gt; <a href="[(#SELF|parametre_url{id_objet,#ID_RUBRIQUE})]" class="ajax">#TITRE</a></BOUCLE_chemin> &gt; <strong class="on">#TITRE</strong>

		<a href="[(#SELF|parametre_url{objet,racine}|parametre_url{id_objet,0})]" class="ajax nohistory"><:info_racine_site:></a><BOUCLE_chemin(HIERARCHIE){id_rubrique}><span class="sep divider">

		&gt; </span><a href="[(#SELF|parametre_url{id_objet,#ID_RUBRIQUE})]" class="ajax nohistory">#TITRE</a></BOUCLE_chemin><span class="sep divider">

		&gt; </span><h2>#TITRE</h2>

	</div>

	<B_contenu>

	[(#REM) afficher la racine si la profondeur le permet]

	<BOUCLE_test_racine(CONDITION){si (#_contenu:GRAND_TOTAL|<{#_contenu:TOTAL_BOUCLE}|oui)}>

	<div class="frame[ total_(#_contenu:GRAND_TOTAL|max{#_contenu:TOTAL_BOUCLE|moins{1}})] frame_0">

		<h2>

			[(#ENV{racine}|oui)

			<a href="#" onclick="jQuery(this).item_pick('racine|0','#ENV{name,id_item}','<:info_racine_site:>','racine');return false;">

			<img class="add" src="#CHEMIN_IMAGE{ajouter-16.png}" alt="ajouter" width="16" height="16" />

			</a>

			]

			<:info_racine_site:>

		</h2>

		#INCLURE{fond=formulaires/selecteur/lister, quoi=racine, env}

	</div>

	</BOUCLE_test_racine>

	<BOUCLE_contenu(HIERARCHIE){id_rubrique}{tout}{n-4,4}>

	<div class="frame[ total_(#GRAND_TOTAL|min{#TOTAL_BOUCLE|moins{1}})][ frame_(#COMPTEUR_BOUCLE|moins{#GRAND_TOTAL|plus{1}|max{#TOTAL_BOUCLE}}|plus{#TOTAL_BOUCLE})]">

		<a href="[(#SELF|parametre_url{id_objet,#ID_PARENT|?{#ID_PARENT,0}})]" class="frame_close ajax"><img src="#CHEMIN_IMAGE{fermer-16}" alt="fermer" width="16" height="16" /></a>

		<h2><a class="ajax" href="[(#SELF|parametre_url{id_objet,#ID_RUBRIQUE})]">#TITRE</a></h2>

	<div class="liste">

		#INCLURE{fond=formulaires/selecteur/lister, quoi=rubriques, id_rubrique, env}

	</div>

	</BOUCLE_contenu>

</BOUCLE_art>

prive/formulaires/selecteur/hierarchie-racine.html

+6 −8
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff 
<div class="chemin">

	<strong class="on"><:info_racine_site:></strong>

</div>

<div class="frame total_0 frame_0">

	<h2>

		<:info_racine_site:>

		[(#ENV{racine}|oui)

		<a href="#" onclick="jQuery(this).item_pick('racine|0','#ENV{name,id_item}','<:info_racine_site:>','racine');return false;">

		<img class="add" src="#CHEMIN_IMAGE{ajouter-16.png}" alt="ajouter" width="16" height="16" />

		<a title="<:bouton_choisir:> : <:info_racine_site:>" href="#" onclick="jQuery(this).item_pick('racine|0','#ENV{name,id_item}','<:info_racine_site:>','racine');return false;">

			<img class="choisir" src="#CHEMIN_IMAGE{ajouter-16.png}" alt="<:bouton_choisir:>" width="16" height="16" />

		</a>

		]

		<:info_racine_site:>

	</h2>

		]</h2>

</div>

<div class="liste">

	#INCLURE{fond=formulaires/selecteur/lister, quoi=racine, env}

</div>

prive/formulaires/selecteur/hierarchie-rubriques.html

+5 −22
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff 
<BOUCLE_rub(RUBRIQUES){tout}{id_rubrique=#ENV{id_objet}}{statut?}>

	<div class="chemin">

		<a href="[(#SELF|parametre_url{objet,racine}|parametre_url{id_objet,0})]" class="ajax"><:info_racine_site:></a>

		<BOUCLE_chemin(HIERARCHIE){id_rubrique}> &gt; <a href="[(#SELF|parametre_url{id_objet,#ID_RUBRIQUE})]" class="ajax">#TITRE</a></BOUCLE_chemin> &gt; <strong class="on">#TITRE</strong>

		<a href="[(#SELF|parametre_url{objet,racine}|parametre_url{id_objet,0})]" class="ajax nohistory"><:info_racine_site:></a><BOUCLE_chemin(HIERARCHIE){id_rubrique}><span class="sep divider">

		&gt; </span><a href="[(#SELF|parametre_url{id_objet,#ID_RUBRIQUE})]" class="ajax nohistory">#TITRE</a></BOUCLE_chemin><span class="sep divider">

		&gt; </span>

		<h2>#TITRE</h2>

	</div>

	<B_contenu>

	[(#REM) afficher la racine si la profondeur le permet]

	<BOUCLE_test_racine(CONDITION){si (#_contenu:GRAND_TOTAL|<{#_contenu:TOTAL_BOUCLE}|oui)}>

	<div class="frame[ total_(#_contenu:GRAND_TOTAL|max{#_contenu:TOTAL_BOUCLE|moins{1}})] frame_0">

		<h2>

			[(#ENV{racine}|oui)

			<a href="#" onclick="jQuery(this).item_pick('racine|0','#ENV{name,id_item}','<:info_racine_site:>','racine');return false;">

			<img class="add" src="#CHEMIN_IMAGE{ajouter-16.png}" alt="ajouter" width="16" height="16" />

			</a>

			]

			<:info_racine_site:>

		</h2>

		#INCLURE{fond=formulaires/selecteur/lister, quoi=racine, env}

	</div>

	</BOUCLE_test_racine>

	<BOUCLE_contenu(HIERARCHIE){id_rubrique}{tout}{n-4,4}>

	<div class="frame[ total_(#GRAND_TOTAL|min{#TOTAL_BOUCLE|moins{1}})][ frame_(#COMPTEUR_BOUCLE|moins{#GRAND_TOTAL|plus{1}|max{#TOTAL_BOUCLE}}|plus{#TOTAL_BOUCLE})]">

		<a href="[(#SELF|parametre_url{id_objet,#ID_PARENT|?{#ID_PARENT,0}})]" class="frame_close ajax"><img src="#CHEMIN_IMAGE{fermer-16}" alt="fermer" width="16" height="16" /></a>

		<h2><a class="ajax" href="[(#SELF|parametre_url{id_objet,#ID_RUBRIQUE})]">#TITRE</a></h2>

	<div class="liste">

		#INCLURE{fond=formulaires/selecteur/lister, quoi=rubriques, id_rubrique, env}

	</div>

	</BOUCLE_contenu>

</BOUCLE_rub>

Forge communautaire SPIP | Charte d'utilisation | Signaler un problème sur ce site