diff options
Diffstat (limited to 'web/react')
81 files changed, 2158 insertions, 1592 deletions
diff --git a/web/react/.eslintrc b/web/react/.eslintrc index 935bb638a..baaf7eaa5 100644 --- a/web/react/.eslintrc +++ b/web/react/.eslintrc @@ -47,7 +47,7 @@ "no-irregular-whitespace": 2, "no-unexpected-multiline": 2, "no-unreachable": 2, - "no-magic-numbers": [1, { "enforceConst": true, "detectObjects": true } ], + "no-magic-numbers": [1, { "ignore": [-1, 0, 1, 2], "enforceConst": true, "detectObjects": true } ], "valid-typeof": 2, "block-scoped-var": 2, diff --git a/web/react/components/access_history_modal.jsx b/web/react/components/access_history_modal.jsx index 165d32339..85c28ca5c 100644 --- a/web/react/components/access_history_modal.jsx +++ b/web/react/components/access_history_modal.jsx @@ -32,9 +32,11 @@ export default class AccessHistoryModal extends React.Component { onShow() { AsyncClient.getAudits(); - $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300); if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200); + } else { + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150); } } onHide() { diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx index 869d648d2..f5341c0bc 100644 --- a/web/react/components/activity_log_modal.jsx +++ b/web/react/components/activity_log_modal.jsx @@ -51,9 +51,11 @@ export default class ActivityLogModal extends React.Component { onShow() { AsyncClient.getSessions(); - $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300); if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200); + } else { + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150); } } onHide() { diff --git a/web/react/components/admin_console/admin_sidebar.jsx b/web/react/components/admin_console/admin_sidebar.jsx index 1054d4290..d2255ad59 100644 --- a/web/react/components/admin_console/admin_sidebar.jsx +++ b/web/react/components/admin_console/admin_sidebar.jsx @@ -5,6 +5,9 @@ import AdminSidebarHeader from './admin_sidebar_header.jsx'; import SelectTeamModal from './select_team_modal.jsx'; import * as Utils from '../../utils/utils.jsx'; +const Tooltip = ReactBootstrap.Tooltip; +const OverlayTrigger = ReactBootstrap.OverlayTrigger; + export default class AdminSidebar extends React.Component { constructor(props) { super(props); @@ -80,6 +83,12 @@ export default class AdminSidebar extends React.Component { render() { var count = '*'; var teams = 'Loading'; + const removeTooltip = ( + <Tooltip id='remove-team-tooltip'>{'Remove team from sidebar menu'}</Tooltip> + ); + const addTeamTooltip = ( + <Tooltip id='add-team-tooltip'>{'Add team from sidebar menu'}</Tooltip> + ); if (this.props.teams != null) { count = '' + Object.keys(this.props.teams).length; @@ -102,14 +111,19 @@ export default class AdminSidebar extends React.Component { className={'nav__sub-menu-item ' + this.isSelected('team_users', team.id)} > {team.name} + <OverlayTrigger + delayShow={1000} + placement='top' + overlay={removeTooltip} + > <span className='menu-icon--right menu__close' onClick={this.removeTeam.bind(this, team.id)} style={{cursor: 'pointer'}} - title='Remove team from sidebar menu' > - {'x'} + {'×'} </span> + </OverlayTrigger> </a> </li> <li> @@ -254,15 +268,20 @@ export default class AdminSidebar extends React.Component { <span className='icon fa fa-gear'></span> <span>{'TEAMS (' + count + ')'}</span> <span className='menu-icon--right'> + <OverlayTrigger + delayShow={1000} + placement='top' + overlay={addTeamTooltip} + > <a href='#' onClick={this.showTeamSelect} > <i className='fa fa-plus' - title='Add team to sidebar menu' ></i> </a> + </OverlayTrigger> </span> </h4> </li> diff --git a/web/react/components/admin_console/select_team_modal.jsx b/web/react/components/admin_console/select_team_modal.jsx index 22189821b..858b6bbfe 100644 --- a/web/react/components/admin_console/select_team_modal.jsx +++ b/web/react/components/admin_console/select_team_modal.jsx @@ -57,7 +57,7 @@ export default class SelectTeamModal extends React.Component { <select ref='team' size='10' - style={{width: '100%'}} + className='form-control' > {options} </select> diff --git a/web/react/components/admin_console/team_analytics.jsx b/web/react/components/admin_console/team_analytics.jsx index 6c8e63c83..e28699d3c 100644 --- a/web/react/components/admin_console/team_analytics.jsx +++ b/web/react/components/admin_console/team_analytics.jsx @@ -221,7 +221,7 @@ export default class TeamAnalytics extends React.Component { var openChannelCount = ( <div className='col-sm-3'> <div className='total-count'> - <div className='title'>{'Public Groups'}<i className='fa fa-unlock-alt'/></div> + <div className='title'>{'Public Channels'}<i className='fa fa-globe'/></div> <div className='content'>{this.state.channel_open_count == null ? 'Loading...' : this.state.channel_open_count}</div> </div> </div> diff --git a/web/react/components/admin_console/user_item.jsx b/web/react/components/admin_console/user_item.jsx index bd64564c9..ef0b61460 100644 --- a/web/react/components/admin_console/user_item.jsx +++ b/web/react/components/admin_console/user_item.jsx @@ -227,7 +227,6 @@ export default class UserItem extends React.Component { href='#' className='dropdown-toggle theme' type='button' - id='channel_header_dropdown' data-toggle='dropdown' aria-expanded='true' > @@ -237,7 +236,6 @@ export default class UserItem extends React.Component { <ul className='dropdown-menu member-menu' role='menu' - aria-labelledby='channel_header_dropdown' > {makeAdmin} {makeMember} diff --git a/web/react/components/center_panel.jsx b/web/react/components/center_panel.jsx index 3c6a36ad4..a1043431d 100644 --- a/web/react/components/center_panel.jsx +++ b/web/react/components/center_panel.jsx @@ -13,6 +13,8 @@ import PreferenceStore from '../stores/preference_store.jsx'; import ChannelStore from '../stores/channel_store.jsx'; import UserStore from '../stores/user_store.jsx'; +import * as Utils from '../utils/utils.jsx'; + import Constants from '../utils/constants.jsx'; const TutorialSteps = Constants.TutorialSteps; const Preferences = Constants.Preferences; @@ -46,6 +48,8 @@ export default class CenterPanel extends React.Component { this.setState({showPostFocus: ChannelStore.getPostMode() === ChannelStore.POST_MODE_FOCUS}); } render() { + const channel = ChannelStore.getCurrent(); + var handleClick = null; let postsContainer; let createPost; if (this.state.showTutorialScreens) { @@ -53,7 +57,25 @@ export default class CenterPanel extends React.Component { createPost = null; } else if (this.state.showPostFocus) { postsContainer = <PostFocusView />; - createPost = null; + + handleClick = function clickHandler(e) { + e.preventDefault(); + Utils.switchChannel(channel); + }; + + createPost = ( + <div + id='archive-link-home' + > + <a + href='' + onClick={handleClick} + > + {'You are viewing the Archives. Click here to jump to recent messages. '} + {<i className='fa fa-arrow-down'></i>} + </a> + </div> + ); } else { postsContainer = <PostsViewContainer />; createPost = ( diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx index 08c4a48ea..59ceb038e 100644 --- a/web/react/components/channel_header.jsx +++ b/web/react/components/channel_header.jsx @@ -40,7 +40,6 @@ export default class ChannelHeader extends React.Component { const state = this.getStateFromStores(); state.showEditChannelPurposeModal = false; - state.showInviteModal = false; state.showMembersModal = false; this.state = state; } @@ -102,9 +101,9 @@ export default class ChannelHeader extends React.Component { if (user.notify_props && user.notify_props.mention_keys) { const termKeys = UserStore.getCurrentMentionKeys(); - // if (user.notify_props.all === 'true' && termKeys.indexOf('@all') !== -1) { - // termKeys.splice(termKeys.indexOf('@all'), 1); - // } + if (user.notify_props.all === 'true' && termKeys.indexOf('@all') !== -1) { + termKeys.splice(termKeys.indexOf('@all'), 1); + } if (user.notify_props.channel === 'true' && termKeys.indexOf('@channel') !== -1) { termKeys.splice(termKeys.indexOf('@channel'), 1); @@ -201,13 +200,13 @@ export default class ChannelHeader extends React.Component { key='add_members' role='presentation' > - <a + <ToggleModalButton role='menuitem' - href='#' - onClick={() => this.setState({showInviteModal: true})} + dialogType={ChannelInviteModal} + dialogProps={{channel}} > {'Add Members'} - </a> + </ToggleModalButton> </li> ); @@ -402,13 +401,10 @@ export default class ChannelHeader extends React.Component { onModalDismissed={() => this.setState({showEditChannelPurposeModal: false})} channel={channel} /> - <ChannelInviteModal - show={this.state.showInviteModal} - onModalDismissed={() => this.setState({showInviteModal: false})} - /> <ChannelMembersModal show={this.state.showMembersModal} onModalDismissed={() => this.setState({showMembersModal: false})} + channel={channel} /> </div> ); diff --git a/web/react/components/channel_invite_modal.jsx b/web/react/components/channel_invite_modal.jsx index 0518ccb86..7dac39942 100644 --- a/web/react/components/channel_invite_modal.jsx +++ b/web/react/components/channel_invite_modal.jsx @@ -53,21 +53,17 @@ export default class ChannelInviteModal extends React.Component { return a.username.localeCompare(b.username); }); - var channelName = ''; - if (ChannelStore.getCurrent()) { - channelName = ChannelStore.getCurrent().display_name; - } - return { nonmembers, - memberIds, - channelName, loading }; } onShow() { if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200); + } else { + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150); } } componentDidUpdate(prevProps) { @@ -94,28 +90,14 @@ export default class ChannelInviteModal extends React.Component { } } handleInvite(userId) { - // Make sure the user isn't already a member of the channel - if (this.state.memberIds.indexOf(userId) > -1) { - return; - } - var data = {}; data.user_id = userId; - Client.addChannelMember(ChannelStore.getCurrentId(), data, + Client.addChannelMember( + this.props.channel.id, + data, () => { - var nonmembers = this.state.nonmembers; - var memberIds = this.state.memberIds; - - for (var i = 0; i < nonmembers.length; i++) { - if (userId === nonmembers[i].id) { - nonmembers[i].invited = true; - memberIds.push(userId); - break; - } - } - - this.setState({inviteError: null, memberIds, nonmembers}); + this.setState({inviteError: null}); AsyncClient.getChannelExtraInfo(); }, (err) => { @@ -124,11 +106,6 @@ export default class ChannelInviteModal extends React.Component { ); } render() { - var maxHeight = 1000; - if (Utils.windowHeight() <= 1200) { - maxHeight = Utils.windowHeight() - 300; - } - var inviteError = null; if (this.state.inviteError) { inviteError = (<label className='has-error control-label'>{this.state.inviteError}</label>); @@ -157,14 +134,13 @@ export default class ChannelInviteModal extends React.Component { <Modal dialogClassName='more-modal' show={this.props.show} - onHide={this.props.onModalDismissed} + onHide={this.props.onHide} > <Modal.Header closeButton={true}> - <Modal.Title>{'Add New Members to '}<span className='name'>{this.state.channelName}</span></Modal.Title> + <Modal.Title>{'Add New Members to '}<span className='name'>{this.props.channel.display_name}</span></Modal.Title> </Modal.Header> <Modal.Body ref='modalBody' - style={{maxHeight}} > {inviteError} {content} @@ -173,7 +149,7 @@ export default class ChannelInviteModal extends React.Component { <button type='button' className='btn btn-default' - onClick={this.props.onModalDismissed} + onClick={this.props.onHide} > {'Close'} </button> @@ -185,5 +161,6 @@ export default class ChannelInviteModal extends React.Component { ChannelInviteModal.propTypes = { show: React.PropTypes.bool.isRequired, - onModalDismissed: React.PropTypes.func.isRequired + onHide: React.PropTypes.func.isRequired, + channel: React.PropTypes.object.isRequired }; diff --git a/web/react/components/channel_loader.jsx b/web/react/components/channel_loader.jsx index c8f1196a8..0d1d9efd7 100644 --- a/web/react/components/channel_loader.jsx +++ b/web/react/components/channel_loader.jsx @@ -10,6 +10,7 @@ import SocketStore from '../stores/socket_store.jsx'; import ChannelStore from '../stores/channel_store.jsx'; import PostStore from '../stores/post_store.jsx'; import UserStore from '../stores/user_store.jsx'; +import PreferenceStore from '../stores/preference_store.jsx'; import * as Utils from '../utils/utils.jsx'; import Constants from '../utils/constants.jsx'; @@ -69,6 +70,10 @@ export default class ChannelLoader extends React.Component { Utils.applyTheme(Constants.THEMES.default); } + // if preferences have already been stored in local storage do not wait until preference store change is fired and handled in channel.jsx + const selectedFont = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', {value: Constants.DEFAULT_FONT}).value; + Utils.applyFont(selectedFont); + $('body').on('mouseenter mouseleave', '.post', function mouseOver(ev) { if (ev.type === 'mouseenter') { $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--after'); diff --git a/web/react/components/channel_members_modal.jsx b/web/react/components/channel_members_modal.jsx index f07fc166a..d1b9df988 100644 --- a/web/react/components/channel_members_modal.jsx +++ b/web/react/components/channel_members_modal.jsx @@ -69,16 +69,9 @@ export default class ChannelMembersModal extends React.Component { memberList.sort(compareByUsername); nonmemberList.sort(compareByUsername); - const channel = ChannelStore.getCurrent(); - let channelName = ''; - if (channel) { - channelName = channel.display_name; - } - return { nonmemberList, - memberList, - channelName + memberList }; } onShow() { @@ -169,7 +162,7 @@ export default class ChannelMembersModal extends React.Component { onHide={this.props.onModalDismissed} > <Modal.Header closeButton={true}> - <Modal.Title><span className='name'>{this.state.channelName}</span>{' Members'}</Modal.Title> + <Modal.Title><span className='name'>{this.props.channel.display_name}</span>{' Members'}</Modal.Title> <a className='btn btn-md btn-primary' href='#' @@ -205,7 +198,8 @@ export default class ChannelMembersModal extends React.Component { </Modal> <ChannelInviteModal show={this.state.showInviteModal} - onModalDismissed={() => this.setState({showInviteModal: false})} + onHide={() => this.setState({showInviteModal: false})} + channel={this.props.channel} /> </div> ); @@ -218,5 +212,6 @@ ChannelMembersModal.defaultProps = { ChannelMembersModal.propTypes = { show: React.PropTypes.bool.isRequired, - onModalDismissed: React.PropTypes.func.isRequired + onModalDismissed: React.PropTypes.func.isRequired, + channel: React.PropTypes.object.isRequired }; diff --git a/web/react/components/channel_notifications_modal.jsx b/web/react/components/channel_notifications_modal.jsx index 79b769c8a..e70d3a634 100644 --- a/web/react/components/channel_notifications_modal.jsx +++ b/web/react/components/channel_notifications_modal.jsx @@ -32,11 +32,13 @@ export default class ChannelNotificationsModal extends React.Component { activeSection: '' }; } - componentDidMount() { - ChannelStore.addChangeListener(this.onListenerChange); - } - componentWillUnmount() { - ChannelStore.removeChangeListener(this.onListenerChange); + componentWillReceiveProps(nextProps) { + if (!this.props.show && nextProps.show) { + this.onListenerChange(); + ChannelStore.addChangeListener(this.onListenerChange); + } else { + ChannelStore.removeChangeListener(this.onListenerChange); + } } onListenerChange() { const curChannelId = ChannelStore.getCurrentId(); @@ -333,7 +335,7 @@ export default class ChannelNotificationsModal extends React.Component { onHide={this.props.onHide} > <Modal.Header closeButton={true}> - {'Notification Preferences for '}<span className='name'>{this.props.channel.display_name}</span> + <Modal.Title>{'Notification Preferences for '}<span className='name'>{this.props.channel.display_name}</span></Modal.Title> </Modal.Header> <Modal.Body> <div className='settings-table'> diff --git a/web/react/components/command_list.jsx b/web/react/components/command_list.jsx deleted file mode 100644 index 7fc0f79cf..000000000 --- a/web/react/components/command_list.jsx +++ /dev/null @@ -1,99 +0,0 @@ -// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import * as client from '../utils/client.jsx'; - -export default class CommandList extends React.Component { - constructor(props) { - super(props); - - this.handleClick = this.handleClick.bind(this); - this.addFirstCommand = this.addFirstCommand.bind(this); - this.isEmpty = this.isEmpty.bind(this); - this.getSuggestedCommands = this.getSuggestedCommands.bind(this); - - this.state = { - suggestions: [], - cmd: '' - }; - } - - handleClick(i) { - this.props.addCommand(this.state.suggestions[i].suggestion); - this.setState({suggestions: [], cmd: ''}); - } - - addFirstCommand() { - if (this.state.suggestions.length === 0) { - return; - } - this.handleClick(0); - } - - isEmpty() { - return this.state.suggestions.length === 0; - } - - getSuggestedCommands(cmd) { - if (!cmd || cmd.charAt(0) !== '/') { - this.setState({suggestions: [], cmd: ''}); - return; - } - - client.executeCommand( - this.props.channelId, - cmd, - true, - function success(data) { - if (data.suggestions.length === 1 && data.suggestions[0].suggestion === cmd) { - data.suggestions = []; - } - this.setState({suggestions: data.suggestions, cmd: cmd}); - }.bind(this), - function fail() { - } - ); - } - - render() { - if (this.state.suggestions.length === 0) { - return (<div/>); - } - - var suggestions = []; - - for (var i = 0; i < this.state.suggestions.length; i++) { - if (this.state.suggestions[i].suggestion !== this.state.cmd) { - suggestions.push( - <div - key={i} - className='command-name' - onClick={this.handleClick.bind(this, i)} - > - <div className='command__title'><strong>{this.state.suggestions[i].suggestion}</strong></div> - <div className='command__desc'>{this.state.suggestions[i].description}</div> - </div> - ); - } - } - - return ( - <div - ref='mentionlist' - className='command-box' - style={{height: (suggestions.length * 56) + 2}} - > - {suggestions} - </div> - ); - } -} - -CommandList.defaultProps = { - channelId: null -}; - -CommandList.propTypes = { - addCommand: React.PropTypes.func, - channelId: React.PropTypes.string -}; diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index 8ceda1cf7..b0f33eda1 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -34,7 +34,6 @@ export default class CreateComment extends React.Component { this.handleUploadError = this.handleUploadError.bind(this); this.handleTextDrop = this.handleTextDrop.bind(this); this.removePreview = this.removePreview.bind(this); - this.handleSubmit = this.handleSubmit.bind(this); this.getFileCount = this.getFileCount.bind(this); this.handleResize = this.handleResize.bind(this); this.onPreferenceChange = this.onPreferenceChange.bind(this); @@ -335,6 +334,7 @@ export default class CreateComment extends React.Component { messageText={this.state.messageText} createMessage='Add a comment...' initialText='' + supportsCommands={false} id='reply_textbox' ref='textbox' /> @@ -362,11 +362,11 @@ export default class CreateComment extends React.Component { onClick={this.handleSubmit} /> {uploadsInProgressText} + {preview} {postError} {serverError} </div> </div> - {preview} </form> ); } diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index f7f63fb92..89e984e27 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -470,13 +470,13 @@ export default class CreatePost extends React.Component { {tutorialTip} </div> <div className={postFooterClassName}> - {postError} - {serverError} - {preview} <MsgTyping channelId={this.state.channelId} parentId='' /> + {preview} + {postError} + {serverError} </div> </div> </form> diff --git a/web/react/components/delete_channel_modal.jsx b/web/react/components/delete_channel_modal.jsx index 99bae962a..1255067fd 100644 --- a/web/react/components/delete_channel_modal.jsx +++ b/web/react/components/delete_channel_modal.jsx @@ -39,7 +39,9 @@ export default class DeleteChannelModal extends React.Component { show={this.props.show} onHide={this.props.onHide} > - <Modal.Header closeButton={true}>{'Confirm DELETE Channel'}</Modal.Header> + <Modal.Header closeButton={true}> + <h4 className='modal-title'>{'Confirm DELETE Channel'}</h4> + </Modal.Header> <Modal.Body> {`Are you sure you wish to delete the ${this.props.channel.display_name} ${channelTerm}?`} </Modal.Body> diff --git a/web/react/components/delete_post_modal.jsx b/web/react/components/delete_post_modal.jsx index 5e89a0893..827654e1b 100644 --- a/web/react/components/delete_post_modal.jsx +++ b/web/react/components/delete_post_modal.jsx @@ -131,7 +131,7 @@ export default class DeletePostModal extends React.Component { onHide={this.handleHide} > <Modal.Header closeButton={true}> - {`Confirm ${postTerm} Delete`} + <Modal.Title>{`Confirm ${postTerm} Delete`}</Modal.Title> </Modal.Header> <Modal.Body> {`Are you sure you want to delete this ${postTerm.toLowerCase()}?`} diff --git a/web/react/components/edit_channel_header_modal.jsx b/web/react/components/edit_channel_header_modal.jsx index 5529a419d..e4817f6e4 100644 --- a/web/react/components/edit_channel_header_modal.jsx +++ b/web/react/components/edit_channel_header_modal.jsx @@ -1,8 +1,9 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. +import AppDispatcher from '../dispatcher/app_dispatcher.jsx'; import * as Client from '../utils/client.jsx'; -import * as AsyncClient from '../utils/async_client.jsx'; +import Constants from '../utils/constants.jsx'; import * as Utils from '../utils/utils.jsx'; const Modal = ReactBootstrap.Modal; @@ -11,12 +12,14 @@ export default class EditChannelHeaderModal extends React.Component { constructor(props) { super(props); - this.handleEdit = this.handleEdit.bind(this); + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); this.onShow = this.onShow.bind(this); this.onHide = this.onHide.bind(this); this.state = { + header: props.channel.header, serverError: '' }; } @@ -27,27 +30,38 @@ export default class EditChannelHeaderModal extends React.Component { } } + componentWillReceiveProps(nextProps) { + if (this.props.channel.header !== nextProps.channel.header) { + this.setState({ + header: nextProps.channel.header + }); + } + } + componentDidUpdate(prevProps) { if (this.props.show && !prevProps.show) { this.onShow(); } } - handleEdit() { - var data = {}; - data.channel_id = this.props.channel.id; - - if (data.channel_id.length !== 26) { - return; - } - - data.channel_header = ReactDOM.findDOMNode(this.refs.textarea).value; + handleChange(e) { + this.setState({ + header: e.target.value + }); + } - Client.updateChannelHeader(data, - () => { + handleSubmit() { + Client.updateChannelHeader( + this.props.channel.id, + this.state.header, + (channel) => { this.setState({serverError: ''}); - AsyncClient.getChannel(this.props.channel.id); this.onHide(); + + AppDispatcher.handleServerAction({ + type: Constants.ActionTypes.RECIEVED_CHANNEL, + channel + }); }, (err) => { if (err.message === 'Invalid channel_header parameter') { @@ -66,7 +80,8 @@ export default class EditChannelHeaderModal extends React.Component { onHide() { this.setState({ - serverError: '' + serverError: '', + header: this.props.channel.header }); this.props.onHide(); @@ -84,7 +99,7 @@ export default class EditChannelHeaderModal extends React.Component { onHide={this.onHide} > <Modal.Header closeButton={true}> - {'Edit Header for ' + this.props.channel.display_name} + <Modal.Title>{'Edit Header for ' + this.props.channel.display_name}</Modal.Title> </Modal.Header> <Modal.Body> <p>{'Edit the text appearing next to the channel name in the channel header.'}</p> @@ -94,7 +109,8 @@ export default class EditChannelHeaderModal extends React.Component { rows='6' id='edit_header' maxLength='1024' - defaultValue={this.props.channel.header} + value={this.state.header} + onChange={this.handleChange} /> {serverError} </Modal.Body> @@ -102,14 +118,14 @@ export default class EditChannelHeaderModal extends React.Component { <button type='button' className='btn btn-default' - onClick={this.props.onHide} + onClick={this.onHide} > {'Cancel'} </button> <button type='button' className='btn btn-primary' - onClick={this.handleEdit} + onClick={this.handleSubmit} > {'Save'} </button> diff --git a/web/react/components/edit_post_modal.jsx b/web/react/components/edit_post_modal.jsx index eb58fe721..be57fe7c3 100644 --- a/web/react/components/edit_post_modal.jsx +++ b/web/react/components/edit_post_modal.jsx @@ -160,6 +160,7 @@ export default class EditPostModal extends React.Component { onKeyDown={this.handleKeyDown} messageText={this.state.editText} createMessage='Edit the post...' + supportsCommands={false} id='edit_textbox' ref='editbox' /> diff --git a/web/react/components/get_link_modal.jsx b/web/react/components/get_link_modal.jsx index df5d6b8e1..fd20834f4 100644 --- a/web/react/components/get_link_modal.jsx +++ b/web/react/components/get_link_modal.jsx @@ -75,7 +75,7 @@ export default class GetLinkModal extends React.Component { onHide={this.onHide} > <Modal.Header closeButton={true}> - {this.props.title} + <h4 className='modal-title'>{this.props.title}</h4> </Modal.Header> <Modal.Body> {helpText} diff --git a/web/react/components/invite_member_modal.jsx b/web/react/components/invite_member_modal.jsx index 76f52faa9..56bc00a7e 100644 --- a/web/react/components/invite_member_modal.jsx +++ b/web/react/components/invite_member_modal.jsx @@ -33,6 +33,7 @@ export default class InviteMemberModal extends React.Component { firstNameErrors: {}, lastNameErrors: {}, emailEnabled: global.window.mm_config.SendEmailNotifications === 'true', + userCreationEnabled: global.window.mm_config.EnableUserCreation === 'true', showConfirmModal: false, isSendingEmails: false }; @@ -143,7 +144,7 @@ export default class InviteMemberModal extends React.Component { componentDidUpdate(prevProps, prevState) { if (!prevState.show && this.state.show) { - $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300); + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200); if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); } @@ -252,7 +253,7 @@ export default class InviteMemberModal extends React.Component { ref={'first_name' + index} placeholder='First name' maxLength='64' - disabled={!this.state.emailEnabled} + disabled={!this.state.emailEnabled || !this.state.userCreationEnabled} spellCheck='false' /> {firstNameError} @@ -266,7 +267,7 @@ export default class InviteMemberModal extends React.Component { ref={'last_name' + index} placeholder='Last name' maxLength='64' - disabled={!this.state.emailEnabled} + disabled={!this.state.emailEnabled || !this.state.userCreationEnabled} spellCheck='false' /> {lastNameError} @@ -285,7 +286,7 @@ export default class InviteMemberModal extends React.Component { className='form-control' placeholder='email@domain.com' maxLength='64' - disabled={!this.state.emailEnabled} + disabled={!this.state.emailEnabled || !this.state.userCreationEnabled} spellCheck='false' /> {emailError} @@ -303,7 +304,7 @@ export default class InviteMemberModal extends React.Component { var content = null; var sendButton = null; - if (this.state.emailEnabled) { + if (this.state.emailEnabled && this.state.userCreationEnabled) { content = ( <div> {serverError} @@ -337,7 +338,7 @@ export default class InviteMemberModal extends React.Component { {sendButtonLabel} </button> ); - } else { + } else if (this.state.userCreationEnabled) { var teamInviteLink = null; if (currentUser && TeamStore.getCurrent().type === 'O') { var link = ( @@ -358,10 +359,16 @@ export default class InviteMemberModal extends React.Component { content = ( <div> - <p>Email is currently disabled for your team, and email invitations cannot be sent. Contact your system administrator to enable email and email invitations.</p> + <p>{'Email is currently disabled for your team, and email invitations cannot be sent. Contact your system administrator to enable email and email invitations.'}</p> {teamInviteLink} </div> ); + } else { + content = ( + <div> + <p>{'User creation has been disabled for your team. Please ask your team administrator for details.'}</p> + </div> + ); } return ( diff --git a/web/react/components/member_list_item.jsx b/web/react/components/member_list_item.jsx index f5d5ab28b..a7273f280 100644 --- a/web/react/components/member_list_item.jsx +++ b/web/react/components/member_list_item.jsx @@ -31,9 +31,7 @@ export default class MemberListItem extends React.Component { var timestamp = UserStore.getCurrentUser().update_at; var invite; - if (member.invited && this.props.handleInvite) { - invite = <span className='member-role'>Added</span>; - } else if (this.props.handleInvite) { + if (this.props.handleInvite) { invite = ( <a onClick={this.handleInvite} @@ -80,17 +78,15 @@ export default class MemberListItem extends React.Component { href='#' className='dropdown-toggle theme' type='button' - id='channel_header_dropdown' data-toggle='dropdown' aria-expanded='true' > + <span className='fa fa-pencil'></span> <span className='text-capitalize'>{member.roles || 'Member'} </span> - <span className='caret'></span> </a> <ul className='dropdown-menu member-menu' role='menu' - aria-labelledby='channel_header_dropdown' > {makeAdminOption} {handleRemoveOption} @@ -98,7 +94,7 @@ export default class MemberListItem extends React.Component { </div> ); } else { - invite = <div className='member-role text-capitalize'>{member.roles || 'Member'}<span className='caret hidden'></span></div>; + invite = <div className='member-role text-capitalize'><span className='fa fa-pencil hidden'></span>{member.roles || 'Member'}</div>; } return ( diff --git a/web/react/components/member_list_team_item.jsx b/web/react/components/member_list_team_item.jsx index 316fad01a..7967c410d 100644 --- a/web/react/components/member_list_team_item.jsx +++ b/web/react/components/member_list_team_item.jsx @@ -181,17 +181,15 @@ export default class MemberListTeamItem extends React.Component { href='#' className='dropdown-toggle theme' type='button' - id='channel_header_dropdown' data-toggle='dropdown' aria-expanded='true' > + <span className='fa fa-pencil'></span> <span>{currentRoles} </span> - <span className='caret'></span> </a> <ul className='dropdown-menu member-menu' role='menu' - aria-labelledby='channel_header_dropdown' > {makeAdmin} {makeMember} diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx deleted file mode 100644 index 44f6210e4..000000000 --- a/web/react/components/mention.jsx +++ /dev/null @@ -1,61 +0,0 @@ -// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. -import UserStore from '../stores/user_store.jsx'; -import * as Utils from '../utils/utils.jsx'; - -export default class Mention extends React.Component { - constructor(props) { - super(props); - - this.handleClick = this.handleClick.bind(this); - - this.state = null; - } - handleClick() { - this.props.handleClick(this.props.username); - } - render() { - var icon; - var timestamp = UserStore.getCurrentUser().update_at; - if (this.props.id === 'allmention' || this.props.id === 'channelmention') { - icon = <span><i className='mention-img fa fa-users fa-2x'></i></span>; - } else if (this.props.id == null) { - icon = <span><i className='mention-img fa fa-users fa-2x'></i></span>; - } else { - icon = ( - <span> - <img - className='mention-img' - src={'/api/v1/users/' + this.props.id + '/image?time=' + timestamp + '&' + Utils.getSessionIndex()} - /> - </span> - ); - } - return ( - <div - className={'mentions-name ' + this.props.isFocused} - id={this.props.id + '_mentions'} - onClick={this.handleClick} - onMouseEnter={this.props.handleMouseEnter} - > - <div className='pull-left'>{icon}</div> - <div className='pull-left mention-align'><span>@{this.props.username}</span><span className='mention-fullname'>{this.props.secondary_text}</span></div> - </div> - ); - } -} - -Mention.defaultProps = { - username: '', - id: '', - isFocused: '', - secondary_text: '' -}; -Mention.propTypes = { - handleClick: React.PropTypes.func.isRequired, - handleMouseEnter: React.PropTypes.func.isRequired, - username: React.PropTypes.string, - id: React.PropTypes.string, - isFocused: React.PropTypes.string, - secondary_text: React.PropTypes.string -}; diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx deleted file mode 100644 index 297d5c719..000000000 --- a/web/react/components/mention_list.jsx +++ /dev/null @@ -1,276 +0,0 @@ -// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import UserStore from '../stores/user_store.jsx'; -import SearchStore from '../stores/search_store.jsx'; -import AppDispatcher from '../dispatcher/app_dispatcher.jsx'; -import Mention from './mention.jsx'; - -import Constants from '../utils/constants.jsx'; -import * as Utils from '../utils/utils.jsx'; -var ActionTypes = Constants.ActionTypes; - -var MAX_HEIGHT_LIST = 292; -var MAX_ITEMS_IN_LIST = 25; -var ITEM_HEIGHT = 36; - -export default class MentionList extends React.Component { - constructor(props) { - super(props); - - this.onListenerChange = this.onListenerChange.bind(this); - this.handleClick = this.handleClick.bind(this); - this.handleMouseEnter = this.handleMouseEnter.bind(this); - this.getSelection = this.getSelection.bind(this); - this.addCurrentMention = this.addCurrentMention.bind(this); - this.addFirstMention = this.addFirstMention.bind(this); - this.isEmpty = this.isEmpty.bind(this); - this.scrollToMention = this.scrollToMention.bind(this); - this.onScroll = this.onScroll.bind(this); - this.onMentionListKey = this.onMentionListKey.bind(this); - this.onClick = this.onClick.bind(this); - - this.state = {excludeUsers: [], mentionText: '-1', selectedMention: 0, selectedUsername: ''}; - } - onScroll() { - if ($('.mentions--top').length) { - $('#reply_mention_tab .mentions--top').css({bottom: $(window).height() - $('.post-right__scroll #reply_textbox').offset().top}); - } - } - onMentionListKey(e) { - if (!this.isEmpty() && this.state.mentionText !== '-1' && (e.which === 13 || e.which === 9)) { - e.stopPropagation(); - e.preventDefault(); - this.addCurrentMention(); - } else if (!this.isEmpty() && this.state.mentionText !== '-1' && (e.which === 38 || e.which === 40)) { - e.stopPropagation(); - e.preventDefault(); - - if (e.which === 38) { - if (this.getSelection(this.state.selectedMention - 1)) { - this.setState({selectedMention: this.state.selectedMention - 1, selectedUsername: this.refs['mention' + (this.state.selectedMention - 1)].props.username}); - } - } else if (e.which === 40) { - if (this.getSelection(this.state.selectedMention + 1)) { - this.setState({selectedMention: this.state.selectedMention + 1, selectedUsername: this.refs['mention' + (this.state.selectedMention + 1)].props.username}); - } - } - - this.scrollToMention(e.which); - } - } - onClick(e) { - if (!($('#' + this.props.id).is(e.target) || $('#' + this.props.id).has(e.target).length || - ('mentionlist' in this.refs && $(ReactDOM.findDOMNode(this.refs.mentionlist)).has(e.target).length))) { - this.setState({mentionText: '-1'}); - } - } - componentDidMount() { - SearchStore.addMentionDataChangeListener(this.onListenerChange); - - $('.post-right__scroll').scroll(this.onScroll); - - $('body').on('keydown.mentionlist', '#' + this.props.id, this.onMentionListKey); - $(document).click(this.onClick); - } - componentWillUnmount() { - SearchStore.removeMentionDataChangeListener(this.onListenerChange); - $('body').off('keydown.mentionlist', '#' + this.props.id); - } - - /* - * This component is poorly designed, nessesitating some state modification - * in the componentDidUpdate function. This is generally discouraged as it - * is a performance issue and breaks with good react design. This component - * should be redesigned. - */ - componentDidUpdate() { - if (this.state.mentionText !== '-1') { - if (this.state.selectedUsername !== '' && (!this.getSelection(this.state.selectedMention) || this.state.selectedUsername !== this.refs['mention' + this.state.selectedMention].props.username)) { - var tempSelectedMention = -1; - var foundMatch = false; - while (tempSelectedMention < this.state.selectedMention && this.getSelection(++tempSelectedMention)) { - if (this.state.selectedUsername === this.refs['mention' + tempSelectedMention].props.username) { - this.setState({selectedMention: tempSelectedMention}); //eslint-disable-line react/no-did-update-set-state - foundMatch = true; - break; - } - } - if (this.getSelection(0) && !foundMatch) { - this.setState({selectedMention: 0, selectedUsername: this.refs.mention0.props.username}); //eslint-disable-line react/no-did-update-set-state - } - } - } else if (this.state.selectedMention !== 0) { - this.setState({selectedMention: 0, selectedUsername: ''}); //eslint-disable-line react/no-did-update-set-state - } - } - onListenerChange(id, mentionText) { - if (id !== this.props.id) { - return; - } - - var newState = this.state; - if (mentionText != null) { - newState.mentionText = mentionText; - } - - this.setState(newState); - } - handleClick(name) { - AppDispatcher.handleViewAction({ - type: ActionTypes.RECIEVED_ADD_MENTION, - id: this.props.id, - username: name - }); - - this.setState({mentionText: '-1'}); - } - handleMouseEnter(listId) { - this.setState({selectedMention: listId, selectedUsername: this.refs['mention' + listId].props.username}); - } - getSelection(listId) { - if (!this.refs['mention' + listId]) { - return false; - } - return true; - } - addCurrentMention() { - if (this.getSelection(this.state.selectedMention)) { - this.refs['mention' + this.state.selectedMention].handleClick(); - } else { - this.addFirstMention(); - } - } - addFirstMention() { - if (!this.refs.mention0) { - return; - } - this.refs.mention0.handleClick(); - } - isEmpty() { - return (!this.refs.mention0); - } - scrollToMention(keyPressed) { - var direction; - if (keyPressed === 38) { - direction = 'up'; - } else { - direction = 'down'; - } - var scrollAmount = 0; - - if (direction === 'up') { - scrollAmount = '-=' + ($('#' + this.refs['mention' + this.state.selectedMention].props.id + '_mentions').innerHeight() - 5); - } else if (direction === 'down') { - scrollAmount = '+=' + ($('#' + this.refs['mention' + this.state.selectedMention].props.id + '_mentions').innerHeight() - 5); - } - - $('#mentionsbox').animate({ - scrollTop: scrollAmount - }, 75); - } - render() { - var mentionText = this.state.mentionText; - if (mentionText === '-1') { - return null; - } - - var profiles = UserStore.getActiveOnlyProfiles(); - var users = []; - for (let id in profiles) { - if (profiles[id]) { - users.push(profiles[id]); - } - } - - // var all = {}; - // all.username = 'all'; - // all.nickname = ''; - // all.secondary_text = 'Notifies everyone in the team'; - // all.id = 'allmention'; - // users.push(all); - - var channel = {}; - channel.username = 'channel'; - channel.nickname = ''; - channel.secondary_text = 'Notifies everyone in the channel'; - channel.id = 'channelmention'; - users.push(channel); - - users.sort(function sortByUsername(a, b) { - if (a.username < b.username) { - return -1; - } - if (a.username > b.username) { - return 1; - } - return 0; - }); - var mentions = []; - var index = 0; - - for (var i = 0; i < users.length && index < MAX_ITEMS_IN_LIST; i++) { - if ((users[i].first_name && users[i].first_name.lastIndexOf(mentionText, 0) === 0) || - (users[i].last_name && users[i].last_name.lastIndexOf(mentionText, 0) === 0) || - users[i].username.lastIndexOf(mentionText, 0) === 0) { - let isFocused = ''; - if (this.state.selectedMention === index) { - isFocused = 'mentions-focus'; - } - - if (!users[i].secondary_text) { - users[i].secondary_text = Utils.getFullName(users[i]); - } - - mentions[index] = ( - <Mention - key={'mention_key_' + index} - ref={'mention' + index} - username={users[i].username} - secondary_text={users[i].secondary_text} - id={users[i].id} - listId={index} - isFocused={isFocused} - handleMouseEnter={this.handleMouseEnter.bind(this, index)} - handleClick={this.handleClick} - /> - ); - index++; - } - } - - var numMentions = mentions.length; - - if (numMentions < 1) { - return null; - } - - var $mentionTab = $('#' + this.props.id); - var maxHeight = Math.min(MAX_HEIGHT_LIST, $mentionTab.offset().top - 10); - var style = { - height: Math.min(maxHeight, (numMentions * ITEM_HEIGHT) + 4), - width: $mentionTab.parent().width(), - bottom: $(window).height() - $mentionTab.offset().top, - left: $mentionTab.offset().left - }; - - return ( - <div - className='mentions--top' - style={style} - > - <div - ref='mentionlist' - className='mentions-box' - id='mentionsbox' - > - {mentions} - </div> - </div> - ); - } -} - -MentionList.propTypes = { - id: React.PropTypes.string -}; diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx index 9116dc8f1..cf40af6ae 100644 --- a/web/react/components/more_direct_channels.jsx +++ b/web/react/components/more_direct_channels.jsx @@ -166,7 +166,7 @@ export default class MoreDirectChannels extends React.Component { componentDidUpdate(prevProps) { if (!prevProps.show && this.props.show) { - $(ReactDOM.findDOMNode(this.refs.userList)).css('max-height', $(window).height() - 300); + $(ReactDOM.findDOMNode(this.refs.userList)).css('max-height', $(window).height() - 50); if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.userList)).perfectScrollbar(); } diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx index 6c3bfc7db..ae14fca2f 100644 --- a/web/react/components/navbar.jsx +++ b/web/react/components/navbar.jsx @@ -44,7 +44,6 @@ export default class Navbar extends React.Component { state.showEditChannelPurposeModal = false; state.showEditChannelHeaderModal = false; state.showMembersModal = false; - state.showInviteModal = false; this.state = state; } getStateFromStores() { @@ -171,13 +170,13 @@ export default class Navbar extends React.Component { if (!isDirect && !ChannelStore.isDefault(channel)) { addMembersOption = ( <li role='presentation'> - <a + <ToggleModalButton role='menuitem' - href='#' - onClick={() => this.setState({showInviteModal: true})} + dialogType={ChannelInviteModal} + dialogProps={{channel}} > {'Add Members'} - </a> + </ToggleModalButton> </li> ); @@ -273,7 +272,6 @@ export default class Navbar extends React.Component { href='#' className='dropdown-toggle theme' type='button' - id='channel_header_dropdown' data-toggle='dropdown' aria-expanded='true' > @@ -283,7 +281,6 @@ export default class Navbar extends React.Component { <ul className='dropdown-menu' role='menu' - aria-labelledby='channel_header_dropdown' > {viewInfoOption} {addMembersOption} @@ -475,10 +472,7 @@ export default class Navbar extends React.Component { <ChannelMembersModal show={this.state.showMembersModal} onModalDismissed={() => this.setState({showMembersModal: false})} - /> - <ChannelInviteModal - show={this.state.showInviteModal} - onModalDismissed={() => this.setState({showInviteModal: false})} + channel={{channel}} /> </div> ); diff --git a/web/react/components/post.jsx b/web/react/components/post.jsx index 66d8c507a..695d7daef 100644 --- a/web/react/components/post.jsx +++ b/web/react/components/post.jsx @@ -95,6 +95,10 @@ export default class Post extends React.Component { return true; } + if (nextProps.shouldHighlight !== this.props.shouldHighlight) { + return true; + } + return false; } getCommentCount(props) { @@ -148,7 +152,7 @@ export default class Post extends React.Component { } let currentUserCss = ''; - if (UserStore.getCurrentId() === post.user_id && !post.props.from_webhook) { + if (UserStore.getCurrentId() === post.user_id && !post.props.from_webhook && !utils.isSystemMessage(post)) { currentUserCss = 'current--user'; } @@ -169,6 +173,11 @@ export default class Post extends React.Component { shouldHighlightClass = 'post--highlight'; } + let systemMessageClass = ''; + if (utils.isSystemMessage(post)) { + systemMessageClass = 'post--system'; + } + let profilePic = null; if (!this.props.hideProfilePic) { let src = '/api/v1/users/' + post.user_id + '/image?time=' + timestamp + '&' + utils.getSessionIndex(); @@ -176,6 +185,8 @@ export default class Post extends React.Component { if (post.props.override_icon_url) { src = post.props.override_icon_url; } + } else if (utils.isSystemMessage(post)) { + src = Constants.SYSTEM_MESSAGE_PROFILE_IMAGE; } profilePic = ( @@ -191,7 +202,7 @@ export default class Post extends React.Component { <div> <div id={'post_' + post.id} - className={'post ' + sameUserClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss + ' ' + shouldHighlightClass} + className={'post ' + sameUserClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss + ' ' + shouldHighlightClass + ' ' + systemMessageClass} > <div className='post__content'> <div className='post__img'>{profilePic}</div> diff --git a/web/react/components/post_attachment_oembed.jsx b/web/react/components/post_attachment_oembed.jsx index f544dbc88..4b12ee95e 100644 --- a/web/react/components/post_attachment_oembed.jsx +++ b/web/react/components/post_attachment_oembed.jsx @@ -14,14 +14,24 @@ export default class PostAttachmentOEmbed extends React.Component { } componentWillReceiveProps(nextProps) { - this.fetchData(nextProps.link); + if (nextProps.link !== this.props.link) { + this.isLoading = false; + this.fetchData(nextProps.link); + } + } + + componentDidMount() { + this.fetchData(this.props.link); } fetchData(link) { if (!this.isLoading) { this.isLoading = true; + let url = 'https://noembed.com/embed?nowrap=on'; + url += '&url=' + encodeURIComponent(link); + url += '&maxheight=' + this.props.provider.height; return $.ajax({ - url: 'https://noembed.com/embed?nowrap=on&url=' + encodeURIComponent(link), + url, dataType: 'jsonp', success: (result) => { this.isLoading = false; @@ -39,8 +49,18 @@ export default class PostAttachmentOEmbed extends React.Component { } render() { + let data = {}; + let content; if ($.isEmptyObject(this.state.data)) { - return <div></div>; + content = <div style={{height: this.props.provider.height}}/>; + } else { + data = this.state.data; + content = ( + <div + style={{height: this.props.provider.height}} + dangerouslySetInnerHTML={{__html: data.html}} + /> + ); } return ( @@ -57,18 +77,17 @@ export default class PostAttachmentOEmbed extends React.Component { > <a className='attachment__title-link' - href={this.state.data.url} + href={data.url} target='_blank' > - {this.state.data.title} + {data.title} </a> </h1> - <div> - <div className={'attachment__body attachment__body--no_thumb'}> - <div - dangerouslySetInnerHTML={{__html: this.state.data.html}} - > - </div> + <div > + <div + className={'attachment__body attachment__body--no_thumb'} + > + {content} </div> </div> </div> @@ -79,5 +98,6 @@ export default class PostAttachmentOEmbed extends React.Component { } PostAttachmentOEmbed.propTypes = { - link: React.PropTypes.string.isRequired + link: React.PropTypes.string.isRequired, + provider: React.PropTypes.object.isRequired }; diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx index de8195f91..dcbe56399 100644 --- a/web/react/components/post_body.jsx +++ b/web/react/components/post_body.jsx @@ -4,7 +4,9 @@ import FileAttachmentList from './file_attachment_list.jsx'; import UserStore from '../stores/user_store.jsx'; import * as Utils from '../utils/utils.jsx'; +import * as Emoji from '../utils/emoticons.jsx'; import Constants from '../utils/constants.jsx'; +const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES; import * as TextFormatting from '../utils/text_formatting.jsx'; import twemoji from 'twemoji'; import PostBodyAdditionalContent from './post_body_additional_content.jsx'; @@ -52,7 +54,11 @@ export default class PostBody extends React.Component { } parseEmojis() { - twemoji.parse(ReactDOM.findDOMNode(this), {size: Constants.EMOJI_SIZE}); + twemoji.parse(ReactDOM.findDOMNode(this), { + className: 'emoji twemoji', + base: '', + folder: Emoji.getImagePathForEmoticon() + }); } componentWillMount() { @@ -104,11 +110,14 @@ export default class PostBody extends React.Component { const trimmedLink = link.trim(); - if (this.checkForOembedContent(trimmedLink)) { - post.props.oEmbedLink = trimmedLink; - post.type = 'oEmbed'; - this.setState({post}); - return ''; + if (Utils.isFeatureEnabled(PreReleaseFeatures.EMBED_PREVIEW)) { + const provider = this.getOembedProvider(trimmedLink); + if (provider != null) { + post.props.oEmbedLink = trimmedLink; + post.type = 'oEmbed'; + this.setState({post, provider}); + return ''; + } } const embed = this.createYoutubeEmbed(link); @@ -128,15 +137,15 @@ export default class PostBody extends React.Component { return null; } - checkForOembedContent(link) { + getOembedProvider(link) { for (let i = 0; i < providers.length; i++) { for (let j = 0; j < providers[i].patterns.length; j++) { if (link.match(providers[i].patterns[j])) { - return true; + return providers[i]; } } } - return false; + return null; } loadImg(src) { @@ -205,14 +214,14 @@ export default class PostBody extends React.Component { } createYoutubeEmbed(link) { - const ytRegex = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|watch\?(?:[a-zA-Z-_]+=[a-zA-Z0-9-_]+&)+v=)([^#\&\?]*).*/; + const ytRegex = /(?:http|https):\/\/(?:www\.)?(?:(?:youtube\.com\/(?:(?:v\/)|(\/u\/\w\/)|(?:(?:watch|embed\/watch)(?:\/|.*v=))|(?:embed\/)|(?:user\/[^\/]+\/u\/[0-9]\/)))|(?:youtu\.be\/))([^#\&\?]*)/; const match = link.trim().match(ytRegex); - if (!match || match[1].length !== 11) { + if (!match || match[2].length !== 11) { return null; } - const youtubeId = match[1]; + const youtubeId = match[2]; const time = this.handleYoutubeTime(link); function onClick(e) { @@ -300,7 +309,15 @@ export default class PostBody extends React.Component { let apostrophe = ''; let name = '...'; if (profile != null) { - if (profile.username.slice(-1) === 's') { + let username = profile.username; + if (parentPost.props && + parentPost.props.from_webhook && + parentPost.props.override_username && + global.window.mm_config.EnablePostUsernameOverride === 'true') { + username = parentPost.props.override_username; + } + + if (username.slice(-1) === 's') { apostrophe = '\''; } else { apostrophe = '\'s'; @@ -308,9 +325,9 @@ export default class PostBody extends React.Component { name = ( <a className='theme' - onClick={Utils.searchForTerm.bind(null, profile.username)} + onClick={Utils.searchForTerm.bind(null, username)} > - {profile.username} + {username} </a> ); } @@ -394,6 +411,7 @@ export default class PostBody extends React.Component { </div> <PostBodyAdditionalContent post={this.state.post} + provider={this.state.provider} /> {fileAttachmentHolder} {this.embed} diff --git a/web/react/components/post_body_additional_content.jsx b/web/react/components/post_body_additional_content.jsx index e19bf51eb..7e6f3f037 100644 --- a/web/react/components/post_body_additional_content.jsx +++ b/web/react/components/post_body_additional_content.jsx @@ -32,6 +32,7 @@ export default class PostBodyAdditionalContent extends React.Component { return ( <PostAttachmentOEmbed key={'post_body_additional_content' + this.props.post.id} + provider={this.props.provider} link={link} /> ); @@ -68,5 +69,6 @@ export default class PostBodyAdditionalContent extends React.Component { } PostBodyAdditionalContent.propTypes = { - post: React.PropTypes.object.isRequired -};
\ No newline at end of file + post: React.PropTypes.object.isRequired, + provider: React.PropTypes.object +}; diff --git a/web/react/components/post_focus_view.jsx b/web/react/components/post_focus_view.jsx index 5c6ad6c28..adcd78839 100644 --- a/web/react/components/post_focus_view.jsx +++ b/web/react/components/post_focus_view.jsx @@ -73,7 +73,7 @@ export default class PostFocusView extends React.Component { getIntroMessage() { return ( <div className='channel-intro'> - <h4 className='channel-intro__title'>{'Beginning of Channel'}</h4> + <h4 className='channel-intro__title'>{'Beginning of Channel Archives'}</h4> </div> ); } diff --git a/web/react/components/post_header.jsx b/web/react/components/post_header.jsx index ffc32f82c..f18024343 100644 --- a/web/react/components/post_header.jsx +++ b/web/react/components/post_header.jsx @@ -3,6 +3,9 @@ import UserProfile from './user_profile.jsx'; import PostInfo from './post_info.jsx'; +import * as Utils from '../utils/utils.jsx'; + +import Constants from '../utils/constants.jsx'; export default class PostHeader extends React.Component { constructor(props) { @@ -27,6 +30,15 @@ export default class PostHeader extends React.Component { } botIndicator = <li className='col col__name bot-indicator'>{'BOT'}</li>; + } else if (Utils.isSystemMessage(post)) { + userProfile = ( + <UserProfile + userId={''} + overwriteName={Constants.SYSTEM_MESSAGE_PROFILE_NAME} + overwriteImage={Constants.SYSTEM_MESSAGE_PROFILE_IMAGE} + disablePopover={true} + /> + ); } return ( diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx index cedb2b59b..21683bb01 100644 --- a/web/react/components/post_info.jsx +++ b/web/react/components/post_info.jsx @@ -9,14 +9,15 @@ import * as EventHelpers from '../dispatcher/event_helpers.jsx'; import Constants from '../utils/constants.jsx'; -const OverlayTrigger = ReactBootstrap.OverlayTrigger; +const Overlay = ReactBootstrap.Overlay; const Popover = ReactBootstrap.Popover; export default class PostInfo extends React.Component { constructor(props) { super(props); this.state = { - copiedLink: false + copiedLink: false, + show: false }; this.handlePermalinkCopy = this.handlePermalinkCopy.bind(this); @@ -41,30 +42,37 @@ export default class PostInfo extends React.Component { dataComments = this.props.commentCount; } - if (isOwner) { + if (this.props.allowReply === 'true') { dropdownContents.push( <li - key='editPost' + key='replyLink' role='presentation' > <a + className='link__reply theme' href='#' - role='menuitem' - data-toggle='modal' - data-target='#edit_post' - data-refocusid='#post_textbox' - data-title={type} - data-message={post.message} - data-postid={post.id} - data-channelid={post.channel_id} - data-comments={dataComments} + onClick={this.props.handleCommentClick} > - {'Edit'} + {'Reply'} </a> </li> ); } + dropdownContents.push( + <li + key='copyLink' + role='presentation' + > + <a + href='#' + onClick={(e) => this.setState({target: e.target, show: !this.state.show})} + > + {'Permalink'} + </a> + </li> + ); + if (isOwner || isAdmin) { dropdownContents.push( <li @@ -82,18 +90,25 @@ export default class PostInfo extends React.Component { ); } - if (this.props.allowReply === 'true') { + if (isOwner) { dropdownContents.push( <li - key='replyLink' + key='editPost' role='presentation' > <a - className='link__reply theme' href='#' - onClick={this.props.handleCommentClick} + role='menuitem' + data-toggle='modal' + data-target='#edit_post' + data-refocusid='#post_textbox' + data-title={type} + data-message={post.message} + data-postid={post.id} + data-channelid={post.channel_id} + data-comments={dataComments} > - {'Reply'} + {'Edit'} </a> </li> ); @@ -121,6 +136,7 @@ export default class PostInfo extends React.Component { </div> ); } + handlePermalinkCopy() { const textBox = $(ReactDOM.findDOMNode(this.refs.permalinkbox)); textBox.select(); @@ -128,7 +144,7 @@ export default class PostInfo extends React.Component { try { const successful = document.execCommand('copy'); if (successful) { - this.setState({copiedLink: true}); + this.setState({copiedLink: true, show: false}); } else { this.setState({copiedLink: false}); } @@ -180,7 +196,7 @@ export default class PostInfo extends React.Component { type='text' readOnly='true' ref='permalinkbox' - className='permalink-text form-control no-resize min-height input-large' + className='permalink-text form-control no-resize' rows='1' value={permalink} /> @@ -197,6 +213,8 @@ export default class PostInfo extends React.Component { </Popover> ); + const containerPadding = 20; + return ( <ul className='post__header post__header--info'> <li className='col'> @@ -206,18 +224,23 @@ export default class PostInfo extends React.Component { </li> <li className='col col__reply'> {comments} - <OverlayTrigger - trigger='click' - placement='left' - rootClose={true} - overlay={permalinkOverlay} + <div + className='dropdown' + ref='dotMenu' > - <i className={'permalink-icon fa fa-link ' + showCommentClass}/> - </OverlayTrigger> - - <div className='dropdown'> {dropdown} </div> + <Overlay + show={this.state.show} + target={() => ReactDOM.findDOMNode(this.refs.dotMenu)} + onHide={() => this.setState({show: false})} + placement='left' + container={this} + containerPadding={containerPadding} + rootClose={true} + > + {permalinkOverlay} + </Overlay> </li> </ul> ); diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx index 242b26b91..b7ac92672 100644 --- a/web/react/components/posts_view.jsx +++ b/web/react/components/posts_view.jsx @@ -87,6 +87,7 @@ export default class PostsView extends React.Component { const post = posts[order[i]]; const parentPost = posts[post.parent_id]; const prevPost = posts[order[i + 1]]; + const postUserId = Utils.isSystemMessage(post) ? '' : post.user_id; // If the post is a comment whose parent has been deleted, don't add it to the list. if (parentPost && parentPost.state === Constants.POST_DELETED) { @@ -102,6 +103,7 @@ export default class PostsView extends React.Component { const prevPostIsComment = Utils.isComment(prevPost); const postFromWebhook = Boolean(post.props && post.props.from_webhook); const prevPostFromWebhook = Boolean(prevPost.props && prevPost.props.from_webhook); + const prevPostUserId = Utils.isSystemMessage(prevPost) ? '' : prevPost.user_id; let prevWebhookName = ''; if (prevPost.props && prevPost.props.override_username) { prevWebhookName = prevPost.props.override_username; @@ -116,7 +118,7 @@ export default class PostsView extends React.Component { // the previous post was made within 5 minutes of the current post, // the previous post and current post are both from webhooks or both not, // the previous post and current post have the same webhook usernames - if (prevPost.user_id === post.user_id && + if (prevPostUserId === postUserId && post.create_at - prevPost.create_at <= 1000 * 60 * 5 && postFromWebhook === prevPostFromWebhook && prevWebhookName === curWebhookName) { @@ -144,7 +146,7 @@ export default class PostsView extends React.Component { // the current post is not a comment, // the previous post and current post are both from webhooks or both not, // the previous post and current post have the same webhook usernames - if (prevPost.user_id === post.user_id && + if (prevPostUserId === postUserId && !prevPostIsComment && !postIsComment && postFromWebhook === prevPostFromWebhook && @@ -191,7 +193,7 @@ export default class PostsView extends React.Component { ); } - if (post.user_id !== userId && + if (postUserId !== userId && this.props.messageSeparatorTime !== 0 && post.create_at > this.props.messageSeparatorTime && !renderedLastViewed) { @@ -280,18 +282,22 @@ export default class PostsView extends React.Component { this.updateScrolling(); } window.addEventListener('resize', this.handleResize); - $(this.refs.postlist).perfectScrollbar(); - PreferenceStore.addChangeListener(this.updateState); } componentWillUnmount() { window.removeEventListener('resize', this.handleResize); - PreferenceStore.removeChangeListener(this.updateState); } componentDidUpdate() { if (this.props.postList != null) { this.updateScrolling(); } - $(this.refs.postlist).perfectScrollbar('update'); + } + componentWillReceiveProps(nextProps) { + if (!this.props.isActive && nextProps.isActive) { + this.updateState(); + PreferenceStore.addChangeListener(this.updateState); + } else if (this.props.isActive && !nextProps.isActive) { + PreferenceStore.removeChangeListener(this.updateState); + } } shouldComponentUpdate(nextProps, nextState) { if (this.props.isActive !== nextProps.isActive) { @@ -373,7 +379,7 @@ export default class PostsView extends React.Component { return ( <div ref='postlist' - className={'ps-container post-list-holder-by-time ' + activeClass} + className={'post-list-holder-by-time ' + activeClass} onScroll={this.handleScroll} > <div className='post-list__table'> diff --git a/web/react/components/posts_view_container.jsx b/web/react/components/posts_view_container.jsx index 6d6694fec..631bd1872 100644 --- a/web/react/components/posts_view_container.jsx +++ b/web/react/components/posts_view_container.jsx @@ -3,7 +3,6 @@ import PostsView from './posts_view.jsx'; import LoadingScreen from './loading_screen.jsx'; -import ChannelInviteModal from './channel_invite_modal.jsx'; import ChannelStore from '../stores/channel_store.jsx'; import PostStore from '../stores/post_store.jsx'; @@ -13,7 +12,7 @@ import * as EventHelpers from '../dispatcher/event_helpers.jsx'; import Constants from '../utils/constants.jsx'; -import {createChannelIntroMessage} from '../utils/channel_intro_mssages.jsx'; +import {createChannelIntroMessage} from '../utils/channel_intro_messages.jsx'; export default class PostsViewContainer extends React.Component { constructor() { @@ -177,7 +176,7 @@ export default class PostsViewContainer extends React.Component { loadMorePostsBottomClicked={() => {}} showMoreMessagesTop={!this.state.atTop[this.state.currentChannelIndex]} showMoreMessagesBottom={false} - introText={channel ? createChannelIntroMessage(channel, () => this.setState({showInviteModal: true})) : null} + introText={channel ? createChannelIntroMessage(channel) : null} messageSeparatorTime={this.state.currentLastViewed} /> ); @@ -194,10 +193,6 @@ export default class PostsViewContainer extends React.Component { return ( <div id='post-list'> {postListCtls} - <ChannelInviteModal - show={this.state.showInviteModal} - onModalDismissed={() => this.setState({showInviteModal: false})} - /> </div> ); } diff --git a/web/react/components/providers.json b/web/react/components/providers.json index 5e4cbd656..b5899c225 100644 --- a/web/react/components/providers.json +++ b/web/react/components/providers.json @@ -3,265 +3,308 @@ "patterns": [ "http://(?:www\\.)?xkcd\\.com/\\d+/?" ], - "name": "XKCD" + "name": "XKCD", + "height": 110 }, { "patterns": [ "https?://soundcloud.com/.*/.*" ], - "name": "SoundCloud" + "name": "SoundCloud", + "height": 140 }, { "patterns": [ "https?://(?:www\\.)?flickr\\.com/.*", "https?://flic\\.kr/p/[a-zA-Z0-9]+" ], - "name": "Flickr" + "name": "Flickr", + "height": 110 }, { "patterns": [ "http://www\\.ted\\.com/talks/.+\\.html" ], - "name": "TED" + "name": "TED", + "height": 110 }, { "patterns": [ "http://(?:www\\.)?theverge\\.com/\\d{4}/\\d{1,2}/\\d{1,2}/\\d+/[^/]+/?$" ], - "name": "The Verge" + "name": "The Verge", + "height": 110 }, { "patterns": [ "http://.*\\.viddler\\.com/.*" ], - "name": "Viddler" + "name": "Viddler", + "height": 110 }, { "patterns": [ "https?://(?:www\\.)?avclub\\.com/article/[^/]+/?$" ], - "name": "The AV Club" + "name": "The AV Club", + "height": 110 }, { "patterns": [ "https?://(?:www\\.)?wired\\.com/([^/]+/)?\\d+/\\d+/[^/]+/?$" ], - "name": "Wired" + "name": "Wired", + "height": 110 }, { "patterns": [ "http://www\\.theonion\\.com/articles/[^/]+/?" ], - "name": "The Onion" + "name": "The Onion", + "height": 110 }, { "patterns": [ "http://yfrog\\.com/[0-9a-zA-Z]+/?$" ], - "name": "YFrog" + "name": "YFrog", + "height": 110 }, { "patterns": [ "http://www\\.duffelblog\\.com/\\d{4}/\\d{1,2}/[^/]+/?$" ], - "name": "The Duffel Blog" + "name": "The Duffel Blog", + "height": 110 }, { "patterns": [ "http://www\\.clickhole\\.com/article/[^/]+/?" ], - "name": "Clickhole" + "name": "Clickhole", + "height": 110 }, { "patterns": [ "https?://(?:www.)?skitch.com/([^/]+)/[^/]+/.+", "http://skit.ch/[^/]+" ], - "name": "Skitch" + "name": "Skitch", + "height": 110 }, { "patterns": [ "https?://(alpha|posts|photos)\\.app\\.net/.*" ], - "name": "ADN" + "name": "ADN", + "height": 110 }, { "patterns": [ "https?://gist\\.github\\.com/(?:[-0-9a-zA-Z]+/)?([0-9a-fA-f]+)" ], - "name": "Gist" + "name": "Gist", + "height": 110 }, { "patterns": [ "https?://www\\.(dropbox\\.com/s/.+\\.(?:jpg|png|gif))", "https?://db\\.tt/[a-zA-Z0-9]+" ], - "name": "Dropbox" + "name": "Dropbox", + "height": 110 }, { "patterns": [ "https?://[^\\.]+\\.wikipedia\\.org/wiki/(?!Talk:)[^#]+(?:#(.+))?" ], - "name": "Wikipedia" + "name": "Wikipedia", + "height": 110 }, { "patterns": [ "http://www.traileraddict.com/trailer/[^/]+/trailer" ], - "name": "TrailerAddict" + "name": "TrailerAddict", + "height": 110 }, { "patterns": [ "http://lockerz\\.com/[sd]/\\d+" ], - "name": "Lockerz" + "name": "Lockerz", + "height": 110 }, { "patterns": [ "http://gifuk\\.com/s/[0-9a-f]{16}" ], - "name": "GIFUK" + "name": "GIFUK", + "height": 110 }, { "patterns": [ "http://trailers\\.apple\\.com/trailers/[^/]+/[^/]+" ], - "name": "iTunes Movie Trailers" + "name": "iTunes Movie Trailers", + "height": 110 }, { "patterns": [ "http://gfycat\\.com/([a-zA-Z]+)" ], - "name": "Gfycat" + "name": "Gfycat", + "height": 110 }, { "patterns": [ "http://bash\\.org/\\?(\\d+)" ], - "name": "Bash.org" + "name": "Bash.org", + "height": 110 }, { "patterns": [ "http://arstechnica\\.com/[^/]+/\\d+/\\d+/[^/]+/?$" ], - "name": "Ars Technica" + "name": "Ars Technica", + "height": 110 }, { "patterns": [ "http://imgur\\.com/gallery/[0-9a-zA-Z]+" ], - "name": "Imgur" + "name": "Imgur", + "height": 110 }, { "patterns": [ "http://www\\.asciiartfarts\\.com/[0-9]+\\.html" ], - "name": "ASCII Art Farts" + "name": "ASCII Art Farts", + "height": 110 }, { "patterns": [ "http://www\\.monoprice\\.com/products/product\\.asp\\?.*p_id=\\d+" ], - "name": "Monoprice" + "name": "Monoprice", + "height": 110 }, { "patterns": [ "http://boingboing\\.net/\\d{4}/\\d{2}/\\d{2}/[^/]+\\.html" ], - "name": "Boing Boing" + "name": "Boing Boing", + "height": 110 }, { "patterns": [ "https?://github\\.com/([^/]+)/([^/]+)/commit/(.+)", "http://git\\.io/[_0-9a-zA-Z]+" ], - "name": "Github Commit" + "name": "Github Commit", + "height": 110 }, { "patterns": [ "https?://open\\.spotify\\.com/(track|album)/([0-9a-zA-Z]{22})" ], - "name": "Spotify" + "name": "Spotify", + "height": 110 }, { "patterns": [ "https?://path\\.com/p/([0-9a-zA-Z]+)$" ], - "name": "Path" + "name": "Path", + "height": 110 }, { "patterns": [ "http://www.funnyordie.com/videos/[^/]+/.+" ], - "name": "Funny or Die" + "name": "Funny or Die", + "height": 110 }, { "patterns": [ "http://(?:www\\.)?twitpic\\.com/([^/]+)" ], - "name": "Twitpic" + "name": "Twitpic", + "height": 110 }, { "patterns": [ "https?://www\\.giantbomb\\.com/videos/[^/]+/\\d+-\\d+/?" ], - "name": "GiantBomb" + "name": "GiantBomb", + "height": 110 }, { "patterns": [ "http://(?:www\\.)?beeradvocate\\.com/beer/profile/\\d+/\\d+" ], - "name": "Beer Advocate" + "name": "Beer Advocate", + "height": 110 }, { "patterns": [ "http://(?:www\\.)?imdb.com/title/(tt\\d+)" ], - "name": "IMDB" + "name": "IMDB", + "height": 110 }, { "patterns": [ "http://cl\\.ly/(?:image/)?[0-9a-zA-Z]+/?$" ], - "name": "CloudApp" + "name": "CloudApp", + "height": 110 }, { "patterns": [ "http://clyp\\.it/.*" ], - "name": "Clyp" + "name": "Clyp", + "height": 110 }, { "patterns": [ "http://www\\.hulu\\.com/watch/.*" ], - "name": "Hulu" + "name": "Hulu", + "height": 110 }, { "patterns": [ "https?://(?:www|mobile\\.)?twitter\\.com/(?:#!/)?[^/]+/status(?:es)?/(\\d+)/?$", "https?://t\\.co/[a-zA-Z0-9]+" ], - "name": "Twitter" + "name": "Twitter", + "height": 110 }, { "patterns": [ "https?://(?:www\\.)?vimeo\\.com/.+" ], - "name": "Vimeo" + "name": "Vimeo", + "height": 110 }, { "patterns": [ "http://www\\.amazon\\.com/(?:.+/)?[gd]p/(?:product/)?(?:tags-on-product/)?([a-zA-Z0-9]+)", "http://amzn\\.com/([^/]+)" ], - "name": "Amazon" + "name": "Amazon", + "height": 110 }, { "patterns": [ "http://qik\\.com/video/.*" ], - "name": "Qik" + "name": "Qik", + "height": 110 }, { "patterns": [ @@ -269,56 +312,65 @@ "http://www\\.rdio\\.com/artist/[^/]+/album/[^/]+/track/[^/]+/?", "http://www\\.rdio\\.com/people/[^/]+/playlists/\\d+/[^/]+" ], - "name": "Rdio" + "name": "Rdio", + "height": 110 }, { "patterns": [ "http://www\\.slideshare\\.net/.*/.*" ], - "name": "SlideShare" + "name": "SlideShare", + "height": 110 }, { "patterns": [ "http://imgur\\.com/([0-9a-zA-Z]+)$" ], - "name": "Imgur" + "name": "Imgur", + "height": 110 }, { "patterns": [ "https?://instagr(?:\\.am|am\\.com)/p/.+" ], - "name": "Instagram" + "name": "Instagram", + "height": 110 }, { "patterns": [ "http://www\\.twitlonger\\.com/show/[a-zA-Z0-9]+", "http://tl\\.gd/[^/]+" ], - "name": "Twitlonger" + "name": "Twitlonger", + "height": 110 }, { "patterns": [ "https?://vine.co/v/[a-zA-Z0-9]+" ], - "name": "Vine" + "name": "Vine", + "height": 490 }, { "patterns": [ "http://www\\.urbandictionary\\.com/define\\.php\\?term=.+" ], - "name": "Urban Dictionary" + "name": "Urban Dictionary", + "height": 110 }, { "patterns": [ "http://picplz\\.com/user/[^/]+/pic/[^/]+" ], - "name": "Picplz" + "name": "Picplz", + "height": 110 }, { "patterns": [ "https?://(?:www\\.)?twitter\\.com/(?:#!/)?[^/]+/status(?:es)?/(\\d+)/photo/\\d+(?:/large|/)?$", "https?://pic\\.twitter\\.com/.+" ], - "name": "Twitter" + "name": "Twitter", + "height": 110 } -]
\ No newline at end of file +] diff --git a/web/react/components/rhs_root_post.jsx b/web/react/components/rhs_root_post.jsx index 3d3d9e13f..dd9a793be 100644 --- a/web/react/components/rhs_root_post.jsx +++ b/web/react/components/rhs_root_post.jsx @@ -6,12 +6,14 @@ import UserProfile from './user_profile.jsx'; import UserStore from '../stores/user_store.jsx'; import * as TextFormatting from '../utils/text_formatting.jsx'; import * as utils from '../utils/utils.jsx'; +import * as Emoji from '../utils/emoticons.jsx'; import FileAttachmentList from './file_attachment_list.jsx'; import twemoji from 'twemoji'; -import Constants from '../utils/constants.jsx'; import PostBodyAdditionalContent from './post_body_additional_content.jsx'; import * as EventHelpers from '../dispatcher/event_helpers.jsx'; +import Constants from '../utils/constants.jsx'; + export default class RhsRootPost extends React.Component { constructor(props) { super(props); @@ -21,7 +23,11 @@ export default class RhsRootPost extends React.Component { this.state = {}; } parseEmojis() { - twemoji.parse(ReactDOM.findDOMNode(this), {size: Constants.EMOJI_SIZE}); + twemoji.parse(ReactDOM.findDOMNode(this), { + className: 'emoji twemoji', + base: '', + folder: Emoji.getImagePathForEmoticon() + }); } componentDidMount() { this.parseEmojis(); @@ -54,6 +60,11 @@ export default class RhsRootPost extends React.Component { currentUserCss = 'current--user'; } + var systemMessageClass = ''; + if (utils.isSystemMessage(post)) { + systemMessageClass = 'post--system'; + } + var channelName; if (channel) { if (channel.type === 'D') { @@ -152,6 +163,15 @@ export default class RhsRootPost extends React.Component { } botIndicator = <li className='col col__name bot-indicator'>{'BOT'}</li>; + } else if (utils.isSystemMessage(post)) { + userProfile = ( + <UserProfile + userId={''} + overwriteName={Constants.SYSTEM_MESSAGE_PROFILE_NAME} + overwriteImage={Constants.SYSTEM_MESSAGE_PROFILE_IMAGE} + disablePopover={true} + /> + ); } let src = '/api/v1/users/' + post.user_id + '/image?time=' + timestamp + '&' + utils.getSessionIndex(); @@ -159,6 +179,8 @@ export default class RhsRootPost extends React.Component { if (post.props.override_icon_url) { src = post.props.override_icon_url; } + } else if (utils.isSystemMessage(post)) { + src = Constants.SYSTEM_MESSAGE_PROFILE_IMAGE; } const profilePic = ( @@ -171,7 +193,7 @@ export default class RhsRootPost extends React.Component { ); return ( - <div className={'post post--root ' + currentUserCss}> + <div className={'post post--root ' + currentUserCss + ' ' + systemMessageClass}> <div className='post-right-channel__name'>{channelName}</div> <div className='post__content'> <div className='post__img'> @@ -187,7 +209,7 @@ export default class RhsRootPost extends React.Component { </time> </li> <li className='col col__reply'> - <div className='dropdown'> + <div> {rootOptions} </div> </li> diff --git a/web/react/components/rhs_thread.jsx b/web/react/components/rhs_thread.jsx index 61f138539..2edcd8b37 100644 --- a/web/react/components/rhs_thread.jsx +++ b/web/react/components/rhs_thread.jsx @@ -101,7 +101,15 @@ export default class RhsThread extends React.Component { } if (currentPosts.posts[currentPosts.order[0]].channel_id === currentSelected.posts[currentSelected.order[0]].channel_id) { - currentSelected.posts = {}; + for (var key in currentSelected.posts) { + if (currentSelected.posts.hasOwnProperty(key)) { + var post = currentSelected.posts[key]; + if (post.pending_post_id) { + Reflect.deleteProperty(currentSelected.posts, key); + } + } + } + for (var postId in currentPosts.posts) { if (currentPosts.posts.hasOwnProperty(postId)) { currentSelected.posts[postId] = currentPosts.posts[postId]; diff --git a/web/react/components/search_autocomplete.jsx b/web/react/components/search_autocomplete.jsx deleted file mode 100644 index 4c0aa0166..000000000 --- a/web/react/components/search_autocomplete.jsx +++ /dev/null @@ -1,341 +0,0 @@ -// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import ChannelStore from '../stores/channel_store.jsx'; -import Constants from '../utils/constants.jsx'; -const KeyCodes = Constants.KeyCodes; -const Popover = ReactBootstrap.Popover; -import UserStore from '../stores/user_store.jsx'; -import * as Utils from '../utils/utils.jsx'; - -const patterns = new Map([ - ['channels', /\b(?:in|channel):\s*(\S*)$/i], - ['users', /\bfrom:\s*(\S*)$/i] -]); - -export default class SearchAutocomplete extends React.Component { - constructor(props) { - super(props); - - this.handleClick = this.handleClick.bind(this); - this.handleDocumentClick = this.handleDocumentClick.bind(this); - this.handleInputChange = this.handleInputChange.bind(this); - this.handleKeyDown = this.handleKeyDown.bind(this); - - this.completeWord = this.completeWord.bind(this); - this.getSelection = this.getSelection.bind(this); - this.scrollToItem = this.scrollToItem.bind(this); - this.updateSuggestions = this.updateSuggestions.bind(this); - - this.renderChannelSuggestion = this.renderChannelSuggestion.bind(this); - this.renderUserSuggestion = this.renderUserSuggestion.bind(this); - - this.state = { - show: false, - mode: '', - filter: '', - selection: 0, - suggestions: new Map() - }; - } - - componentDidMount() { - $(document).on('click', this.handleDocumentClick); - } - - componentDidUpdate(prevProps, prevState) { - const content = $(ReactDOM.findDOMNode(this.refs.searchPopover)).find('.popover-content'); - - if (this.state.show && this.state.suggestions.length > 0) { - if (!prevState.show) { - content.perfectScrollbar(); - content.css('max-height', $(window).height() - 200); - } - - // keep the keyboard selection visible when scrolling - this.scrollToItem(this.getSelection()); - } - } - - componentWillUnmount() { - $(document).off('click', this.handleDocumentClick); - } - - handleClick(value) { - this.completeWord(value); - } - - handleDocumentClick(e) { - const container = $(ReactDOM.findDOMNode(this.refs.searchPopover)); - - if (!(container.is(e.target) || container.has(e.target).length > 0)) { - this.setState({ - show: false - }); - } - } - - handleInputChange(textbox, text) { - const caret = Utils.getCaretPosition(textbox); - const preText = text.substring(0, caret); - - let mode = ''; - let filter = ''; - for (const [modeForPattern, pattern] of patterns) { - const result = pattern.exec(preText); - - if (result) { - mode = modeForPattern; - filter = result[1]; - break; - } - } - - if (mode !== this.state.mode || filter !== this.state.filter) { - this.updateSuggestions(mode, filter); - } - - this.setState({ - mode, - filter, - show: mode || filter - }); - } - - handleKeyDown(e) { - if (!this.state.show || this.state.suggestions.length === 0) { - return; - } - - if (e.which === KeyCodes.UP || e.which === KeyCodes.DOWN) { - e.preventDefault(); - - let selection = this.state.selection; - - if (e.which === KeyCodes.UP) { - selection -= 1; - } else { - selection += 1; - } - - if (selection >= 0 && selection < this.state.suggestions.length) { - this.setState({ - selection - }); - } - } else if (e.which === KeyCodes.ENTER || e.which === KeyCodes.SPACE) { - e.preventDefault(); - - this.completeWord(this.getSelection()); - } - } - - completeWord(value) { - // add a space so that anything else typed doesn't interfere with the search flag - this.props.completeWord(this.state.filter, value + ' '); - - this.setState({ - show: false, - mode: '', - filter: '', - selection: 0 - }); - } - - getSelection() { - if (this.state.suggestions.length > 0) { - if (this.state.mode === 'channels') { - return this.state.suggestions[this.state.selection].name; - } else if (this.state.mode === 'users') { - return this.state.suggestions[this.state.selection].username; - } - } - - return ''; - } - - scrollToItem(itemName) { - const content = $(ReactDOM.findDOMNode(this.refs.searchPopover)).find('.popover-content'); - const visibleContentHeight = content[0].clientHeight; - const actualContentHeight = content[0].scrollHeight; - - if (this.state.suggestions.length > 0 && visibleContentHeight < actualContentHeight) { - const contentTop = content.scrollTop(); - const contentTopPadding = parseInt(content.css('padding-top'), 10); - const contentBottomPadding = parseInt(content.css('padding-top'), 10); - - const item = $(this.refs[itemName]); - const itemTop = item[0].offsetTop - parseInt(item.css('margin-top'), 10); - const itemBottom = item[0].offsetTop + item.height() + parseInt(item.css('margin-bottom'), 10); - - if (itemTop - contentTopPadding < contentTop) { - // the item is off the top of the visible space - content.scrollTop(itemTop - contentTopPadding); - } else if (itemBottom + contentTopPadding + contentBottomPadding > contentTop + visibleContentHeight) { - // the item has gone off the bottom of the visible space - content.scrollTop(itemBottom - visibleContentHeight + contentTopPadding + contentBottomPadding); - } - } - } - - updateSuggestions(mode, filter) { - let suggestions = []; - - if (mode === 'channels') { - let channels = ChannelStore.getAll(); - - if (filter) { - channels = channels.filter((channel) => channel.name.startsWith(filter) && channel.type !== 'D'); - } else { - // don't show direct channels - channels = channels.filter((channel) => channel.type !== 'D'); - } - - channels.sort((a, b) => { - // put public channels first and then sort alphabebetically - if (a.type === b.type) { - return a.name.localeCompare(b.name); - } else if (a.type === Constants.OPEN_CHANNEL) { - return -1; - } - - return 1; - }); - - suggestions = channels; - } else if (mode === 'users') { - let users = UserStore.getActiveOnlyProfileList(); - - if (filter) { - users = users.filter((user) => user.username.startsWith(filter)); - } - - users.sort((a, b) => a.username.localeCompare(b.username)); - - suggestions = users; - } - - let selection = this.state.selection; - - // keep the same user/channel selected if it's still visible as a suggestion - if (selection > 0 && this.state.suggestions.length > 0) { - // we can't just use indexOf to find if the selection is still in the list since they are different javascript objects - const currentSelectionId = this.state.suggestions[selection].id; - let found = false; - - for (let i = 0; i < suggestions.length; i++) { - if (suggestions[i].id === currentSelectionId) { - selection = i; - found = true; - - break; - } - } - - if (!found) { - selection = 0; - } - } else { - selection = 0; - } - - this.setState({ - suggestions, - selection - }); - } - - renderChannelSuggestion(channel) { - let className = 'search-autocomplete__item'; - if (channel.name === this.getSelection()) { - className += ' selected'; - } - - return ( - <div - key={channel.name} - ref={channel.name} - onClick={this.handleClick.bind(this, channel.name)} - className={className} - > - {channel.name} - </div> - ); - } - - renderUserSuggestion(user) { - let className = 'search-autocomplete__item'; - if (user.username === this.getSelection()) { - className += ' selected'; - } - - return ( - <div - key={user.username} - ref={user.username} - onClick={this.handleClick.bind(this, user.username)} - className={className} - > - <img - className='profile-img rounded' - src={'/api/v1/users/' + user.id + '/image?time=' + user.update_at} - /> - {user.username} - </div> - ); - } - - render() { - if (!this.state.show || this.state.suggestions.length === 0) { - return null; - } - - let suggestions = []; - - if (this.state.mode === 'channels') { - const publicChannels = this.state.suggestions.filter((channel) => channel.type === Constants.OPEN_CHANNEL); - if (publicChannels.length > 0) { - suggestions.push( - <div - key='public-channel-divider' - className='search-autocomplete__divider' - > - <span>{'Public ' + Utils.getChannelTerm(Constants.OPEN_CHANNEL) + 's'}</span> - </div> - ); - suggestions = suggestions.concat(publicChannels.map(this.renderChannelSuggestion)); - } - - const privateChannels = this.state.suggestions.filter((channel) => channel.type === Constants.PRIVATE_CHANNEL); - if (privateChannels.length > 0) { - suggestions.push( - <div - key='private-channel-divider' - className='search-autocomplete__divider' - > - <span>{'Private ' + Utils.getChannelTerm(Constants.PRIVATE_CHANNEL) + 's'}</span> - </div> - ); - suggestions = suggestions.concat(privateChannels.map(this.renderChannelSuggestion)); - } - } else if (this.state.mode === 'users') { - suggestions = this.state.suggestions.map(this.renderUserSuggestion); - } - - return ( - <Popover - ref='searchPopover' - onShow={this.componentDidMount} - id='search-autocomplete__popover' - className='search-help-popover autocomplete visible' - placement='bottom' - > - {suggestions} - </Popover> - ); - } -} - -SearchAutocomplete.propTypes = { - completeWord: React.PropTypes.func.isRequired -}; diff --git a/web/react/components/search_bar.jsx b/web/react/components/search_bar.jsx index 32f0f93bf..77c9e39b9 100644 --- a/web/react/components/search_bar.jsx +++ b/web/react/components/search_bar.jsx @@ -5,11 +5,14 @@ import * as client from '../utils/client.jsx'; import * as AsyncClient from '../utils/async_client.jsx'; import SearchStore from '../stores/search_store.jsx'; import AppDispatcher from '../dispatcher/app_dispatcher.jsx'; +import SuggestionBox from './suggestion/suggestion_box.jsx'; +import SearchChannelProvider from './suggestion/search_channel_provider.jsx'; +import SearchSuggestionList from './suggestion/search_suggestion_list.jsx'; +import SearchUserProvider from './suggestion/search_user_provider.jsx'; import * as utils from '../utils/utils.jsx'; import Constants from '../utils/constants.jsx'; var ActionTypes = Constants.ActionTypes; var Popover = ReactBootstrap.Popover; -import SearchAutocomplete from './search_autocomplete.jsx'; export default class SearchBar extends React.Component { constructor() { @@ -17,17 +20,17 @@ export default class SearchBar extends React.Component { this.mounted = false; this.onListenerChange = this.onListenerChange.bind(this); - this.handleKeyDown = this.handleKeyDown.bind(this); this.handleUserInput = this.handleUserInput.bind(this); this.handleUserFocus = this.handleUserFocus.bind(this); this.handleUserBlur = this.handleUserBlur.bind(this); this.performSearch = this.performSearch.bind(this); this.handleSubmit = this.handleSubmit.bind(this); - this.completeWord = this.completeWord.bind(this); const state = this.getSearchTermStateFromStores(); state.focused = false; this.state = state; + + this.suggestionProviders = [new SearchChannelProvider(), new SearchUserProvider()]; } getSearchTermStateFromStores() { var term = SearchStore.getSearchTerm() || ''; @@ -77,18 +80,11 @@ export default class SearchBar extends React.Component { results: null }); } - handleKeyDown(e) { - if (this.refs.autocomplete) { - this.refs.autocomplete.handleKeyDown(e); - } - } - handleUserInput(e) { - var term = e.target.value; + handleUserInput(text) { + var term = text; SearchStore.storeSearchTerm(term); SearchStore.emitSearchTermChange(false); this.setState({searchTerm: term}); - - this.refs.autocomplete.handleInputChange(e.target, term); } handleUserBlur() { this.setState({focused: false}); @@ -128,23 +124,6 @@ export default class SearchBar extends React.Component { this.performSearch(this.state.searchTerm.trim()); } - completeWord(partialWord, word) { - const textbox = ReactDOM.findDOMNode(this.refs.search); - let text = textbox.value; - - const caret = utils.getCaretPosition(textbox); - const preText = text.substring(0, caret - partialWord.length); - const postText = text.substring(caret); - text = preText + word + postText; - - textbox.value = text; - utils.setCaretPosition(textbox, preText.length + word.length); - - SearchStore.storeSearchTerm(text); - SearchStore.emitSearchTermChange(false); - this.setState({searchTerm: text}); - } - render() { var isSearching = null; if (this.state.isSearching) { @@ -178,22 +157,18 @@ export default class SearchBar extends React.Component { autoComplete='off' > <span className='glyphicon glyphicon-search sidebar__search-icon' /> - <input - type='text' + <SuggestionBox ref='search' className='form-control search-bar' placeholder='Search' value={this.state.searchTerm} onFocus={this.handleUserFocus} onBlur={this.handleUserBlur} - onChange={this.handleUserInput} - onKeyDown={this.handleKeyDown} + onUserInput={this.handleUserInput} + listComponent={SearchSuggestionList} + providers={this.suggestionProviders} /> {isSearching} - <SearchAutocomplete - ref='autocomplete' - completeWord={this.completeWord} - /> <Popover id='searchbar-help-popup' placement='bottom' diff --git a/web/react/components/search_results_item.jsx b/web/react/components/search_results_item.jsx index da422fe1b..f71abf971 100644 --- a/web/react/components/search_results_item.jsx +++ b/web/react/components/search_results_item.jsx @@ -8,17 +8,31 @@ import * as EventHelpers from '../dispatcher/event_helpers.jsx'; import * as utils from '../utils/utils.jsx'; import * as TextFormatting from '../utils/text_formatting.jsx'; +import Constants from '../utils/constants.jsx'; + export default class SearchResultsItem extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); + this.handleFocusRHSClick = this.handleFocusRHSClick.bind(this); } handleClick(e) { e.preventDefault(); EventHelpers.emitPostFocusEvent(this.props.post.id); + + if ($(window).width() < 768) { + $('.sidebar--right').removeClass('move--left'); + $('.inner__wrap').removeClass('move--left'); + } + } + + handleFocusRHSClick(e) { + e.preventDefault(); + + EventHelpers.emitPostFocusRightHandSideEvent(this.props.post); } render() { @@ -41,7 +55,6 @@ export default class SearchResultsItem extends React.Component { return ( <div className='search-item-container post' - onClick={this.handleClick} > <div className='search-channel__name'>{channelName}</div> <div className='post__content'> @@ -60,10 +73,30 @@ export default class SearchResultsItem extends React.Component { {utils.displayDate(this.props.post.create_at) + ' ' + utils.displayTime(this.props.post.create_at)} </time> </li> + <li> + <a + href='#' + className='search-item__jump' + onClick={this.handleClick} + > + {'Jump'} + </a> + </li> + <li> + <a + href='#' + className='comment-icon__container search-item__comment' + onClick={this.handleFocusRHSClick} + > + <span + className='comment-icon' + dangerouslySetInnerHTML={{__html: Constants.COMMENT_ICON}} + /> + </a> + </li> </ul> <div className='search-item-snippet'> <span - onClick={this.handleClick} dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.post.message, formattingOptions)}} /> </div> diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index b4c037183..8393440cb 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -3,7 +3,6 @@ import NewChannelFlow from './new_channel_flow.jsx'; import MoreDirectChannels from './more_direct_channels.jsx'; -import SearchBox from './search_bar.jsx'; import SidebarHeader from './sidebar_header.jsx'; import UnreadChannelIndicator from './unread_channel_indicator.jsx'; import TutorialTip from './tutorial/tutorial_tip.jsx'; @@ -20,7 +19,6 @@ import * as Utils from '../utils/utils.jsx'; import Constants from '../utils/constants.jsx'; const Preferences = Constants.Preferences; const TutorialSteps = Constants.TutorialSteps; -const NotificationPrefs = Constants.NotificationPrefs; const Tooltip = ReactBootstrap.Tooltip; const OverlayTrigger = ReactBootstrap.OverlayTrigger; @@ -39,7 +37,6 @@ export default class Sidebar extends React.Component { this.onScroll = this.onScroll.bind(this); this.updateUnreadIndicators = this.updateUnreadIndicators.bind(this); this.handleLeaveDirectChannel = this.handleLeaveDirectChannel.bind(this); - this.updateScrollbar = this.updateScrollbar.bind(this); this.handleResize = this.handleResize.bind(this); this.showNewChannelModal = this.showNewChannelModal.bind(this); @@ -49,8 +46,6 @@ export default class Sidebar extends React.Component { this.createChannelElement = this.createChannelElement.bind(this); this.updateTitle = this.updateTitle.bind(this); - this.setUnreadCountPerChannel = this.setUnreadCountPerChannel.bind(this); - this.getUnreadCount = this.getUnreadCount.bind(this); this.isLeaving = new Map(); @@ -60,43 +55,15 @@ export default class Sidebar extends React.Component { state.loadingDMChannel = -1; state.windowWidth = Utils.windowWidth(); this.state = state; - - this.unreadCountPerChannel = {}; - this.setUnreadCountPerChannel(); - } - setUnreadCountPerChannel() { - const channels = ChannelStore.getAll(); - const members = ChannelStore.getAllMembers(); - const channelUnreadCounts = {}; - - channels.forEach((ch) => { - const chMember = members[ch.id]; - let chMentionCount = chMember.mention_count; - let chUnreadCount = ch.total_msg_count - chMember.msg_count - chMentionCount; - - if (ch.type === 'D') { - chMentionCount = chUnreadCount; - chUnreadCount = 0; - } else if (chMember.notify_props && chMember.notify_props.mark_unread === NotificationPrefs.MENTION) { - chUnreadCount = 0; - } - - channelUnreadCounts[ch.id] = {msgs: chUnreadCount, mentions: chMentionCount}; - }); - - this.unreadCountPerChannel = channelUnreadCounts; } - getUnreadCount(channelId) { - let mentions = 0; + getTotalUnreadCount() { let msgs = 0; + let mentions = 0; + const unreadCounts = this.state.unreadCounts; - if (channelId) { - return this.unreadCountPerChannel[channelId] ? this.unreadCountPerChannel[channelId] : {msgs, mentions}; - } - - Object.keys(this.unreadCountPerChannel).forEach((chId) => { - msgs += this.unreadCountPerChannel[chId].msgs; - mentions += this.unreadCountPerChannel[chId].mentions; + Object.keys(unreadCounts).forEach((chId) => { + msgs += unreadCounts[chId].msgs; + mentions += unreadCounts[chId].mentions; }); return {msgs, mentions}; @@ -104,49 +71,47 @@ export default class Sidebar extends React.Component { getStateFromStores() { const members = ChannelStore.getAllMembers(); const currentChannelId = ChannelStore.getCurrentId(); + const currentUserId = UserStore.getCurrentId(); const channels = Object.assign([], ChannelStore.getAll()); channels.sort((a, b) => a.display_name.localeCompare(b.display_name)); const publicChannels = channels.filter((channel) => channel.type === Constants.OPEN_CHANNEL); const privateChannels = channels.filter((channel) => channel.type === Constants.PRIVATE_CHANNEL); - const directChannels = channels.filter((channel) => channel.type === Constants.DM_CHANNEL); const preferences = PreferenceStore.getPreferences(Constants.Preferences.CATEGORY_DIRECT_CHANNEL_SHOW); - var visibleDirectChannels = []; - for (var i = 0; i < directChannels.length; i++) { - const dm = directChannels[i]; - const teammate = Utils.getDirectTeammate(dm.id); - if (!teammate) { + const directChannels = []; + for (const preference of preferences) { + if (preference.value !== 'true') { continue; } - const member = members[dm.id]; - const msgCount = dm.total_msg_count - member.msg_count; + const teammateId = preference.name; - // always show a channel if either it is the current one or if it is unread, but it is not currently being left - const forceShow = (currentChannelId === dm.id || msgCount > 0) && !this.isLeaving.get(dm.id); - const preferenceShow = preferences.some((preference) => (preference.name === teammate.id && preference.value !== 'false')); + let directChannel = channels.find(Utils.isDirectChannelForUser.bind(null, teammateId)); - if (preferenceShow || forceShow) { - dm.display_name = Utils.displayUsername(teammate.id); - dm.teammate_id = teammate.id; - dm.status = UserStore.getStatus(teammate.id); + // a direct channel doesn't exist yet so create a fake one + if (!directChannel) { + directChannel = { + name: Utils.getDirectChannelName(currentUserId, teammateId), + last_post_at: 0, + total_msg_count: 0, + type: Constants.DM_CHANNEL, + fake: true + }; + } - visibleDirectChannels.push(dm); + directChannel.display_name = Utils.displayUsername(teammateId); + directChannel.teammate_id = teammateId; + directChannel.status = UserStore.getStatus(teammateId); - if (forceShow && !preferenceShow) { - // make sure that unread direct channels are visible - const preference = PreferenceStore.setPreference(Constants.Preferences.CATEGORY_DIRECT_CHANNEL_SHOW, teammate.id, 'true'); - AsyncClient.savePreferences([preference]); - } - } + directChannels.push(directChannel); } - const hiddenDirectChannelCount = UserStore.getActiveOnlyProfileList(true).length - visibleDirectChannels.length; + directChannels.sort(this.sortChannelsByDisplayName); - visibleDirectChannels.sort(this.sortChannelsByDisplayName); + const hiddenDirectChannelCount = UserStore.getActiveOnlyProfileList(true).length - directChannels.length; const tutorialPref = PreferenceStore.getPreference(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), {value: '999'}); @@ -155,8 +120,9 @@ export default class Sidebar extends React.Component { members, publicChannels, privateChannels, - visibleDirectChannels, + directChannels, hiddenDirectChannelCount, + unreadCounts: JSON.parse(JSON.stringify(ChannelStore.getUnreadCounts())), showTutorialTip: parseInt(tutorialPref.value, 10) === TutorialSteps.CHANNEL_POPOVER }; } @@ -170,7 +136,6 @@ export default class Sidebar extends React.Component { this.updateTitle(); this.updateUnreadIndicators(); - this.updateScrollbar(); window.addEventListener('resize', this.handleResize); @@ -187,7 +152,6 @@ export default class Sidebar extends React.Component { componentDidUpdate() { this.updateTitle(); this.updateUnreadIndicators(); - this.updateScrollbar(); } componentWillUnmount() { window.removeEventListener('resize', this.handleResize); @@ -204,8 +168,6 @@ export default class Sidebar extends React.Component { windowHeight: Utils.windowHeight() }); } - updateScrollbar() { - } onChange() { this.setState(this.getStateFromStores()); } @@ -222,7 +184,7 @@ export default class Sidebar extends React.Component { currentChannelName = Utils.getDirectTeammate(channel.id).username; } - const unread = this.getUnreadCount(); + const unread = this.getTotalUnreadCount(); const mentionTitle = unread.mentions > 0 ? '(' + unread.mentions + ') ' : ''; const unreadTitle = unread.msgs > 0 ? '* ' : ''; document.title = mentionTitle + unreadTitle + currentChannelName + ' - ' + TeamStore.getCurrent().display_name + ' ' + currentSiteName; @@ -348,13 +310,13 @@ export default class Sidebar extends React.Component { } createChannelElement(channel, index, arr, handleClose) { - var members = this.state.members; - var activeId = this.state.activeId; - var channelMember = members[channel.id]; - var unreadCount = this.getUnreadCount(channel.id); - var msgCount; + const members = this.state.members; + const activeId = this.state.activeId; + const channelMember = members[channel.id]; + const unreadCount = this.state.unreadCounts[channel.id] || {msgs: 0, mentions: 0}; + let msgCount; - var linkClass = ''; + let linkClass = ''; if (channel.id === activeId) { linkClass = 'active'; } @@ -511,8 +473,6 @@ export default class Sidebar extends React.Component { render() { this.badgesActive = false; - this.setUnreadCountPerChannel(); - // keep track of the first and last unread channels so we can use them to set the unread indicators this.firstUnreadChannel = null; this.lastUnreadChannel = null; @@ -522,7 +482,7 @@ export default class Sidebar extends React.Component { const privateChannelItems = this.state.privateChannels.map(this.createChannelElement); - const directMessageItems = this.state.visibleDirectChannels.map((channel, index, arr) => { + const directMessageItems = this.state.directChannels.map((channel, index, arr) => { return this.createChannelElement(channel, index, arr, this.handleLeaveDirectChannel); }); @@ -586,7 +546,6 @@ export default class Sidebar extends React.Component { teamName={TeamStore.getCurrent().name} teamType={TeamStore.getCurrent().type} /> - <SearchBox /> <UnreadChannelIndicator show={this.state.showTopUnread} diff --git a/web/react/components/sidebar_right.jsx b/web/react/components/sidebar_right.jsx index 22d702369..ac1049da0 100644 --- a/web/react/components/sidebar_right.jsx +++ b/web/react/components/sidebar_right.jsx @@ -7,6 +7,8 @@ import SearchStore from '../stores/search_store.jsx'; import PostStore from '../stores/post_store.jsx'; import * as Utils from '../utils/utils.jsx'; +const SIDEBAR_SCROLL_DELAY = 500; + export default class SidebarRight extends React.Component { constructor(props) { super(props); @@ -39,8 +41,13 @@ export default class SidebarRight extends React.Component { PostStore.removeSelectedPostChangeListener(this.onSelectedChange); SearchStore.removeShowSearchListener(this.onShowSearch); } - componentWillUpdate() { - PostStore.jumpPostsViewSidebarOpen(); + componentWillUpdate(nextProps, nextState) { + const isOpen = this.state.search_visible || this.state.post_right_visible; + const willOpen = nextState.search_visible || nextState.post_right_visible; + + if (!isOpen && willOpen) { + setTimeout(() => PostStore.jumpPostsViewSidebarOpen(), SIDEBAR_SCROLL_DELAY); + } } doStrangeThings() { // We should have a better way to do this stuff diff --git a/web/react/components/sidebar_right_menu.jsx b/web/react/components/sidebar_right_menu.jsx index 8881d80a6..20c2bf696 100644 --- a/web/react/components/sidebar_right_menu.jsx +++ b/web/react/components/sidebar_right_menu.jsx @@ -87,7 +87,7 @@ export default class SidebarRightMenu extends React.Component { ); } - if (isSystemAdmin) { + if (isSystemAdmin && !utils.isMobile()) { consoleLink = ( <li> <a diff --git a/web/react/components/suggestion/at_mention_provider.jsx b/web/react/components/suggestion/at_mention_provider.jsx new file mode 100644 index 000000000..8c2893448 --- /dev/null +++ b/web/react/components/suggestion/at_mention_provider.jsx @@ -0,0 +1,100 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import SuggestionStore from '../../stores/suggestion_store.jsx'; +import UserStore from '../../stores/user_store.jsx'; +import * as Utils from '../../utils/utils.jsx'; + +class AtMentionSuggestion extends React.Component { + render() { + const {item, isSelection, onClick} = this.props; + + let username; + let description; + let icon; + if (item.username === 'all') { + username = 'all'; + description = 'Notifies everyone in the team'; + icon = <i className='mention-img fa fa-users fa-2x' />; + } else if (item.username === 'channel') { + username = 'channel'; + description = 'Notifies everyone in the channel'; + icon = <i className='mention-img fa fa-users fa-2x' />; + } else { + username = item.username; + description = Utils.getFullName(item); + icon = ( + <img + className='mention-img' + src={'/api/v1/users/' + item.id + '/image?time=' + item.update_at + '&' + Utils.getSessionIndex()} + /> + ); + } + + let className = 'mentions-name'; + if (isSelection) { + className += ' suggestion--selected'; + } + + return ( + <div + className={className} + onClick={onClick} + > + <div className='pull-left'> + {icon} + </div> + <div className='pull-left mention-align'> + <span> + {'@' + username} + </span> + <span className='mention-fullname'> + {description} + </span> + </div> + </div> + ); + } +} + +AtMentionSuggestion.propTypes = { + item: React.PropTypes.object.isRequired, + isSelection: React.PropTypes.bool, + onClick: React.PropTypes.func +}; + +export default class AtMentionProvider { + handlePretextChanged(suggestionId, pretext) { + const captured = (/@([a-z0-9\-\._]*)$/i).exec(pretext); + if (captured) { + const usernamePrefix = captured[1]; + + const users = UserStore.getProfiles(); + let filtered = []; + + for (const id of Object.keys(users)) { + const user = users[id]; + + if (user.username.startsWith(usernamePrefix)) { + filtered.push(user); + } + } + + // add dummy users to represent the @all and @channel special mentions + if ('all'.startsWith(usernamePrefix)) { + filtered.push({username: 'all'}); + } + + if ('channel'.startsWith(usernamePrefix)) { + filtered.push({username: 'channel'}); + } + + filtered = filtered.sort((a, b) => a.username.localeCompare(b.username)); + + const mentions = filtered.map((user) => '@' + user.username); + + SuggestionStore.setMatchedPretext(suggestionId, captured[0]); + SuggestionStore.addSuggestions(suggestionId, mentions, filtered, AtMentionSuggestion); + } + } +} diff --git a/web/react/components/suggestion/command_provider.jsx b/web/react/components/suggestion/command_provider.jsx new file mode 100644 index 000000000..91d556bb9 --- /dev/null +++ b/web/react/components/suggestion/command_provider.jsx @@ -0,0 +1,46 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import * as AsyncClient from '../../utils/async_client.jsx'; +import SuggestionStore from '../../stores/suggestion_store.jsx'; + +class CommandSuggestion extends React.Component { + render() { + const {item, isSelection, onClick} = this.props; + + let className = 'command-name'; + if (isSelection) { + className += ' suggestion--selected'; + } + + return ( + <div + className={className} + onClick={onClick} + > + <div className='command__title'> + <string>{item.suggestion}</string> + </div> + <div className='command__desc'> + {item.description} + </div> + </div> + ); + } +} + +CommandSuggestion.propTypes = { + item: React.PropTypes.object.isRequired, + isSelection: React.PropTypes.bool, + onClick: React.PropTypes.func +}; + +export default class CommandProvider { + handlePretextChanged(suggestionId, pretext) { + if (pretext.startsWith('/')) { + SuggestionStore.setMatchedPretext(suggestionId, pretext); + + AsyncClient.getSuggestedCommands(pretext, suggestionId, CommandSuggestion); + } + } +} diff --git a/web/react/components/suggestion/emoticon_provider.jsx b/web/react/components/suggestion/emoticon_provider.jsx new file mode 100644 index 000000000..fd470cf21 --- /dev/null +++ b/web/react/components/suggestion/emoticon_provider.jsx @@ -0,0 +1,91 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import SuggestionStore from '../../stores/suggestion_store.jsx'; +import * as Emoticons from '../../utils/emoticons.jsx'; + +const MAX_EMOTICON_SUGGESTIONS = 40; + +class EmoticonSuggestion extends React.Component { + render() { + const text = this.props.term; + const name = this.props.item; + + let className = 'emoticon-suggestion'; + if (this.props.isSelection) { + className += ' suggestion--selected'; + } + + return ( + <div + className={className} + onClick={this.props.onClick} + > + <div className='pull-left'> + <img + alt={text} + className='emoticon-suggestion__image' + src={Emoticons.getImagePathForEmoticon(name)} + title={text} + /> + </div> + <div className='pull-left'> + {text} + </div> + </div> + ); + } +} + +EmoticonSuggestion.propTypes = { + item: React.PropTypes.string.isRequired, + term: React.PropTypes.string.isRequired, + isSelection: React.PropTypes.bool, + onClick: React.PropTypes.func +}; + +export default class EmoticonProvider { + handlePretextChanged(suggestionId, pretext) { + const captured = (/(?:^|\s)(:([a-zA-Z0-9_+\-]*))$/g).exec(pretext); + if (captured) { + const text = captured[1]; + const partialName = captured[2]; + + const names = []; + + for (const emoticon of Emoticons.emoticonMap.keys()) { + if (emoticon.indexOf(partialName) !== -1) { + names.push(emoticon); + + if (names.length >= MAX_EMOTICON_SUGGESTIONS) { + break; + } + } + } + + // sort the emoticons so that emoticons starting with the entered text come first + names.sort((a, b) => { + const aPrefix = a.startsWith(partialName); + const bPrefix = b.startsWith(partialName); + + if (aPrefix === bPrefix) { + return a.localeCompare(b); + } else if (aPrefix) { + return -1; + } + + return 1; + }); + + const terms = names.map((name) => ':' + name + ':'); + + if (terms.length > 0) { + SuggestionStore.setMatchedPretext(suggestionId, text); + SuggestionStore.addSuggestions(suggestionId, terms, names, EmoticonSuggestion); + + // force the selection to be cleared since the order of elements may have changed + SuggestionStore.clearSelection(suggestionId); + } + } + } +} diff --git a/web/react/components/suggestion/search_channel_provider.jsx b/web/react/components/suggestion/search_channel_provider.jsx new file mode 100644 index 000000000..7547a9341 --- /dev/null +++ b/web/react/components/suggestion/search_channel_provider.jsx @@ -0,0 +1,69 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import ChannelStore from '../../stores/channel_store.jsx'; +import Constants from '../../utils/constants.jsx'; +import SuggestionStore from '../../stores/suggestion_store.jsx'; + +class SearchChannelSuggestion extends React.Component { + render() { + const {item, isSelection, onClick} = this.props; + + let className = 'search-autocomplete__item'; + if (isSelection) { + className += ' selected'; + } + + return ( + <div + onClick={onClick} + className={className} + > + {item.name} + </div> + ); + } +} + +SearchChannelSuggestion.propTypes = { + item: React.PropTypes.object.isRequired, + isSelection: React.PropTypes.bool, + onClick: React.PropTypes.func +}; + +export default class SearchChannelProvider { + handlePretextChanged(suggestionId, pretext) { + const captured = (/\b(?:in|channel):\s*(\S*)$/i).exec(pretext); + if (captured) { + const channelPrefix = captured[1]; + + const channels = ChannelStore.getAll(); + const publicChannels = []; + const privateChannels = []; + + for (const id of Object.keys(channels)) { + const channel = channels[id]; + + // don't show direct channels + if (channel.type !== Constants.DM_CHANNEL && channel.name.startsWith(channelPrefix)) { + if (channel.type === Constants.OPEN_CHANNEL) { + publicChannels.push(channel); + } else { + privateChannels.push(channel); + } + } + } + + publicChannels.sort((a, b) => a.name.localeCompare(b.name)); + const publicChannelNames = publicChannels.map((channel) => channel.name); + + privateChannels.sort((a, b) => a.name.localeCompare(b.name)); + const privateChannelNames = privateChannels.map((channel) => channel.name); + + SuggestionStore.setMatchedPretext(suggestionId, channelPrefix); + + SuggestionStore.addSuggestions(suggestionId, publicChannelNames, publicChannels, SearchChannelSuggestion); + SuggestionStore.addSuggestions(suggestionId, privateChannelNames, privateChannels, SearchChannelSuggestion); + } + } +} diff --git a/web/react/components/suggestion/search_suggestion_list.jsx b/web/react/components/suggestion/search_suggestion_list.jsx new file mode 100644 index 000000000..3378a33a0 --- /dev/null +++ b/web/react/components/suggestion/search_suggestion_list.jsx @@ -0,0 +1,86 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import Constants from '../../utils/constants.jsx'; +import SuggestionList from './suggestion_list.jsx'; +import * as Utils from '../../utils/utils.jsx'; + +export default class SearchSuggestionList extends SuggestionList { + componentDidUpdate(prevProps, prevState) { + if (this.state.items.length > 0 && prevState.items.length === 0) { + this.getContent().perfectScrollbar(); + } + } + + getContent() { + return $(ReactDOM.findDOMNode(this.refs.popover)).find('.popover-content'); + } + + renderChannelDivider(type) { + let text; + if (type === Constants.OPEN_CHANNEL) { + text = 'Public ' + Utils.getChannelTerm(type) + 's'; + } else { + text = 'Private ' + Utils.getChannelTerm(type) + 's'; + } + + return ( + <div + key={type + '-divider'} + className='search-autocomplete__divider' + > + <span>{text}</span> + </div> + ); + } + + render() { + if (this.state.items.length === 0) { + return null; + } + + const items = []; + for (let i = 0; i < this.state.items.length; i++) { + const item = this.state.items[i]; + const term = this.state.terms[i]; + const isSelection = term === this.state.selection; + + // ReactComponent names need to be upper case when used in JSX + const Component = this.state.components[i]; + + // temporary hack to add dividers between public and private channels in the search suggestion list + if (i === 0 || item.type !== this.state.items[i - 1].type) { + if (item.type === Constants.OPEN_CHANNEL) { + items.push(this.renderChannelDivider(Constants.OPEN_CHANNEL)); + } else if (item.type === Constants.PRIVATE_CHANNEL) { + items.push(this.renderChannelDivider(Constants.PRIVATE_CHANNEL)); + } + } + + items.push( + <Component + key={term} + ref={term} + item={item} + isSelection={isSelection} + onClick={this.handleItemClick.bind(this, term)} + /> + ); + } + + return ( + <ReactBootstrap.Popover + ref='popover' + id='search-autocomplete__popover' + className='search-help-popover autocomplete visible' + placement='bottom' + > + {items} + </ReactBootstrap.Popover> + ); + } +} + +SearchSuggestionList.propTypes = { + ...SuggestionList.propTypes +}; diff --git a/web/react/components/suggestion/search_user_provider.jsx b/web/react/components/suggestion/search_user_provider.jsx new file mode 100644 index 000000000..cf2953937 --- /dev/null +++ b/web/react/components/suggestion/search_user_provider.jsx @@ -0,0 +1,62 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import SuggestionStore from '../../stores/suggestion_store.jsx'; +import UserStore from '../../stores/user_store.jsx'; + +class SearchUserSuggestion extends React.Component { + render() { + const {item, isSelection, onClick} = this.props; + + let className = 'search-autocomplete__item'; + if (isSelection) { + className += ' selected'; + } + + return ( + <div + className={className} + onClick={onClick} + > + <img + className='profile-img rounded' + src={'/api/v1/users/' + item.id + '/image?time=' + item.update_at} + /> + {item.username} + </div> + ); + } +} + +SearchUserSuggestion.propTypes = { + item: React.PropTypes.object.isRequired, + isSelection: React.PropTypes.bool, + onClick: React.PropTypes.func +}; + +export default class SearchUserProvider { + handlePretextChanged(suggestionId, pretext) { + const captured = (/\bfrom:\s*(\S*)$/i).exec(pretext); + if (captured) { + const usernamePrefix = captured[1]; + + const users = UserStore.getProfiles(); + let filtered = []; + + for (const id of Object.keys(users)) { + const user = users[id]; + + if (user.username.startsWith(usernamePrefix)) { + filtered.push(user); + } + } + + filtered = filtered.sort((a, b) => a.username.localeCompare(b.username)); + + const usernames = filtered.map((user) => user.username); + + SuggestionStore.setMatchedPretext(suggestionId, usernamePrefix); + SuggestionStore.addSuggestions(suggestionId, usernames, filtered, SearchUserSuggestion); + } + } +} diff --git a/web/react/components/suggestion/suggestion_box.jsx b/web/react/components/suggestion/suggestion_box.jsx new file mode 100644 index 000000000..57a33c24a --- /dev/null +++ b/web/react/components/suggestion/suggestion_box.jsx @@ -0,0 +1,163 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import Constants from '../../utils/constants.jsx'; +import * as EventHelpers from '../../dispatcher/event_helpers.jsx'; +import SuggestionStore from '../../stores/suggestion_store.jsx'; +import * as Utils from '../../utils/utils.jsx'; + +const KeyCodes = Constants.KeyCodes; + +export default class SuggestionBox extends React.Component { + constructor(props) { + super(props); + + this.handleDocumentClick = this.handleDocumentClick.bind(this); + + this.handleChange = this.handleChange.bind(this); + this.handleCompleteWord = this.handleCompleteWord.bind(this); + this.handleKeyDown = this.handleKeyDown.bind(this); + this.handlePretextChanged = this.handlePretextChanged.bind(this); + + this.suggestionId = Utils.generateId(); + } + + componentDidMount() { + SuggestionStore.registerSuggestionBox(this.suggestionId); + $(document).on('click', this.handleDocumentClick); + + SuggestionStore.addCompleteWordListener(this.suggestionId, this.handleCompleteWord); + SuggestionStore.addPretextChangedListener(this.suggestionId, this.handlePretextChanged); + } + + componentWillUnmount() { + SuggestionStore.removeCompleteWordListener(this.suggestionId, this.handleCompleteWord); + SuggestionStore.removePretextChangedListener(this.suggestionId, this.handlePretextChanged); + + SuggestionStore.unregisterSuggestionBox(this.suggestionId); + $(document).off('click', this.handleDocumentClick); + } + + getTextbox() { + // this is to support old code that looks at the input/textarea DOM nodes + return ReactDOM.findDOMNode(this.refs.textbox); + } + + handleDocumentClick(e) { + const container = $(ReactDOM.findDOMNode(this)); + if (!(container.is(e.target) || container.has(e.target).length > 0)) { + // we can't just use blur for this because it fires and hides the children before + // their click handlers can be called + EventHelpers.emitClearSuggestions(this.suggestionId); + } + } + + handleChange(e) { + const textbox = ReactDOM.findDOMNode(this.refs.textbox); + const caret = Utils.getCaretPosition(textbox); + const pretext = textbox.value.substring(0, caret); + + EventHelpers.emitSuggestionPretextChanged(this.suggestionId, pretext); + + if (this.props.onUserInput) { + this.props.onUserInput(textbox.value); + } + + if (this.props.onChange) { + this.props.onChange(e); + } + } + + handleCompleteWord(term) { + const textbox = ReactDOM.findDOMNode(this.refs.textbox); + const caret = Utils.getCaretPosition(textbox); + + const text = this.props.value; + const prefix = text.substring(0, caret - SuggestionStore.getMatchedPretext(this.suggestionId).length); + const suffix = text.substring(caret); + + if (this.props.onUserInput) { + this.props.onUserInput(prefix + term + ' ' + suffix); + } + + // set the caret position after the next rendering + window.requestAnimationFrame(() => { + Utils.setCaretPosition(textbox, prefix.length + term.length + 1); + }); + } + + handleKeyDown(e) { + if (SuggestionStore.hasSuggestions(this.suggestionId)) { + if (e.which === KeyCodes.UP) { + EventHelpers.emitSelectPreviousSuggestion(this.suggestionId); + e.preventDefault(); + } else if (e.which === KeyCodes.DOWN) { + EventHelpers.emitSelectNextSuggestion(this.suggestionId); + e.preventDefault(); + } else if (e.which === KeyCodes.ENTER || e.which === KeyCodes.TAB) { + EventHelpers.emitCompleteWordSuggestion(this.suggestionId); + e.preventDefault(); + } else if (this.props.onKeyDown) { + this.props.onKeyDown(e); + } + } else if (this.props.onKeyDown) { + this.props.onKeyDown(e); + } + } + + handlePretextChanged(pretext) { + for (const provider of this.props.providers) { + provider.handlePretextChanged(this.suggestionId, pretext); + } + } + + render() { + const newProps = Object.assign({}, this.props, { + onChange: this.handleChange, + onKeyDown: this.handleKeyDown + }); + + let textbox = null; + if (this.props.type === 'input') { + textbox = ( + <input + ref='textbox' + type='text' + {...newProps} + /> + ); + } else if (this.props.type === 'textarea') { + textbox = ( + <textarea + ref='textbox' + {...newProps} + /> + ); + } + + const SuggestionListComponent = this.props.listComponent; + + return ( + <div> + {textbox} + <SuggestionListComponent suggestionId={this.suggestionId} /> + </div> + ); + } +} + +SuggestionBox.defaultProps = { + type: 'input' +}; + +SuggestionBox.propTypes = { + listComponent: React.PropTypes.func.isRequired, + type: React.PropTypes.oneOf(['input', 'textarea']).isRequired, + value: React.PropTypes.string.isRequired, + onUserInput: React.PropTypes.func, + providers: React.PropTypes.arrayOf(React.PropTypes.object), + + // explicitly name any input event handlers we override and need to manually call + onChange: React.PropTypes.func, + onKeyDown: React.PropTypes.func +}; diff --git a/web/react/components/suggestion/suggestion_list.jsx b/web/react/components/suggestion/suggestion_list.jsx new file mode 100644 index 000000000..e3ccd0f08 --- /dev/null +++ b/web/react/components/suggestion/suggestion_list.jsx @@ -0,0 +1,125 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import * as EventHelpers from '../../dispatcher/event_helpers.jsx'; +import SuggestionStore from '../../stores/suggestion_store.jsx'; + +export default class SuggestionList extends React.Component { + constructor(props) { + super(props); + + this.getContent = this.getContent.bind(this); + + this.handleItemClick = this.handleItemClick.bind(this); + this.handleSuggestionsChanged = this.handleSuggestionsChanged.bind(this); + + this.scrollToItem = this.scrollToItem.bind(this); + + this.state = { + items: [], + terms: [], + components: [], + selection: '' + }; + } + + componentDidMount() { + SuggestionStore.addSuggestionsChangedListener(this.props.suggestionId, this.handleSuggestionsChanged); + } + + componentWillUnmount() { + SuggestionStore.removeSuggestionsChangedListener(this.props.suggestionId, this.handleSuggestionsChanged); + } + + getContent() { + return $(ReactDOM.findDOMNode(this.refs.content)); + } + + handleItemClick(term, e) { + EventHelpers.emitCompleteWordSuggestion(this.props.suggestionId, term); + + e.preventDefault(); + } + + handleSuggestionsChanged() { + const selection = SuggestionStore.getSelection(this.props.suggestionId); + + this.setState({ + items: SuggestionStore.getItems(this.props.suggestionId), + terms: SuggestionStore.getTerms(this.props.suggestionId), + components: SuggestionStore.getComponents(this.props.suggestionId), + selection + }); + + if (selection) { + window.requestAnimationFrame(() => this.scrollToItem(this.state.selection)); + } + } + + scrollToItem(term) { + const content = this.getContent(); + const visibleContentHeight = content[0].clientHeight; + const actualContentHeight = content[0].scrollHeight; + + if (visibleContentHeight < actualContentHeight) { + const contentTop = content.scrollTop(); + const contentTopPadding = parseInt(content.css('padding-top'), 10); + const contentBottomPadding = parseInt(content.css('padding-top'), 10); + + const item = $(ReactDOM.findDOMNode(this.refs[term])); + const itemTop = item[0].offsetTop - parseInt(item.css('margin-top'), 10); + const itemBottomMargin = parseInt(item.css('margin-bottom'), 10) + parseInt(item.css('padding-bottom'), 10); + const itemBottom = item[0].offsetTop + item.height() + itemBottomMargin; + + if (itemTop - contentTopPadding < contentTop) { + // the item is off the top of the visible space + content.scrollTop(itemTop - contentTopPadding); + } else if (itemBottom + contentTopPadding + contentBottomPadding > contentTop + visibleContentHeight) { + // the item has gone off the bottom of the visible space + content.scrollTop(itemBottom - visibleContentHeight + contentTopPadding + contentBottomPadding); + } + } + } + + render() { + if (this.state.items.length === 0) { + return null; + } + + const items = []; + for (let i = 0; i < this.state.items.length; i++) { + const item = this.state.items[i]; + const term = this.state.terms[i]; + const isSelection = term === this.state.selection; + + // ReactComponent names need to be upper case when used in JSX + const Component = this.state.components[i]; + + items.push( + <Component + key={term} + ref={term} + item={item} + term={term} + isSelection={isSelection} + onClick={this.handleItemClick.bind(this, term)} + /> + ); + } + + return ( + <div className='suggestion-list suggestion-list--top'> + <div + ref='content' + className='suggestion-content suggestion-content--top' + > + {items} + </div> + </div> + ); + } +} + +SuggestionList.propTypes = { + suggestionId: React.PropTypes.string.isRequired +}; diff --git a/web/react/components/team_general_tab.jsx b/web/react/components/team_general_tab.jsx index 795fad671..dc615f2e8 100644 --- a/web/react/components/team_general_tab.jsx +++ b/web/react/components/team_general_tab.jsx @@ -12,6 +12,7 @@ export default class GeneralTab extends React.Component { constructor(props) { super(props); + this.updateSection = this.updateSection.bind(this); this.handleNameSubmit = this.handleNameSubmit.bind(this); this.handleInviteIdSubmit = this.handleInviteIdSubmit.bind(this); this.handleOpenInviteSubmit = this.handleOpenInviteSubmit.bind(this); @@ -27,11 +28,22 @@ export default class GeneralTab extends React.Component { this.handleTeamListingRadio = this.handleTeamListingRadio.bind(this); this.handleGenerateInviteId = this.handleGenerateInviteId.bind(this); - this.state = { - name: props.team.display_name, - invite_id: props.team.invite_id, - allow_open_invite: props.team.allow_open_invite, - allow_team_listing: props.team.allow_team_listing, + this.state = this.setupInitialState(props); + } + + updateSection(section) { + this.setState(this.setupInitialState(this.props)); + this.props.updateSection(section); + } + + setupInitialState(props) { + const team = props.team; + + return { + name: team.display_name, + invite_id: team.invite_id, + allow_open_invite: team.allow_open_invite, + allow_team_listing: team.allow_team_listing, serverError: '', clientError: '' }; @@ -71,7 +83,7 @@ export default class GeneralTab extends React.Component { (team) => { TeamStore.saveTeam(team); TeamStore.emitChange(); - this.props.updateSection(''); + this.updateSection(''); }, (err) => { state.serverError = err.message; @@ -91,7 +103,7 @@ export default class GeneralTab extends React.Component { (team) => { TeamStore.saveTeam(team); TeamStore.emitChange(); - this.props.updateSection(''); + this.updateSection(''); }, (err) => { state.serverError = err.message; @@ -129,7 +141,7 @@ export default class GeneralTab extends React.Component { (team) => { TeamStore.saveTeam(team); TeamStore.emitChange(); - this.props.updateSection(''); + this.updateSection(''); }, (err) => { state.serverError = err.message; @@ -164,7 +176,7 @@ export default class GeneralTab extends React.Component { (team) => { TeamStore.saveTeam(team); TeamStore.emitChange(); - this.props.updateSection(''); + this.updateSection(''); }, (err) => { state.serverError = err.message; @@ -180,8 +192,7 @@ export default class GeneralTab extends React.Component { } handleClose() { - this.setState({clientError: '', serverError: ''}); - this.props.updateSection(''); + this.updateSection(''); } componentDidMount() { @@ -195,36 +206,36 @@ export default class GeneralTab extends React.Component { onUpdateNameSection(e) { e.preventDefault(); if (this.props.activeSection === 'name') { - this.props.updateSection(''); + this.updateSection(''); } else { - this.props.updateSection('name'); + this.updateSection('name'); } } onUpdateInviteIdSection(e) { e.preventDefault(); if (this.props.activeSection === 'invite_id') { - this.props.updateSection(''); + this.updateSection(''); } else { - this.props.updateSection('invite_id'); + this.updateSection('invite_id'); } } onUpdateOpenInviteSection(e) { e.preventDefault(); if (this.props.activeSection === 'open_invite') { - this.props.updateSection(''); + this.updateSection(''); } else { - this.props.updateSection('open_invite'); + this.updateSection('open_invite'); } } onUpdateTeamListingSection(e) { e.preventDefault(); if (this.props.activeSection === 'team_listing') { - this.props.updateSection(''); + this.updateSection(''); } else { - this.props.updateSection('team_listing'); + this.updateSection('team_listing'); } } @@ -248,44 +259,59 @@ export default class GeneralTab extends React.Component { serverError = this.state.serverError; } + const enableTeamListing = global.window.mm_config.EnableTeamListing === 'true'; + let teamListingSection; if (this.props.activeSection === 'team_listing') { - const inputs = [ - <div key='userTeamListingOptions'> - <div className='radio'> - <label> - <input - name='userTeamListingOptions' - type='radio' - defaultChecked={this.state.allow_team_listing} - onChange={this.handleTeamListingRadio.bind(this, true)} - /> - {'Yes'} - </label> - <br/> + const inputs = []; + let submitHandle = null; + + if (enableTeamListing) { + submitHandle = this.handleTeamListingSubmit; + + inputs.push( + <div key='userTeamListingOptions'> + <div className='radio'> + <label> + <input + name='userTeamListingOptions' + type='radio' + defaultChecked={this.state.allow_team_listing} + onChange={this.handleTeamListingRadio.bind(this, true)} + /> + {'Yes'} + </label> + <br/> + </div> + <div className='radio'> + <label> + <input + ref='teamListingRadioNo' + name='userTeamListingOptions' + type='radio' + defaultChecked={!this.state.allow_team_listing} + onChange={this.handleTeamListingRadio.bind(this, false)} + /> + {'No'} + </label> + <br/> + </div> + <div><br/>{'Including this team will display the team name from the Team Directory section of the Home Page, and provide a link to the sign-in page.'}</div> </div> - <div className='radio'> - <label> - <input - ref='teamListingRadioNo' - name='userTeamListingOptions' - type='radio' - defaultChecked={!this.state.allow_team_listing} - onChange={this.handleTeamListingRadio.bind(this, false)} - /> - {'No'} - </label> - <br/> + ); + } else { + inputs.push( + <div key='userTeamListingOptions'> + <div><br/>{'Contact your system administrator to turn on the team directory on the system home page.'}</div> </div> - <div><br/>{'Including this team will display the team name from the Team Directory section of the Home Page, and provide a link to the sign-in page.'}</div> - </div> - ]; + ); + } teamListingSection = ( <SettingItemMax title='Include this team in the Team Directory' inputs={inputs} - submit={this.handleTeamListingSubmit} + submit={submitHandle} server_error={serverError} client_error={clientError} updateSection={this.onUpdateTeamListingSection} @@ -293,10 +319,15 @@ export default class GeneralTab extends React.Component { ); } else { let describe = ''; - if (this.state.allow_team_listing === true) { - describe = 'Yes'; + + if (enableTeamListing) { + if (this.state.allow_team_listing === true) { + describe = 'Yes'; + } else { + describe = 'No'; + } } else { - describe = 'No'; + describe = 'Team directory is turned off for this system.'; } teamListingSection = ( @@ -437,6 +468,7 @@ export default class GeneralTab extends React.Component { <input className='form-control' type='text' + maxLength='22' onChange={this.updateName} value={this.state.name} /> diff --git a/web/react/components/team_members_modal.jsx b/web/react/components/team_members_modal.jsx index 0a30a2202..27224c283 100644 --- a/web/react/components/team_members_modal.jsx +++ b/web/react/components/team_members_modal.jsx @@ -26,9 +26,11 @@ export default class TeamMembersModal extends React.Component { } onShow() { - $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300); if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200); + } else { + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150); } } diff --git a/web/react/components/team_signup_with_email.jsx b/web/react/components/team_signup_with_email.jsx index 06d6e3934..4150a0013 100644 --- a/web/react/components/team_signup_with_email.jsx +++ b/web/react/components/team_signup_with_email.jsx @@ -14,18 +14,19 @@ export default class EmailSignUpPage extends React.Component { } handleSubmit(e) { e.preventDefault(); - var team = {}; - var state = {serverError: ''}; + const team = {}; + const state = {serverError: null}; + let isValid = true; team.email = ReactDOM.findDOMNode(this.refs.email).value.trim().toLowerCase(); if (!team.email || !Utils.isEmail(team.email)) { state.emailError = 'Please enter a valid email address'; - state.inValid = true; + isValid = false; } else { - state.emailError = ''; + state.emailError = null; } - if (state.inValid) { + if (!isValid) { this.setState(state); return; } @@ -45,11 +46,16 @@ export default class EmailSignUpPage extends React.Component { ); } render() { - var serverError = null; + let serverError = null; if (this.state.serverError) { serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>; } + let emailError = null; + if (this.state.emailError) { + emailError = <div className='form-group has-error'><label className='control-label'>{this.state.emailError}</label></div>; + } + return ( <form role='form' @@ -65,6 +71,7 @@ export default class EmailSignUpPage extends React.Component { maxLength='128' spellCheck='false' /> + {emailError} </div> <div className='form-group'> <button diff --git a/web/react/components/textbox.jsx b/web/react/components/textbox.jsx index 10b3c0069..b29f304ab 100644 --- a/web/react/components/textbox.jsx +++ b/web/react/components/textbox.jsx @@ -1,16 +1,16 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import AppDispatcher from '../dispatcher/app_dispatcher.jsx'; -import SearchStore from '../stores/search_store.jsx'; -import CommandList from './command_list.jsx'; +import AtMentionProvider from './suggestion/at_mention_provider.jsx'; +import CommandProvider from './suggestion/command_provider.jsx'; +import EmoticonProvider from './suggestion/emoticon_provider.jsx'; +import SuggestionList from './suggestion/suggestion_list.jsx'; +import SuggestionBox from './suggestion/suggestion_box.jsx'; import ErrorStore from '../stores/error_store.jsx'; import * as TextFormatting from '../utils/text_formatting.jsx'; import * as Utils from '../utils/utils.jsx'; import Constants from '../utils/constants.jsx'; -const ActionTypes = Constants.ActionTypes; -const KeyCodes = Constants.KeyCodes; const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES; export default class Textbox extends React.Component { @@ -18,32 +18,22 @@ export default class Textbox extends React.Component { super(props); this.getStateFromStores = this.getStateFromStores.bind(this); - this.onListenerChange = this.onListenerChange.bind(this); this.onRecievedError = this.onRecievedError.bind(this); - this.updateMentionTab = this.updateMentionTab.bind(this); - this.handleChange = this.handleChange.bind(this); this.handleKeyPress = this.handleKeyPress.bind(this); this.handleKeyDown = this.handleKeyDown.bind(this); - this.handleBackspace = this.handleBackspace.bind(this); - this.checkForNewMention = this.checkForNewMention.bind(this); - this.addMention = this.addMention.bind(this); - this.addCommand = this.addCommand.bind(this); this.resize = this.resize.bind(this); this.handleFocus = this.handleFocus.bind(this); this.handleBlur = this.handleBlur.bind(this); - this.handlePaste = this.handlePaste.bind(this); this.showPreview = this.showPreview.bind(this); this.state = { - mentionText: '-1', - mentions: [], connection: '' }; - this.caret = -1; - this.addedMention = false; - this.doProcessMentions = false; - this.mentions = []; + this.suggestionProviders = [new AtMentionProvider(), new EmoticonProvider()]; + if (props.supportsCommands) { + this.suggestionProviders.push(new CommandProvider()); + } } getStateFromStores() { @@ -57,24 +47,15 @@ export default class Textbox extends React.Component { } componentDidMount() { - SearchStore.addAddMentionListener(this.onListenerChange); ErrorStore.addChangeListener(this.onRecievedError); this.resize(); - this.updateMentionTab(null); } componentWillUnmount() { - SearchStore.removeAddMentionListener(this.onListenerChange); ErrorStore.removeChangeListener(this.onRecievedError); } - onListenerChange(id, username) { - if (id === this.props.id) { - this.addMention(username); - } - } - onRecievedError() { const errorState = ErrorStore.getLastError(); @@ -86,158 +67,21 @@ export default class Textbox extends React.Component { } componentDidUpdate() { - if (this.caret >= 0) { - Utils.setCaretPosition(ReactDOM.findDOMNode(this.refs.message), this.caret); - this.caret = -1; - } - if (this.doProcessMentions) { - this.updateMentionTab(null); - this.doProcessMentions = false; - } this.resize(); } - componentWillReceiveProps(nextProps) { - if (!this.addedMention) { - this.checkForNewMention(nextProps.messageText); - } - const text = ReactDOM.findDOMNode(this.refs.message).value; - if (nextProps.channelId !== this.props.channelId || nextProps.messageText !== text) { - this.doProcessMentions = true; - } - this.addedMention = false; - this.refs.commands.getSuggestedCommands(nextProps.messageText); - } - - updateMentionTab(mentionText) { - // using setTimeout so dispatch isn't called during an in progress dispatch - setTimeout(() => { - AppDispatcher.handleViewAction({ - type: ActionTypes.RECIEVED_MENTION_DATA, - id: this.props.id, - mention_text: mentionText - }); - }, 1); - } - - handleChange() { - const text = ReactDOM.findDOMNode(this.refs.message).value; - this.props.onUserInput(text); - } - handleKeyPress(e) { - const text = ReactDOM.findDOMNode(this.refs.message).value; - - if (!this.refs.commands.isEmpty() && text.indexOf('/') === 0 && e.which === 13) { - this.refs.commands.addFirstCommand(); - e.preventDefault(); - return; - } - - if (!this.doProcessMentions) { - const caret = Utils.getCaretPosition(ReactDOM.findDOMNode(this.refs.message)); - const preText = text.substring(0, caret); - const lastSpace = preText.lastIndexOf(' '); - const lastAt = preText.lastIndexOf('@'); - - if (caret > lastAt && lastSpace < lastAt) { - this.doProcessMentions = true; - } - } - this.props.onKeyPress(e); } handleKeyDown(e) { - if (Utils.getSelectedText(ReactDOM.findDOMNode(this.refs.message)) !== '') { - this.doProcessMentions = true; - } - - if (e.keyCode === KeyCodes.BACKSPACE) { - this.handleBackspace(e); - } else if (this.props.onKeyDown) { + if (this.props.onKeyDown) { this.props.onKeyDown(e); } } - handleBackspace() { - const text = ReactDOM.findDOMNode(this.refs.message).value; - if (text.indexOf('/') === 0) { - this.refs.commands.getSuggestedCommands(text.substring(0, text.length - 1)); - } - - if (this.doProcessMentions) { - return; - } - - const caret = Utils.getCaretPosition(ReactDOM.findDOMNode(this.refs.message)); - const preText = text.substring(0, caret); - const lastSpace = preText.lastIndexOf(' '); - const lastAt = preText.lastIndexOf('@'); - - if (caret > lastAt && (lastSpace > lastAt || lastSpace === -1)) { - this.doProcessMentions = true; - } - } - - checkForNewMention(text) { - const caret = Utils.getCaretPosition(ReactDOM.findDOMNode(this.refs.message)); - - const preText = text.substring(0, caret); - - const atIndex = preText.lastIndexOf('@'); - - // The @ character not typed, so nothing to do. - if (atIndex === -1) { - this.updateMentionTab('-1'); - return; - } - - const lastCharSpace = preText.lastIndexOf(String.fromCharCode(160)); - const lastSpace = preText.lastIndexOf(' '); - - // If there is a space after the last @, nothing to do. - if (lastSpace > atIndex || lastCharSpace > atIndex) { - this.updateMentionTab('-1'); - return; - } - - // Get the name typed so far. - const name = preText.substring(atIndex + 1, preText.length).toLowerCase(); - this.updateMentionTab(name); - } - - addMention(name) { - const caret = Utils.getCaretPosition(ReactDOM.findDOMNode(this.refs.message)); - - const text = this.props.messageText; - - const preText = text.substring(0, caret); - - const atIndex = preText.lastIndexOf('@'); - - // The @ character not typed, so nothing to do. - if (atIndex === -1) { - return; - } - - const prefix = text.substring(0, atIndex); - const suffix = text.substring(caret, text.length); - this.caret = prefix.length + name.length + 2; - this.addedMention = true; - this.doProcessMentions = true; - - this.props.onUserInput(`${prefix}@${name} ${suffix}`); - } - - addCommand(cmd) { - const elm = ReactDOM.findDOMNode(this.refs.message); - elm.value = cmd; - this.handleChange(); - } - resize() { - const e = ReactDOM.findDOMNode(this.refs.message); + const e = this.refs.message.getTextbox(); const w = ReactDOM.findDOMNode(this.refs.wrapper); const prevHeight = $(e).height(); @@ -272,23 +116,19 @@ export default class Textbox extends React.Component { } handleFocus() { - const elm = ReactDOM.findDOMNode(this.refs.message); + const elm = this.refs.message.getTextbox(); if (elm.title === elm.value) { elm.value = ''; } } handleBlur() { - const elm = ReactDOM.findDOMNode(this.refs.message); + const elm = this.refs.message.getTextbox(); if (elm.value === '') { elm.value = elm.title; } } - handlePaste() { - this.doProcessMentions = true; - } - showPreview(e) { e.preventDefault(); e.target.blur(); @@ -323,15 +163,11 @@ export default class Textbox extends React.Component { ref='wrapper' className='textarea-wrapper' > - <CommandList - ref='commands' - addCommand={this.addCommand} - channelId={this.props.channelId} - /> - <textarea + <SuggestionBox id={this.props.id} ref='message' className={`form-control custom-textarea ${this.state.connection}`} + type='textarea' spellCheck='true' autoComplete='off' autoCorrect='off' @@ -339,14 +175,15 @@ export default class Textbox extends React.Component { maxLength={Constants.MAX_POST_LEN} placeholder={this.props.createMessage} value={this.props.messageText} - onInput={this.handleChange} - onChange={this.handleChange} + onUserInput={this.props.onUserInput} onKeyPress={this.handleKeyPress} onKeyDown={this.handleKeyDown} onFocus={this.handleFocus} onBlur={this.handleBlur} onPaste={this.handlePaste} style={{visibility: this.state.preview ? 'hidden' : 'visible'}} + listComponent={SuggestionList} + providers={this.suggestionProviders} /> <div ref='preview' @@ -367,6 +204,10 @@ export default class Textbox extends React.Component { } } +Textbox.defaultProps = { + supportsCommands: true +}; + Textbox.propTypes = { id: React.PropTypes.string.isRequired, channelId: React.PropTypes.string, @@ -375,5 +216,6 @@ Textbox.propTypes = { onKeyPress: React.PropTypes.func.isRequired, onHeightChange: React.PropTypes.func, createMessage: React.PropTypes.string.isRequired, - onKeyDown: React.PropTypes.func + onKeyDown: React.PropTypes.func, + supportsCommands: React.PropTypes.bool.isRequired }; diff --git a/web/react/components/user_profile.jsx b/web/react/components/user_profile.jsx index ea104fedb..385cd0f52 100644 --- a/web/react/components/user_profile.jsx +++ b/web/react/components/user_profile.jsx @@ -65,11 +65,16 @@ export default class UserProfile extends React.Component { return <div>{name}</div>; } + var profileImg = '/api/v1/users/' + this.state.profile.id + '/image?time=' + this.state.profile.update_at + '&' + Utils.getSessionIndex(); + if (this.props.overwriteImage) { + profileImg = this.props.overwriteImage; + } + var dataContent = []; dataContent.push( <img className='user-popover__image' - src={'/api/v1/users/' + this.state.profile.id + '/image?time=' + this.state.profile.update_at + '&' + Utils.getSessionIndex()} + src={profileImg} height='128' width='128' key='user-popover-image' @@ -130,10 +135,12 @@ export default class UserProfile extends React.Component { UserProfile.defaultProps = { userId: '', overwriteName: '', + overwriteImage: '', disablePopover: false }; UserProfile.propTypes = { userId: React.PropTypes.string, overwriteName: React.PropTypes.string, + overwriteImage: React.PropTypes.string, disablePopover: React.PropTypes.bool }; diff --git a/web/react/components/user_settings/manage_outgoing_hooks.jsx b/web/react/components/user_settings/manage_outgoing_hooks.jsx index 9c88bb819..fdbac9831 100644 --- a/web/react/components/user_settings/manage_outgoing_hooks.jsx +++ b/web/react/components/user_settings/manage_outgoing_hooks.jsx @@ -1,4 +1,4 @@ -// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import LoadingScreen from '../loading_screen.jsx'; @@ -188,7 +188,7 @@ export default class ManageOutgoingHooks extends React.Component { key={hook.id} className='webhook__item' > - <div className='padding-top x2'> + <div className='padding-top x2 webhook__url'> <strong>{'URLs: '}</strong><span className='word-break--all'>{hook.callback_urls.join(', ')}</span> </div> {channelDiv} diff --git a/web/react/components/user_settings/user_settings_advanced.jsx b/web/react/components/user_settings/user_settings_advanced.jsx index b4d34c658..c15936ccd 100644 --- a/web/react/components/user_settings/user_settings_advanced.jsx +++ b/web/react/components/user_settings/user_settings_advanced.jsx @@ -195,7 +195,7 @@ export default class AdvancedSettingsDisplay extends React.Component { inputs.push( <div key='advancedPreviewFeatures_helptext'> <br/> - {'Check any pre-released features you\'d like to preview.'} + {'Check any pre-released features you\'d like to preview. You may also need to refresh the page before the setting will take effect.'} </div> ); diff --git a/web/react/components/user_settings/user_settings_display.jsx b/web/react/components/user_settings/user_settings_display.jsx index 43c8d33d1..c464258de 100644 --- a/web/react/components/user_settings/user_settings_display.jsx +++ b/web/react/components/user_settings/user_settings_display.jsx @@ -6,14 +6,17 @@ import SettingItemMin from '../setting_item_min.jsx'; import SettingItemMax from '../setting_item_max.jsx'; import Constants from '../../utils/constants.jsx'; import PreferenceStore from '../../stores/preference_store.jsx'; +import * as Utils from '../../utils/utils.jsx'; function getDisplayStateFromStores() { const militaryTime = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', {value: 'false'}); const nameFormat = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', {value: 'username'}); + const selectedFont = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', {value: Constants.DEFAULT_FONT}); return { militaryTime: militaryTime.value, - nameFormat: nameFormat.value + nameFormat: nameFormat.value, + selectedFont: selectedFont.value }; } @@ -24,15 +27,20 @@ export default class UserSettingsDisplay extends React.Component { this.handleSubmit = this.handleSubmit.bind(this); this.handleClockRadio = this.handleClockRadio.bind(this); this.handleNameRadio = this.handleNameRadio.bind(this); + this.handleFont = this.handleFont.bind(this); this.updateSection = this.updateSection.bind(this); this.state = getDisplayStateFromStores(); + this.selectedFont = this.state.selectedFont; } handleSubmit() { const timePreference = PreferenceStore.setPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', this.state.militaryTime); const namePreference = PreferenceStore.setPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', this.state.nameFormat); + const fontPreference = PreferenceStore.setPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', this.state.selectedFont); - savePreferences([timePreference, namePreference], + this.selectedFont = this.state.selectedFont; + + savePreferences([timePreference, namePreference, fontPreference], () => { PreferenceStore.emitChange(); this.updateSection(''); @@ -48,6 +56,10 @@ export default class UserSettingsDisplay extends React.Component { handleNameRadio(nameFormat) { this.setState({nameFormat}); } + handleFont(selectedFont) { + Utils.applyFont(selectedFont); + this.setState({selectedFont}); + } updateSection(section) { this.setState(getDisplayStateFromStores()); this.props.updateSection(section); @@ -56,6 +68,8 @@ export default class UserSettingsDisplay extends React.Component { const serverError = this.state.serverError || null; let clockSection; let nameFormatSection; + let fontSection; + if (this.props.activeSection === 'clock') { const clockFormat = [false, false]; if (this.state.militaryTime === 'true') { @@ -209,6 +223,66 @@ export default class UserSettingsDisplay extends React.Component { ); } + if (this.props.activeSection === 'font') { + const options = []; + Object.keys(Constants.FONTS).forEach((fontName, idx) => { + const className = Constants.FONTS[fontName]; + options.push( + <option + key={'font_' + idx} + value={fontName} + className={className} + > + {fontName} + </option> + ); + }); + + const inputs = [ + <div key='userDisplayNameOptions'> + <div + className='dropdown' + > + <select + className='form-control' + type='text' + value={this.state.selectedFont} + onChange={(e) => this.handleFont(e.target.value)} + > + {options} + </select> + </div> + <div><br/>{'Select the font displayed in the Mattermost user interface.'}</div> + </div> + ]; + + fontSection = ( + <SettingItemMax + title='Display Font' + inputs={inputs} + submit={this.handleSubmit} + server_error={serverError} + updateSection={(e) => { + if (this.selectedFont !== this.state.selectedFont) { + this.handleFont(this.selectedFont); + } + this.updateSection(''); + e.preventDefault(); + }} + /> + ); + } else { + fontSection = ( + <SettingItemMin + title='Display Font' + describe={this.state.selectedFont} + updateSection={() => { + this.props.updateSection('font'); + }} + /> + ); + } + return ( <div> <div className='modal-header'> @@ -235,6 +309,8 @@ export default class UserSettingsDisplay extends React.Component { <div className='user-settings'> <h3 className='tab-header'>{'Display Settings'}</h3> <div className='divider-dark first'/> + {fontSection} + <div className='divider-dark'/> {clockSection} <div className='divider-dark'/> {nameFormatSection} diff --git a/web/react/components/user_settings/user_settings_modal.jsx b/web/react/components/user_settings/user_settings_modal.jsx index f9d03f56d..36e1aa217 100644 --- a/web/react/components/user_settings/user_settings_modal.jsx +++ b/web/react/components/user_settings/user_settings_modal.jsx @@ -47,9 +47,11 @@ export default class UserSettingsModal extends React.Component { } handleShow() { - $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300); if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200); + } else { + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50); } } diff --git a/web/react/components/user_settings/user_settings_notifications.jsx b/web/react/components/user_settings/user_settings_notifications.jsx index e025bf670..f762405af 100644 --- a/web/react/components/user_settings/user_settings_notifications.jsx +++ b/web/react/components/user_settings/user_settings_notifications.jsx @@ -78,7 +78,9 @@ export default class NotificationsTab extends React.Component { super(props); this.handleSubmit = this.handleSubmit.bind(this); + this.handleCancel = this.handleCancel.bind(this); this.updateSection = this.updateSection.bind(this); + this.updateState = this.updateState.bind(this); this.onListenerChange = this.onListenerChange.bind(this); this.handleNotifyRadio = this.handleNotifyRadio.bind(this); this.handleEmailRadio = this.handleEmailRadio.bind(this); @@ -128,10 +130,21 @@ export default class NotificationsTab extends React.Component { }.bind(this) ); } + handleCancel(e) { + this.updateState(); + this.props.updateSection(''); + e.preventDefault(); + } updateSection(section) { - this.setState(getNotificationsStateFromStores()); + this.updateState(); this.props.updateSection(section); } + updateState() { + const newState = getNotificationsStateFromStores(); + if (!Utils.areObjectsEqual(newState, this.state)) { + this.setState(newState); + } + } componentDidMount() { UserStore.addChangeListener(this.onListenerChange); } @@ -139,10 +152,7 @@ export default class NotificationsTab extends React.Component { UserStore.removeChangeListener(this.onListenerChange); } onListenerChange() { - var newState = getNotificationsStateFromStores(); - if (!Utils.areObjectsEqual(newState, this.state)) { - this.setState(newState); - } + this.updateState(); } handleNotifyRadio(notifyLevel) { this.setState({notifyLevel: notifyLevel}); @@ -245,11 +255,6 @@ export default class NotificationsTab extends React.Component { </div> ); - handleUpdateDesktopSection = function updateDesktopSection(e) { - this.props.updateSection(''); - e.preventDefault(); - }.bind(this); - const extraInfo = <span>{'Desktop notifications are available on Firefox, Safari, and Chrome.'}</span>; desktopSection = ( @@ -259,7 +264,7 @@ export default class NotificationsTab extends React.Component { inputs={inputs} submit={this.handleSubmit} server_error={serverError} - updateSection={handleUpdateDesktopSection} + updateSection={this.handleCancel} /> ); } else { @@ -324,11 +329,6 @@ export default class NotificationsTab extends React.Component { </div> ); - handleUpdateSoundSection = function updateSoundSection(e) { - this.props.updateSection(''); - e.preventDefault(); - }.bind(this); - const extraInfo = <span>{'Desktop notification sounds are available on Firefox, Safari, Chrome, Internet Explorer, and Edge.'}</span>; soundSection = ( @@ -338,7 +338,7 @@ export default class NotificationsTab extends React.Component { inputs={inputs} submit={this.handleSubmit} server_error={serverError} - updateSection={handleUpdateSoundSection} + updateSection={this.handleCancel} /> ); } else { @@ -405,18 +405,13 @@ export default class NotificationsTab extends React.Component { </div> ); - handleUpdateEmailSection = function updateEmailSection(e) { - this.props.updateSection(''); - e.preventDefault(); - }.bind(this); - emailSection = ( <SettingItemMax title='Email notifications' inputs={inputs} submit={this.handleSubmit} server_error={serverError} - updateSection={handleUpdateEmailSection} + updateSection={this.handleCancel} /> ); } else { @@ -566,17 +561,13 @@ export default class NotificationsTab extends React.Component { </div> ); - handleUpdateKeysSection = function updateKeysSection(e) { - this.props.updateSection(''); - e.preventDefault(); - }.bind(this); keysSection = ( <SettingItemMax title='Words that trigger mentions' inputs={inputs} submit={this.handleSubmit} server_error={serverError} - updateSection={handleUpdateKeysSection} + updateSection={this.handleCancel} /> ); } else { @@ -653,7 +644,7 @@ export default class NotificationsTab extends React.Component { ref='wrapper' className='user-settings' > - <h3 className='tab-header'>Notifications</h3> + <h3 className='tab-header'>{'Notifications'}</h3> <div className='divider-dark first'/> {desktopSection} <div className='divider-light'/> diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index 2b505607e..820f8fd8e 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -423,10 +423,11 @@ export default class ViewImageModal extends React.Component { onClick={this.props.onModalDismissed} > <div - className={'image-wrapper ' + bgClass} + className={'image-wrapper'} onClick={this.props.onModalDismissed} > <div + className={bgClass} onMouseEnter={this.onMouseEnterImage} onMouseLeave={this.onMouseLeaveImage} onClick={(e) => e.stopPropagation()} diff --git a/web/react/dispatcher/event_helpers.jsx b/web/react/dispatcher/event_helpers.jsx index 856eec2f1..297367ce9 100644 --- a/web/react/dispatcher/event_helpers.jsx +++ b/web/react/dispatcher/event_helpers.jsx @@ -8,11 +8,12 @@ import Constants from '../utils/constants.jsx'; const ActionTypes = Constants.ActionTypes; import * as AsyncClient from '../utils/async_client.jsx'; import * as Client from '../utils/client.jsx'; +import * as Utils from '../utils/utils.jsx'; export function emitChannelClickEvent(channel) { - AsyncClient.getChannels(); - AsyncClient.getChannelExtraInfo(); - AsyncClient.updateLastViewedAt(); + AsyncClient.getChannels(true); + AsyncClient.getChannelExtraInfo(channel.id); + AsyncClient.updateLastViewedAt(channel.id); AsyncClient.getPosts(channel.id); AppDispatcher.handleViewAction({ @@ -38,6 +39,30 @@ export function emitPostFocusEvent(postId) { ); } +export function emitPostFocusRightHandSideEvent(post) { + Client.getPost( + post.channel_id, + post.id, + (data) => { + AppDispatcher.handleServerAction({ + type: ActionTypes.RECIEVED_POST_SELECTED, + post_list: data + }); + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECIEVED_SEARCH, + results: null + }); + }, + (err) => { + AsyncClient.dispatchError(err, 'getPost'); + } + ); + + var postChannel = ChannelStore.get(post.channel_id); + Utils.switchChannel(postChannel); +} + export function emitLoadMorePostsEvent() { const id = ChannelStore.getCurrentId(); loadMorePostsTop(id); @@ -111,3 +136,47 @@ export function showRegisterAppModal() { value: true }); } + +export function emitSuggestionPretextChanged(suggestionId, pretext) { + AppDispatcher.handleViewAction({ + type: ActionTypes.SUGGESTION_PRETEXT_CHANGED, + id: suggestionId, + pretext + }); +} + +export function emitSelectNextSuggestion(suggestionId) { + AppDispatcher.handleViewAction({ + type: ActionTypes.SUGGESTION_SELECT_NEXT, + id: suggestionId + }); +} + +export function emitSelectPreviousSuggestion(suggestionId) { + AppDispatcher.handleViewAction({ + type: ActionTypes.SUGGESTION_SELECT_PREVIOUS, + id: suggestionId + }); +} + +export function emitCompleteWordSuggestion(suggestionId, term = '') { + AppDispatcher.handleViewAction({ + type: Constants.ActionTypes.SUGGESTION_COMPLETE_WORD, + id: suggestionId, + term + }); +} + +export function emitClearSuggestions(suggestionId) { + AppDispatcher.handleViewAction({ + type: Constants.ActionTypes.SUGGESTION_CLEAR_SUGGESTIONS, + id: suggestionId + }); +} + +export function emitPreferenceChangedEvent(preference) { + AppDispatcher.handleServerAction({ + type: Constants.ActionTypes.RECIEVED_PREFERENCE, + preference + }); +} diff --git a/web/react/package.json b/web/react/package.json index 41b2468af..14b16b4e4 100644 --- a/web/react/package.json +++ b/web/react/package.json @@ -7,7 +7,7 @@ "flux": "2.1.1", "highlight.js": "8.9.1", "keymirror": "0.1.1", - "marked": "0.3.5", + "marked": "mattermost/marked#cb85e5cc81bc7937dbb73c3c53d9532b1b97e3ca", "object-assign": "4.0.1", "twemoji": "1.4.1" }, diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx index b73dfdafe..2122c729e 100644 --- a/web/react/pages/channel.jsx +++ b/web/react/pages/channel.jsx @@ -6,7 +6,6 @@ import ChannelLoader from '../components/channel_loader.jsx'; import ErrorBar from '../components/error_bar.jsx'; import ErrorStore from '../stores/error_store.jsx'; -import MentionList from '../components/mention_list.jsx'; import GetTeamInviteLinkModal from '../components/get_team_invite_link_modal.jsx'; import RenameChannelModal from '../components/rename_channel_modal.jsx'; import EditPostModal from '../components/edit_post_modal.jsx'; @@ -19,9 +18,20 @@ import RegisterAppModal from '../components/register_app_modal.jsx'; import ImportThemeModal from '../components/user_settings/import_theme_modal.jsx'; import InviteMemberModal from '../components/invite_member_modal.jsx'; +import PreferenceStore from '../stores/preference_store.jsx'; + +import * as Utils from '../utils/utils.jsx'; import * as AsyncClient from '../utils/async_client.jsx'; import * as EventHelpers from '../dispatcher/event_helpers.jsx'; +import Constants from '../utils/constants.jsx'; + +function onPreferenceChange() { + const selectedFont = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', {value: Constants.DEFAULT_FONT}).value; + Utils.applyFont(selectedFont); + PreferenceStore.removeChangeListener(onPreferenceChange); +} + function setupChannelPage(props, team, channel) { if (props.PostId === '') { EventHelpers.emitChannelClickEvent(channel); @@ -29,6 +39,7 @@ function setupChannelPage(props, team, channel) { EventHelpers.emitPostFocusEvent(props.PostId); } + PreferenceStore.addChangeListener(onPreferenceChange); AsyncClient.getAllPreferences(); // ChannelLoader must be rendered first @@ -47,21 +58,6 @@ function setupChannelPage(props, team, channel) { document.getElementById('channel_view') ); - ReactDOM.render( - <MentionList id='post_textbox' />, - document.getElementById('post_mention_tab') - ); - - ReactDOM.render( - <MentionList id='reply_textbox' />, - document.getElementById('reply_mention_tab') - ); - - ReactDOM.render( - <MentionList id='edit_textbox' />, - document.getElementById('edit_mention_tab') - ); - // // Modals // diff --git a/web/react/stores/browser_store.jsx b/web/react/stores/browser_store.jsx index 2e3a26cff..ff6ae45ea 100644 --- a/web/react/stores/browser_store.jsx +++ b/web/react/stores/browser_store.jsx @@ -1,6 +1,8 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. +import {generateId} from '../utils/utils.jsx'; + function getPrefix() { if (global.window.mm_user) { return global.window.mm_user.id + '_'; @@ -26,6 +28,7 @@ class BrowserStoreClass { this.clearAll = this.clearAll.bind(this); this.checkedLocalStorageSupported = ''; this.signalLogout = this.signalLogout.bind(this); + this.isSignallingLogout = this.isSignallingLogout.bind(this); var currentVersion = sessionStorage.getItem('storage_version'); if (currentVersion !== global.window.mm_config.Version) { @@ -113,11 +116,19 @@ class BrowserStoreClass { signalLogout() { if (this.isLocalStorageSupported()) { - localStorage.setItem('__logout__', 'yes'); + // PLT-1285 store an identifier in session storage so we can catch if the logout came from this tab on IE11 + const logoutId = generateId(); + + sessionStorage.setItem('__logout__', logoutId); + localStorage.setItem('__logout__', logoutId); localStorage.removeItem('__logout__'); } } + isSignallingLogout(logoutId) { + return logoutId === sessionStorage.getItem('__logout__'); + } + /** * Preforms the given action on each item that has the given prefix * Signature for action is action(key, value) @@ -151,7 +162,14 @@ class BrowserStoreClass { } clear() { + // don't clear the logout id so IE11 can tell which tab sent a logout request + const logoutId = sessionStorage.getItem('__logout__'); + sessionStorage.clear(); + + if (logoutId) { + sessionStorage.setItem('__logout__', logoutId); + } } clearAll() { @@ -185,3 +203,4 @@ class BrowserStoreClass { var BrowserStore = new BrowserStoreClass(); export default BrowserStore; +window.BrowserStore = BrowserStore; diff --git a/web/react/stores/channel_store.jsx b/web/react/stores/channel_store.jsx index dec4926f5..afc960fcf 100644 --- a/web/react/stores/channel_store.jsx +++ b/web/react/stores/channel_store.jsx @@ -7,6 +7,7 @@ import EventEmitter from 'events'; var Utils; import Constants from '../utils/constants.jsx'; const ActionTypes = Constants.ActionTypes; +const NotificationPrefs = Constants.NotificationPrefs; const CHANGE_EVENT = 'change'; const LEAVE_EVENT = 'leave'; @@ -37,6 +38,10 @@ class ChannelStoreClass extends EventEmitter { this.getByName = this.getByName.bind(this); this.pSetPostMode = this.pSetPostMode.bind(this); this.getPostMode = this.getPostMode.bind(this); + this.setUnreadCount = this.setUnreadCount.bind(this); + this.setUnreadCounts = this.setUnreadCounts.bind(this); + this.getUnreadCount = this.getUnreadCount.bind(this); + this.getUnreadCounts = this.getUnreadCounts.bind(this); this.currentId = null; this.postMode = this.POST_MODE_CHANNEL; @@ -45,6 +50,7 @@ class ChannelStoreClass extends EventEmitter { this.moreChannels = {}; this.moreChannels.loading = true; this.extraInfos = {}; + this.unreadCounts = {}; } get POST_MODE_CHANNEL() { return 1; @@ -120,18 +126,18 @@ class ChannelStoreClass extends EventEmitter { this.currentId = id; } resetCounts(id) { - var cm = this.pGetChannelMembers(); + const cm = this.channelMembers; for (var cmid in cm) { if (cm[cmid].channel_id === id) { var c = this.get(id); if (c) { cm[cmid].msg_count = this.get(id).total_msg_count; cm[cmid].mention_count = 0; + this.setUnreadCount(id); } break; } } - this.pStoreChannelMembers(cm); } getCurrentId() { return this.currentId; @@ -161,18 +167,7 @@ class ChannelStoreClass extends EventEmitter { this.emitChange(); } getCurrentExtraInfo() { - var currentId = this.getCurrentId(); - var extra = null; - - if (currentId) { - extra = this.pGetExtraInfos()[currentId]; - } - - if (extra == null) { - extra = {members: []}; - } - - return extra; + return this.getExtraInfo(this.getCurrentId()); } getExtraInfo(channelId) { var extra = null; @@ -181,7 +176,10 @@ class ChannelStoreClass extends EventEmitter { extra = this.pGetExtraInfos()[channelId]; } - if (extra == null) { + if (extra) { + // create a defensive copy + extra = JSON.parse(JSON.stringify(extra)); + } else { extra = {members: []}; } @@ -250,6 +248,38 @@ class ChannelStoreClass extends EventEmitter { getPostMode() { return this.postMode; } + + setUnreadCount(id) { + const ch = this.get(id); + const chMember = this.getMember(id); + + let chMentionCount = chMember.mention_count; + let chUnreadCount = ch.total_msg_count - chMember.msg_count - chMentionCount; + + if (ch.type === 'D') { + chMentionCount = chUnreadCount; + chUnreadCount = 0; + } else if (chMember.notify_props && chMember.notify_props.mark_unread === NotificationPrefs.MENTION) { + chUnreadCount = 0; + } + + this.unreadCounts[id] = {msgs: chUnreadCount, mentions: chMentionCount}; + } + + setUnreadCounts() { + const channels = this.getAll(); + channels.forEach((ch) => { + this.setUnreadCount(ch.id); + }); + } + + getUnreadCount(id) { + return this.unreadCounts[id] || {msgs: 0, mentions: 0}; + } + + getUnreadCounts() { + return this.unreadCounts; + } } var ChannelStore = new ChannelStoreClass(); @@ -281,16 +311,20 @@ ChannelStore.dispatchToken = AppDispatcher.register((payload) => { if (currentId) { ChannelStore.resetCounts(currentId); } + ChannelStore.setUnreadCounts(); ChannelStore.emitChange(); break; case ActionTypes.RECIEVED_CHANNEL: ChannelStore.pStoreChannel(action.channel); - ChannelStore.pStoreChannelMember(action.member); + if (action.member) { + ChannelStore.pStoreChannelMember(action.member); + } currentId = ChannelStore.getCurrentId(); if (currentId) { ChannelStore.resetCounts(currentId); } + ChannelStore.setUnreadCount(action.channel.id); ChannelStore.emitChange(); break; diff --git a/web/react/stores/preference_store.jsx b/web/react/stores/preference_store.jsx index 068bc29c2..543129aca 100644 --- a/web/react/stores/preference_store.jsx +++ b/web/react/stores/preference_store.jsx @@ -1,4 +1,4 @@ -// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import Constants from '../utils/constants.jsx'; @@ -90,8 +90,8 @@ class PreferenceStoreClass extends EventEmitter { return preference; } - emitChange(preferences) { - this.emit(CHANGE_EVENT, preferences); + emitChange() { + this.emit(CHANGE_EVENT); } addChangeListener(callback) { @@ -106,6 +106,12 @@ class PreferenceStoreClass extends EventEmitter { const action = payload.action; switch (action.type) { + case ActionTypes.RECIEVED_PREFERENCE: { + const preference = action.preference; + this.setPreference(preference.category, preference.name, preference.value); + this.emitChange(); + break; + } case ActionTypes.RECIEVED_PREFERENCES: { const preferences = this.getAllPreferences(); @@ -114,7 +120,7 @@ class PreferenceStoreClass extends EventEmitter { } this.setAllPreferences(preferences); - this.emitChange(preferences); + this.emitChange(); break; } } diff --git a/web/react/stores/search_store.jsx b/web/react/stores/search_store.jsx index e8ab6a2ae..f932c379a 100644 --- a/web/react/stores/search_store.jsx +++ b/web/react/stores/search_store.jsx @@ -12,8 +12,6 @@ var ActionTypes = Constants.ActionTypes; var CHANGE_EVENT = 'change'; var SEARCH_CHANGE_EVENT = 'search_change'; var SEARCH_TERM_CHANGE_EVENT = 'search_term_change'; -var MENTION_DATA_CHANGE_EVENT = 'mention_data_change'; -var ADD_MENTION_EVENT = 'add_mention'; var SHOW_SEARCH_EVENT = 'show_search'; class SearchStoreClass extends EventEmitter { @@ -32,10 +30,6 @@ class SearchStoreClass extends EventEmitter { this.addSearchTermChangeListener = this.addSearchTermChangeListener.bind(this); this.removeSearchTermChangeListener = this.removeSearchTermChangeListener.bind(this); - this.emitMentionDataChange = this.emitMentionDataChange.bind(this); - this.addMentionDataChangeListener = this.addMentionDataChangeListener.bind(this); - this.removeMentionDataChangeListener = this.removeMentionDataChangeListener.bind(this); - this.emitShowSearch = this.emitShowSearch.bind(this); this.addShowSearchListener = this.addShowSearchListener.bind(this); this.removeShowSearchListener = this.removeShowSearchListener.bind(this); @@ -113,30 +107,6 @@ class SearchStoreClass extends EventEmitter { return BrowserStore.getItem('search_term'); } - emitMentionDataChange(id, mentionText) { - this.emit(MENTION_DATA_CHANGE_EVENT, id, mentionText); - } - - addMentionDataChangeListener(callback) { - this.on(MENTION_DATA_CHANGE_EVENT, callback); - } - - removeMentionDataChangeListener(callback) { - this.removeListener(MENTION_DATA_CHANGE_EVENT, callback); - } - - emitAddMention(id, username) { - this.emit(ADD_MENTION_EVENT, id, username); - } - - addAddMentionListener(callback) { - this.on(ADD_MENTION_EVENT, callback); - } - - removeAddMentionListener(callback) { - this.removeListener(ADD_MENTION_EVENT, callback); - } - storeSearchResults(results, isMentionSearch) { BrowserStore.setItem('search_results', results); BrowserStore.setItem('is_mention_search', Boolean(isMentionSearch)); @@ -157,12 +127,6 @@ SearchStore.dispatchToken = AppDispatcher.register((payload) => { SearchStore.storeSearchTerm(action.term); SearchStore.emitSearchTermChange(action.do_search, action.is_mention_search); break; - case ActionTypes.RECIEVED_MENTION_DATA: - SearchStore.emitMentionDataChange(action.id, action.mention_text); - break; - case ActionTypes.RECIEVED_ADD_MENTION: - SearchStore.emitAddMention(action.id, action.username); - break; case ActionTypes.SHOW_SEARCH: SearchStore.emitShowSearch(); break; diff --git a/web/react/stores/socket_store.jsx b/web/react/stores/socket_store.jsx index 2e0769cc4..24fa79ca6 100644 --- a/web/react/stores/socket_store.jsx +++ b/web/react/stores/socket_store.jsx @@ -59,13 +59,14 @@ class SocketStoreClass extends EventEmitter { conn.onopen = () => { if (this.failCount > 0) { console.log('websocket re-established connection'); //eslint-disable-line no-console + + if (ErrorStore.getLastError()) { + ErrorStore.storeLastError(null); + ErrorStore.emitChange(); + } } this.failCount = 0; - if (ErrorStore.getLastError()) { - ErrorStore.storeLastError(null); - ErrorStore.emitChange(); - } }; conn.onclose = () => { @@ -135,6 +136,10 @@ class SocketStoreClass extends EventEmitter { handleChannelViewedEvent(msg); break; + case SocketEvents.PREFERENCE_CHANGED: + handlePreferenceChangedEvent(msg); + break; + default: } } @@ -163,7 +168,7 @@ function handleNewPostEvent(msg) { } // Send desktop notification - if (UserStore.getCurrentId() !== msg.user_id || post.props.from_webhook === 'true') { + if ((UserStore.getCurrentId() !== msg.user_id || post.props.from_webhook === 'true') && !Utils.isSystemMessage(post)) { const msgProps = msg.props; let mentions = []; @@ -224,6 +229,7 @@ function handlePostEditEvent(msg) { // Store post const post = JSON.parse(msg.props.post); PostStore.storePost(post); + PostStore.emitChange(); // Update channel state if (ChannelStore.getCurrentId() === msg.channel_id) { @@ -279,6 +285,11 @@ function handleChannelViewedEvent(msg) { } } +function handlePreferenceChangedEvent(msg) { + const preference = JSON.parse(msg.props.preference); + EventHelpers.emitPreferenceChangedEvent(preference); +} + var SocketStore = new SocketStoreClass(); /*SocketStore.dispatchToken = AppDispatcher.register((payload) => { diff --git a/web/react/stores/suggestion_store.jsx b/web/react/stores/suggestion_store.jsx new file mode 100644 index 000000000..9cd566c22 --- /dev/null +++ b/web/react/stores/suggestion_store.jsx @@ -0,0 +1,259 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import AppDispatcher from '../dispatcher/app_dispatcher.jsx'; +import Constants from '../utils/constants.jsx'; +import EventEmitter from 'events'; + +const ActionTypes = Constants.ActionTypes; + +const COMPLETE_WORD_EVENT = 'complete_word'; +const PRETEXT_CHANGED_EVENT = 'pretext_changed'; +const SUGGESTIONS_CHANGED_EVENT = 'suggestions_changed'; + +class SuggestionStore extends EventEmitter { + constructor() { + super(); + + this.addSuggestionsChangedListener = this.addSuggestionsChangedListener.bind(this); + this.removeSuggestionsChangedListener = this.removeSuggestionsChangedListener.bind(this); + this.emitSuggestionsChanged = this.emitSuggestionsChanged.bind(this); + + this.addPretextChangedListener = this.addPretextChangedListener.bind(this); + this.removePretextChangedListener = this.removePretextChangedListener.bind(this); + this.emitPretextChanged = this.emitPretextChanged.bind(this); + + this.addCompleteWordListener = this.addCompleteWordListener.bind(this); + this.removeCompleteWordListener = this.removeCompleteWordListener.bind(this); + this.emitCompleteWord = this.emitCompleteWord.bind(this); + + this.handleEventPayload = this.handleEventPayload.bind(this); + this.dispatchToken = AppDispatcher.register(this.handleEventPayload); + + // this.suggestions stores the state of all SuggestionBoxes by mapping their unique identifier to an + // object with the following fields: + // pretext: the text before the cursor + // matchedPretext: the text before the cursor that will be replaced if an autocomplete term is selected + // terms: a list of strings which the previously typed text may be replaced by + // items: a list of objects backing the terms which may be used in rendering + // components: a list of react components that can be used to render their corresponding item + // selection: the term currently selected by the keyboard + this.suggestions = new Map(); + } + + addSuggestionsChangedListener(id, callback) { + this.on(SUGGESTIONS_CHANGED_EVENT + id, callback); + } + removeSuggestionsChangedListener(id, callback) { + this.removeListener(SUGGESTIONS_CHANGED_EVENT + id, callback); + } + emitSuggestionsChanged(id) { + this.emit(SUGGESTIONS_CHANGED_EVENT + id); + } + + addPretextChangedListener(id, callback) { + this.on(PRETEXT_CHANGED_EVENT + id, callback); + } + removePretextChangedListener(id, callback) { + this.removeListener(PRETEXT_CHANGED_EVENT + id, callback); + } + emitPretextChanged(id, pretext) { + this.emit(PRETEXT_CHANGED_EVENT + id, pretext); + } + + addCompleteWordListener(id, callback) { + this.on(COMPLETE_WORD_EVENT + id, callback); + } + removeCompleteWordListener(id, callback) { + this.removeListener(COMPLETE_WORD_EVENT + id, callback); + } + emitCompleteWord(id, term) { + this.emit(COMPLETE_WORD_EVENT + id, term); + } + + registerSuggestionBox(id) { + this.suggestions.set(id, { + pretext: '', + matchedPretext: '', + terms: [], + items: [], + components: [], + selection: '' + }); + } + + unregisterSuggestionBox(id) { + this.suggestions.delete(id); + } + + clearSuggestions(id) { + const suggestion = this.suggestions.get(id); + + suggestion.matchedPretext = ''; + suggestion.terms = []; + suggestion.items = []; + suggestion.components = []; + } + + clearSelection(id) { + const suggestion = this.suggestions.get(id); + + suggestion.selection = ''; + } + + hasSuggestions(id) { + return this.suggestions.get(id).terms.length > 0; + } + + setPretext(id, pretext) { + const suggestion = this.suggestions.get(id); + + suggestion.pretext = pretext; + } + + setMatchedPretext(id, matchedPretext) { + const suggestion = this.suggestions.get(id); + + suggestion.matchedPretext = matchedPretext; + } + + addSuggestion(id, term, item, component) { + const suggestion = this.suggestions.get(id); + + suggestion.terms.push(term); + suggestion.items.push(item); + suggestion.components.push(component); + } + + addSuggestions(id, terms, items, component) { + const suggestion = this.suggestions.get(id); + + suggestion.terms.push(...terms); + suggestion.items.push(...items); + + for (let i = 0; i < terms.length; i++) { + suggestion.components.push(component); + } + } + + // make sure that if suggestions exist, then one of them is selected. return true if the selection changes. + ensureSelectionExists(id) { + const suggestion = this.suggestions.get(id); + + if (suggestion.terms.length > 0) { + // if the current selection is no longer in the map, select the first term in the list + if (!suggestion.selection || suggestion.terms.indexOf(suggestion.selection) === -1) { + suggestion.selection = suggestion.terms[0]; + + return true; + } + } else if (suggestion.selection) { + suggestion.selection = ''; + + return true; + } + + return false; + } + + getPretext(id) { + return this.suggestions.get(id).pretext; + } + + getMatchedPretext(id) { + return this.suggestions.get(id).matchedPretext; + } + + getItems(id) { + return this.suggestions.get(id).items; + } + + getTerms(id) { + return this.suggestions.get(id).terms; + } + + getComponents(id) { + return this.suggestions.get(id).components; + } + + getSelection(id) { + return this.suggestions.get(id).selection; + } + + selectNext(id) { + this.setSelectionByDelta(id, 1); + } + + selectPrevious(id) { + this.setSelectionByDelta(id, -1); + } + + setSelectionByDelta(id, delta) { + const suggestion = this.suggestions.get(id); + + let selectionIndex = suggestion.terms.indexOf(suggestion.selection); + + if (selectionIndex === -1) { + // this should never happen since selection should always be in terms + throw new Error('selection is not in terms'); + } + + selectionIndex += delta; + + if (selectionIndex < 0) { + selectionIndex = 0; + } else if (selectionIndex > suggestion.terms.length - 1) { + selectionIndex = suggestion.terms.length - 1; + } + + suggestion.selection = suggestion.terms[selectionIndex]; + } + + handleEventPayload(payload) { + const {type, id, ...other} = payload.action; // eslint-disable-line no-redeclare + + switch (type) { + case ActionTypes.SUGGESTION_PRETEXT_CHANGED: + this.clearSuggestions(id); + + this.setPretext(id, other.pretext); + this.emitPretextChanged(id, other.pretext); + + this.ensureSelectionExists(id); + this.emitSuggestionsChanged(id); + break; + case ActionTypes.SUGGESTION_RECEIVED_SUGGESTIONS: + if (other.matchedPretext === this.getMatchedPretext(id)) { + // ensure the matched pretext hasn't changed so that we don't receive suggestions for outdated pretext + this.addSuggestions(id, other.terms, other.items, other.component); + + this.ensureSelectionExists(id); + this.emitSuggestionsChanged(id); + } + break; + case ActionTypes.SUGGESTION_CLEAR_SUGGESTIONS: + this.clearSuggestions(id); + this.clearSelection(id); + this.emitSuggestionsChanged(id); + break; + case ActionTypes.SUGGESTION_SELECT_NEXT: + this.selectNext(id); + this.emitSuggestionsChanged(id); + break; + case ActionTypes.SUGGESTION_SELECT_PREVIOUS: + this.selectPrevious(id); + this.emitSuggestionsChanged(id); + break; + case ActionTypes.SUGGESTION_COMPLETE_WORD: + this.emitCompleteWord(id, other.term || this.getSelection(id), this.getMatchedPretext(id)); + + this.setPretext(id, ''); + this.clearSuggestions(id); + this.clearSelection(id); + this.emitSuggestionsChanged(id); + break; + } + } +} + +export default new SuggestionStore(); diff --git a/web/react/utils/async_client.jsx b/web/react/utils/async_client.jsx index 8cf111d55..88b5aa739 100644 --- a/web/react/utils/async_client.jsx +++ b/web/react/utils/async_client.jsx @@ -55,9 +55,13 @@ export function getChannels(checkVersion) { var serverVersion = xhr.getResponseHeader('X-Version-ID'); if (serverVersion !== BrowserStore.getLastServerVersion()) { - BrowserStore.setLastServerVersion(serverVersion); - window.location.reload(true); - console.log('Detected version update refreshing the page'); //eslint-disable-line no-console + if (!BrowserStore.getLastServerVersion() || BrowserStore.getLastServerVersion() === '') { + BrowserStore.setLastServerVersion(serverVersion); + } else { + BrowserStore.setLastServerVersion(serverVersion); + window.location.reload(true); + console.log('Detected version update refreshing the page'); //eslint-disable-line no-console + } } } @@ -106,10 +110,15 @@ export function getChannel(id) { ); } -export function updateLastViewedAt() { - const channelId = ChannelStore.getCurrentId(); +export function updateLastViewedAt(id) { + let channelId; + if (id) { + channelId = id; + } else { + channelId = ChannelStore.getCurrentId(); + } - if (channelId === null) { + if (channelId == null) { return; } @@ -159,8 +168,13 @@ export function getMoreChannels(force) { } } -export function getChannelExtraInfo() { - const channelId = ChannelStore.getCurrentId(); +export function getChannelExtraInfo(id) { + let channelId; + if (id) { + channelId = id; + } else { + channelId = ChannelStore.getCurrentId(); + } if (channelId != null) { if (isCallInProgress('getChannelExtraInfo_' + channelId)) { @@ -731,3 +745,27 @@ export function savePreferences(preferences, success, error) { } ); } + +export function getSuggestedCommands(command, suggestionId, component) { + client.executeCommand( + '', + command, + true, + (data) => { + // pull out the suggested commands from the returned data + const terms = data.suggestions.map((suggestion) => suggestion.suggestion); + + AppDispatcher.handleServerAction({ + type: ActionTypes.SUGGESTION_RECEIVED_SUGGESTIONS, + id: suggestionId, + matchedPretext: command, + terms, + items: data.suggestions, + component + }); + }, + (err) => { + dispatchError(err, 'getCommandSuggestions'); + } + ); +} diff --git a/web/react/utils/channel_intro_mssages.jsx b/web/react/utils/channel_intro_messages.jsx index 6f83778c9..9685f94b0 100644 --- a/web/react/utils/channel_intro_mssages.jsx +++ b/web/react/utils/channel_intro_messages.jsx @@ -2,6 +2,7 @@ // See License.txt for license information. import * as Utils from './utils.jsx'; +import ChannelInviteModal from '../components/channel_invite_modal.jsx'; import EditChannelHeaderModal from '../components/edit_channel_header_modal.jsx'; import ToggleModalButton from '../components/toggle_modal_button.jsx'; import UserProfile from '../components/user_profile.jsx'; @@ -10,15 +11,15 @@ import Constants from '../utils/constants.jsx'; import TeamStore from '../stores/team_store.jsx'; import * as EventHelpers from '../dispatcher/event_helpers.jsx'; -export function createChannelIntroMessage(channel, showInviteModal) { +export function createChannelIntroMessage(channel) { if (channel.type === 'D') { return createDMIntroMessage(channel); } else if (ChannelStore.isDefault(channel)) { return createDefaultIntroMessage(channel); } else if (channel.name === Constants.OFFTOPIC_CHANNEL) { - return createOffTopicIntroMessage(channel, showInviteModal); + return createOffTopicIntroMessage(channel); } else if (channel.type === 'O' || channel.type === 'P') { - return createStandardIntroMessage(channel, showInviteModal); + return createStandardIntroMessage(channel); } } @@ -62,7 +63,7 @@ export function createDMIntroMessage(channel) { ); } -export function createOffTopicIntroMessage(channel, showInviteModal) { +export function createOffTopicIntroMessage(channel) { return ( <div className='channel-intro'> <h4 className='channel-intro__title'>{'Beginning of ' + channel.display_name}</h4> @@ -71,13 +72,7 @@ export function createOffTopicIntroMessage(channel, showInviteModal) { <br/> </p> {createSetHeaderButton(channel)} - <a - href='#' - className='intro-links' - onClick={showInviteModal} - > - <i className='fa fa-user-plus'></i>{'Invite others to this channel'} - </a> + {createInviteChannelMemberButton(channel, 'channel')} </div> ); } @@ -122,7 +117,7 @@ export function createDefaultIntroMessage(channel) { ); } -export function createStandardIntroMessage(channel, showInviteModal) { +export function createStandardIntroMessage(channel) { var uiName = channel.display_name; var creatorName = ''; @@ -162,17 +157,23 @@ export function createStandardIntroMessage(channel, showInviteModal) { <br/> </p> {createSetHeaderButton(channel)} - <a - className='intro-links' - href='#' - onClick={showInviteModal} - > - <i className='fa fa-user-plus'></i>{'Invite others to this ' + uiType} - </a> + {createInviteChannelMemberButton(channel, uiType)} </div> ); } +function createInviteChannelMemberButton(channel, uiType) { + return ( + <ToggleModalButton + className='intro-links' + dialogType={ChannelInviteModal} + dialogProps={{channel}} + > + <i className='fa fa-user-plus'></i>{'Invite others to this ' + uiType} + </ToggleModalButton> + ); +} + function createSetHeaderButton(channel) { return ( <ToggleModalButton diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx index 09e962161..5d02a8c88 100644 --- a/web/react/utils/client.jsx +++ b/web/react/utils/client.jsx @@ -590,7 +590,12 @@ export function updateChannel(channel, success, error) { track('api', 'api_channels_update'); } -export function updateChannelHeader(data, success, error) { +export function updateChannelHeader(channelId, header, success, error) { + const data = { + channel_id: channelId, + channel_header: header + }; + $.ajax({ url: '/api/v1/channels/update_header', dataType: 'json', diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index 99bd2453c..d23c18b5d 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -24,6 +24,7 @@ export default { RECIEVED_POST: null, RECIEVED_EDIT_POST: null, RECIEVED_SEARCH: null, + RECIEVED_SEARCH_TERM: null, RECIEVED_POST_SELECTED: null, RECIEVED_MENTION_DATA: null, RECIEVED_ADD_MENTION: null, @@ -34,6 +35,7 @@ export default { RECIEVED_AUDITS: null, RECIEVED_TEAMS: null, RECIEVED_STATUSES: null, + RECIEVED_PREFERENCE: null, RECIEVED_PREFERENCES: null, RECIEVED_MSG: null, @@ -50,7 +52,14 @@ export default { TOGGLE_INVITE_MEMBER_MODAL: null, TOGGLE_DELETE_POST_MODAL: null, TOGGLE_GET_TEAM_INVITE_LINK_MODAL: null, - TOGGLE_REGISTER_APP_MODAL: null + TOGGLE_REGISTER_APP_MODAL: null, + + SUGGESTION_PRETEXT_CHANGED: null, + SUGGESTION_RECEIVED_SUGGESTIONS: null, + SUGGESTION_CLEAR_SUGGESTIONS: null, + SUGGESTION_COMPLETE_WORD: null, + SUGGESTION_SELECT_NEXT: null, + SUGGESTION_SELECT_PREVIOUS: null }), PayloadSources: keyMirror({ @@ -66,7 +75,8 @@ export default { NEW_USER: 'new_user', USER_ADDED: 'user_added', USER_REMOVED: 'user_removed', - TYPING: 'typing' + TYPING: 'typing', + PREFERENCE_CHANGED: 'preference_changed' }, //SPECIAL_MENTIONS: ['all', 'channel'], @@ -111,7 +121,10 @@ export default { POST_LOADING: 'loading', POST_FAILED: 'failed', POST_DELETED: 'deleted', - POST_TYPE_JOIN_LEAVE: 'join_leave', + POST_TYPE_JOIN_LEAVE: 'system_join_leave', + SYSTEM_MESSAGE_PREFIX: 'system_', + SYSTEM_MESSAGE_PROFILE_NAME: 'System', + SYSTEM_MESSAGE_PROFILE_IMAGE: '/static/images/logo_compact.png', RESERVED_TEAM_NAMES: [ 'www', 'web', @@ -138,7 +151,7 @@ export default { ], MONTHS: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], MAX_DMS: 20, - MAX_CHANNEL_POPOVER_COUNT: 20, + MAX_CHANNEL_POPOVER_COUNT: 100, DM_CHANNEL: 'D', OPEN_CHANNEL: 'O', PRIVATE_CHANNEL: 'P', @@ -346,6 +359,20 @@ export default { } ], DEFAULT_CODE_THEME: 'github', + FONTS: { + 'Droid Serif': 'font--droid_serif', + 'Roboto Slab': 'font--roboto_slab', + Lora: 'font--lora', + Arvo: 'font--arvo', + 'Open Sans': 'font--open_sans', + Roboto: 'font--roboto', + 'PT Sans': 'font--pt_sans', + Lato: 'font--lato', + 'Source Sans Pro': 'font--source_sans_pro', + 'Exo 2': 'font--exo_2', + Ubuntu: 'font--ubuntu' + }, + DEFAULT_FONT: 'Open Sans', Preferences: { CATEGORY_DIRECT_CHANNEL_SHOW: 'direct_channel_show', CATEGORY_DISPLAY_SETTINGS: 'display_settings', @@ -366,7 +393,8 @@ export default { BACKSPACE: 8, ENTER: 13, ESCAPE: 27, - SPACE: 32 + SPACE: 32, + TAB: 9 }, HighlightedLanguages: { diff: 'Diff', @@ -406,6 +434,10 @@ export default { MARKDOWN_PREVIEW: { label: 'markdown_preview', // github issue: https://github.com/mattermost/platform/pull/1389 description: 'Show markdown preview option in message input box' + }, + EMBED_PREVIEW: { + label: 'embed_preview', + description: 'Show preview snippet of links below message' } } }; diff --git a/web/react/utils/emoticons.jsx b/web/react/utils/emoticons.jsx index bb948b6dc..fa5177232 100644 --- a/web/react/utils/emoticons.jsx +++ b/web/react/utils/emoticons.jsx @@ -13,7 +13,6 @@ const emoticonPatterns = { rage: /(^|\s)(:-?[\[@])(?=$|\s)/g, // :@ frowning: /(^|\s)(:-?\()(?=$|\s)/g, // :( sob: /(^|\s)(:['’]-?\(|:'\(|:'\()(?=$|\s)/g, // :`( - kissing_heart: /(^|\s)(:-?\*)(?=$|\s)/g, // :* pensive: /(^|\s)(:-?\/)(?=$|\s)/g, // :/ confounded: /(^|\s)(:-?s)(?=$|\s)/gi, // :s flushed: /(^|\s)(:-?\|)(?=$|\s)/g, // :| @@ -116,19 +115,19 @@ function initializeEmoticonMap() { const out = new Map(); for (let i = 0; i < emoticonNames.length; i++) { - out[emoticonNames[i]] = true; + out.set(emoticonNames[i], true); } return out; } -const emoticonMap = initializeEmoticonMap(); +export const emoticonMap = initializeEmoticonMap(); export function handleEmoticons(text, tokens) { let output = text; function replaceEmoticonWithToken(fullMatch, prefix, matchText, name) { - if (emoticonMap[name]) { + if (emoticonMap.has(name)) { const index = tokens.size; const alias = `MM_EMOTICON${index}`; @@ -154,6 +153,9 @@ export function handleEmoticons(text, tokens) { return output; } -function getImagePathForEmoticon(name) { - return `/static/images/emoji/${name}.png`; +export function getImagePathForEmoticon(name) { + if (name) { + return `/static/images/emoji/${name}.png`; + } + return `/static/images/emoji`; } diff --git a/web/react/utils/markdown.jsx b/web/react/utils/markdown.jsx index f2721c81d..826b87d08 100644 --- a/web/react/utils/markdown.jsx +++ b/web/react/utils/markdown.jsx @@ -69,13 +69,11 @@ class MattermostInlineLexer extends marked.InlineLexer { this.rules = Object.assign({}, this.rules); - // modified version of the regex that doesn't break up words in snake_case, - // allows for links starting with www, and allows links succounded by parentheses + // modified version of the regex that allows for links starting with www and those surrounded by parentheses // the original is /^[\s\S]+?(?=[\\<!\[_*`~]|https?:\/\/| {2,}\n|$)/ - this.rules.text = /^[\s\S]+?(?:[^\w\/](?=_)|(?=_\W|[\\<!\[*`~]|https?:\/\/|www\.|\(| {2,}\n|$))/; + this.rules.text = /^[\s\S]+?(?=[\\<!\[_*`~]|https?:\/\/|www\.|\(| {2,}\n|$)/; - // modified version of the regex that allows links starting with www and those surrounded - // by parentheses + // modified version of the regex that allows links starting with www and those surrounded by parentheses // the original is /^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/ this.rules.url = /^(\(?(?:https?:\/\/|www\.)[^\s<.][^\s<]*[^<.,:;"'\]\s])/; @@ -228,7 +226,7 @@ class MattermostMarkdownRenderer extends marked.Renderer { const isTaskList = taskListReg.exec(text); if (isTaskList) { - return `<li>${'<input type="checkbox" disabled="disabled" ' + (isTaskList[1] === ' ' ? '' : 'checked="checked" ') + '/> '}${text.replace(taskListReg, '')}</li>`; + return `<li class="list-item--task-list">${'<input type="checkbox" disabled="disabled" ' + (isTaskList[1] === ' ' ? '' : 'checked="checked" ') + '/> '}${text.replace(taskListReg, '')}</li>`; } return `<li>${text}</li>`; } diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index aa9146183..fb8b89252 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -252,13 +252,6 @@ export function getTimestamp() { // extracts links not styled by Markdown export function extractLinks(text) { - const urlMatcher = new Autolinker.matchParser.MatchParser({ - urls: true, - emails: false, - twitter: false, - phone: false, - hashtag: false - }); const links = []; let replaceText = text; @@ -271,7 +264,7 @@ export function extractLinks(text) { } } - function replaceFn(match) { + function replaceFn(autolinker, match) { let link = ''; const matchText = match.getMatchedText(); const tempText = replaceText; @@ -304,7 +297,16 @@ export function extractLinks(text) { links.push(link); } - urlMatcher.replace(text, replaceFn, this); + + Autolinker.link(text, { + replaceFn, + urls: {schemeMatches: true, wwwMatches: true, tldMatches: false}, + emails: false, + twitter: false, + phone: false, + hashtag: false + }); + return {links, text}; } @@ -539,11 +541,11 @@ export function applyTheme(theme) { if (theme.sidebarText) { changeCss('.sidebar--left .nav-pills__container li>a, .sidebar--right, .settings-modal .nav-pills>li a, .sidebar--menu', 'color:' + changeOpacity(theme.sidebarText, 0.6), 1); - changeCss('@media(max-width: 960px){.settings-modal .settings-table .nav>li>a', 'color:' + theme.sidebarText, 1); + changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li>a', 'color:' + theme.sidebarText, 1); changeCss('.sidebar--left .nav-pills__container li>h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.6), 1); changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText, 1); changeCss('.sidebar--left .status path', 'fill:' + changeOpacity(theme.sidebarText, 0.5), 1); - changeCss('@media(max-width: 960px){.settings-modal .settings-table .nav>li>a', 'border-color:' + changeOpacity(theme.sidebarText, 0.2), 2); + changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li>a', 'border-color:' + changeOpacity(theme.sidebarText, 0.2), 2); } if (theme.sidebarUnreadText) { @@ -552,7 +554,7 @@ export function applyTheme(theme) { if (theme.sidebarTextHoverBg) { changeCss('.sidebar--left .nav-pills__container li>a:hover, .sidebar--left .nav-pills__container li>a:focus, .settings-modal .nav-pills>li:hover a, .settings-modal .nav-pills>li:focus a', 'background:' + theme.sidebarTextHoverBg, 1); - changeCss('@media(max-width: 960px){.settings-modal .settings-table .nav>li:hover a', 'background:' + theme.sidebarTextHoverBg, 1); + changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li:hover a', 'background:' + theme.sidebarTextHoverBg, 1); } if (theme.sidebarTextActiveBorder) { @@ -568,18 +570,19 @@ export function applyTheme(theme) { changeCss('.sidebar--left .team__header, .sidebar--menu .team__header', 'background:' + theme.sidebarHeaderBg, 1); changeCss('.modal .modal-header', 'background:' + theme.sidebarHeaderBg, 1); changeCss('#navbar .navbar-default', 'background:' + theme.sidebarHeaderBg, 1); - changeCss('@media(max-width: 960px){.search-bar__container', 'background:' + theme.sidebarHeaderBg, 1); + changeCss('@media(max-width: 768px){.search-bar__container', 'background:' + theme.sidebarHeaderBg, 1); changeCss('.attachment .attachment__container', 'border-left-color:' + theme.sidebarHeaderBg, 1); } if (theme.sidebarHeaderTextColor) { changeCss('.sidebar--left .team__header .header__info, .sidebar--menu .team__header .header__info', 'color:' + theme.sidebarHeaderTextColor, 1); + changeCss('.sidebar--left .team__header .navbar-right .dropdown__icon, .sidebar--menu .team__header .navbar-right .dropdown__icon', 'fill:' + theme.sidebarHeaderTextColor, 1); changeCss('.sidebar--left .team__header .user__name, .sidebar--menu .team__header .user__name', 'color:' + changeOpacity(theme.sidebarHeaderTextColor, 0.8), 1); changeCss('.sidebar--left .team__header:hover .user__name, .sidebar--menu .team__header:hover .user__name', 'color:' + theme.sidebarHeaderTextColor, 1); changeCss('.modal .modal-header .modal-title, .modal .modal-header .modal-title .name, .modal .modal-header button.close', 'color:' + theme.sidebarHeaderTextColor, 1); changeCss('#navbar .navbar-default .navbar-brand .heading', 'color:' + theme.sidebarHeaderTextColor, 1); changeCss('#navbar .navbar-default .navbar-toggle .icon-bar, ', 'background:' + theme.sidebarHeaderTextColor, 1); - changeCss('@media(max-width: 960px){.search-bar__container', 'color:' + theme.sidebarHeaderTextColor, 2); + changeCss('@media(max-width: 768px){.search-bar__container', 'color:' + theme.sidebarHeaderTextColor, 2); } if (theme.onlineIndicator) { @@ -597,7 +600,7 @@ export function applyTheme(theme) { } if (theme.centerChannelBg) { - changeCss('.app__content, .markdown__table, .markdown__table tbody tr, .command-box, .modal .modal-content, .mentions-name, .mentions--top .mentions-box', 'background:' + theme.centerChannelBg, 1); + changeCss('.app__content, .markdown__table, .markdown__table tbody tr, .suggestion-content, .modal .modal-content', 'background:' + theme.centerChannelBg, 1); changeCss('#post-list .post-list-holder-by-time', 'background:' + theme.centerChannelBg, 1); changeCss('#post-create', 'background:' + theme.centerChannelBg, 1); changeCss('.date-separator .separator__text, .new-separator .separator__text', 'background:' + theme.centerChannelBg, 1); @@ -607,7 +610,7 @@ export function applyTheme(theme) { changeCss('.popover.right>.arrow:after, .tip-overlay.tip-overlay--sidebar .arrow, .tip-overlay.tip-overlay--header .arrow', 'border-right-color:' + theme.centerChannelBg, 1); changeCss('.popover.left>.arrow:after', 'border-left-color:' + theme.centerChannelBg, 1); changeCss('.popover.top>.arrow:after, .tip-overlay.tip-overlay--chat .arrow', 'border-top-color:' + theme.centerChannelBg, 1); - changeCss('.search-bar__container .search__form .search-bar, .form-control', 'background:' + theme.centerChannelBg, 1); + changeCss('@media(min-width: 768px){.search-bar__container .search__form .search-bar, .form-control', 'background:' + theme.centerChannelBg, 1); changeCss('.attachment__content', 'background:' + theme.centerChannelBg, 1); } @@ -615,9 +618,9 @@ export function applyTheme(theme) { changeCss('.sidebar--left, .sidebar--right .sidebar--right__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .command-name, .modal .modal-content, .dropdown-menu, .popover, .mentions-name, .tip-overlay', 'color:' + theme.centerChannelColor, 1); changeCss('#post-create', 'color:' + theme.centerChannelColor, 2); - changeCss('.mentions--top, .command-box', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 3); - changeCss('.mentions--top, .command-box', '-webkit-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 2); - changeCss('.mentions--top, .command-box', '-moz-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 1); + changeCss('.mentions--top, .suggestion-list', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 3); + changeCss('.mentions--top, .suggestion-list', '-webkit-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 2); + changeCss('.mentions--top, .suggestion-list', '-moz-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 1); changeCss('.dropdown-menu, .popover ', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 3); changeCss('.dropdown-menu, .popover ', '-webkit-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 2); changeCss('.dropdown-menu, .popover ', '-moz-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 1); @@ -626,7 +629,7 @@ export function applyTheme(theme) { changeCss('.markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); changeCss('.channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1); changeCss('.channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1); - changeCss('.custom-textarea, .custom-textarea:focus, .preview-container .preview-div, .post-image__column .post-image__details, .sidebar--right .sidebar-right__body, .markdown__table th, .markdown__table td, .command-box, .modal .modal-content, .settings-modal .settings-table .settings-content .divider-light, .webhooks__container, .dropdown-menu, .modal .modal-header, .popover, .mentions--top .mentions-box', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.custom-textarea, .custom-textarea:focus, .preview-container .preview-div, .post-image__column .post-image__details, .sidebar--right .sidebar-right__body, .markdown__table th, .markdown__table td, .suggestion-content, .modal .modal-content, .settings-modal .settings-table .settings-content .divider-light, .webhooks__container, .dropdown-menu, .modal .modal-header, .popover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.popover.bottom>.arrow', 'border-bottom-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); changeCss('.search-help-popover .search-autocomplete__divider span', 'color:' + changeOpacity(theme.centerChannelColor, 0.7), 1); changeCss('.popover.right>.arrow', 'border-right-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); @@ -638,8 +641,7 @@ export function applyTheme(theme) { changeCss('.post-image__column', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2); changeCss('.post-image__column .post-image__details', 'color:' + theme.centerChannelColor, 2); changeCss('.post-image__column a, .post-image__column a:hover, .post-image__column a:focus', 'color:' + theme.centerChannelColor, 1); - changeCss('.search-bar__container .search__form .search-bar, .form-control', 'color:' + theme.centerChannelColor, 2); - changeCss('@media(max-width: 960px){.search-bar__container .search__form .search-bar', 'background:' + changeOpacity(theme.centerChannelColor, 0.2) + '; color: inherit;', 1); + changeCss('@media(min-width: 768px){.search-bar__container .search__form .search-bar, .form-control', 'color:' + theme.centerChannelColor, 2); changeCss('.input-group-addon, .search-bar__container .search__form, .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.form-control:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1); changeCss('.attachment .attachment__content', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1); @@ -653,7 +655,7 @@ export function applyTheme(theme) { changeCss('@media(max-width: 1800px){.inner__wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2); changeCss('.post:hover, .modal .more-table tbody>tr:hover td, .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); changeCss('.date-separator.hovered--before:after, .date-separator.hovered--after:before, .new-separator.hovered--after:before, .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); - changeCss('.command-name:hover, .mentions-name:hover, .mentions-focus, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); + changeCss('.command-name:hover, .mentions-name:hover, .suggestion--selected, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); changeCss('code', 'background:' + changeOpacity(theme.centerChannelColor, 0.1), 1); changeCss('@media(min-width: 960px){.post.current--user:hover .post__body ', 'background: none;', 1); changeCss('.sidebar--right', 'color:' + theme.centerChannelColor, 2); @@ -682,7 +684,11 @@ export function applyTheme(theme) { } if (theme.mentionHighlightBg) { - changeCss('.mention-highlight, .search-highlight', 'background:' + theme.mentionHighlightBg, 1); + changeCss('.mention-highlight, .search-highlight, #archive-link-home', 'background:' + theme.mentionHighlightBg, 1); + } + + if (theme.mentionHighlightBg) { + changeCss('.post.post--highlight, #archive-link-home', 'background:' + changeOpacity(theme.mentionHighlightBg, 0.5), 1); } if (theme.mentionHighlightLink) { @@ -694,6 +700,23 @@ export function applyTheme(theme) { } updateCodeTheme(theme.codeTheme); } + +export function applyFont(fontName) { + const body = $('body'); + + for (const key of Reflect.ownKeys(Constants.FONTS)) { + const className = Constants.FONTS[key]; + + if (fontName === key) { + if (!body.hasClass(className)) { + body.addClass(className); + } + } else { + body.removeClass(className); + } + } +} + export function changeCss(className, classValue, classRepeat) { // we need invisible container to store additional css definitions var cssMainContainer = $('#css-modifier-container'); @@ -1115,6 +1138,11 @@ export function getUserIdFromChannelName(channel) { return otherUserId; } +// Returns true if the given channel is a direct channel between the current user and the given one +export function isDirectChannelForUser(otherUserId, channel) { + return channel.type === Constants.DM_CHANNEL && getUserIdFromChannelName(channel) === otherUserId; +} + export function importSlack(file, success, error) { var formData = new FormData(); formData.append('file', file, file.name); @@ -1227,3 +1255,7 @@ export function getPostTerm(post) { export function isFeatureEnabled(feature) { return PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, Constants.FeatureTogglePrefix + feature.label, {value: 'false'}).value === 'true'; } + +export function isSystemMessage(post) { + return post.type && (post.type.lastIndexOf(Constants.SYSTEM_MESSAGE_PREFIX) === 0); +} |