IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Online status in all modals (#3617)

Browse Source 
* 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
This commit is contained in:
samogot
2016-07-30 03:54:42 +09:00
committed by Christopher Speller
parent c084c4ae4d
commit 748fdef1fb
4 changed files with 49 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
webapp/components/popover_list_members.jsx
View File

@@ -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'

19
webapp/components/user_list_row.jsx
View File

@@ -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'
>

23
webapp/sass/components/_modal.scss
View File

@@ -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 {

2
webapp/utils/utils.jsx
View File

@@ -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) {