Add Icons to Mark Type’s Select Box

[kanitw]

Right now mark type's select box is HTML native select box. It's much nicer to have some icons.

[kanitw]

[light-and-salt]

It seems that the html tags only allow text inside them. To add font awesome icons to the options I need some additional UI modules (see: http://angular-ui.github.io/). We are not using any UI modules right now, correct?

I like the UI-bootstrap module (http://angular-ui.github.io/bootstrap/) because it covers a lot of things in the UI. But it's an overkill for issue #150. Do we want to use UI-bootstrap?

[kanitw]

You’re right. We can’t use html select box for this.

For now, I prefer not to use bootstrap as bootstrap overrides too many default css, which makes developing other module difficult. If you include bootstrap, basically all our UI components will suddenly becomes broken.

For other dropdowns in the system we use Drop.js to implement. So it’s good to be consistent.
For example see fieldinfo.js for example dropdown:

The “include / optional / exclude” in Voyager’s fieldlistitem.html is a good example style that we can use with the mark type select box.

[domoritz]

Icons are font awesome https://fortawesome.github.io/Font-Awesome/icons/

[kanitw]

@ZeningQu

I was thinking about it again. I think non-bootstrap UI components are generally fine as they don’t require all of bootstrap’s css. Or if you want to use some bootstrap css, make sure to encapsulate your stylesheet within the module so it doesn’t override other parts.

FYI, Dominik has start using angular-ui-select in another PR, so maybe you want to use that too. It might be easier than what I suggested earlier.

[domoritz]

See https://github.com/angular-ui/ui-select

[light-and-salt]

@kanitw @domoritz Hey hey! Sorry it's been so long! I finished this using Drop.js (screenshot below): But this is only on my local machine. I tried to push to origin and got error 403:

[kanitw]

@ZeningQu Could you please fork polestar and push to your fork and send a pull request from there?