Produits Entr'ouvert » Intégrations graphiques Publik

position: absolute;
top: $cell-image-padding / 2;

Je n'ai pas testé mais le positionnement absolute est très limité. il fonctionne dans ton exemple où ton icon est sur fond transparent et ton titre sur 1 seule ligne

• Si le titre de la cellule passe sur 2 lignes peux-tu positionner l'image centré verticalement par rapport au titre ?
• Si l'icon est sur fond de couleur, sa hauteur peut-elle s'adapter automatiquement à la hauteur du titre (s'il est sur 1 ou 2 lignes) ‑ equivalent de stretch en flexbox ?
• Je n'ai pas compris la valeur du positionnement top ?

padding-left: $cell-image-width + 5px;

5px ? pourquoi ?

Il faudrait voir le comportement de cette option avec une image (pas un svg sur fond transparent) et un titre sur fond de couleur.

Thomas Jund a écrit :

[...]

Je n'ai pas testé mais le positionnement absolute est très limité. il fonctionne dans ton exemple où ton icon est sur fond transparent et ton titre sur 1 seule ligne

cell-image-padding assure que l'image reste à l'intérieur du titre.

• Si le titre de la cellule passe sur 2 lignes peux-tu positionner l'image centré verticalement par rapport au titre ?

Actuellement non, car position: absolute.

• Si l'icon est sur fond de couleur, sa hauteur peut-elle s'adapter automatiquement à la hauteur du titre (s'il est sur 1 ou 2 lignes) ‑ equivalent de stretch en flexbox ?

Tu veux dire déformer l'image? L'agrandir proportionnellement fera augmenter la largeur on peut se trouver sur une page avec certains titres alignés et d'autres non.

• Je n'ai pas compris la valeur du positionnement top ?

C'est une tentative d'aligner l'image verticalement au niveau du titre. Le top + le padding de l'image font qu'elle s'aligne "presque" au même niveau que le h2.

5px ? pourquoi ?

Car il faut avoir plus d'espace entre l'image et le titre, pas uniquement le padding de l'image. Mais le padding pourrait suffire.

Il faudrait voir le comportement de cette option avec une image (pas un svg sur fond transparent) et un titre sur fond de couleur.

Je fais des tests en local avec différentes variantes.

Actuellement non, car position: absolute.

C'est pourquoi je suis septique sur l'utilisation de ce type de positionnement pour le core. Sur un thème, parce que l'on arrive à juger des cas d'utilisation et du type des images, pourquoi pas. Mais pas pour le core.

C'est une tentative d'aligner l'image verticalement au niveau du titre. Le top + le padding de l'image font qu'elle s'aligne "presque" au même niveau que le h2.

Trop imprecis, aléatoire, ça dépend du $font-size, line-height, padding du titre. Fixer une valeur dans le core est contre-productif à mon avis.

Car il faut avoir plus d'espace entre l'image et le titre, pas uniquement le padding de l'image. Mais le padding pourrait suffire.

Je questionnais par rapport au chiffre 5, Pourquoi pas 7 ou 3 ? Trop irrationnel pour le core.

Personnellement, je partirais sur un vrai system de layout (flexbox pour ne pas le nommer, le seul qu'on peut utiliser pour le moment). Un system qui offre de la souplesse pour des adaptations et divers besoins, et surtout ne pas proposer une option figée non ou peu adaptable.

Pour moi la solution la plus propre est d'ajouter une balise HTML 'cell header' qui possède la balise titre ET l'image.
Avec ce markup on a vraiment de la souplesse dans les layouts entre le titre et l'image puisqu'on a une boite englobante de référence.

Si pas possible de modifier le markup, les tests que j'ai fait avec flexbox en mode multi-lignes offrent déjà bien plus plus de souplesse que le positionnement absolute.

En tout cas je sais pas qui il faut féliciter mais je trouve l'intégration très réussie (la capture quoi au moins).

Autre note pour alimenter ce débat:
Il n'y pour le moment aucun moyen de savoir côté CSS si une cellule possède une image ou pas. Aucune class n'est ajouté à la cellule.

Cela signifie déjà que lorsque l'option `$cell-image-position: top` est appliqué, les styles modificateurs sont appliqués dans tout les cas, même si la cellule n'a pas d'image. Sans grande conséquence pour le moment, mais conséquences possible avec cette nouvelle option.

Et pouvoir conditionner le design en fonction de la présence ou non d'une image serait un plus.

hop https://dev.entrouvert.org/issues/41994.

Pour moi la solution la plus propre est d'ajouter une balise HTML 'cell header' qui possède la balise titre ET l'image.

Par rapport à cette idée, je viens de me rendre compte qu'avec une image en mode défaut (donc sous le titre), si une cellule a l'option 'foldable', l'image est masquée lorsque le contenu de la cellule est masquée.

Je ne comprends pas trop le pourquoi de ce fonctionnement, l'utilisation d'une image a pour objectif de facilité l'identification des catégories ou du moins d'illustrer le titre, si elle est masquée qu'elle est son intérêt ?

Néanmoins, s'il est important de conserver ce fonctionnement, l'idée d'ajouter une balise `cell_header` pour encadrer l'image et le titre devient caduque.

Thomas Jund a écrit :

Je ne comprends pas trop le pourquoi de ce fonctionnement, l'utilisation d'une image a pour objectif de facilité l'identification des catégories ou du moins d'illustrer le titre, si elle est masquée qu'elle est son intérêt ?

IMO, tu as raison. On devrait afficher l'image systèmatiquement.