Animation du clic sur l'élément de la liste des sujets

[Don]

	Résumé	Animation de clic sur les éléments de la liste de sujets
	Aperçu	Theme Creator
: hammer_and_wrench:	Référentiel	GitHub - VaperinaDEV/topic-list-item-click-animation: This theme component adds a nice animation when you hover or click the topic list item.
	Guide d’installation	Comment installer un thème ou un composant de thème
	Nouveau sur les thèmes Discourse ?	Guide pour débutants sur l’utilisation des thèmes Discourse

← Remplissez "repoName" et "repoURL" pour le bouton d’installation automatique →

Installer ce composant de thème

← Décrivez ce thème/composant en une ou deux phrases →

Ce composant de thème ajoute une belle animation lorsque vous survolez ou cliquez sur un élément de la liste de sujets.

← Ajoutez plus de détails et expliquez les paramètres (si applicable) →

Bonjour

Le composant nécessite un chargeur de curseur.

Ce composant rend la ligne entière cliquable et ajoute une animation de clic à l’élément de la liste de sujets. Vous pouvez choisir parmi plusieurs animations.

1. push (par défaut sur les appareils tactiles) : lorsque vous cliquez dessus, il s’enfonce et ajoute un effet d’arrière-plan.

2. background (par défaut sur les appareils non tactiles) : lorsque vous cliquez dessus, il ajoute un arrière-plan…

3. slider : lorsque vous cliquez dessus, il ajoute un chargeur de curseur sous l’élément de la liste de sujets et masque le curseur principal supérieur.
   

   
   

4. blur : lorsque vous cliquez dessus, il floute les autres sujets de la liste.
   

---

Paramètres du thème

Vous pouvez sélectionner les animations séparément pour les appareils non tactiles et tactiles.

[Canapin (Coin-coin le Canapin)]

Il semblait et avait l’air si naturel que je ne voyais pas ce qui avait changé lorsque j’ai prévisualisé le composant.

Serait-il possible d’avoir l’animation de poussée au clic sur le bureau, pendant le chargement, ou y a-t-il quelque chose qui l’empêche d’une manière ou d’une autre ?

[Don]

@Canapin

Serait-il possible d’avoir l’animation de pression au clic sur le bureau, pendant le chargement, ou y a-t-il quelque chose qui l’empêche d’une manière ou d’une autre ?

L’idée derrière cela est de rendre le tapotement naturel des applications sur les appareils tactiles. Ainsi, l’animation de pression fonctionne également sur la vue de bureau si c’est un appareil tactile.

Mais oui, je pense que cela peut facilement fonctionner aussi sur les appareils non tactiles. Cela vaut probablement la peine d’avoir un paramètre supplémentaire.

[Don]

Bonjour

J’ai poussé une mise à jour du composant. DEV: Refactored how the component works and add a new slider animation by VaperinaDEV · Pull Request #1 · VaperinaDEV/topic-list-item-click-animation · GitHub

@Don

3. slider : quand vous cliquez dessus, il ajoute un chargeur de slider sous l’élément de la liste de sujets et masque le slider principal supérieur.

---

Paramètres du thème

Vous pouvez sélectionner les animations séparément sur les appareils sans écran tactile et avec écran tactile.

[Lilly (Lillian Louis)]

C’est vraiment bien fait. Excellent travail comme toujours Don.

[Don]

Bonjour
Nouvelle animation (flou)

@Don

4. flou : lorsque vous cliquez dessus, il floute les autres sujets de la liste.

[Canapin (Coin-coin le Canapin)]

@Don

slider : quand vous cliquez dessus, il ajoute un chargeur de slider sous l’élément de la liste de sujets et masque le curseur principal supérieur.

Intelligent. J’aime ça

[davidkingham]

Très bien fait Don ! J’ai essayé cela avec Topic List Thumbnails et cela fonctionne en grande partie dès la sortie de la boîte. Push et Blur fonctionnent comme prévu, mais Slider s’affiche en haut de toutes les miniatures plutôt que de suivre la miniature, et background ne fait rien (ce qui est logique). Y a-t-il une chance que vous accordiez un peu plus d’attention à cela ? J’aimerais avoir le slider sur le bureau, ou une autre idée brillante à laquelle vous ne manquerez pas de penser !

[Don]

Salut David

J’ai fusionné une mise à jour Move topic slider loader from template to pseudo element by VaperinaDEV · Pull Request #5 · VaperinaDEV/topic-list-item-click-animation · GitHub
J’ai utilisé le plugin outlet after-topic-list-item template pour afficher le slider, mais le composant Topic List Thumbnails ajoute une mise en page en grille à la liste des sujets, ce qui signifie qu’il traite le plugin outlet comme un élément de liste de sujets et les pousse côte à côte. J’ai maintenant déplacé le chargeur du template vers un pseudo-élément, ce qui augmentera la compatibilité.

