[#701] Navbar selection and animation (connects #701)

[Tille88]

Left navbar selection, while keeping transition simple works pretty well IMHO

There is also a commented out part that (although ugly, and can easily be improved) tests how it would look with a reverse colour transition (blue to white, white to blue), but it ends up looking so similar to just having a global opacity transition instead. However, when reviewing please uncomment, comment out alternative solution and take a look!

I'm no CSS expert, so please provide ideas on improvements if you have any!

[lmmrssa]

@Tille88 looked on both implementation. It seems similar but top one seems to have more delay on animation completion. Also after menu is highlighted white seems to be too strong than white used on pages. So can we change it to something that will not look too highlighted instead just a focus between menu items.

[Tille88]

Thanks @lmmrssa
What do you mean by delay on animation completion? Time until animation seems to depend on load of route for me, if that is what you meant, please someone else give their results as well :) since first one will be a bit more elegant...
Color change I can look into for sure though

[Tille88]

I think I saw in the end what you meant with the delay @lmmrssa , but when the transition kicks in is fully dependent on when the route is fully loaded it seems. Tried to see how having a fade out looked, but with any laggy behavior at all it looked terrible, so skipped that.

For color, you can as here match the "Library" background rgb(245, 245, 245):

The dashboard background rgb(250, 250, 250):

Or have current implementationrgb(255, 255, 255):

Can't find any scss variables that gives me any of the first two. And no implementation seems obviously superior, so keeping it for now until someone gives suggestions of what change, if any, would be best :)

[Tille88]

Also, in screenshots above, the navbar white matches the rgb(3x) x= [245, 250, 255] in that order

[Tille88]

Was not fully happy with the lack of responsiveness when waiting for the routing to change, so added small grow/pulsating effect
So with: f561225
Without: e7a7cc5
Usually the library route has the most latency, so using that to test difference is best

[paulbert]

I like the animations & adding comments to the templates, but it needs a few changes

[paulbert]

Deep (shadow-piercing) selectors are deprecated and being phased out by browsers, so we shouldn't use them.

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

[Tille88]

@paulbert Please check changes when you have time

[paulbert]

Each navigation link was written out individually because the i18n translation does not currently work to translate JavaScript in the component. This will hopefully be updated for v6, but until then we should keep the navigation in a translatable state.

You've added a lot of attributes here, so I wouldn't want to repeat those. I think you should convert these into one directive that you can add to the a elements.

[Tille88]

@paulbert Please check changes when you have time

[Tille88]

Trying to use a hack with !important will not work with animations, so currently changed to follow directions from the official documentation.

[Tille88]

• Keeping a bit of a messy commit history since will be squashed eventually anyway

• Using a directive removed complexity both from home component and its template.

• I can't seem to get rid to a /deep/-style selector:
  Could do some kind of sass-variable with !important using a declarative name such as “$override-material” but… does not work with animations/transitions, so… given the info in the link below, someone else please give it a try, that has been enough CSS for this week for sure… Until then ::ng-deep would simply have to do
  https://stackoverflow.com/questions/44089246/override-angular-material-style-in-angular-component

[paulbert]

@Tille88 I haven't been able to look through this in detail, but I think it's ready to merge with maybe a few tweaks which I can take care of.

I rebased it today (we need to have all branches up to date before making a change to our Travis build process), so make sure to update your local branch if you are going to do any more work on this.

[Tille88]

@paulbert yes, I think I've done what I can with this one, the CSS may need to change when Angular have found a better way to allow overriding styles of e.g. material design components, but for now it uses what they, and everyone else writing on it seems to suggest.