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
Closed

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

alexara opened this issue Sep 20, 2018 · 5 comments
Labels
Milestone

Comments

@alexara
Copy link

alexara 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 added good first issue UI User interface labels Sep 23, 2018
@jcbrand jcbrand modified the milestones: 4.0.2, 4.0.3 Oct 3, 2018
@laurenmayers
Copy link
Contributor

Happy to work on this if I can!

@jcbrand
Copy link
Member

jcbrand commented Oct 5, 2018

Go for it!

@laurenmayers
Copy link
Contributor

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
Copy link
Member

jcbrand 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
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants