[Feature] Enable custom styles

[rpaschoal]

I am opening this issue to discuss on how to allow people who are using this component to style and change its looks.

This was already requested by different users on #29 and #34

At the moment, changing the size of the chat windows, friends list or the space between these elements is a challenge as their sizes are used to calculate how many windows can fit on each viewport, and the sizes are configured within the component main class and are not exposed as settings.

It would be nice to get some feedback on what is most valuable for users right now regarding to style, such as:

• Colors
• Fonts
• Sizes
• Elements placements

Knowing what is most valuable will help on prioritizing what gets done and released first.

[rpaschoal]

@eddy2enam, @todd7,

Ideas are welcome 😃

[o3dsn]

The chat is amazing! colors, fonts e sizes settings are interesting. If he had a way of leaving it open the same facebook chat

[o3dsn]

Hei, some property for status ??? To translate busy to portuguese and others status.

[rpaschoal]

Good ideas @todd7, I will just have to investigate that a bit more, most likely I'll be doing the localization changes before the styling ones, but I will have to be releasing that as a new minor version as I'll be refactoring the settings (Want to pass that as an object instead of separate Input properties).

There are a few minor improvements I still want to do for 1.0.x, so this will have to wait a bit, but surely it is on my todo list.

Cheers!

[rpaschoal]

@todd7 I've added full localization support on 1.0.8 which is now available on NPM.

[rpaschoal]

Hey @todd7 and everyone else who might be interested in this feature 😀

I know it has been a while since our last communication here but I am pleased to let you know that this will be available in the next release of ng-chat (1.2.0). Custom themes will be supported and I will be shipping two default themes with ng-chat: Light which is the current theme and Dark. Here is a sneak peek:

[rpaschoal]

I've just shipped 1.2.0 with support for custom themes and a new dark theme 🎉

As mentioned in the readme:

[theme]{ng-chat/core/theme.enum:Theme}: Defines the styling theme. There is a light (default) and a dark theme available. You can also supply this as a string. [customTheme]{string}: Source URL of the stylesheet asset to use for custom CSS styles. Works with assets relative to the project using ng-chat.

To implement your custom themes you can check these assets:

https://github.com/rpaschoal/ng-chat/blob/master/src/ng-chat/assets/themes/ng-chat.theme.default.scss https://github.com/rpaschoal/ng-chat/blob/master/src/ng-chat/assets/themes/ng-chat.theme.dark.scss

You do have to wrap all styles around a custom-theme class.

I do not recommend changing the size of the elements through custom themes as there is some viewport calculations in place that could be affected by doing so.