Project

General

Profile

Evolution #4753

Styles du privé : listes d'objets (suite des boîtes et des formulaires)

Added by tcharlss 🐽 about 2 months ago. Updated about 1 month ago.

Status:
Fermé
Priority:
Normal
Assignee:
-
Category:
-
Target version:
Start date:
04/30/2021
Due date:
% Done:

0%

Resolution:

Description

Les boîtes et les formulaires ont été visuellement « raccordés » ensembles.
Je pense que logiquement les listes d'objets devraient suivre.
En fait ce sont 3 variations d'un même composant : une boîte avec entête, corps et pied.

Pour les listes on peut séparer la question en 2 aspects :

1) L'emballage extérieur

Là il s'agirait de reprendre les choix graphiques propres à « l'emballage extérieur » des boîtes et formulaires : bordure, arrondi, espacements.
Exemple sur l'image suivant où les 3 sont visibles (nb : ceux en colonne sont automatiquement « ressérés », d'où la différence de padding etc.)

Après en fonction de l'un ou de l'autre, il y aura peut-être lieu d'ajuster le padding ou la taille du titre. Mais pour l'instant ce sont ceux en place.

2) L'intérieur

Ensuite je propose de procéder à quelques ajustements à l'intérieur de ces listes.
Je pense que certains choix ont été faits pour s'accommoder du manque de place en largeur à l'époque, et ne sont plus nécessaires maintenant.

Pour me faire un idée de ce qui fonctionnerait le mieux, et comprendre les détails visuels qui me gênaient un peu, j'ai parcouru quelques articles de recommandations sur l'ergonomie des data tables.
Alors ils traitent plutot des fonctionnalités de ces tables dans leur ensemble, mais il y a aussi quelques guidelines visuelles intéressantes.

Je retiens quelques règles simples :

  • Des espacements suffisants et consistants (le padding quoi)
  • Une taille de police identique partout (au moins dans le tbody). C'est fatiguant pour l'oeil et moins lisible quand on passe sans arrêt d'un taille de police à l'autre sur une même ligne. Et je ne suis pas sûr qu'il y ait forcément besoin de gras pour certains éléments comme les titres ou autres.
  • À quelques exceptions près (id, picto), pas de largeur fixes sur les colonnes, laisser faire le navigateur.

Donc voilà, c'est pas grand chose à ajuster non plus.
Les colonnes des tables ont des classes .importante et .secondaire.
À mon avis elle ne devraient plus avoir d'incidence en vue « normale », mais juste décider quelles colonnes afficher et masquer en vue réduite, dans les colonnes ou ailleurs.

Donc dans les grandes lignes ça donnerait quelques chose comme ça (juste une maquette) :

3) Détails

Enfin pour ces 3 composants, je propose qu'il y ait une classe modificatrice commune pour produire un affichage compact, c'est à dire ressérer tout le contenu.
Cette classe serait automatiquement appliquée dans les colonnes.

Ça pourrait être « compact », mais sur d'autres composants pour varier les tailles je suis parti sur mini / large. Donc mini aussi ?

listes_objets_mock_contenant.png View (34.1 KB) tcharlss 🐽, 04/30/2021 09:33 AM

listes_objets_mock_2.png View (126 KB) tcharlss 🐽, 04/30/2021 09:33 AM

list_box_form.png View - Boîtes, formulaires et listes (60 KB) tcharlss 🐽, 05/04/2021 10:21 AM

lists_1.png View - Listes de la dist (236 KB) tcharlss 🐽, 05/04/2021 10:27 AM

editer_liens_closed.png View - editer_liens (34.9 KB) tcharlss 🐽, 05/04/2021 10:43 AM

editer_liens_opened.png View - editer_liens en mode ajout (50.3 KB) tcharlss 🐽, 05/04/2021 10:43 AM

affiche_milieu_1.png View - fiche_objet (122 KB) tcharlss 🐽, 05/04/2021 10:44 AM

affiche_milieu_trad_1.png View - traductions (37.5 KB) tcharlss 🐽, 05/04/2021 10:47 AM

History

#1 Updated by tcharlss 🐽 about 2 months ago

  • Description updated (diff)

#2 Updated by tcharlss 🐽 about 2 months ago

  • Description updated (diff)

#3 Updated by marcimat 🌻 about 2 months ago

C'est propre, ça me va. Ça enlève une couleur de background différent sur le titre des listes, et ça me semble une bonne chose cet allègement.

Y a besoin que les th soient en police plus petite que le reste ?
En tout cas tu as enlevé sa graisse sur les liens des th (titre, auteur, N°) et du coup je trouve ça un peu juste en lecture.

#4 Updated by tcharlss 🐽 about 2 months ago

Y a besoin que les th soient en police plus petite que le reste ?
En tout cas tu as enlevé sa graisse sur les liens des th (titre, auteur, N°) et du coup je trouve ça un peu juste en lecture.

Je me suis basé plus particulièrement sur les exemples de cet article : https://uxdesign.cc/data-table-for-enterprise-ux-cb48fb9fdf1e
Le th plus petit est pas obligé, là j'ai copié sur leurs exemples.
La graisse n'est laissée que sur l'élément actif qui définit le tri. Mais peut-être qu'il faudrait rendre ça plus visible / explicite en ajoutant un picto devant ? cf. : https://miro.medium.com/max/2400/1*ZozmBBJMnIKsXXz9rqsOuQ.png
Sauf que ça dépendrait du sens du tri, je sais plus si on a cette information sous forme de classe (.tri-asc / .tri-desc ou un truc comme ça).
Enfin bon, rien d'arrêté sur ces th encore.

