Onglet sur les config de saisies #69

Open
opened 2 months ago by maieul · 15 comments
maieul commented 2 months ago
Collaborator

Pour une saisie qui a besoin de beaucoup d'onglet, comme par exemple la saisie evenement du plugin agenda, le passage au nouveau système d'onglet ne permet plus d'accéder aux derniers onglets, qui débordent.

ping @tcharlss

Pour une saisie qui a besoin de **beaucoup** d'onglet, comme par exemple la saisie evenement du plugin agenda, le passage au nouveau système d'onglet ne permet plus d'accéder aux derniers onglets, qui débordent. ping @tcharlss
Poster
Collaborator

edit : qui a besoin de beaucoup d'onglet

edit : qui a besoin de **beaucoup** d'onglet

Donc soit il faut que ça passe à la ligne quand il y a trop d'onglets par rapport à la largeur parente, soit… que ça défile, genre swipe doigt-souris (ya sûrement des libs qui font ça mais ça augmente le js, quoique arno a peut-être fait ça avec presque que css, ça me dit qqc)

Donc soit il faut que ça passe à la ligne quand il y a trop d'onglets par rapport à la largeur parente, soit… que ça défile, genre swipe doigt-souris (ya sûrement des libs qui font ça mais ça augmente le js, quoique arno a peut-être fait ça avec presque que css, ça me dit qqc)
Pure CSS : https://jsfiddle.net/MadLittleMods/rxhwezhy/
Poster
Collaborator

avant on avait un retour ligne. Je trouve ca plutot clair, car permet de voir rapidement tout ce qu'il y a à regler. Le swipe me parait moins pratique.

avant on avait un retour ligne. Je trouve ca plutot clair, car permet de voir rapidement tout ce qu'il y a à regler. Le swipe me parait moins pratique.

Aussi https://codepen.io/colinlord/pen/oZNoOO

Sur webkit uniquement ya une propriété pour cacher la barre de défilement (ça la cachera donc pour 90% des gens). Et maj+scroll pour défiler en desktop et sinon en touch ça marche de base sans rien pour faire défiler.

Aussi https://codepen.io/colinlord/pen/oZNoOO Sur webkit uniquement ya une propriété pour cacher la barre de défilement (ça la cachera donc pour 90% des gens). Et maj+scroll pour défiler en desktop et sinon en touch ça marche de base sans rien pour faire défiler.

On voit oui, mais après c'est moins élégant visuellement, des onglets qui sont sur plusieurs lignes ne sont matérialisent plus des onglets justement (si celui actif est sur la première ligne et qu'il y a d'autres onglets dessous avant le vrai contenu, ce n'est plus collé et donc on n'a plus l'impression que ça va ensemble comme dans les intercalaires papier)

On voit oui, mais après c'est moins élégant visuellement, des onglets qui sont sur plusieurs lignes ne sont matérialisent plus des onglets justement (si celui actif est sur la première ligne et qu'il y a d'autres onglets dessous avant le vrai contenu, ce n'est plus collé et donc on n'a plus l'impression que ça va ensemble comme dans les intercalaires papier)
Poster
Collaborator

j'avoue que je préfère le fonctionalisme à l'esthétique :).
Après si on peut comprendre facilement qu'il y a plus de choses, pourquoi pas :-)

j'avoue que je préfère le fonctionalisme à l'esthétique :). Après si on peut comprendre facilement qu'il y a plus de choses, pourquoi pas :-)
Poster
Collaborator

après je me plierai au code de la personne qui codera :)

après je me plierai au code de la personne qui codera :)
Poster
Collaborator

Pure CSS : https://jsfiddle.net/MadLittleMods/rxhwezhy/

pas du tout intuitif. Ma testeuse me dite "j'ai mis du temps à trouver comment faire"

Aussi https://codepen.io/colinlord/pen/oZNoOO

Au moins on comprend comment cela marche

> Pure CSS : https://jsfiddle.net/MadLittleMods/rxhwezhy/ pas du tout intuitif. Ma testeuse me dite "j'ai mis du temps à trouver comment faire" > Aussi https://codepen.io/colinlord/pen/oZNoOO Au moins on comprend comment cela marche

euh c'est pas fait pour être intuitif, c'est juste un bloc-note de code qui montre la fonctionnalité d'avoir une barre qui défile horizontalement tout en marchant avec le scroll de base de la souris. Mais il n'y a strictement aucun style donc je vois pas pourquoi ça serait intuitif… après faut styler, mettre un masque dégradé à droite là où ça dépasse ou avec une flèche ou triangle vers la droite, etc, qui indique une suite à lire, par exemple.

euh c'est pas fait pour être intuitif, c'est juste un bloc-note de code qui montre la fonctionnalité d'avoir une barre qui défile *horizontalement* tout en marchant avec le scroll de base de la souris. Mais il n'y a *strictement aucun style* donc je vois pas pourquoi ça serait intuitif… après faut styler, mettre un masque dégradé à droite là où ça dépasse ou avec une flèche ou triangle vers la droite, etc, qui indique une suite à lire, par exemple.
Owner

Ah oui c'est un oubli.
Amha il faut continuer avec les préceptes de material, puisqu'on est partis dessus pour ces onglets : https://material.io/components/tabs#scrollable-tabs

