Connection status indicators on host list could be replaced with Material icons

[wp9015362]

Hello,

similar to what @rhansby suggested in #207 and fixed with #216, the connection status indicators on the host list (the green and red circles next to the hostnames) could also be replaced with Material icons.

This would then also fix #202.

For the connected status, the following Material icons could be used:
ic_phonelink
or:
ic_cast_connected
or:
ic_wifi

For the disconnected status, the following Material icons could be used:
ic_phonelink_off
or:
ic_cast
or:
ic_signal_wifi_off

Regards

[khorimoto-zz]

I agree material icons would be nice, but I'm not sure the ones provided are actually good to use since they already have other implications (e.g., Chromecast, Wi-Fi, etc). Any other icon ideas?

[wp9015362]

@khorimoto :

Some more ideas:

Connected status:

ic_leak_add
or:
ic_play_circle_filled
or:
ic_play_circle_outline
or:
ic_play_arrow

Disconnected status:

ic_leak_remove
or:
ic_pause_circle_filled
or:
ic_pause_circle_outline
or:
ic_pause
or:
ic_stop

Regards

[khorimoto-zz]

What about this:

Green ic_check_circle for connected.

Red ic_remove_circle for disconnected.

[wp9015362]

@khorimoto :

No offence, but, personally, I do not like those icons for this purpose.

I also think colors should be avoided for the Material icons.

Actually, there is a specific Google Material Icons Guide, see:

https://google.github.io/material-design-icons/

And regarding colors it says:

https://google.github.io/material-design-icons/

Coloring

[...] In accordance with material design icon guidelines, for active icons we recommend using either black at 54% opacity or white at 100% opacity when displaying these on light or dark backgrounds, respectively. If an icon is disabled or inactive, using black at 26% or white at 30% for light and dark backgrounds, respectively. [...]

Here is the part from the Google Material Design System Icons Guideline which the Google Material Icons Guide is referring to:

https://www.google.com/design/spec/style/icons.html#icons-system-icons

Color

[...] The standard opacity for an active icon on a light background is 54% (#000000). An inactive icon, which is lower in the visual hierarchy, should have an opacity of 26% (#000000).

The standard opacity for an active icon on a dark background is 100% (#FFFFFF). An inactive icon, which is lower in the visual hierarchy, should have an opacity of 30% (#FFFFFF). [...]

So, as far as I can tell from reading this, colors other than black and white are not recommended for Material icons.

I also haven't seen any other app that uses Material icons in colors other than black and white.

So, I'd say ConnectBot shouldn't do that either.

After having read those guidelines mentioned above, I think a much better idea would be to use just one icon instead of two and make this one icon display as active for the connected status and inactive for the disconnected status (by adjusting the opacity as mentioned in the guidelines above).

I guess from all the Material icons which are currently available, the "ic_leak_add" Material icon would probably be the best for this.

How about you?

Regards

[khorimoto-zz]

Ah - thanks for pointing out the rules about colors.

Hmm, I still don't think the ic_leak_add icon looks good. I wonder if we could create our own icons.

[wp9015362]

@khorimoto wrote:

Hmm, I still don't think the ic_leak_add icon looks good.

And what do you think about the idea to use just one icon and display it as either active (when connected) or inactive (when disconnected) by adjusting the opacity?

@khorimoto wrote:

I wonder if we could create our own icons.

A quick Google search came up with the following website, which apparently has some additional "Material" icons "from the community", see:

https://materialdesignicons.com/

It also has a link to GitHub in the upper right corner which links to the following repository:

https://github.com/Templarian/MaterialDesign

Maybe it has an icon that you like better?

Speaking about what you like:

If you would create your own icon, what would it look like 😉?

Regards

[wp9015362]

@khorimoto :

There are some icon requests in the repository mentioned above which would probably be related to this issue, see:

Templarian/MaterialDesign#369
Templarian/MaterialDesign#427
Templarian/MaterialDesign#124

I think the icons in Templarian/MaterialDesign#369 (comment) already look quite promising for the ConnectBot host list connection status indicator. How about you?

Regards

[wp9015362]

@khorimoto :

In Templarian/MaterialDesign#369 I have asked @CoDEmanX for a suggestion.

He kindly came up with this:

Connected:

Disconnected:

What do you think?

Regards

[khorimoto-zz]

Nice - that one looks good to me. @kruton, @alescdb, @rhansby, @jklein24?

[kruton]

Why did the monitors get bigger when it disconnected? :) There are three states, though: not yet connected, connected, disconnected. I think I originally intended for disconnected to be an indicator that maybe you were connected but a network event caused the connection to be dropped.

[rhansby]

What about:

• not yet connected: https://www.google.com/design/icons/#ic_not_interested
  
• connected: https://www.google.com/design/icons/#ic_check_circle
  
• disconnected: https://www.google.com/design/icons/#ic_error
  

[khorimoto-zz]

I like connected, but it might be hard to differentiate between not yet
connected and disconnected. But, then again, it's already a little hard to
differentiate between the current icons too :)