#5 Updated by b b about 2 months ago

Classe & sobre, gogogo !

Les colonnes des tables ont des classes .importante et .secondaire.
À mon avis elle ne devraient plus avoir d'incidence en vue « normale », mais juste décider quelles colonnes afficher et masquer en vue réduite, dans les colonnes ou ailleurs.

Très bonne idée, et +1 pour la classe mini.

#6 Updated by cedric - about 2 months ago

  • Target version set to 4.0

#7 Updated by tcharlss 🐽 about 2 months ago

Un point étape.
Cette fois-ci j'aimerais bien un historique pas trop cassé, donc discussion avant de balancer du code.
Maintenant les captures ne sont plus des maquettes, mais du vrai code.

Emballage extérieur

Donc pour la partie « emballage extérieur », les boîtes, formulaires et listes sont unifiés et réutilisent les mêmes variables CSS.
Elles ont toutes une variante .mini pour tout ressérer. Cette variante est automatiquement appliquée en certains endroits (dans les colonnes, etc.).

Intérieur

Pour l'intérieur, j'ai donc appliqué ces quelques règles :

  • Padding un peu plus grand
  • Plus de largeur fixe, à l'exception de quelques colonnes précises (id, statut, picto)
  • Même taille de texte dans toutes les colonnes, à l'exception des <small> éventuels

Dans les colonnes latérales (.lat), toutes les colonnes du tableau sont masquées à l'exception des .principale et de quelques autres choisies à la main (id, statut).

J'ai testé avec toutes les listes de la dist, il faudra bien continuer à tester avec d'autres cas de figure.

Listes, formulaires et +

Le sujet des listes objets-lies et objets-associer m'a amené à déborder un peu du sujet initial. Mais tout est un peu lié, un sujet en amène un autre.

Donc ces 2 listes sont utilisées dans le formulaire editer_liens, j'en ai profité pour essayer de le remettre d'aplomb.
Là j'ai vu qu'avec l'apparence par défaut (bordure grise + fond blanc), quand plusieurs formulaires de liens se suivaient, on avait du mal à voir où finissait l'un et où commençait l'autre (pas de capture, croyez moi sur parole :).
En mettant un fond gris, on les distingue beaucoup mieux.
Et j'ai bien insisté quand ils sont "dépliés", pour distinguer les 2 zones.

Mais ça a également un autre avantage : en scannant la fiche objet dans son ensemble, on voit mieux où commence le « vrai » contenu de l'objet, par rapport aux bidules de configuration (date, liens, etc.).
D'abord les formulaires et autres sur fond gris, puis ensuite le texte de l'objet.

Donc je pense qu'on pourrait généraliser ça : au lieu de dire « les formulaires editer_liens sont sur fond gris », on pourrait étendre à « tous les formulaires ajoutés par afficher_milieu sont sur fond gris ». Ça reste une règle graphique assez légère, normalement ça ne devrait pas poser de problème avec les formulaires à cet endroit.
Le problème c'est qu'actuellement il n'y a aucun moyen de cibler en CSS ce qui est ajouté par affiche_milieu, il faut encapsuler tout ça dans un div.afficher_milieu (ce que j'ai fait pour tester le principe).

Et donc, la fiche objet dans son ensemble pour illustrer :

Ah, et un test pour le formulaire de traductions :

#8 Updated by marcimat 🌻 about 2 months ago

Bah écoute… ça parait hyper très méga bien ta proposition.

Faudra quand même vérifier les contraste sur les .affiche_milieu notamment lorsque déplié (enfin c'est pas spécifique à ici).
Les textes des liens me semblent trop clairs au premier abord. Sur fond coloré du cadre "Ajouter un auteur" en plus ça me parait vraiment juste, non ?

Le (+) sur "ajouter cet auteur" me parait disgracieux quand même (mais c'est déjà comme ça avant, je crois pas que tu aies touché à ça).
Au moins manquant de marge à gauche ou avec la même apparence que la fermeture (+ coloré, sans fond) … mais c'est certainement un autre sujet sur les icones je sais plus quoi :)

#9 Updated by b b about 2 months ago

C'est vraiment top, et +10 pour le fond gris des éléments ajoutés par affiche_milieu, l'avant dernière capture en montre vraiment l'intérêt !

#10 Updated by RastaPopoulos ♥ about 2 months ago

+1 aussi et ça fait encore des bordures en moins supprimées ! vive les aplats

#11 Updated by tcharlss 🐽 about 2 months ago

Ok merci pour les retours, je vais donc tenter cette piste pour affiche milieu.

Pour les contrastes oui il faudra vérifier.
Déjà j'ai un peu foncé tous les liens dans l'ensemble, il étaient signalés comme pas assez contrastés par l'outil de firefox (donc maintenant c'est --spip-color-theme-dark).
Et pour les boutons le truc c'est qu'ils sont en opacity: 0.6 et passent en 1.0 au survol.
À revoir peut-être.

Le (+) sur "ajouter cet auteur" me parait disgracieux quand même

Pareil, je crois bien que j'en avais enlevé, mais ils sont revenus par la petite porte.

#12 Updated by tcharlss 🐽 about 1 month ago

  • Status changed from Nouveau to Résolu

Intégré, je ferme.

Pour le suivi des régressions, voir ici : https://core.spip.net/issues/4756

#13 Updated by tcharlss 🐽 about 1 month ago

  • Status changed from Résolu to Fermé

Also available in: Atom PDF