Dans le cas d'onglets défilables ça dit ceci :

  1. Les onglets doivent rester sur une seule ligne, pas de retour ligne
  2. Le texte à l'intérieur doit aussi rester sur une seule ligne
  3. Il faut décaler le 1er onglet pour montrer qu'on peut scroller
  4. Il faut une indication à la fin pour les mêmes raisons, ils mettent un caret en exemple.
  5. Apparement la barre de défilement n'a pas a être visible, en tout cas pas en dehors du défilement

C'est tout faisable en CSS, sauf certains trucs à faire uniquement si ça dépasse (le 3 et le 4). Donc un peu de JS ?

Ah oui c'est un oubli. Amha il faut continuer avec les préceptes de material, puisqu'on est partis dessus pour ces onglets : https://material.io/components/tabs#scrollable-tabs Dans le cas d'onglets défilables ça dit ceci : 1. Les onglets doivent rester sur une seule ligne, pas de retour ligne 2. Le texte *à l'intérieur* doit aussi rester sur une seule ligne 3. Il faut décaler le 1er onglet pour montrer qu'on peut scroller 4. Il faut une indication à la fin pour les mêmes raisons, ils mettent un caret en exemple. 5. Apparement la barre de défilement n'a pas a être visible, en tout cas pas en dehors du défilement C'est tout faisable en CSS, sauf certains trucs à faire uniquement si ça dépasse (le 3 et le 4). Donc un peu de JS ?
Owner

Nb : tout ça me remet le doute sur la partie des CSS à mettre dans le public. C'est bien aussi quand ça marche "out of the box".

Nb : tout ça me remet le doute sur la partie des CSS à mettre dans le public. C'est bien aussi quand ça marche "out of the box".
Poster
Collaborator

Avec 3 et 4, je suis oki pour cette solution.

Avec 3 et 4, je suis oki pour cette solution.
tcharlss referenced this issue from a commit 2 months ago
Owner

Alors l'exemple du 1er codepen j'y ai cru... Mais c'est pas jouable.
Cette solution ne fonctionne que quand les onglets ont une largeur et une hauteur fixées en dur.
Alors la hauteur pourquoi pas, mais la largeur fixe c'est pas possible.

Du coup j'ai fait le truc alternatif : ça utilise la vraie barre de scroll, mais en ne l'affichant qu'au survol. Et si certains navs ne supportent pas cette propriété CSS, bah la barre est visible, c'est pas la fin du monde.
Pour montrer que du contenu est masqué il y a un masque CSS avec un léger dégradé sur les côtés.
Par contre ça complique pour afficher le symbole >, ça sera à voir plus tard.
Et j'aurais aimé une solution 100% en CSS, mais ça m'a pas l'air possible, pour l'instant c'est détecté en JS et ça ajoute la classe nécessaire au menu.

De toute façon si on allait jusqu'au bout du truc, il y aurait du js supplémentaire nécessaire de toute façon :

  • S'il y a un symbole >, il faut qu'il soit cliquable (en complément de la barre de défilement).
  • Quand l'onglet actif au chargement est masqué, il faudrait défiler automatiquement jusqu'à ce qu'il soit visible.
  • Et sans doute d'autres trucs.

Donc bon, ça devra faire le taff dans l'immédiat.

Alors l'exemple du 1er codepen j'y ai cru... Mais c'est pas jouable. Cette solution ne fonctionne que quand les onglets ont une largeur et une hauteur fixées en dur. Alors la hauteur pourquoi pas, mais la largeur fixe c'est pas possible. Du coup j'ai fait le truc alternatif : ça utilise la vraie barre de scroll, mais en ne l'affichant qu'au survol. Et si certains navs ne supportent pas cette propriété CSS, bah la barre est visible, c'est pas la fin du monde. Pour montrer que du contenu est masqué il y a un masque CSS avec un léger dégradé sur les côtés. Par contre ça complique pour afficher le symbole `>`, ça sera à voir plus tard. Et j'aurais aimé une solution 100% en CSS, mais ça m'a pas l'air possible, pour l'instant c'est détecté en JS et ça ajoute la classe nécessaire au menu. De toute façon si on allait jusqu'au bout du truc, il y aurait du js supplémentaire nécessaire de toute façon : * S'il y a un symbole `>`, il faut qu'il soit cliquable (en complément de la barre de défilement). * Quand l'onglet actif au chargement est masqué, il faudrait défiler automatiquement jusqu'à ce qu'il soit visible. * Et sans doute d'autres trucs. Donc bon, ça devra faire le taff dans l'immédiat.
Poster
Collaborator

Pour montrer que du contenu est masqué il y a un masque CSS avec un léger dégradé sur les côtés.

c'est pas mal du tout, mais je me demande si on ne devrait pas l'étaler un peu plus

En ttout cas oui cela fait le taff dans l'immédiat :-)

> Pour montrer que du contenu est masqué il y a un masque CSS avec un léger dégradé sur les côtés. c'est pas mal du tout, mais je me demande si on ne devrait pas l'étaler un peu plus En ttout cas oui cela fait le taff dans l'immédiat :-)
Sign in to join this conversation.
No Milestone
No Assignees
3 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.