Layer Control - Use icon for Layer menu instead of text link.

[tmcgee]

In issue #229, I mentioned that an icon is a good user interface addition for the layer menu within LayerControl widget. This new issue is created to track this idea separately so as not to subvert the original enhancement request any further. The icon would replace or supplement the text link that is currently used to bring up the menu.

As far as which icon to use...

@dspriggs suggested a cog icon. http://fontawesome.io/icon/cog/

This is becoming the "universal" menu icon and so is a potential candidate: http://fontawesome.io/icon/bars/ I prefer it over the cog icon.

[DavidSpriggs]

I like the bars as well.

[jebu75]

I like the bars icon as well.

[btfou]

Bars it is. Thanks.

[btfou]

@tmcgee @DavidSpriggs @jebu75 Any thoughts on color? Maybe a slightly lighter grey and default (#333) on hover?

[jebu75]

Sounds good. What about mobile? The only thing I don't like about a small menu icon is implications for touch devices. The hyperlink is pretty easy to hit with a fat finger. A small icon might be more difficult.

[tmcgee]

Something like that lighter grey or perhaps the blue you used for the text link (if the text link is removed).

[tmcgee]

@jebu has a valid point. However it is a bigger issue. The plus/minus icons and the folder icons are the same small target size as are many others.

I'm envisioning a mobile css file that is conditionally loaded (using dojo/has). The css file would have larger icons/fonts and other mobile specific classes. Moving to FA and away from images makes that much easier. Sounds like we need to open another new issue to discuss?

[jebu75]

I think @tmcgee is right. I was reviewing one of our apps with some users today and one of the issues that came up was the icons to collapse the side panes being a bit small for use on a touch device.

[btfou]

I'll default to icon (bars) with a parameter to alternately to use the title link.

[jebu75]

I still like the bars icon for now and then @tmcgee’s idea of doing a better job of handling mobile globally. I don’t think you want to over complicate configuration options for the layer controller. With that in mind could the entire layer title and bar icon be clickable without styling the title as a hyperlink? It would provide a better visual hinting (bar icon) to the user and work better on mobile as well.

[tmcgee]

I agree with @jebu75 to keep it simple. Use the icon as the visual hint. Make the entire title clickable but no colored link styling for the text. If somebody want to add color or other frills for their own app, they are free to do so.

[btfou]

@jebu75 @tmcgee Thanks for the help sorting this out.

[btfou]

The menu icon has been added and menu link removed as of v1.3.1.