Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bring color codes of users' status in line with other clients #1209

Closed
alexara opened this issue Sep 20, 2018 · 5 comments

Comments

@alexara
Copy link

commented Sep 20, 2018

Hi! I got a little confused by the current color codings of the users' status. I was really concerned that my contacts are all offline, until I looked very very closely to see that there is a tiny difference between "away" and "offline":

  • Offline: Gray with a X
  • Away: Gray with a O
  • DND: Red with -
  • Online: Green

Do you mind to bring it in line with other chat clients e.g. Conversations, i.e.

  • Offline: Gray
  • Away: Orange
  • DND: Red with -
  • Online: Green

Regards

@jcbrand jcbrand added this to the 4.0.2 milestone Sep 23, 2018

@jcbrand jcbrand modified the milestones: 4.0.2, 4.0.3 Oct 3, 2018

@laurenmayers

This comment has been minimized.

Copy link
Contributor

commented Oct 5, 2018

Happy to work on this if I can!

@jcbrand

This comment has been minimized.

Copy link
Member

commented Oct 5, 2018

Go for it!

@laurenmayers

This comment has been minimized.

Copy link
Contributor

commented Oct 6, 2018

Hey @jcbrand, where's the best place to contact you/the right people for help?
I'm having trouble locating the file/code that sets the background color of the users' status.

@jcbrand

This comment has been minimized.

Copy link
Member

commented Oct 7, 2018

@laurenmayers Asking here is fine, alternatively you can ask in the our chatroom. You'll need an XMPP account for that, you can register one at conversejs.org. Pretty soon it'll also be possible to log in via Github.

For this ticket, we need to modify the CSS to make sure that the away status renders orange.
However, we use Sass to generate our CSS, so the source file where we need to make a change is in the sass folder.

I don't know the relevant CSS class that determines the style, so I used the browser's DOM inspector to look at the DOM element in question. I saw that it has the class .fa-dot-circle.

I then used grep to search for files containing fa-dot-circle in the sass directory and I found the file file _controlbox.scss.

By looking at the place where the string fa-dot-circle appears, I immediately saw the bug (in part because I have context, due to having worked on this before).

In the Sass file, the class is fa-dot-circle-o, not fa-dot-circle. Recently some FontAwesome classes were renamed, but the Sass file didn't update accordingly. The away status was actually shown in orange originally.

So by renaming .fa-dot-circle-o to .fa-dot-circle in that file, the bug is fixed. Now it's just a matter of running make watch to regenerate the CSS file.

laurenmayers added a commit to laurenmayers/converse.js that referenced this issue Oct 7, 2018

@laurenmayers

This comment has been minimized.

Copy link
Contributor

commented Oct 7, 2018

Thanks for the guidance @jcbrand. I noticed the difference in the class name too, which was part of my confusion! I just submitted the pull request, thanks for your help.

@jcbrand jcbrand closed this in ba689f4 Oct 21, 2018

jcbrand added a commit that referenced this issue Oct 21, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.