J’ai apporté quelques modifications simples à la page de chat pour améliorer le design et le rendre plus fluide. Voici un aperçu des changements que j’ai apportés :
- Déplacement de l’indicateur de frappe :
J’ai repositionné l’indicateur de frappe pour qu’il s’affiche désormais au-dessus de la zone de texte au lieu d’en dessous. Cela semble plus naturel et plus facile à remarquer lorsque quelqu’un tape. - Augmentation de la taille de la police de l’indicateur de frappe :
J’ai légèrement augmenté la taille de la police de l’indicateur de frappe. Il est maintenant plus visible et ressort un peu plus, ce qui le rend plus facile à lire en un coup d’œil. - Nettoyage des images :
J’ai supprimé le nom/URL du document qui entourait auparavant les images et j’y ai ajouté un petit rayon de bordure. Cela donne aux images un aspect plus net et plus soigné et supprime l’encombrement inutile. - Rendu de l’indicateur de frappe plus dynamique :
J’ai ajouté un petit effet dynamique à l’indicateur de frappe. Maintenant, lorsqu’il apparaît, les messages glissent légèrement vers le haut pour faire de la place, et lorsque l’indicateur disparaît, les messages glissent vers le bas. Cette transition fluide rend l’expérience globale plus fluide et interactive.
Ce ne sont que de petites retouches de design. Pour moi, cela semble plus net, plus fluide et, dans l’ensemble, plus soigné. Faites-moi savoir ce que vous en pensez, et n’hésitez pas à suggérer d’autres changements ou améliorations !
Voici le code :
// indicateur de frappe
/* Ajouter de l'espace sous l'indicateur de réponse */
.chat-replying-indicator-container {
order: -1; /* Déplace l'indicateur de réponse au-dessus de la zone de texte */
}
.chat-composer__outer-container {
display: flex
;
align-items: center;
box-sizing: border-box;
width: 100%;
padding-inline: 0rem;
padding-bottom: 1rem;
}
.chat-message-collapser .chat-message-collapser-header {
display: none;
align-items: center;
}
.chat-message .onebox img:not(.ytp-thumbnail-image, .onebox-avatar-inline),
.chat-message img.onebox,
.chat-message .chat-uploads img,
.chat-message p img,
.chat-message aside.onebox .onebox-body .aspect-image-full-size,
.chat-message aside.onebox .onebox-body .aspect-image-full-size img,
.chat-message .chat-message-text p img:not(.emoji) {
object-fit: cover; /* Couvrir le conteneur pour préserver le border-radius */
max-height: 300px;
max-width: 90%;
width: unset;
overflow: hidden;
border-radius: 20px; /* Coins arrondis */
}
.chat-replying-indicator {
color: var(--primary-medium);
display: inline-flex;
font-size: 1em;
padding-bottom:10px;
}
.chat-replying-indicator-container {
margin-bottom: 10px; /* Ajuster la valeur si nécessaire */
margin-top: -20px;
}
.chat-replying-indicator-container {
margin-top: -30px; /* Position par défaut lorsqu'on ne tape pas */
transition: margin-top 0.3s ease; /* Transition fluide */
}
.chat-replying-indicator-container:has(.chat-replying-indicator__text) {
margin-top: 0px; /* Position lorsqu'on tape */
}
PS : Ceci est spécialement pour mobile.
Voici à quoi cela ressemble maintenant :
