[UI] Refined the navigator with CSS.

[xuqingkuang]

No description provided.

[xuqingkuang]

@zhizhangchen After Chrome upgraded, the width computing seems correct.

The css and home icon is updated, it could be in review now.

[zhizhangchen]

In Linux, the font seems a little grey and thin.

[xuqingkuang]

@zhizhangchen The font changed to OpenSans-SB, looks more bold now.

[sbryan]

Why are we changing these so drastically, especially by adding more hard coded sizes (which is causing zoom issues)?

Was there a bug for this?

Also, now the tabs section in the navbar does not align with the initial width of the left panel (contains page picker, outline view and property view), so the initial visual presentation looks odd.

[sbryan]

OK, so I see now that we never replaced the view tab button images with real CSS. Unfortunately, I'm not liking the way it's being done with the hard coded sizes and having to add the text content of the href in the code.

By adding the following to builder.css, you can remove the code changes to main.js:

.layoutViewButton:after { content: "layout"; }
.codeViewButton:after { content: "code"; }
.liveViewButton:after { content: "preview"; }

There are other places where we could be doing things better. I will see if I can make code suggestions.

[xuqingkuang]

@sbryan How about place the text contents in main.js ? it will make RIB internationalize in future more easier.