Détails sur les changements de style de sujet - Commentaires

Ceci est un sujet de commentaires pour l’expérience de modification du style des détails.

Un exemple de la balise details utilisant BBCode :

abc

test 123 123
123

Un exemple de la balise details utilisant HTML :

··· Voici un contenu tronqué... Voici un contenu tronqué... Voici un contenu tronqué... Voici un contenu tronqué... Voici un contenu tronqué... Voici un contenu tronqué... Voici un contenu tronqué...
11 « J'aime »

L’utilisation de la balise HTML <details> semble faire fusionner le contenu avec le résumé :

This is an open details Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.
This is a HTML details Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.

Ah, je vois. Il n’y a pas de nouvelle ligne automatique et je n’en ai pas ajouté manuellement :

<details open>
<summary>
This is an open details
</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.
</details>
Summary

This text will be hidden

5 « J'aime »

Oui, vous avez raison. Il semble que lorsque vous l’avez ajouté vous-même, vous n’avez pas inclus de balises p, alors que lorsque vous l’ajoutez avec l’outil d’insertion de détails, il le fera.

Le vôtre :

<details dir="ltr" open="">
<summary>
This is a HTML details
</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.
</details>

Outils d’insertion :

<details dir="ltr" open="">
<summary>Summary</summary>
<p>This text will be hidden</p>
</details>

La balise p ajoutée par l’outil d’insertion maintient le texte sur une nouvelle ligne.

1 « J'aime »

Ah. Vous n’avez pas besoin d’ajouter les balises \u003cp\u003e dans le style existant. Je suppose que celui-ci est plus \u003cp\u003e collant. :slight_smile:

2 « J'aime »

Quelques commentaires initiaux :

  1. J’ai survolé l’élément [details] sans vraiment le remarquer la première fois. Il ne m’a pas semblé être un [details]. C’est peut-être “juste parce que c’est nouveau”, mais…
  2. Il est déconnecté du design précédent et de l’implémentation par défaut du navigateur – le chevron est après le résumé au lieu d’être avant, et l’état fermé pointe dans la direction qui signifiait auparavant (et par défaut) l’état ouvert.
    fermé : 5e2f09a3273a7776b5183413ef6f10e6527e79e0 d9740bb422e18ababe7c9a7d542c2f16fc133988
    ouvert : 7c34c74801ab3cf04dc83e99b95e7689bb4ded71 f65dd89b62acbfaa9dcf83bd03bbe23eb0c1105a
  3. Le bouton/résumé prend beaucoup plus de place (auparavant, c’était un élément semi-en ligne)
    vs
  4. Comme vu ci-dessus, auparavant le triangle/chevron était aligné avec le texte et maintenant le texte “Summary” ne l’est pas, à cause du padding du bouton (rien n’est aligné avec quoi que ce soit :sweat_smile:)
  5. Sur mobile, après interaction, le fond du bouton reste surligné
  6. J’aurais voté pour le contour plutôt que pour l’option de fond – je préférerais que cacher du contenu le fasse simplement, sans affecter le contraste (principalement pertinent en cas d’images intégrées et d’emoji)

mise à jour :

  1. Une zone cliquable réduite :

    vs
7 « J'aime »

:baymax_yes:


C’était un peu le but, pour que ce soit mieux, il faut s’écarter de la façon dont c’était fait auparavant, en particulier s’écarter de la valeur par défaut du navigateur. Nous suivons maintenant le modèle du bouton “Réponses” en bas des messages avec plusieurs réponses.

image


Belle observation !


Encore une bonne remarque, je vais regarder ça :+1:


:thinking: Je ne suis pas sûr que l’utilisation d’un emoji noir/foncé sur un fond sombre/noir soit quelque chose que nous pourrions résoudre ici…


Celle-ci est aussi un peu confuse, cliquiez-vous auparavant quelque part d’autre que sur le texte ? Était-il courant pour vous de cliquer ici ?

3 « J'aime »

Oui. Je l’utilisais pas mal, surtout sur mobile. :raised_hand: La zone plus petite est plus difficile à atteindre. Je pense que c’est là que mon pouce se trouve sur l’écran.

5 « J'aime »

Oui ! C’est l’une des attentes par défaut de la plateforme : \u003cdetails\u003e, comme les cases à cocher/boutons radio et leurs \u003clabel\u003es, ont une certaine apparence et un certain comportement. Par exemple, je fais la même chose sur GH :

1 Réponse

Je ne sais pas si le fait de le rendre similaire à l’autre chose est vraiment une bonne chose :langue_tirée:

1 « J'aime »

Saison 3 Whatever GIF de The Office

