[spip-dev] [appel] de beaux onglets pour SPIP (et SVP)

Bonjour,
je viens de tester SVP avec SPIP3 et j’ai trouvé (mais je ne suis pas le seul) que le look des onglets était perfectible (voir pièce jointe).

Si vous voulez donner un coup de main, n’hésitez pas.

Comment tester :
installer une version très récente de SPIP3 ( http://files.spip.org/spip/dev/SPIP-svn.zip celle ci est construite toutes les nuits)
Y ajouter le plugin SVP dans le répertoire plugins http://files.spip.org/spip-zone/#svp

et rendez vous ensuite sur http:/adressedevotresiteenlocal/ecrire/?exec=admin_plugin vous devriez voir les onglets
Tous / Actifs / Inactifs / Tous / Verrouillés / Non verrouillés

le code html correspondant :

et le fichier css est là : spip-3.0/prive/themes/spip/icons.css.html

A toute fin utile :
ces onglets sont utilisés dans la mediatheque (?exec=documents)
et pour la dé-spamisation des forums (?exec = controler_forum).

Leur amélioration sera donc multiplement utile !

JLuc

Ce ne sont pas des onglets mais des filtres...

Cédric

Une petite proposition.

onglets-spip.png

Hello,

merci à toi, ta proposition est intéressante et jolie... pour des vrais onglets. :slight_smile:

En fait ce qui est trompeur pour cette page (et dans la médiathèque) c'est qu'il ne faut *surtout pas* confondre onglet et filtre, et faudrait vraiment différencier ça à la fois dans le code PHP/squelette et dans les styles.

Un onglet, c'est un changement de page, on est censé voir afficher autre chose, comme un onglet dans une chemise.

Un filtre, c'est l'affichage de la même page mais avec différents paramètres.

Ce sont vraiment deux choses totalement différentes et pour l'instant c'est très confus dans SPIP 3.

Pas de problème, j'essaierai de faire une autre proposition en gardant cette idée de filtre en tête.

SUPER,

MERCI pour la proposition tcharlss.

Rastapopoulos : Ah ok maintenant je comprends ( la deuxième fois on comprends mieux) pourquoi on m avait repris quand j'ai écris onglet.

Idée lancée en l air :
- tous (35) -tous(50)
--- actifs (5) --- verrouillés (6)
--- inactif (30) --- non verrouillés (44)

Mais ça prendrait 3 lignes .

D autres idées sur cette représentation complexe ?

Ben.

bonjour,

Une petite proposition.

Hello,

merci à toi, ta proposition est intéressante et jolie... pour des vrais onglets. :slight_smile:

En fait ce qui est trompeur pour cette page (et dans la médiathèque) c'est qu'il ne faut *surtout pas* confondre onglet et filtre, et faudrait vraiment différencier ça à la fois dans le code PHP/squelette et dans les styles.

Un onglet, c'est un changement de page, on est censé voir afficher autre chose, comme un onglet dans une chemise.

Un filtre, c'est l'affichage de la même page mais avec différents paramètres.

dans ce cas, ce sont plus un rangement à la verticale et peut-être même des cases à cocher, non ? ou des blocs de cases

Claude

Il y en a sur quelles pages des "vrais" onglets dans SPIP3 ?
Parceque la proposition pourrait habiller ces vrais onglets là alors.

Pas de problème, j'essaierai de faire une autre proposition en gardant cette idée de filtre en tête.

Des sliders jquery ui à 3 positions ?

Sinon il y a une autre ergonomie possible, avec 2 boutons seulement,
"plugins actifs" et "plugins inactifs" par exemple,
qui fonctionneraient comme des cases à cocher :
- "actifs" enfoncé + "inactifs" enfoncé : tous
- "actifs" enfoncé + "inactifs" pas enfoncé : les actifs
- "actifs" pas enfoncé + "inactifs" enfoncé : les inactifs
- ni l'un ni l'autre enfoncés : pas possible (ça enfonce l'autre bouton).

(plus simple à utiliser qu'à décrire !)

JLuc

Hello,

Idée lancée en l air :
- tous (35) -tous(50)
--- actifs (5) --- verrouillés (6)
--- inactif (30) --- non verrouillés (44)

Mais ça prendrait 3 lignes .

D autres idées sur cette représentation complexe ?

Une liste verticale en colonne gauche avec des cases à cocher et le nombre de plugin concerné entre parenthèses (comme sur les sites d'ecommerce) ?

Mais peut-être la colonne gauche n'est pas dédiée à ça...

Sylvain

Bonjour,

Je m’immisce dans le fil sans avoir trop suivi les discussions précédentes...

Si c'est un filtre, pourquoi mettre 3 zones (div ?) distinctes, et non pas des boites de liste déroulantes de type SELECT ?

Merci

oui et oui et oui (ho ! comme je suis d'accord)

graphiquement les filtres pourraient être représentés par de
simples boites à cocher. voir ici :
   http://www.circaete.net/vrac2/onglets_filtres.png

[je sais pas pourquoi l'original de ce post envoyé cette nuit
à 00:17 est pas passésur la liste d'où ce rappel...]

Humm,

Moi ce qui me gêne déjà plus visuellement c'est le onglets de premier
niveau rectangulaires. J'avais proposé dans l'admin des plugins que ces
onglets deviennent une barre d'onglets comme on voit dans l'image de
denisb : images,....

Ben ça me parait clair que ce qu'on considérera comme *vraiment* des onglets (changement de page) doit avoir l'aspect visuel d'un onglet.

Pour les filtres, toujours dans l'admin des plugin la proposition était
d'avoir des liens simples.

Pourquoi pas. En tout cas dans un premier temps, car c'est très "frustre", et ergonomiquement ya quand même des impératifs (avoir deux états actif/inactif, etc).

jQuery a prévu des types de boutons radios comme ça :

un peu comme dans pas mal d'appli Apple.

Pour revenir à la représentation proposé par denisb, je ne vois pas de
différence entre images, bandes son, vidéos... et publiés, non
publiés... Ce sont tous des filtres (vu de l'utilisateur) et là on en a
deux représentations. Je reste dubitatif de lier la représentation
graphique à des principes de codage ajax ou autre.

Pour la médiathèque, je suis d'accord : TOUS les liens correspondent à des filtres à priori, aucun onglet.

Pour SVP, la première barre correspond vraiment à des onglets.

En fait, il y a plusieurs tâches :

1) Séparer dans le code PHP/squelettes ce qui produit des onglets, et ce qui produit juste des liens de filtrage : on ne doit PAS utiliser les mêmes fonctions (en tout cas de haut niveau) pour générer ces éléments.

2) Réfléchir à chaque fois, pour chaque liste de liens, si ce sont des onglets, ou des filtres. Si les deux termes sont définis explicitement, ce n'est pas difficile : un onglet = changement de page.

3) Styler différemment les deux fonctionnalités : vraie forme d'onglet pour les onglets, et liens classiques ou boutons radios améliorés, etc, pour les filtres.

Yop,

Pour la médiathèque, je suis d’accord : TOUS les liens correspondent à des filtres à priori, aucun onglet.

Pour SVP, la première barre correspond vraiment à des onglets.

Exactement.

En fait, il y a plusieurs tâches :

  1. Séparer dans le code PHP/squelettes ce qui produit des onglets, et ce qui produit juste des liens de filtrage : on ne doit PAS utiliser les mêmes fonctions (en tout cas de haut niveau) pour générer ces éléments.

Oui.

  1. Réfléchir à chaque fois, pour chaque liste de liens, si ce sont des onglets, ou des filtres. Si les deux termes sont définis explicitement, ce n’est pas difficile : un onglet = changement de page.

Oui, mais que c’est quoi une page pour l’utilisateur ? Une fonctionnalité ?

  1. Styler différemment les deux fonctionnalités : vraie forme d’onglet pour les onglets, et liens classiques ou boutons radios améliorés, etc, pour les filtres.

Oui et l’appliquer partout. Le souci actuel c’est que certaines pages sont incohérentes entre elles au delà du simple design.

(3ème tentative pour poster ce message. Quand il y a autre chose que des images en pièce-jointe, les messages sont modérés ?)

Bon, j'ai revu ma copie.
Je trouve la capture d'écran proposée par denisb plus lisible, cependant quand je vois des cases à cocher, j'ai tendance à chercher un bouton "envoyer" ou "ok" pour valider ces choix... Ca va pour les formulaires, là, je sais pas trop...

Bref, cette fois-ci je me suis inspiré des boutons dans les réglages de gnome 3 (les petits machins glissables), qui ont grosso-modo la même fonction : ils peuvent activés ou désactivés.
Notes : je ne me suis pas trop attardé sur la distinction entre onglets principaux/secondaires faute de temps. Il y a quelques effets css3 un peu bling-bling (dégradé, ombre portée...).

J'ai la feuille de style modifiée si ça en intéresse, je peux poster ça ou ?

onglets-spip.png

(3ème tentative pour poster ce message. Quand il y a autre chose que des images en pièce-jointe, les messages sont

Bref, cette fois-ci je me suis inspiré des boutons dans les réglages de gnome 3 (les petits machins glissables), qui ont
grosso-modo la même fonction : ils peuvent activés ou désactivés.
Notes : je ne me suis pas trop attardé sur la distinction entre onglets principaux/secondaires faute de temps. Il y a
quelques effets css3 un peu bling-bling (dégradé, ombre portée...).

C'est l'ancienne version que tu as posté à nouveau.

J'ai la feuille de style modifiée si ça en intéresse, je peux poster ça ou ?

Euh, sur http://spip.pastebin.fr ?
ou sur une page du wikiarnet de http://spip-contrib.net

JLuc

Ah désolé,au bout de la 5ème tentative pour poster le même message je me suis embrouillé... Bon, peut-être que poster des images pose problème sur cette liste. Bref, l'image est là :
http://www.pasteall.org/pic/24245
et le bout de css ici (à essayer en surchargeant le style original) : http://spip.pastebin.fr/21856
Je répète, c'est juste un brouillon pour se faire une idée, hein.

ah, c'est sympa sur l'image !

J'ai juste un peu de mal à comprendre le | à gauche des actifs. Un rond plein peut être à mettre ? enfin... j'dis ça :stuck_out_tongue:

C'est déjà super beau.

Ah, mais il faut dire ! Avec un rond plein à la place du |, ce serait peut-être plus clair, c'est vrai.
Je bien un autre essai avec ça et en distinguant plus les filtres principaux / secondaires