---

J’ai oublié d’ajouter un z-index, ce qui est nécessaire pour l’afficher avec Topic List Thumbnail. Veuillez mettre à jour le composant.

[davidkingham]

Merci Don ! J’ai essayé et ça fonctionne, mais la couleur du curseur n’est pas correcte, ou peut-être est-ce un problème de z-index ? Le curseur dans cette vidéo devrait être de couleur dorée mais il est gris. Je pense qu’il devrait être tertiaire ? Je teste ceci sans aucun autre CSS, juste pour que vous le sachiez. Il affichait la couleur dorée avant la mise à jour, c’est pourquoi je pense au z-index

[Don]

J’ai consulté votre site et vous utilisez la version précédente qui ne contient pas le correctif z-index. Veuillez mettre à jour le composant vers la dernière version.

[davidkingham]

Merci Don, tout va bien maintenant, j’ai dû mettre à jour trop rapidement :fou_de_joie:

Une suggestion ; avoir une option pour désactiver cela complètement pour le non-tactile. Maintenant que j’ai essayé le curseur, je ne suis pas sûr de l’aimer car il supprime le curseur par défaut et rend l’expérience utilisateur incohérente.

[denvergeeks]

@Don - J’adore ça ! Je préférerais (comme dans le Composant de thème de sujet cliquable) au survol, que partout dans une ligne/un élément, le curseur soit le pointeur…

.topic-list-item:hover,
.latest-topic-list-item:hover {
    cursor: pointer;
}

[denvergeeks]

@Don - Il semble que le réglage de la couleur d’arrière-plan pour l’effet de survol ne prenne effet qu’après avoir cliqué ou appuyé sur la ligne/l’élément, et non lors d’un survol préalable conventionnel (comme dans le Composant de thème de sujet cliquable).

[Don]

Bonjour David

C’est une excellente idée. J’ai fusionné une mise à jour qui ajoute un paramètre pour désactiver l’animation (composant) séparément sur les appareils tactiles ou non tactiles.

Vous pouvez maintenant sélectionner l’option none qui désactivera complètement le composant.

[Don]

Bonjour @denvergeeks

@denvergeeks

au survol, que partout dans une ligne/un élément, le curseur soit le pointeur…

Le composant ne rend cliquable que la ligne entière de l’élément de la liste de sujets pour le moment. Ainsi, le dernier élément de la liste de sujets fonctionne par défaut maintenant. C’est pourquoi le pointeur du curseur n’apparaît que sur l’élément de la liste de sujets des appareils non tactiles.

@denvergeeks

Il semble que le réglage de la couleur de fond pour l’effet de survol ne prenne effet qu’après avoir cliqué ou appuyé sur la ligne/l’élément, et non lors du survol conventionnel préalable.

Le composant gère séparément les appareils non tactiles et tactiles. L’arrière-plan s’active au survol, sur les appareils non tactiles et sur les appareils tactiles après avoir appuyé dessus. Mais je pense qu’il aura besoin d’une mise à jour car le survol ne fonctionnera pas, par exemple, sur les ordinateurs portables à écran tactile qui ont peut-être un curseur. Je pense que nous pouvons l’activer globalement sur la vue de bureau et le pointeur aussi.

---

J’ai fusionné ces changements.

[ChrisBeach (Chris)]

@Don

Le composant nécessite un chargeur de curseur.

Pourriez-vous préciser ce que vous entendez par la dépendance à un « chargeur de curseur » s’il vous plaît. S’agit-il d’un autre thème, d’un plugin, d’une bibliothèque JavaScript ou autre chose ?

[Canapin (Coin-coin le Canapin)]

Le curseur est la nouvelle animation de chargement de page. Lorsque vous chargez une page dans Discourse, une barre de progression horizontale s’affiche en haut de l’écran. C’est le curseur.

Il est maintenant défini par défaut, mais peut être rétabli au spinner de chargement d’origine via le paramètre indicateur de chargement de page.

[digitaldominica]

Salut Don, n’y a-t-il aucun moyen de faire fonctionner cela avec le préchargeur spinner ? Je préfère honnêtement le spinner au chargeur slider pour mon forum.

[Don]

Bonjour
La raison pour laquelle cela ne fonctionne qu’avec le curseur est que lorsque vous cliquez sur un sujet, le contenu de la page est instantanément effacé et remplacé par le spinner. Il n’y a donc pas de temps pour faire une animation. Avec le curseur, nous restons sur la page actuelle pendant le chargement de la page suivante, ce qui nous laisse le temps d’exécuter une animation.