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

4 files changed, 49 insertions, 13 deletions

diff --git a/webapp/components/popover_list_members.jsx b/webapp/components/popover_list_members.jsx
index 306fa7a2e..0b318d487 100644
--- a/webapp/components/popover_list_members.jsx
+++ b/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}
                         >
 
-                            <img
-                                className='more-modal__image'
-                                width='26px'
-                                height='26px'
-                                src={`${Client.getUsersRoute()}/${m.id}/image?time=${m.update_at}`}
-                            />
+                            <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'
diff --git a/webapp/components/user_list_row.jsx b/webapp/components/user_list_row.jsx
index 6761206e0..d5d123ab7 100644
--- a/webapp/components/user_list_row.jsx
+++ b/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'
         >
-            <img
-                className='more-modal__image'
-                width='38'
-                height='38'
-                src={`${Client.getUsersRoute()}/${user.id}/image?time=${user.update_at}`}
-            />
+            <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'
             >
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index 6e5ff5d06..5ea1337f1 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -503,7 +503,28 @@
         @include border-radius(60px);
         flex-grow: 0;
         flex-shrink: 0;
-        margin-right: 8px;
+	  	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 {
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 613995200..c4cee3235 100644
--- a/webapp/utils/utils.jsx
+++ b/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) {