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

PLT-946 Add status icon to the left of the username in DM channel (#3258)

Browse Source 
Add a StatusIcon component to be able to display a status icon from anywhere
This commit is contained in:
Kevyn Bruyere
2016-06-15 14:30:32 +02:00
committed by Christopher Speller
parent dbcf8572e5
commit d6fdd93679
9 changed files with 126 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
webapp/components/channel_header.jsx
View File

@@ -15,6 +15,7 @@ import ChannelNotificationsModal from './channel_notifications_modal.jsx';
import DeleteChannelModal from './delete_channel_modal.jsx';
import RenameChannelModal from './rename_channel_modal.jsx';
import ToggleModalButton from './toggle_modal_button.jsx';
import StatusIcon from './status_icon.jsx';
import ChannelStore from 'stores/channel_store.jsx';
import UserStore from 'stores/user_store.jsx';
@@ -82,6 +83,7 @@ export default class ChannelHeader extends React.Component {
SearchStore.addSearchChangeListener(this.onListenerChange);
PreferenceStore.addChangeListener(this.onListenerChange);
UserStore.addChangeListener(this.onListenerChange);
UserStore.addStatusesChangeListener(this.onListenerChange);
$('.sidebar--left .dropdown-menu').perfectScrollbar();
document.addEventListener('keydown', this.openRecentMentions);
}
@@ -91,6 +93,7 @@ export default class ChannelHeader extends React.Component {
SearchStore.removeSearchChangeListener(this.onListenerChange);
PreferenceStore.removeChangeListener(this.onListenerChange);
UserStore.removeChangeListener(this.onListenerChange);
UserStore.removeStatusesChangeListener(this.onListenerChange);
document.removeEventListener('keydown', this.openRecentMentions);
}
onListenerChange() {
@@ -157,6 +160,21 @@ export default class ChannelHeader extends React.Component {
showRenameChannelModal: false
});
}
getTeammateStatus() {
const channel = this.state.channel;
// get status for direct message channels
if (channel.type === 'D') {
const currentUserId = this.state.currentUser.id;
const teammate = this.state.users.find((user) => user.id !== currentUserId);
if (teammate) {
return UserStore.getStatus(teammate.id);
}
}
return null;
}
render() {
if (!this.validState()) {
return null;
@@ -173,7 +191,7 @@ export default class ChannelHeader extends React.Component {
);
const popoverContent = (
<Popover
id='hader-popover'
id='header-popover'
bStyle='info'
bSize='large'
placement='bottom'
@@ -459,7 +477,7 @@ export default class ChannelHeader extends React.Component {
data-toggle='dropdown'
aria-expanded='true'
>
<strong className='heading'>{channelTitle} </strong>
<strong className='heading'><StatusIcon status={this.getTeammateStatus()}/>{channelTitle} </strong>
<span className='glyphicon glyphicon-chevron-down header-dropdown__icon'/>
</a>
<ul

20
webapp/components/navbar.jsx
View File

@@ -13,6 +13,7 @@ import ChannelNotificationsModal from './channel_notifications_modal.jsx';
import DeleteChannelModal from './delete_channel_modal.jsx';
import RenameChannelModal from './rename_channel_modal.jsx';
import ToggleModalButton from './toggle_modal_button.jsx';
import StatusIcon from './status_icon.jsx';
import UserStore from 'stores/user_store.jsx';
import ChannelStore from 'stores/channel_store.jsx';
@@ -77,12 +78,14 @@ export default class Navbar extends React.Component {
componentDidMount() {
ChannelStore.addChangeListener(this.onChange);
ChannelStore.addExtraInfoChangeListener(this.onChange);
UserStore.addStatusesChangeListener(this.onChange);
$('.inner-wrap').click(this.hideSidebars);
document.addEventListener('keydown', this.showChannelSwitchModal);
}
componentWillUnmount() {
ChannelStore.removeChangeListener(this.onChange);
ChannelStore.removeExtraInfoChangeListener(this.onChange);
UserStore.removeStatusesChangeListener(this.onChange);
document.removeEventListener('keydown', this.showChannelSwitchModal);
}
handleSubmit(e) {
@@ -352,7 +355,7 @@ export default class Navbar extends React.Component {
data-toggle='dropdown'
aria-expanded='true'
>
<span className='heading'>{channelTitle} </span>
<span className='heading'><StatusIcon status={this.getTeammateStatus()}/>{channelTitle} </span>
<span className='glyphicon glyphicon-chevron-down header-dropdown__icon'></span>
</a>
<ul
@@ -446,6 +449,21 @@ export default class Navbar extends React.Component {
return buttons;
}
getTeammateStatus() {
const channel = this.state.channel;
// get status for direct message channels
if (channel.type === 'D') {
const currentUserId = this.state.currentUser.id;
const teammate = this.state.users.find((user) => user.id !== currentUserId);
if (teammate) {
return UserStore.getStatus(teammate.id);
}
}
return null;
}
render() {
if (!this.isStateValid()) {
return null;

24
webapp/components/sidebar.jsx
View File

@@ -8,6 +8,7 @@ import MoreDirectChannels from './more_direct_channels.jsx';
import SidebarHeader from './sidebar_header.jsx';
import UnreadChannelIndicator from './unread_channel_indicator.jsx';
import TutorialTip from './tutorial/tutorial_tip.jsx';
import StatusIcon from './status_icon.jsx';
import ChannelStore from 'stores/channel_store.jsx';
import UserStore from 'stores/user_store.jsx';
@@ -503,30 +504,14 @@ export default class Sidebar extends React.Component {
rowClass += ' has-badge';
}
// set up status icon for direct message channels
var status = null;
if (channel.type === 'D') {
var statusIcon = '';
if (channel.status === 'online') {
statusIcon = Constants.ONLINE_ICON_SVG;
} else if (channel.status === 'away') {
statusIcon = Constants.AWAY_ICON_SVG;
} else {
statusIcon = Constants.OFFLINE_ICON_SVG;
}
status = (
<span
className='status'
dangerouslySetInnerHTML={{__html: statusIcon}}
/>
);
}
var icon = null;
if (channel.type === 'O') {
icon = <div className='status'><i className='fa fa-globe'></i></div>;
} else if (channel.type === 'P') {
icon = <div className='status'><i className='fa fa-lock'></i></div>;
} else {
// set up status icon for direct message channels (status is null for other channel types)
icon = <StatusIcon status={channel.status}/>;
}
let closeButton = null;
@@ -581,7 +566,6 @@ export default class Sidebar extends React.Component {
className={rowClass}
>
{icon}
{status}
{channel.display_name}
{badge}
{closeButton}

37
webapp/components/status_icon.jsx Normal file
View File

@@ -0,0 +1,37 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import Constants from 'utils/constants.jsx';
import React from 'react';
export default class StatusIcon extends React.Component {
render() {
const status = this.props.status;
if (!status) {
return null;
}
let statusIcon = '';
if (status === 'online') {
statusIcon = Constants.ONLINE_ICON_SVG;
} else if (status === 'away') {
statusIcon = Constants.AWAY_ICON_SVG;
} else {
statusIcon = Constants.OFFLINE_ICON_SVG;
}
return (
<span
className='status'
dangerouslySetInnerHTML={{__html: statusIcon}}
/>
);
}
}
StatusIcon.propTypes = {
status: React.PropTypes.string.isRequired
};

33
webapp/sass/components/_status-icon.scss Normal file
View File

@@ -0,0 +1,33 @@
@charset 'UTF-8';
.status {
display: inline-block;
margin-right: 6px;
position: relative;
top: 1px;
width: 12px;
svg {
max-height: 14px;
}
i,
path,
ellipse {
@include opacity(.5);
&.online--icon,
&.away--icon {
@include opacity(1);
}
}
.fa-lock {
margin-left: 1px;
}
.fa-globe {
position: relative;
top: -1px;
}
}

2
webapp/sass/layout/_headers.scss
View File

@@ -144,6 +144,8 @@
white-space: normal;
}
}
@import "../components/status-icon";
}
.channel-intro {

34
webapp/sass/layout/_sidebar-left.scss
View File

@@ -60,38 +60,6 @@
top: 5px;
}
.status {
display: inline-block;
margin-right: 6px;
position: relative;
top: 1px;
width: 12px;
svg {
max-height: 14px;
}
i,
path,
ellipse {
@include opacity(.5);
&.online--icon,
&.away--icon {
@include opacity(1);
}
}
.fa-lock {
margin-left: 1px;
}
.fa-globe {
position: relative;
top: -1px;
}
}
.nav-pills__container {
-webkit-overflow-scrolling: touch;
height: calc(100% - 80px);
@@ -234,6 +202,8 @@
color: #666666;
}
}
@import "../components/status-icon";
}
.channel-loading-gif {

2
webapp/sass/responsive/_mobile.scss
View File

@@ -590,6 +590,8 @@
.navbar-brand {
white-space: nowrap;
@import "../components/status-icon";
}
}
}

8
webapp/utils/utils.jsx
View File

@@ -521,7 +521,7 @@ export function applyTheme(theme) {
changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a', 'color:' + theme.sidebarText, 1);
changeCss('.app__body .sidebar--left .nav-pills__container li>h4, .app__body .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.6), 1);
changeCss('.app__body .sidebar--left .add-channel-btn:hover, .app__body .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText, 1);
changeCss('.app__body .sidebar--left .status .offline--icon, .app__body .sidebar--left .status .offline--icon', 'fill:' + theme.sidebarText, 1);
changeCss('.app__body .sidebar--left .status .offline--icon', 'fill:' + theme.sidebarText, 1);
changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a', 'border-color:' + changeOpacity(theme.sidebarText, 0.2), 2);
}
@@ -566,10 +566,14 @@ export function applyTheme(theme) {
if (theme.onlineIndicator) {
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);
}
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);
}
if (theme.mentionBj) {
@@ -659,6 +663,8 @@ export function applyTheme(theme) {
changeCss('.app__body .post.post--comment .post__body', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
changeCss('@media(min-width: 768px){.app__body .post.post--compact.same--root.post--comment .post__content', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
changeCss('.app__body .post.post--comment.current--user .post__body', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
changeCss('.app__body .channel-header__info .status .offline--icon', 'fill:' + theme.centerChannelColor, 1);
changeCss('.app__body .navbar .status .offline--icon', 'fill:' + theme.centerChannelColor, 1);
}
if (theme.newMessageSeparator) {