On Fri, Sep 18, 2015 at 10:27 AM Ryan Hansberry notifications@github.com
wrote:

what about:

not yet connected: https://www.google.com/design/icons/#ic_not_interested
[image: ic_not_interested_black_36dp]
https://cloud.githubusercontent.com/assets/1788374/9966139/dade1e8a-5def-11e5-9615-239004684dfa.png

connected: https://www.google.com/design/icons/#ic_check_circle

disconnected: https://www.google.com/design/icons/#ic_error

—
Reply to this email directly or view it on GitHub
#217 (comment)
.

[wp9015362]

@rhansby :

@khorimoto already suggested those icons in #217 (comment). But, as already mentioned in #217 (comment), I personally do not like those icons for this purpose.

@kruton wrote:

Why did the monitors get bigger when it disconnected? :) There are three states, though: not yet connected, connected, disconnected. I think I originally intended for disconnected to be an indicator that maybe you were connected but a network event caused the connection to be dropped.

Sorry, my mistake, unfortunately I posted the "lan-laptops4" icon at first for the connected icon, even though it should have been the "lan-laptops3" icon. The "lan-laptops3" icon has the same size as the disconnected icon.

Regarding the "not yet connected" (i.e. pending connection) icon:

@CoDEmanX also posted an icon with dotted lines ("lan-laptops2").

So how about this:

Not yet connected:

Connected:

Disconnected:

?

Anyway, I have asked @CoDEmanX for yet another suggestion regarding the "not yet connected" icon and I also came up with the idea to use a small clockface in place where the line/cross is in the connected/disconnected icon, see:

Templarian/MaterialDesign#369 (comment)

Besides, I'd say it would make more sense if you would reply in the respective thread (Templarian/MaterialDesign#369) since discussing the same issue among two threads becomes messy.

PS:

For the record, this is the post where he showed the "lan-laptops2" and "lan-laptops3" icons:

Templarian/MaterialDesign#369 (comment)

And this is the post where he showed the "lan-laptops3-disconnected" icon:

Templarian/MaterialDesign#369 (comment)

As you can see, he also posted a link to the the SVG sources.

@Templarian just said that he will include them in the collection tonight, see:

Templarian/MaterialDesign#369 (comment)

Regards

[wp9015362]

@khorimoto wrote:

I like connected, but it might be hard to differentiate between not yet connected and disconnected.

Well, I really do not like the check circle icon for the connected status, but here is a possible solution for the not yet connected and disconnected discernibility issue and also a rather nice alternative for the connected status, see:

Not yet connected (ic_access_time):

Connected (ic_swap_vertical_circle):

Disconnected (ic_highlight_off):

How do you like that @khorimoto / @rhansby ?

Regards

[wp9015362]

@khorimoto :

He has posted an update, see:

Templarian/MaterialDesign#369 (comment)

You like it?

Regards

[wp9015362]

@khorimoto :

The icons have now been added to the collection.

Here are two variants, which I think should be used for ConnectBot:

Either this variant:

Pending:
timer-sand

Connected:
ethernet-cable

Disconnected:
ethernet-cable-off

Or alternatively this variant:

Pending:
timer-sand

Connected:
lan-connect

Disconnected:
lan-disconnect

Regards

[bengolds]

rhansby, I'd prefer your choices here. If "disconnected" signals a problem, the "error" exclamation mark is a good match for it. The check circle feels like a great fit here as well.

Also, colorizing the icons is totally acceptable; they even have instructions for doing so here. The existing color scheme is a good fit here and communicates well, which is the main point.

[rhansby]

@bengolds thanks for the guidance.

I've created a PR at #233 and I'd appreciate if everyone in this discussion looked over it.