Improve Default Toolbar Styling about gm3

[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.