From 748fdef1fbded624a786533e8f065b91a047b91c Mon Sep 17 00:00:00 2001
From: samogot <samogot@gmail.com>
Date: Sat, 30 Jul 2016 03:54:42 +0900
Subject: 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 | 18 ++++++++++++------
 webapp/components/user_list_row.jsx        | 19 +++++++++++++------
 2 files changed, 25 insertions(+), 12 deletions(-)

(limited to 'webapp/components')

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'
             >
-- 
cgit v1.2.3-1-g7c22