Online status in all modals (#3617)

* add wrapper to modal avatar image which show small round indicator of online/away status of member in all modals

* add offline indicator

* the color of the status indicators follow the theme

webapp/components/popover_list_members.jsx

@@ -88,18 +88,24 @@ export default class PopoverListMembers extends React.Component {
                 }
 
                 if (name) {
+                    if (!m.status) {
+                        var status = UserStore.getStatus(m.id);
+                        m.status = status ? 'status-' + status : '';
+                    }
                     popoverHtml.push(
                         <div
                             className='more-modal__row'
                             key={'popover-member-' + i}
                         >
 
+                            <span className={`more-modal__image-wrapper ${m.status}`}>
                                 <img
                                     className='more-modal__image'
                                     width='26px'
                                     height='26px'
                                     src={`${Client.getUsersRoute()}/${m.id}/image?time=${m.update_at}`}
                                 />
+                            </span>
                             <div className='more-modal__details'>
                                 <div
                                     className='more-modal__name'

webapp/components/user_list_row.jsx

@@ -1,6 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import UserStore from 'stores/user_store.jsx';
 import Constants from 'utils/constants.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
 import * as Utils from 'utils/utils.jsx';
@@ -31,17 +32,23 @@ export default function UserListRow({user, teamMember, actions, actionProps}) {
         });
     }
 
+    if (!user.status) {
+        var status = UserStore.getStatus(user.id);
+        user.status = status ? 'status-' + status : '';
+    }
     return (
         <div
             key={user.id}
             className='more-modal__row'
         >
+            <span className={`more-modal__image-wrapper ${user.status}`}>
                 <img
                     className='more-modal__image'
                     width='38'
                     height='38'
                     src={`${Client.getUsersRoute()}/${user.id}/image?time=${user.update_at}`}
                 />
+            </span>
             <div
                 className='more-modal__details'
             >

webapp/sass/components/_modal.scss

@@ -503,7 +503,28 @@
         @include border-radius(60px);
         flex-grow: 0;
         flex-shrink: 0;
+	  	max-width: none;
+
+        &-wrapper {
+            position: relative;
+            display: inline-block;
             margin-right: 8px;
+
+            &:after {
+                content: "";
+                right: 0;
+                bottom: 0;
+                width: 25%;
+                height: 25%;
+                display: block;
+                position: absolute;
+                border-radius: 100%;
+            }
+
+            &.status-offline:after {
+                background: #D3D3D3;
+            }
+        }
     }
 
     .more-modal__details {

webapp/utils/utils.jsx

@@ -575,12 +575,14 @@ export function applyTheme(theme) {
         changeCss('.app__body .sidebar--left .status .online--icon', 'fill:' + theme.onlineIndicator, 1);
         changeCss('.app__body .channel-header__info .status .online--icon', 'fill:' + theme.onlineIndicator, 1);
         changeCss('.app__body .navbar .status .online--icon', 'fill:' + theme.onlineIndicator, 1);
+        changeCss('.more-modal__list .more-modal__image-wrapper.status-online:after', 'background:' + theme.onlineIndicator, 1);
     }
 
     if (theme.awayIndicator) {
         changeCss('.app__body .sidebar--left .status .away--icon', 'fill:' + theme.awayIndicator, 1);
         changeCss('.app__body .channel-header__info .status .away--icon', 'fill:' + theme.awayIndicator, 1);
         changeCss('.app__body .navbar .status .away--icon', 'fill:' + theme.awayIndicator, 1);
+        changeCss('.more-modal__list .more-modal__image-wrapper.status-away:after', 'background:' + theme.awayIndicator, 1);
     }
 
     if (theme.mentionBj) {