diff --git a/app/actions/views/channel.js b/app/actions/views/channel.js index a20e703f9..c54908ad8 100644 --- a/app/actions/views/channel.js +++ b/app/actions/views/channel.js @@ -198,7 +198,7 @@ export function toggleDMChannel(otherUserId, visible) { const dm = [{ user_id: currentUserId, - category: Constants.CATEGORY_DIRECT_CHANNEL_SHOW, + category: Preferences.CATEGORY_DIRECT_CHANNEL_SHOW, name: otherUserId, value: visible }]; @@ -207,6 +207,22 @@ export function toggleDMChannel(otherUserId, visible) { }; } +export function toggleGMChannel(channelId, visible) { + return async (dispatch, getState) => { + const state = getState(); + const {currentUserId} = state.entities.users; + + const gm = [{ + user_id: currentUserId, + category: Preferences.CATEGORY_GROUP_CHANNEL_SHOW, + name: channelId, + value: visible + }]; + + return savePreferences(gm)(dispatch, getState); + }; +} + export function closeDMChannel(channel) { return async(dispatch, getState) => { const state = getState(); @@ -223,6 +239,35 @@ export function closeDMChannel(channel) { }; } +export function closeGMChannel(channel) { + return async(dispatch, getState) => { + const state = getState(); + + if (channel.isFavorite) { + unmarkFavorite(channel.id)(dispatch, getState); + } + + toggleGMChannel(channel.id, 'false')(dispatch, getState).then(() => { + if (channel.isCurrent) { + selectInitialChannel(state.entities.teams.currentTeamId)(dispatch, getState); + } + }); + }; +} + +export function closeDirectChannel(channel) { + return async (dispatch, getState) => { + switch (channel.type) { + case Constants.DM_CHANNEL: + return closeDMChannel(channel)(dispatch, getState); + case Constants.GM_CHANNEL: + return closeGMChannel(channel)(dispatch, getState); + } + + return null; + }; +} + export function markFavorite(channelId) { return async (dispatch, getState) => { const {currentUserId} = getState().entities.users; diff --git a/app/components/channel_drawer_list/channel_drawer_item.js b/app/components/channel_drawer_list/channel_drawer_item.js index ff9f271fa..594e9b139 100644 --- a/app/components/channel_drawer_list/channel_drawer_item.js +++ b/app/components/channel_drawer_list/channel_drawer_item.js @@ -8,13 +8,10 @@ import { Text, View } from 'react-native'; -import Icon from 'react-native-vector-icons/FontAwesome'; -import {OnlineStatus, AwayStatus, OfflineStatus} from 'app/components/status_icons'; +import ChanneIcon from 'app/components/channel_icon'; import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; -import {Constants} from 'mattermost-redux/constants'; - export default class ChannelDrawerItem extends PureComponent { static propTypes = { channel: PropTypes.object.isRequired, @@ -37,17 +34,10 @@ export default class ChannelDrawerItem extends PureComponent { const style = getStyleSheet(theme); let activeItem; - let activeIcon; - let unreadIcon; - let activeGroupBox; - let unreadGroupBox; - let activeGroup; - let unreadGroup; let activeText; let unreadText; let activeBorder; - let icon; let badge; if (mentions && !isActive) { @@ -61,17 +51,11 @@ export default class ChannelDrawerItem extends PureComponent { } if (hasUnread) { - unreadIcon = style.iconUnread; unreadText = style.textUnread; - unreadGroupBox = style.groupBoxUnread; - unreadGroup = style.groupUnread; } if (isActive) { activeItem = style.itemActive; - activeIcon = style.iconActive; - activeGroupBox = style.groupBoxActive; - activeGroup = style.groupActive; activeText = style.textActive; activeBorder = ( @@ -79,67 +63,17 @@ export default class ChannelDrawerItem extends PureComponent { ); } - if (channel.type === Constants.OPEN_CHANNEL) { - icon = ( - - ); - } else if (channel.type === Constants.PRIVATE_CHANNEL) { - icon = ( - - ); - } else if (channel.type === Constants.GM_CHANNEL) { - icon = ( - - - - {channel.display_name.split(',').length} - - - - ); - } else { - switch (channel.status) { - case Constants.ONLINE: - icon = ( - - - - ); - break; - case Constants.AWAY: - icon = ( - - - - ); - break; - default: - icon = ( - - - - ); - break; - } - } + const icon = ( + + ); return ( { backgroundColor: changeOpacity(theme.sidebarTextActiveColor, 0.1), paddingLeft: 11 }, - icon: { - color: changeOpacity(theme.sidebarText, 0.4), - fontSize: 12, - paddingRight: 12 - }, - iconActive: { - color: theme.sidebarTextActiveColor - }, - iconUnread: { - color: theme.sidebarUnreadText - }, - statusIcon: { - paddingRight: 12 - }, - groupContainer: { - paddingRight: 12 - }, - groupBox: { - alignItems: 'center', - borderWidth: 1, - borderColor: changeOpacity(theme.sidebarText, 0.4), - height: 15, - justifyContent: 'center', - width: 12 - }, - groupBoxActive: { - borderColor: theme.sidebarTextActiveColor - }, - groupBoxUnread: { - borderColor: theme.sidebarUnreadText - }, - group: { - color: changeOpacity(theme.sidebarText, 0.4), - fontSize: 10, - fontWeight: '600' - }, - groupActive: { - color: theme.sidebarTextActiveColor - }, - groupUnread: { - color: theme.sidebarUnreadText - }, text: { color: changeOpacity(theme.sidebarText, 0.4), flex: 1, diff --git a/app/components/channel_drawer_list/channel_drawer_list.js b/app/components/channel_drawer_list/channel_drawer_list.js index dcae7afb7..a69364cb3 100644 --- a/app/components/channel_drawer_list/channel_drawer_list.js +++ b/app/components/channel_drawer_list/channel_drawer_list.js @@ -5,6 +5,7 @@ import deepEqual from 'deep-equal'; import React, {PropTypes, Component} from 'react'; import { Alert, + InteractionManager, ListView, Platform, StyleSheet, @@ -26,15 +27,9 @@ import UnreadIndicator from './unread_indicator'; class ChannelDrawerList extends Component { static propTypes = { - intl: intlShape.isRequired, - currentTeam: PropTypes.object.isRequired, - currentChannel: PropTypes.object, - channels: PropTypes.object.isRequired, - channelMembers: PropTypes.object, - theme: PropTypes.object.isRequired, - onSelectChannel: PropTypes.func.isRequired, actions: PropTypes.shape({ - closeDMChannel: PropTypes.func.isRequired, + closeDirectChannel: PropTypes.func.isRequired, + closeOptionsModal: PropTypes.func.isRequired, goToCreateChannel: PropTypes.func.isRequired, leaveChannel: PropTypes.func.isRequired, markFavorite: PropTypes.func.isRequired, @@ -42,9 +37,15 @@ class ChannelDrawerList extends Component { unmarkFavorite: PropTypes.func.isRequired, showOptionsModal: PropTypes.func.isRequired, showDirectMessagesModal: PropTypes.func.isRequired, - showMoreChannelsModal: PropTypes.func.isRequired, - closeOptionsModal: PropTypes.func.isRequired - }).isRequired + showMoreChannelsModal: PropTypes.func.isRequired + }).isRequired, + channels: PropTypes.object.isRequired, + channelMembers: PropTypes.object, + currentTeam: PropTypes.object.isRequired, + currentChannel: PropTypes.object, + intl: intlShape.isRequired, + onSelectChannel: PropTypes.func.isRequired, + theme: PropTypes.object.isRequired }; static defaultProps = { @@ -124,8 +125,10 @@ class ChannelDrawerList extends Component { }; handleClose = (channel) => { + const {closeDirectChannel, closeOptionsModal} = this.props.actions; this.setState({showOptions: false}); - this.props.actions.closeDMChannel(channel); + closeDirectChannel(channel); + InteractionManager.runAfterInteractons(closeOptionsModal); }; handleLeave = (channel, term) => { @@ -156,9 +159,11 @@ class ChannelDrawerList extends Component { let open; let close; let favorite; + let term; let title; - if (channel.type === Constants.DM_CHANNEL) { + switch (channel.type) { + case Constants.DM_CHANNEL: title = formatMessage({ id: 'mobile.channel_list.modalTitle', defaultMessage: 'Select an action for the {term} {name}'}, @@ -179,13 +184,41 @@ class ChannelDrawerList extends Component { action: () => { this.handleClose(channel); }, - text: formatMessage({id: 'sidebar.removeList', defaultMessage: 'Remove from list'}), + text: formatMessage({id: 'mobile.channel_list.closeDM', defaultMessage: 'Close Direct Message'}), textStyle: { color: '#CC3239' } }; - } else { - const term = channel.type === Constants.OPEN_CHANNEL ? + break; + case Constants.GM_CHANNEL: + title = formatMessage({ + id: 'mobile.channel_list.modalTitle', + defaultMessage: 'Select an action for the {term} {name}'}, + { + name: channel.display_name, + term: formatMessage({id: 'mobile.channel_list.gm', defaultMessage: 'Group Message'}).toLowerCase() + }); + + open = { + action: () => { + this.props.actions.closeOptionsModal(); + this.onSelectChannel(channel); + }, + text: formatMessage({id: 'mobile.channel_list.openGM', defaultMessage: 'Open Group Message'}) + }; + + close = { + action: () => { + this.handleClose(channel); + }, + text: formatMessage({id: 'mobile.channel_list.closeGM', defaultMessage: 'Close Group Message'}), + textStyle: { + color: '#CC3239' + } + }; + break; + default: + term = channel.type === Constants.OPEN_CHANNEL ? formatMessage({id: 'mobile.channel_list.publicChannel', defaultMessage: 'Public Channel'}) : formatMessage({id: 'mobile.channel_list.privateChannel', defaultMessage: 'Private Channel'}); @@ -220,6 +253,7 @@ class ChannelDrawerList extends Component { } }; } + break; } if (channel.isFavorite) { diff --git a/app/components/channel_drawer_list/channel_drawer_list_container.js b/app/components/channel_drawer_list/channel_drawer_list_container.js index a3dbc24ba..9d21f29f7 100644 --- a/app/components/channel_drawer_list/channel_drawer_list_container.js +++ b/app/components/channel_drawer_list/channel_drawer_list_container.js @@ -14,7 +14,7 @@ import { } from 'app/actions/navigation'; import { - closeDMChannel, + closeDirectChannel, leaveChannel, markFavorite, unmarkFavorite @@ -31,7 +31,7 @@ function mapStateToProps(state, ownProps) { function mapDispatchToProps(dispatch) { return { actions: bindActionCreators({ - closeDMChannel, + closeDirectChannel, goToCreateChannel, leaveChannel, markFavorite, diff --git a/app/components/channel_icon.js b/app/components/channel_icon.js new file mode 100644 index 000000000..f8090cae1 --- /dev/null +++ b/app/components/channel_icon.js @@ -0,0 +1,160 @@ +// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import React, {PropTypes} from 'react'; +import { + StyleSheet, + Text, + View +} from 'react-native'; +import Icon from 'react-native-vector-icons/FontAwesome'; + +import {OnlineStatus, AwayStatus, OfflineStatus} from 'app/components/status_icons'; + +import {Constants} from 'mattermost-redux/constants'; + +import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; + +function channelIcon(props) { + const {isActive, hasUnread, membersCount, size, status, theme, type} = props; + const style = getStyleSheet(theme); + + let activeIcon; + let unreadIcon; + let activeGroupBox; + let unreadGroupBox; + let activeGroup; + let unreadGroup; + + if (hasUnread) { + unreadIcon = style.iconUnread; + unreadGroupBox = style.groupBoxUnread; + unreadGroup = style.groupUnread; + } + + if (isActive) { + activeIcon = style.iconActive; + activeGroupBox = style.groupBoxActive; + activeGroup = style.groupActive; + } + + if (type === Constants.OPEN_CHANNEL) { + return ( + + ); + } else if (type === Constants.PRIVATE_CHANNEL) { + return ( + + ); + } else if (type === Constants.GM_CHANNEL) { + return ( + + + + {membersCount} + + + + ); + } + switch (status) { + case Constants.ONLINE: + return ( + + + + ); + case Constants.AWAY: + return ( + + + + ); + default: + return ( + + + + ); + } +} + +const getStyleSheet = makeStyleSheetFromTheme((theme) => { + return StyleSheet.create({ + icon: { + color: changeOpacity(theme.sidebarText, 0.4), + paddingRight: 12 + }, + iconActive: { + color: theme.sidebarTextActiveColor + }, + iconUnread: { + color: theme.sidebarUnreadText + }, + statusIcon: { + paddingRight: 12 + }, + groupContainer: { + paddingRight: 12 + }, + groupBox: { + alignItems: 'center', + borderWidth: 1, + borderColor: changeOpacity(theme.sidebarText, 0.4), + justifyContent: 'center' + }, + groupBoxActive: { + borderColor: theme.sidebarTextActiveColor + }, + groupBoxUnread: { + borderColor: theme.sidebarUnreadText + }, + group: { + color: changeOpacity(theme.sidebarText, 0.4), + fontSize: 10, + fontWeight: '600' + }, + groupActive: { + color: theme.sidebarTextActiveColor + }, + groupUnread: { + color: theme.sidebarUnreadText + } + }); +}); + +channelIcon.propTypes = { + isActive: PropTypes.bool, + hasUnread: PropTypes.bool, + membersCount: PropTypes.number, + size: PropTypes.number, + status: PropTypes.string, + theme: PropTypes.object.isRequired, + type: PropTypes.string.isRequired +}; + +channelIcon.defaultProps = { + isActive: false, + hasUnread: false, + size: 12 +}; + +export default channelIcon; diff --git a/app/scenes/channel_info/channel_info.js b/app/scenes/channel_info/channel_info.js index d75655293..83d75596d 100644 --- a/app/scenes/channel_info/channel_info.js +++ b/app/scenes/channel_info/channel_info.js @@ -11,43 +11,12 @@ import { } from 'react-native'; import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; + import {Constants} from 'mattermost-redux/constants'; import ChannelInfoHeader from './channel_info_header'; import ChannelInfoRow from './channel_info_row'; -const getStyleSheet = makeStyleSheetFromTheme((theme) => { - return StyleSheet.create({ - container: { - flex: 1, - backgroundColor: theme.centerChannelBg - }, - footer: { - marginTop: 40, - borderTopWidth: 1, - borderBottomWidth: 1, - borderTopColor: changeOpacity(theme.centerChannelColor, 0.1), - borderBottomColor: changeOpacity(theme.centerChannelColor, 0.1) - }, - rowsContainer: { - borderTopWidth: 1, - borderBottomWidth: 1, - borderTopColor: changeOpacity(theme.centerChannelColor, 0.1), - borderBottomColor: changeOpacity(theme.centerChannelColor, 0.1), - backgroundColor: theme.centerChannelBg - }, - separator: { - marginHorizontal: 15, - height: 1, - backgroundColor: changeOpacity(theme.centerChannelColor, 0.1) - }, - scrollView: { - flex: 1, - backgroundColor: changeOpacity(theme.centerChannelColor, 0.03) - } - }); -}); - class ChannelInfo extends PureComponent { static propTypes = { intl: intlShape.isRequired, @@ -55,19 +24,23 @@ class ChannelInfo extends PureComponent { currentChannel: PropTypes.object.isRequired, currentChannelCreatorName: PropTypes.string, currentChannelMemberCount: PropTypes.number, + status: PropTypes.string, theme: PropTypes.object.isRequired, + isCurrent: PropTypes.bool.isRequired, isFavorite: PropTypes.bool.isRequired, leaveChannelRequest: PropTypes.object.isRequired, canManageUsers: PropTypes.bool.isRequired, actions: PropTypes.shape({ + closeDMChannel: PropTypes.func.isRequired, + closeGMChannel: PropTypes.func.isRequired, + deleteChannel: PropTypes.func.isRequired, getChannelStats: PropTypes.func.isRequired, - goToChannelMembers: PropTypes.func.isRequired, goBack: PropTypes.func.isRequired, goToChannelAddMembers: PropTypes.func.isRequired, - markFavorite: PropTypes.func.isRequired, - unmarkFavorite: PropTypes.func.isRequired, + goToChannelMembers: PropTypes.func.isRequired, leaveChannel: PropTypes.func.isRequired, - deleteChannel: PropTypes.func.isRequired + markFavorite: PropTypes.func.isRequired, + unmarkFavorite: PropTypes.func.isRequired }) }; @@ -145,11 +118,36 @@ class ChannelInfo extends PureComponent { ); } + handleClose = () => { + const {currentChannel, isCurrent, isFavorite} = this.props; + const channel = Object.assign({}, currentChannel, {isCurrent}, {isFavorite}); + const {closeDMChannel, closeGMChannel, goBack} = this.props.actions; + + switch (channel.type) { + case Constants.DM_CHANNEL: + closeDMChannel(channel).then(goBack); + break; + case Constants.GM_CHANNEL: + closeGMChannel(channel).then(goBack); + break; + } + }; + renderLeaveOrDeleteChannelRow() { const channel = this.props.currentChannel; const isDefaultChannel = channel.name === Constants.DEFAULT_CHANNEL; const isDirectMessage = channel.type === Constants.DM_CHANNEL; - return !isDefaultChannel && !isDirectMessage; + const isGroupMessage = channel.type === Constants.GM_CHANNEL; + + return !isDefaultChannel && !isDirectMessage && !isGroupMessage; + } + + renderCloseDirect() { + const channel = this.props.currentChannel; + const isDirectMessage = channel.type === Constants.DM_CHANNEL; + const isGroupMessage = channel.type === Constants.GM_CHANNEL; + + return isDirectMessage || isGroupMessage; } render() { @@ -163,6 +161,19 @@ class ChannelInfo extends PureComponent { const style = getStyleSheet(theme); + let i18nId; + let defaultMessage; + switch (currentChannel.type) { + case Constants.DM_CHANNEL: + i18nId = 'mobile.channel_list.closeDM'; + defaultMessage = 'Close Direct Message'; + break; + case Constants.GM_CHANNEL: + i18nId = 'mobile.channel_list.closeGM'; + defaultMessage = 'Close Group Message'; + break; + } + return ( this.handleDeleteOrLeave('delete')} defaultMessage='Delete Channel' icon='trash' - iconColor='#DA4A4A' + iconColor='#CA3B27' textId='mobile.routes.channelInfo.delete_channel' - textColor='#DA4A4A' + textColor='#CA3B27' theme={theme} /> } + {this.renderCloseDirect() && + + + + } ); } } +const getStyleSheet = makeStyleSheetFromTheme((theme) => { + return StyleSheet.create({ + container: { + flex: 1, + backgroundColor: theme.centerChannelBg + }, + scrollView: { + flex: 1, + backgroundColor: changeOpacity(theme.centerChannelColor, 0.03) + }, + footer: { + marginTop: 40, + borderTopWidth: 1, + borderBottomWidth: 1, + borderTopColor: changeOpacity(theme.centerChannelColor, 0.1), + borderBottomColor: changeOpacity(theme.centerChannelColor, 0.1) + }, + rowsContainer: { + borderTopWidth: 1, + borderBottomWidth: 1, + borderTopColor: changeOpacity(theme.centerChannelColor, 0.1), + borderBottomColor: changeOpacity(theme.centerChannelColor, 0.1), + backgroundColor: theme.centerChannelBg + }, + separator: { + marginHorizontal: 15, + height: 1, + backgroundColor: changeOpacity(theme.centerChannelColor, 0.1) + } + }); +}); + export default injectIntl(ChannelInfo); diff --git a/app/scenes/channel_info/channel_info_container.js b/app/scenes/channel_info/channel_info_container.js index bcedacda4..0e5fd5c9f 100644 --- a/app/scenes/channel_info/channel_info_container.js +++ b/app/scenes/channel_info/channel_info_container.js @@ -3,14 +3,27 @@ import {bindActionCreators} from 'redux'; -import navigationSceneConnect from '../navigationSceneConnect'; - import {goToChannelMembers, goToChannelAddMembers, goBack} from 'app/actions/navigation'; -import {getChannelStats, deleteChannel} from 'mattermost-redux/actions/channels'; -import {markFavorite, unmarkFavorite, leaveChannel} from 'app/actions/views/channel'; -import {getCurrentChannel, getCurrentChannelStats, getChannelsByCategory, canManageChannelMembers} from 'mattermost-redux/selectors/entities/channels'; +import { + closeDMChannel, + closeGMChannel, + leaveChannel, + markFavorite, + unmarkFavorite +} from 'app/actions/views/channel'; +import navigationSceneConnect from 'app/scenes/navigationSceneConnect'; import {getTheme} from 'app/selectors/preferences'; -import {getUser} from 'mattermost-redux/selectors/entities/users'; + +import {getChannelStats, deleteChannel} from 'mattermost-redux/actions/channels'; +import {Constants} from 'mattermost-redux/constants'; +import { + getCurrentChannel, + getCurrentChannelStats, + getChannelsByCategory, + canManageChannelMembers +} from 'mattermost-redux/selectors/entities/channels'; +import {getCurrentUserId, getUser, getStatusForUserId} from 'mattermost-redux/selectors/entities/users'; +import {getUserIdFromChannelName} from 'mattermost-redux/utils/channel_utils'; import ChannelInfo from './channel_info'; @@ -19,18 +32,28 @@ function mapStateToProps(state, ownProps) { const currentChannelCreator = getUser(state, currentChannel.creator_id); const currentChannelCreatorName = currentChannelCreator && currentChannelCreator.username; const currentChannelMemberCount = getCurrentChannelStats(state) && getCurrentChannelStats(state).member_count; + const currentUserId = getCurrentUserId(state); const favoriteChannels = getChannelsByCategory(state).favoriteChannels.map((f) => f.id); + const isCurrent = currentChannel.id === state.entities.channels.currentChannelId; const isFavorite = favoriteChannels.indexOf(currentChannel.id) > -1; const leaveChannelRequest = state.requests.channels.leaveChannel; + let status; + if (currentChannel.type === Constants.DM_CHANNEL) { + const teammateId = getUserIdFromChannelName(currentUserId, currentChannel.name); + status = getStatusForUserId(state, teammateId); + } + return { ...ownProps, currentTeamId: state.entities.teams.currentTeamId, currentChannel, currentChannelCreatorName, currentChannelMemberCount, + isCurrent, isFavorite, leaveChannelRequest, + status, theme: getTheme(state), canManageUsers: canManageChannelMembers(state) }; @@ -39,14 +62,16 @@ function mapStateToProps(state, ownProps) { function mapDispatchToProps(dispatch) { return { actions: bindActionCreators({ - getChannelStats, - goToChannelMembers, - goToChannelAddMembers, - markFavorite, - unmarkFavorite, - leaveChannel, + closeDMChannel, + closeGMChannel, deleteChannel, - goBack + getChannelStats, + goBack, + goToChannelAddMembers, + goToChannelMembers, + leaveChannel, + markFavorite, + unmarkFavorite }, dispatch) }; } diff --git a/app/scenes/channel_info/channel_info_header.js b/app/scenes/channel_info/channel_info_header.js index b2d1016e8..34c435ecd 100644 --- a/app/scenes/channel_info/channel_info_header.js +++ b/app/scenes/channel_info/channel_info_header.js @@ -7,69 +7,35 @@ import { Text, View } from 'react-native'; -import Icon from 'react-native-vector-icons/FontAwesome'; +import ChanneIcon from 'app/components/channel_icon'; import FormattedDate from 'app/components/formatted_date'; import FormattedText from 'app/components/formatted_text'; import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; -const getStyleSheet = makeStyleSheetFromTheme((theme) => { - return StyleSheet.create({ - container: { - backgroundColor: theme.centerChannelBg, - marginBottom: 40, - padding: 15, - borderBottomWidth: 1, - borderBottomColor: changeOpacity(theme.centerChannelColor, 0.1) - }, - channelName: { - marginLeft: 5, - fontSize: 15, - fontWeight: '600', - color: theme.centerChannelColor - }, - channelNameContainer: { - flexDirection: 'row', - alignItems: 'center', - paddingBottom: 10 - }, - createdBy: { - flexDirection: 'row', - fontSize: 11, - marginTop: 5, - color: changeOpacity(theme.centerChannelColor, 0.5), - backgroundColor: 'transparent' - }, - detail: { - fontSize: 13, - color: theme.centerChannelColor - }, - header: { - fontSize: 12, - marginBottom: 10, - color: theme.centerChannelColor, - backgroundColor: 'transparent' - }, - section: { - marginTop: 15 - } - }); -}); - function channelInfoHeader(props) { - const {createAt, creator, displayName, header, purpose, theme} = props; + const {createAt, creator, displayName, header, memberCount, purpose, status, theme, type} = props; const style = getStyleSheet(theme); return ( - - {displayName} + + {displayName} + {purpose.length > 0 && @@ -115,10 +81,56 @@ function channelInfoHeader(props) { channelInfoHeader.propTypes = { createAt: PropTypes.number.isRequired, creator: PropTypes.string, + memberCount: PropTypes.number, displayName: PropTypes.string.isRequired, header: PropTypes.string, purpose: PropTypes.string, - theme: PropTypes.object.isRequired + status: PropTypes.string, + theme: PropTypes.object.isRequired, + type: PropTypes.string.isRequired }; +const getStyleSheet = makeStyleSheetFromTheme((theme) => { + return StyleSheet.create({ + container: { + backgroundColor: theme.centerChannelBg, + marginBottom: 40, + padding: 15, + borderBottomWidth: 1, + borderBottomColor: changeOpacity(theme.centerChannelColor, 0.1) + }, + channelName: { + flex: 1, + fontSize: 15, + fontWeight: '600', + color: theme.centerChannelColor + }, + channelNameContainer: { + flexDirection: 'row', + alignItems: 'center', + paddingBottom: 10 + }, + createdBy: { + flexDirection: 'row', + fontSize: 11, + marginTop: 5, + color: changeOpacity(theme.centerChannelColor, 0.5), + backgroundColor: 'transparent' + }, + detail: { + fontSize: 13, + color: theme.centerChannelColor + }, + header: { + fontSize: 12, + marginBottom: 10, + color: theme.centerChannelColor, + backgroundColor: 'transparent' + }, + section: { + marginTop: 15 + } + }); +}); + export default channelInfoHeader; diff --git a/assets/base/i18n/en.json b/assets/base/i18n/en.json index 4d7ea2f63..7ece6449f 100644 --- a/assets/base/i18n/en.json +++ b/assets/base/i18n/en.json @@ -1503,9 +1503,13 @@ "mobile.channel_list.alertMessageLeaveChannel": "Are you sure you want to leave the {term} with {name}?", "mobile.channel_list.alertNo": "No", "mobile.channel_list.alertYes": "Yes", + "mobile.channel_list.closeDM": "Close Direct Message", + "mobile.channel_list.closeGM": "Close Group Message", "mobile.channel_list.open": "Open {term}", "mobile.channel_list.openDM": "Open Direct Message", + "mobile.channel_list.openGM": "Open Group Message", "mobile.channel_list.dm": "Direct Message", + "mobile.channel_list.gm": "Group Message", "mobile.channel_list.privateChannel": "Private Channel", "mobile.channel_list.publicChannel": "Public Channel", "mobile.components.channels_list_view.yourChannels": "Your channels:", diff --git a/package.json b/package.json index ed7cec21d..b8b1e8d94 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "harmony-reflect": "1.5.1", "intl": "1.2.5", "isomorphic-fetch": "2.2.1", - "mattermost-redux": "mattermost/mattermost-redux#release-3.7", + "mattermost-redux": "mattermost/mattermost-redux#957b27015b46538c707f534c24e750e5d1d1e517", "react": "15.4.1", "react-addons-pure-render-mixin": "15.4.1", "react-intl": "2.2.2",