diff options
Diffstat (limited to 'webapp/components')
| -rw-r--r-- | webapp/components/admin_console/admin_sidebar.jsx | 467 | ||||
| -rw-r--r-- | webapp/components/post_body.jsx | 5 | ||||
| -rw-r--r-- | webapp/components/rhs_comment.jsx | 6 | ||||
| -rw-r--r-- | webapp/components/rhs_root_post.jsx | 5 | ||||
| -rw-r--r-- | webapp/components/rhs_thread.jsx | 1 | ||||
| -rw-r--r-- | webapp/components/search_bar.jsx | 1 | ||||
| -rw-r--r-- | webapp/components/suggestion/emoticon_provider.jsx | 28 | ||||
| -rw-r--r-- | webapp/components/suggestion/suggestion_box.jsx | 10 |
8 files changed, 271 insertions, 252 deletions
diff --git a/webapp/components/admin_console/admin_sidebar.jsx b/webapp/components/admin_console/admin_sidebar.jsx index 8ee75e2ef..9f9e85de1 100644 --- a/webapp/components/admin_console/admin_sidebar.jsx +++ b/webapp/components/admin_console/admin_sidebar.jsx @@ -1,8 +1,11 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. +import $ from 'jquery'; + import AdminSidebarHeader from './admin_sidebar_header.jsx'; import SelectTeamModal from './select_team_modal.jsx'; +import * as Utils from 'utils/utils.jsx'; import {FormattedMessage} from 'react-intl'; @@ -27,6 +30,12 @@ export default class AdminSidebar extends React.Component { }; } + componentDidUpdate() { + if (!Utils.isMobile()) { + $('.sidebar--left .nav-pills__container').perfectScrollbar(); + } + } + handleClick(name, teamId, e) { e.preventDefault(); this.props.selectTab(name, teamId); @@ -242,244 +251,242 @@ export default class AdminSidebar extends React.Component { return ( <div className='sidebar--left sidebar--collapsable'> - <div> - <AdminSidebarHeader/> - <div className='nav-pills__container'> - <ul className='nav nav-pills nav-stacked'> - <li> - <ul className='nav nav__sub-menu'> - <li> - <h4> - <span className='icon fa fa-gear'></span> - <span> - <FormattedMessage - id='admin.sidebar.reports' - defaultMessage='SITE REPORTS' - /> - </span> - </h4> - </li> - </ul> - <ul className='nav nav__sub-menu padded'> - <li> - <a - href='#' - className={this.isSelected('system_analytics')} - onClick={this.handleClick.bind(this, 'system_analytics', null)} - > - <FormattedMessage - id='admin.sidebar.view_statistics' - defaultMessage='View Statistics' - /> - </a> - </li> - </ul> - <ul className='nav nav__sub-menu'> - <li> - <h4> - <span className='icon fa fa-gear'></span> - <span> - <FormattedMessage - id='admin.sidebar.settings' - defaultMessage='SETTINGS' - /> - </span> - </h4> - </li> - </ul> - <ul className='nav nav__sub-menu padded'> - <li> - <a - href='#' - className={this.isSelected('service_settings')} - onClick={this.handleClick.bind(this, 'service_settings', null)} - > - <FormattedMessage - id='admin.sidebar.service' - defaultMessage='Service Settings' - /> - </a> - </li> - <li> - <a - href='#' - className={this.isSelected('team_settings')} - onClick={this.handleClick.bind(this, 'team_settings', null)} - > - <FormattedMessage - id='admin.sidebar.team' - defaultMessage='Team Settings' - /> - </a> - </li> - <li> - <a - href='#' - className={this.isSelected('sql_settings')} - onClick={this.handleClick.bind(this, 'sql_settings', null)} - > - <FormattedMessage - id='admin.sidebar.sql' - defaultMessage='SQL Settings' - /> - </a> - </li> - <li> - <a - href='#' - className={this.isSelected('email_settings')} - onClick={this.handleClick.bind(this, 'email_settings', null)} - > - <FormattedMessage - id='admin.sidebar.email' - defaultMessage='Email Settings' - /> - </a> - </li> - <li> - <a - href='#' - className={this.isSelected('image_settings')} - onClick={this.handleClick.bind(this, 'image_settings', null)} - > - <FormattedMessage - id='admin.sidebar.file' - defaultMessage='File Settings' - /> - </a> - </li> - <li> - <a - href='#' - className={this.isSelected('log_settings')} - onClick={this.handleClick.bind(this, 'log_settings', null)} - > - <FormattedMessage - id='admin.sidebar.log' - defaultMessage='Log Settings' - /> - </a> - </li> - <li> - <a - href='#' - className={this.isSelected('rate_settings')} - onClick={this.handleClick.bind(this, 'rate_settings', null)} - > - <FormattedMessage - id='admin.sidebar.rate_limit' - defaultMessage='Rate Limit Settings' - /> - </a> - </li> - <li> - <a - href='#' - className={this.isSelected('privacy_settings')} - onClick={this.handleClick.bind(this, 'privacy_settings', null)} - > + <AdminSidebarHeader/> + <div className='nav-pills__container'> + <ul className='nav nav-pills nav-stacked'> + <li> + <ul className='nav nav__sub-menu'> + <li> + <h4> + <span className='icon fa fa-gear'></span> + <span> <FormattedMessage - id='admin.sidebar.privacy' - defaultMessage='Privacy Settings' + id='admin.sidebar.reports' + defaultMessage='SITE REPORTS' /> - </a> - </li> - <li> - <a - href='#' - className={this.isSelected('gitlab_settings')} - onClick={this.handleClick.bind(this, 'gitlab_settings', null)} - > + </span> + </h4> + </li> + </ul> + <ul className='nav nav__sub-menu padded'> + <li> + <a + href='#' + className={this.isSelected('system_analytics')} + onClick={this.handleClick.bind(this, 'system_analytics', null)} + > + <FormattedMessage + id='admin.sidebar.view_statistics' + defaultMessage='View Statistics' + /> + </a> + </li> + </ul> + <ul className='nav nav__sub-menu'> + <li> + <h4> + <span className='icon fa fa-gear'></span> + <span> <FormattedMessage - id='admin.sidebar.gitlab' - defaultMessage='GitLab Settings' + id='admin.sidebar.settings' + defaultMessage='SETTINGS' /> - </a> - </li> - {ldapSettings} - {complianceSettings} - <li> - <a - href='#' - className={this.isSelected('legal_and_support_settings')} - onClick={this.handleClick.bind(this, 'legal_and_support_settings', null)} - > + </span> + </h4> + </li> + </ul> + <ul className='nav nav__sub-menu padded'> + <li> + <a + href='#' + className={this.isSelected('service_settings')} + onClick={this.handleClick.bind(this, 'service_settings', null)} + > + <FormattedMessage + id='admin.sidebar.service' + defaultMessage='Service Settings' + /> + </a> + </li> + <li> + <a + href='#' + className={this.isSelected('team_settings')} + onClick={this.handleClick.bind(this, 'team_settings', null)} + > + <FormattedMessage + id='admin.sidebar.team' + defaultMessage='Team Settings' + /> + </a> + </li> + <li> + <a + href='#' + className={this.isSelected('sql_settings')} + onClick={this.handleClick.bind(this, 'sql_settings', null)} + > + <FormattedMessage + id='admin.sidebar.sql' + defaultMessage='SQL Settings' + /> + </a> + </li> + <li> + <a + href='#' + className={this.isSelected('email_settings')} + onClick={this.handleClick.bind(this, 'email_settings', null)} + > + <FormattedMessage + id='admin.sidebar.email' + defaultMessage='Email Settings' + /> + </a> + </li> + <li> + <a + href='#' + className={this.isSelected('image_settings')} + onClick={this.handleClick.bind(this, 'image_settings', null)} + > + <FormattedMessage + id='admin.sidebar.file' + defaultMessage='File Settings' + /> + </a> + </li> + <li> + <a + href='#' + className={this.isSelected('log_settings')} + onClick={this.handleClick.bind(this, 'log_settings', null)} + > + <FormattedMessage + id='admin.sidebar.log' + defaultMessage='Log Settings' + /> + </a> + </li> + <li> + <a + href='#' + className={this.isSelected('rate_settings')} + onClick={this.handleClick.bind(this, 'rate_settings', null)} + > + <FormattedMessage + id='admin.sidebar.rate_limit' + defaultMessage='Rate Limit Settings' + /> + </a> + </li> + <li> + <a + href='#' + className={this.isSelected('privacy_settings')} + onClick={this.handleClick.bind(this, 'privacy_settings', null)} + > + <FormattedMessage + id='admin.sidebar.privacy' + defaultMessage='Privacy Settings' + /> + </a> + </li> + <li> + <a + href='#' + className={this.isSelected('gitlab_settings')} + onClick={this.handleClick.bind(this, 'gitlab_settings', null)} + > + <FormattedMessage + id='admin.sidebar.gitlab' + defaultMessage='GitLab Settings' + /> + </a> + </li> + {ldapSettings} + {complianceSettings} + <li> + <a + href='#' + className={this.isSelected('legal_and_support_settings')} + onClick={this.handleClick.bind(this, 'legal_and_support_settings', null)} + > + <FormattedMessage + id='admin.sidebar.support' + defaultMessage='Legal and Support Settings' + /> + </a> + </li> + </ul> + <ul className='nav nav__sub-menu'> + <li> + <h4> + <span className='icon fa fa-gear'></span> + <span> <FormattedMessage - id='admin.sidebar.support' - defaultMessage='Legal and Support Settings' + id='admin.sidebar.teams' + defaultMessage='TEAMS ({count})' + values={{ + count: count + }} /> - </a> - </li> - </ul> - <ul className='nav nav__sub-menu'> - <li> - <h4> - <span className='icon fa fa-gear'></span> - <span> - <FormattedMessage - id='admin.sidebar.teams' - defaultMessage='TEAMS ({count})' - values={{ - count: count - }} - /> - </span> - <span className='menu-icon--right'> - <OverlayTrigger - delayShow={1000} - placement='top' - overlay={addTeamTooltip} - > - <a - href='#' - onClick={this.showTeamSelect} - > - <i - className='fa fa-plus' - ></i> - </a> - </OverlayTrigger> - </span> - </h4> - </li> - </ul> - <ul className='nav nav__sub-menu padded'> - <li> - {teams} - </li> - </ul> - <ul className='nav nav__sub-menu'> - <li> - <h4> - <span className='icon fa fa-gear'></span> - <span> - <FormattedMessage - id='admin.sidebar.other' - defaultMessage='OTHER' - /> - </span> - </h4> - </li> - </ul> - <ul className='nav nav__sub-menu padded'> - {licenseSettings} - {audits} - <li> - <a - href='#' - className={this.isSelected('logs')} - onClick={this.handleClick.bind(this, 'logs', null)} - > + </span> + <span className='menu-icon--right'> + <OverlayTrigger + delayShow={1000} + placement='top' + overlay={addTeamTooltip} + > + <a + href='#' + onClick={this.showTeamSelect} + > + <i + className='fa fa-plus' + ></i> + </a> + </OverlayTrigger> + </span> + </h4> + </li> + </ul> + <ul className='nav nav__sub-menu padded'> + <li> + {teams} + </li> + </ul> + <ul className='nav nav__sub-menu'> + <li> + <h4> + <span className='icon fa fa-gear'></span> + <span> <FormattedMessage - id='admin.sidebar.logs' - defaultMessage='Logs' + id='admin.sidebar.other' + defaultMessage='OTHER' /> - </a> - </li> - </ul> - </li> - </ul> - </div> + </span> + </h4> + </li> + </ul> + <ul className='nav nav__sub-menu padded'> + {licenseSettings} + {audits} + <li> + <a + href='#' + className={this.isSelected('logs')} + onClick={this.handleClick.bind(this, 'logs', null)} + > + <FormattedMessage + id='admin.sidebar.logs' + defaultMessage='Logs' + /> + </a> + </li> + </ul> + </li> + </ul> </div> <SelectTeamModal diff --git a/webapp/components/post_body.jsx b/webapp/components/post_body.jsx index cb682abba..884dbbbbb 100644 --- a/webapp/components/post_body.jsx +++ b/webapp/components/post_body.jsx @@ -5,7 +5,6 @@ import ReactDOM from 'react-dom'; 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'; import * as TextFormatting from 'utils/text_formatting.jsx'; import twemoji from 'twemoji'; @@ -52,9 +51,9 @@ class PostBody extends React.Component { parseEmojis() { twemoji.parse(ReactDOM.findDOMNode(this), { - className: 'emoji twemoji', + className: 'emoticon', base: '', - folder: Emoji.getImagePathForEmoticon() + folder: Constants.EMOJI_PATH }); } diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx index de99eb37d..53170ee15 100644 --- a/webapp/components/rhs_comment.jsx +++ b/webapp/components/rhs_comment.jsx @@ -70,7 +70,11 @@ class RhsComment extends React.Component { this.forceUpdate(); } parseEmojis() { - twemoji.parse(ReactDOM.findDOMNode(this), {size: Constants.EMOJI_SIZE}); + twemoji.parse(ReactDOM.findDOMNode(this), { + className: 'emoticon', + base: '', + folder: Constants.EMOJI_PATH + }); } handlePermalink(e) { e.preventDefault(); diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx index 1aa4a555f..26b392aa1 100644 --- a/webapp/components/rhs_root_post.jsx +++ b/webapp/components/rhs_root_post.jsx @@ -7,7 +7,6 @@ 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 PostBodyAdditionalContent from './post_body_additional_content.jsx'; @@ -30,9 +29,9 @@ export default class RhsRootPost extends React.Component { } parseEmojis() { twemoji.parse(ReactDOM.findDOMNode(this), { - className: 'emoji twemoji', + className: 'emoticon', base: '', - folder: Emoji.getImagePathForEmoticon() + folder: Constants.EMOJI_PATH }); } handlePermalink(e) { diff --git a/webapp/components/rhs_thread.jsx b/webapp/components/rhs_thread.jsx index f0324d7ce..bbd9f8b28 100644 --- a/webapp/components/rhs_thread.jsx +++ b/webapp/components/rhs_thread.jsx @@ -54,6 +54,7 @@ export default class RhsThread extends React.Component { if ($('.post-right__scroll')[0]) { $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight); } + $('.sidebar--right .post-right__scroll').perfectScrollbar('update'); this.resize(); } componentWillUnmount() { diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx index c8dbb9d3f..caaf0f844 100644 --- a/webapp/components/search_bar.jsx +++ b/webapp/components/search_bar.jsx @@ -184,6 +184,7 @@ class SearchBar extends React.Component { onUserInput={this.handleUserInput} listComponent={SearchSuggestionList} providers={this.suggestionProviders} + type='search' /> {isSearching} <Popover diff --git a/webapp/components/suggestion/emoticon_provider.jsx b/webapp/components/suggestion/emoticon_provider.jsx index ab8b9376a..bbf7c6f51 100644 --- a/webapp/components/suggestion/emoticon_provider.jsx +++ b/webapp/components/suggestion/emoticon_provider.jsx @@ -11,7 +11,7 @@ import React from 'react'; class EmoticonSuggestion extends React.Component { render() { const text = this.props.term; - const name = this.props.item; + const emoticon = this.props.item; let className = 'emoticon-suggestion'; if (this.props.isSelection) { @@ -27,7 +27,7 @@ class EmoticonSuggestion extends React.Component { <img alt={text} className='emoticon-suggestion__image' - src={Emoticons.getImagePathForEmoticon(name)} + src={emoticon.path} title={text} /> </div> @@ -40,7 +40,7 @@ class EmoticonSuggestion extends React.Component { } EmoticonSuggestion.propTypes = { - item: React.PropTypes.string.isRequired, + item: React.PropTypes.object.isRequired, term: React.PropTypes.string.isRequired, isSelection: React.PropTypes.bool, onClick: React.PropTypes.func @@ -53,25 +53,25 @@ export default class EmoticonProvider { const text = captured[1]; const partialName = captured[2]; - const names = []; + const matched = []; - for (const emoticon of Emoticons.emoticonMap.keys()) { - if (emoticon.indexOf(partialName) !== -1) { - names.push(emoticon); + for (const [name, emoticon] of Emoticons.emoticons) { + if (name.indexOf(partialName) !== -1) { + matched.push(emoticon); - if (names.length >= MAX_EMOTICON_SUGGESTIONS) { + if (matched.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); + matched.sort((a, b) => { + const aPrefix = a.alias.startsWith(partialName); + const bPrefix = b.alias.startsWith(partialName); if (aPrefix === bPrefix) { - return a.localeCompare(b); + return a.alias.localeCompare(b.alias); } else if (aPrefix) { return -1; } @@ -79,11 +79,11 @@ export default class EmoticonProvider { return 1; }); - const terms = names.map((name) => ':' + name + ':'); + const terms = matched.map((emoticon) => ':' + emoticon.alias + ':'); if (terms.length > 0) { SuggestionStore.setMatchedPretext(suggestionId, text); - SuggestionStore.addSuggestions(suggestionId, terms, names, EmoticonSuggestion); + SuggestionStore.addSuggestions(suggestionId, terms, matched, EmoticonSuggestion); // force the selection to be cleared since the order of elements may have changed SuggestionStore.clearSelection(suggestionId); diff --git a/webapp/components/suggestion/suggestion_box.jsx b/webapp/components/suggestion/suggestion_box.jsx index b7f0e3a36..dbec024ac 100644 --- a/webapp/components/suggestion/suggestion_box.jsx +++ b/webapp/components/suggestion/suggestion_box.jsx @@ -139,6 +139,14 @@ export default class SuggestionBox extends React.Component { {...newProps} /> ); + } else if (this.props.type === 'search') { + textbox = ( + <input + ref='textbox' + type='search' + {...newProps} + /> + ); } else if (this.props.type === 'textarea') { textbox = ( <TextareaAutosize @@ -166,7 +174,7 @@ SuggestionBox.defaultProps = { SuggestionBox.propTypes = { listComponent: React.PropTypes.func.isRequired, - type: React.PropTypes.oneOf(['input', 'textarea']).isRequired, + type: React.PropTypes.oneOf(['input', 'textarea', 'search']).isRequired, value: React.PropTypes.string.isRequired, onUserInput: React.PropTypes.func, providers: React.PropTypes.arrayOf(React.PropTypes.object), |