Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Ability to react to clicks on user names and avatars

Abierto
  • ¿Algo no está bien?
#630 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
35/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
angular, typescript
Área
accessibility, frontend

Línea de trabajo

Empieza rastreando los componentes de avatar y de encabezado de canal, incluido el recorrido personalizado channelHeaderInfoTemplate, para encontrar dónde se renderizan los nombres y los avatares. Revisa la InteractiveElementDirective propuesta y decide cómo deben exponerse los eventos de clic y de teclado, incluido el comportamiento diferente para los nombres de chats grupales y de chats de dos personas. Se considera terminado cuando los elementos compatibles son interactivos y accesibles sin requerir componentes personalizados.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

I have a feature request to open user profile when clicking on avatars and names in the chat.
I think it makes a lot of sense, since all messengers do similar things.

Right now my only option to achieve this seems to be to create custom avatar and channel header components so that I can put click listeners wherever I want.

I believe it would be much simpler if stream-chat-angular implemented click listeners and passed the events through some exposed observables which clients could use to their liking. The event could include user object and potentially other metadata. The feature seems to be pretty simple while bringing a lot of value.

The usually interactive elements such as names and avatars would also have to be tababble, meaning fully accessible without a mouse and thus require listening to keydown.enter and keydown.space events as well. Not the highest priority on this one though.
Here's the directive we use to make any html element accessible with use of a simple (click) listener:

import { Directive, ElementRef, HostBinding, HostListener, Input } from '@angular/core'

@Directive({
  selector: '[appInteractive]',
  host: { role: 'button' },
  standalone: true
})
export class InteractiveElementDirective {
  @Input() appInteractive: boolean | ''

  get isInteractive(): boolean {
    return this.appInteractive !== false
  }

  @HostListener('keydown.enter', ['$event'])
  @HostListener('keydown.space', ['$event'])
  handleEnterKeydown(event: MouseEvent & { currentTarget: HTMLElement }): void {
    if (this.el.nativeElement === event.target && this.isInteractive) {
      event.currentTarget.click()
    }
  }

  @HostBinding('tabindex')
  get tabIndex() {
    return this.isInteractive ? 0 : -1
  }

  constructor(private el: ElementRef) {}
}

The only thing to decide is how to react to clicks on a group chat name (where you have first 5 names separated by commas) vs a 2 person chat name (where you only have one name).
I think listening to clicks on each individual name in a group chat name isn't that valuable, since it's pretty easy to create a custom channelHeaderInfoTemplate which would usually open some sort of custom member list anyway.

Lenguaje dominante
TypeScript
Estrellas
67
Forks
34
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de GetStream/stream-chat-angular

Todos los issues de GetStream/stream-chat-angular

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.