diff options
-rw-r--r-- | webapp/components/popover_list_members.jsx | 18 | ||||
-rw-r--r-- | webapp/components/user_list_row.jsx | 19 | ||||
-rw-r--r-- | webapp/sass/components/_modal.scss | 23 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 2 |
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) { |