Chat: Improve css for threaded conversations #75534

Closed
opened 2020-04-08 19:36:27 +02:00 by Ray molenkamp · 9 comments

In an effort to have more open communications we have recently re-enabled threaded conversions, which have been working well, except for the display of threaded talk in the main channel where the messages have lost both the sender and timestamp and displaying just a tiny version of the users avatar. Making conversations less open cause there's no way to tell who is talking (beyond the few high profile users who's avatar people may recognize) or when things were said.

{F8457046, width=100%}

@dfelinto suggested we may be able to fix this in css and asked for a task.

In an effort to have more open communications we have recently re-enabled threaded conversions, which have been working well, except for the display of threaded talk in the main channel where the messages have lost both the sender and timestamp and displaying just a tiny version of the users avatar. Making conversations less open cause there's no way to tell who is talking (beyond the few high profile users who's avatar people may recognize) or when things were said. {[F8457046](https://archive.blender.org/developer/F8457046/image.png), width=100%} @dfelinto suggested we may be able to fix this in css and asked for a task.
Author

Changed status from 'Needs Triage' to: 'Confirmed'

Changed status from 'Needs Triage' to: 'Confirmed'
Author

Added subscribers: @dfelinto, @LazyDodo

Added subscribers: @dfelinto, @LazyDodo

Added subscribers: @MikeyN, @pablovazquez

Added subscribers: @MikeyN, @pablovazquez

Hi @pablovazquez can anything be done about that? Maybe something to coordinate with @MikeyN ?

Hi @pablovazquez can anything be done about that? Maybe something to coordinate with @MikeyN ?

Adding in a persons name would not just be CSS as the name isnt anywhere in the dom - increasing the Image size, sure. Never looked into the backend of RocketChat but i'm sure it's possible :) Happy to look into it if @pablovazquez doesn't have time.

I thought the point with threads though was that you open the thread on the right and continue the conversation there - where you can see names and timestamps, and the text in chat was just a notification that a new comment has been added to the thread.

Frame 9.png

Adding in a persons name would not just be CSS as the name isnt anywhere in the dom - increasing the Image size, sure. Never looked into the backend of RocketChat but i'm sure it's possible :) Happy to look into it if @pablovazquez doesn't have time. I thought the point with threads though was that you open the thread on the right and continue the conversation there - where you can see names and timestamps, and the text in chat was just a notification that a new comment has been added to the thread. ![Frame 9.png](https://archive.blender.org/developer/F8476715/Frame_9.png)

In #75534#911116, @MikeyN wrote:
Adding in a persons name would not just be CSS as the name isnt anywhere in the dom

The name is actually in the alt attribute of the image, and also as a custom data-username attribute, so you could use CSS to hide the image and show it as text instead with something like content: attr(alt). It would still be a hack and tricky to get it to work reliable (with long usernames and such).

I don't have time to work on this at the moment, if @MikeyN wants to have a go at it sure, but there is nothing in the backend of RocketChat that allows you to do this, the Threads feature settings is literally one switch:
{F8478271, size=full}

All tweaks are done with pure CSS.

> In #75534#911116, @MikeyN wrote: > Adding in a persons name would not just be CSS as the name isnt anywhere in the dom The name is actually in the `alt` attribute of the image, and also as a custom `data-username` attribute, so you could use CSS to hide the image and show it as text instead with something like `content: attr(alt)`. It would still be a hack and tricky to get it to work reliable (with long usernames and such). I don't have time to work on this at the moment, if @MikeyN wants to have a go at it sure, but there is nothing in the backend of RocketChat that allows you to do this, the Threads feature settings is literally one switch: {[F8478271](https://archive.blender.org/developer/F8478271/image.png), size=full} All tweaks are done with pure CSS.

Is this 2-year old task still relevant? If not then it can be closed.

Is this 2-year old task still relevant? If not then it can be closed.

Changed status from 'Confirmed' to: 'Resolved'

Changed status from 'Confirmed' to: 'Resolved'
Dalai Felinto self-assigned this 2022-05-09 18:20:56 +02:00

Asking for forgiveness instead of asking for permission :) Closing, it can be re-opened if still relevant.

Asking for forgiveness instead of asking for permission :) Closing, it can be re-opened if still relevant.
Sign in to join this conversation.
No description provided.