Bonjour ! Veuillez m’excuser si ma question n’est pas tout à fait correcte :pray:
Serait-il possible d’ajouter une fonction pour afficher du contenu caché en fonction du groupe d’utilisateurs. Par exemple, si l’utilisateur n’est pas enregistré ou n’est pas membre de tel ou tel groupe, alors il ne pourra pas voir les détails et une fenêtre modale s’affichera pour lui, où il y aura des instructions pour obtenir l’accès (par exemple, s’inscrire) ?
Je suis au courant de l’existence de composants/plugins de thème qui masquent l’intégralité du sujet ou de la catégorie. Simplement, parfois, vous voulez donner aux utilisateurs la possibilité de lire uniquement les informations primaires.

1 « J'aime »

Ce n’est pas quelque chose qui a été utilisé de cette manière, car généralement une catégorie est restreinte à certains groupes ou utilisateurs, et non les détails au sein d’un message dans cette catégorie.

Cela dit, je suis sûr que cela pourrait être fait dans un plugin, mais ce sujet ne serait pas idéal pour cette discussion.

1 « J'aime »

Un petit détail, mais cela semble légèrement différent de la couleur d’arrière-plan des citations, c’est le genre de chose “presque mais pas tout à fait” qui peut sembler être une erreur. Je pense que cela devrait soit correspondre, soit être manifestement différent.

Autres réflexions…

Ceci est une citation manuelle

Ceci est une citation partielle, qui peut être développée

Peut-être pourrions-nous adopter légèrement ce style ? Même rembourrage, arrière-plan et expansion… nous devrions au moins supprimer la bordure pour qu’elle ressemble moins à une citation

Screenshot 2023-11-14 at 1.48.35 PM

Peut-être un style complètement différent ?

Screenshot 2023-11-14 at 1.49.16 PM

7 « J'aime »
Je ne suis pas aligné

Abandonner l’alignement ici me dérange un peu :

C’est plus visible lorsque vous commencez par un bloc de détails.

4 « J'aime »

Bonjour :waving_hand: Je réfléchis à voix haute… :thinking: L’en-tête est-il nécessaire à afficher par défaut ? Je veux dire, il utilise la plupart du temps le Résumé par défaut et probablement que la plupart des utilisateurs ne savent pas qu’il peut être unique et ce serait peut-être plus naturel si le texte à l’intérieur de details était tronqué avec des points de suspension et que la fin affichait ...afficher plus s’il est réduit et afficher moins s’il est développé. Par exemple, la première ligne tronquée du contenu serait automatiquement l’en-tête. Cela pourrait être une vue par défaut, mais les utilisateurs pourraient ajouter un en-tête séparément s’ils le souhaitent ?

4 « J'aime »

Pour être juste : l’implémentation est que cliquer sur une étiquette doit définir son bouton radio, pas nécessairement que cliquer sur toute la ligne vide derrière une étiquette fonctionne également.

2 « J'aime »

Que penseriez-vous de l’état de survol permanent ? Il serait alors aligné comme un « bouton » avec le texte en dessous et au-dessus.

  1. Le chevron n’est pas aligné avec le texte (il est placé un peu trop haut)
    vs image
    (et ce n’est pas la même icône chevron ? :eyes:)
  2. Le menu du compositeur utilise un triangle pour indiquer la fonctionnalité de détails
  3. Ajout à 2.
    Placer l'icône après le texte rend plus difficile sa reconnaissance, surtout lors d'une lecture rapide d'un message
  4. Ajout également à 2.
    Concernant la direction vers laquelle pointe l’icône : étant donné qu’elle agit comme un interrupteur, ne serait-il pas logique de l’inverser pour qu’elle indique l’état actuel plutôt que l’action/l’état futur (cela s’applique également au bouton « Réponses »)
  5. Il n’a pas d’état de focus lorsqu’on y accède avec tab
  6. L’état au survol n’est visible que lorsqu’il est fermé
5 « J'aime »

Peut-être… @awesomerobot, qu’en penses-tu ?

Petit bug – Lorsque vous ouvrez un détail, vous faites défiler vers le haut jusqu’à ce que vous chargiez plus de publications (et un peu plus) ; une fois que vous revenez, le contenu du détail n’est pas rendu (EDIT : ou fermé, mais je ne m’attendrais pas à ce qu’il soit fermé ici)

3 « J'aime »

Oui, le traiter comme un bouton pourrait fonctionner… presque comme la balise HTML details existante, (plus un chevron)

Expand me Here is some trimmed content... Here is some trimmed content... Here is some trimmed content... Here is some trimmed content... Here is some trimmed content... Here is some trimmed content... Here is some trimmed content...

Aussi…

Et si j'utilisais un paragraphe comme contenu de résumé ? Celui-ci pourrait être de n'importe quelle longueur et les sauts de ligne peuvent être étranges. Faut-il le limiter ? Existe-t-il un cas d'utilisation pour un texte de résumé très, très long ? Chevron de la ligne suivante :

here are the deets

3 « J'aime »