Online status in all modals (mattermost#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
Revanth47 · Jul 29, 2016 · 0866ec9 · 0866ec9
1 parent bf958b0
commit 0866ec9
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 13 deletions.
diff --git a/components/popover_list_members.jsx b/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/components/user_list_row.jsx b/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/sass/components/_modal.scss b/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/utils/utils.jsx b/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) {