Improve Default Toolbar Styling

[theduckylittle]

The "Dev Demo" lives in ./demo. The current toolbar is pretty bland and difficult to read. A double lose!

Acceptance Criteria:

1. Make the text size a bit larger so it's more readable.
2. Add a few icons. We are including Font Awesome and Map Icons webfonts already and so I don't feel we need to go for additional art work for purposes of the demo.
3. Play around with adding color to a few icons to make them more distinguishable to the users.
4. All of the changes should be in src/less/toolbar.less and use appropriate less syntax for including the icons. The catalog.less file can be used as a reference.

[theduckylittle]

gm3.less will need to include the new toolbar.less for the changes to be visible.

[CaitW]

@theduckylittle, I noticed in the example mapbook file that the print tool has an attribute icon-class. Were you planning on specifying icons for each tool from within the mapbook?

[theduckylittle]

The mapbook has a lot of left-overs. These shouldn't be any additional icon-class attributes.

[CaitW]

How would you like me to link specific icons to their respective toolbar tool?

If we kept the icon-class attribute, it would require two small changes to render that icon:

src/gm3/actions/toolbar.js:51

iconClass: toolXml.getAttribute('icon-class')

src/gm3/components/toolbar.jsx:63

<span className="icon"><i className={tool.iconClass}></i></span>

[theduckylittle]

Yes, but the icon itself is not important. Styling the button is more important and the button always has an icon whether or not it's rendered (which can be determined by CSS). I think we need to just change one line of code, https://github.com/geomoose/gm3/blob/master/src/gm3/components/toolbar.jsx#L61, to something like:

<button onClick={tool_click} key={tool.name} className={'tool tool-'+tool.name}>

I just rambled off the above, it may work, it may have a syntax error, it may light your CPU on fire. In any of those three equally likely scenarios, it adds the styling to the buttons in a way that is predictable to customize.

The above code also makes the LESS pretty easy. To control the default icon:

.tool {
 .icon {
   display: none;
 }
}

To control a specific icon:

.tool-print {
 /* other styling here, e.g. */
 color: red; /* this would be ugly but noticeable, and changes the icon AND text color */
 .icon {
 }
}

Happy coding.

[theduckylittle]

Related PR: #16

[theduckylittle]

With the PR merged, I'm closing this one out.