Created a new message indicator component to indicate new messages (#4299)

* Created a new message indicator component to indicate new messages are present
outside the user's view:

 * Created new component with styling

 * Theming and i18n support for new messages indicator

 * Count new unviewed messages and integrate with component

 * Coding style for new message indicator

* Fixed bugs with new message indicator:

 * Fix display issues with new message indicator
 * Update text to deal with plurals in React

* Fix coded style for ticket 'PLT-1917': add new message indicator.

* Use only server generated timestamps for checking new messages at the bottom

* Move transitionend to prop, fix style selectors
Этот коммит содержится в:
Pepijn
2016-12-08 00:08:37 +01:00
коммит произвёл Harrison Healey
родитель 9b96fcc7c6
Коммит 7399d349de
6 изменённых файлов: 132 добавлений и 4 удалений

Просмотреть файл

@@ -560,6 +560,7 @@ export function applyTheme(theme) {
changeCss('body.app__body', 'scrollbar-face-color:' + theme.centerChannelBg);
changeCss('body.app__body', 'scrollbar-track-color:' + theme.centerChannelBg);
changeCss('.app__body .post-list__new-messages-below', 'color:' + theme.centerChannelBg);
changeCss('.app__body .nav-pills__unread-indicator-bottom', 'color:' + theme.centerChannelBg);
}
if (theme.centerChannelColor) {
@@ -642,6 +643,8 @@ export function applyTheme(theme) {
changeCss('.app__body a, .app__body a:focus, .app__body a:hover, .app__body .btn, .app__body .btn:focus, .app__body .btn:hover', 'color:' + theme.linkColor);
changeCss('.app__body .attachment .attachment__container', 'border-left-color:' + changeOpacity(theme.linkColor, 0.5));
changeCss('.app__body .channel-header__links .icon:hover, .app__body .post .flag-icon__container.visible, .app__body .post .comment-icon__container, .app__body .post .post__reply', 'fill:' + theme.linkColor);
changeCss('.app__body .nav-pills__unread-indicator-bottom', 'background:' + theme.linkColor);
changeCss('.app__body .nav-pills__unread-indicator-bottom:hover', 'background:' + changeColor(theme.linkColor, 0.1));
}
if (theme.buttonBg) {