diff options
Diffstat (limited to 'webapp/components')
32 files changed, 171 insertions, 112 deletions
diff --git a/webapp/components/about_build_modal.jsx b/webapp/components/about_build_modal.jsx index 6e245a9ef..197179191 100644 --- a/webapp/components/about_build_modal.jsx +++ b/webapp/components/about_build_modal.jsx @@ -135,7 +135,7 @@ export default class AboutBuildModal extends React.Component { id='about.version' defaultMessage='Version:' /> - {'\u00a0' + config.Version + '\u00a0' + config.BuildNumber} + {'\u00a0' + config.Version + '\u00a0 (' + config.BuildNumber + ')'} </div> <div> <FormattedMessage diff --git a/webapp/components/admin_console/admin_sidebar.jsx b/webapp/components/admin_console/admin_sidebar.jsx index 69a464f9c..8f88afab4 100644 --- a/webapp/components/admin_console/admin_sidebar.jsx +++ b/webapp/components/admin_console/admin_sidebar.jsx @@ -157,7 +157,7 @@ export default class AdminSidebar extends React.Component { return ( <AdminSidebarCategory parentLink='/admin_console' - icon='fa-gear' + icon='fa-user' title={ <FormattedMessage id='admin.sidebar.teams' @@ -275,7 +275,7 @@ export default class AdminSidebar extends React.Component { <ul className='nav nav-pills nav-stacked'> <AdminSidebarCategory parentLink='/admin_console' - icon='fa-gear' + icon='fa-bar-chart' title={ <FormattedMessage id='admin.sidebar.reports' @@ -608,7 +608,7 @@ export default class AdminSidebar extends React.Component { {this.renderTeams()} <AdminSidebarCategory parentLink='/admin_console' - icon='fa-gear' + icon='fa-wrench' title={ <FormattedMessage id='admin.sidebar.other' diff --git a/webapp/components/admin_console/brand_image_setting.jsx b/webapp/components/admin_console/brand_image_setting.jsx index 74d0814a6..252328f25 100644 --- a/webapp/components/admin_console/brand_image_setting.jsx +++ b/webapp/components/admin_console/brand_image_setting.jsx @@ -105,9 +105,14 @@ export default class BrandImageSetting extends React.Component { } render() { - let btnClass = 'btn'; + let btnPrimaryClass = 'btn'; if (this.state.brandImage) { - btnClass += ' btn-primary'; + btnPrimaryClass += ' btn-primary'; + } + + let letbtnDefaultClass = 'btn'; + if (!this.props.disabled) { + letbtnDefaultClass += ' btn-default'; } let img = null; @@ -152,7 +157,7 @@ export default class BrandImageSetting extends React.Component { <div className='col-sm-8'> <div className='file__upload'> <button - className='btn btn-default' + className={letbtnDefaultClass} disabled={this.props.disabled} > <FormattedMessage @@ -169,12 +174,12 @@ export default class BrandImageSetting extends React.Component { /> </div> <button - className={btnClass} + className={btnPrimaryClass} disabled={this.props.disabled || !this.state.brandImage} onClick={this.handleImageSubmit} id='upload-button' - data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> ' + Utils.localizeMessage('admin.team.uploading', 'Uploading..')} - data-complete-text={'<span class=\'glyphicon glyphicon-ok\'></span> ' + Utils.localizeMessage('admin.team.uploaded', 'Uploaded!')} + data-loading-text={'<span class=\'fa fa-refresh fa-rotate\'></span> ' + Utils.localizeMessage('admin.team.uploading', 'Uploading..')} + data-complete-text={'<span class=\'fa fa-check\'></span> ' + Utils.localizeMessage('admin.team.uploaded', 'Uploaded!')} > <FormattedMessage id='admin.team.upload' diff --git a/webapp/components/admin_console/email_connection_test.jsx b/webapp/components/admin_console/email_connection_test.jsx index 87612e4d5..c90c80b99 100644 --- a/webapp/components/admin_console/email_connection_test.jsx +++ b/webapp/components/admin_console/email_connection_test.jsx @@ -85,7 +85,7 @@ export default class EmailConnectionTestButton extends React.Component { if (this.state.testing) { contents = ( <span> - <span className='glyphicon glyphicon-refresh glyphicon-refresh-animate'/> + <span className='fa fa-refresh icon--rotate'/> {Utils.localizeMessage('admin.email.testing', 'Testing...')} </span> ); diff --git a/webapp/components/admin_console/license_settings.jsx b/webapp/components/admin_console/license_settings.jsx index 14934a3e5..94cd83c07 100644 --- a/webapp/components/admin_console/license_settings.jsx +++ b/webapp/components/admin_console/license_settings.jsx @@ -131,7 +131,7 @@ class LicenseSettings extends React.Component { className='btn btn-danger' onClick={this.handleRemove} id='remove-button' - data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> ' + this.props.intl.formatMessage(holders.removing)} + data-loading-text={'<span class=\'fa fa-refresh icon--rotate\'></span> ' + this.props.intl.formatMessage(holders.removing)} > <FormattedMessage id='admin.license.keyRemove' @@ -195,7 +195,7 @@ class LicenseSettings extends React.Component { disabled={!this.state.fileSelected} onClick={this.handleSubmit} id='upload-button' - data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> ' + this.props.intl.formatMessage(holders.uploading)} + data-loading-text={'<span class=\'fa fa-refresh icon--rotate\'></span> ' + this.props.intl.formatMessage(holders.uploading)} > <FormattedMessage id='admin.license.upload' diff --git a/webapp/components/admin_console/recycle_db.jsx b/webapp/components/admin_console/recycle_db.jsx index cdabf3b2d..0a88e6a89 100644 --- a/webapp/components/admin_console/recycle_db.jsx +++ b/webapp/components/admin_console/recycle_db.jsx @@ -75,7 +75,7 @@ export default class RecycleDbButton extends React.Component { if (this.state.loading) { contents = ( <span> - <span className='glyphicon glyphicon-refresh glyphicon-refresh-animate'/> + <span className='fa fa-refresh icon--rotate'/> {Utils.localizeMessage('admin.recycle.loading', ' Recycling...')} </span> ); diff --git a/webapp/components/admin_console/reload_config.jsx b/webapp/components/admin_console/reload_config.jsx index d6d3fb56a..a04a98690 100644 --- a/webapp/components/admin_console/reload_config.jsx +++ b/webapp/components/admin_console/reload_config.jsx @@ -78,7 +78,7 @@ export default class ReloadConfigButton extends React.Component { if (this.state.loading) { contents = ( <span> - <span className='glyphicon glyphicon-refresh glyphicon-refresh-animate'/> + <span className='fa fa-refresh icon--rotate'/> {Utils.localizeMessage('admin.reload.loading', ' Loading...')} </span> ); diff --git a/webapp/components/admin_console/save_button.jsx b/webapp/components/admin_console/save_button.jsx index 18bb6e96d..fd7045605 100644 --- a/webapp/components/admin_console/save_button.jsx +++ b/webapp/components/admin_console/save_button.jsx @@ -26,7 +26,7 @@ export default class SaveButton extends React.Component { if (saving) { contents = ( <span> - <span className='glyphicon glyphicon-refresh glyphicon-refresh-animate'/> + <span className='icon fa fa-refresh icon--rotate'/> <FormattedMessage id='admin.saving' defaultMessage='Saving Config...' diff --git a/webapp/components/change_url_modal.jsx b/webapp/components/change_url_modal.jsx index 73bcfdb95..9a526a9ee 100644 --- a/webapp/components/change_url_modal.jsx +++ b/webapp/components/change_url_modal.jsx @@ -2,6 +2,7 @@ // See License.txt for license information. import ReactDOM from 'react-dom'; +import Constants from 'utils/constants.jsx'; import {Modal, Tooltip, OverlayTrigger} from 'react-bootstrap'; import * as Utils from 'utils/utils.jsx'; @@ -154,6 +155,7 @@ export default class ChangeUrlModal extends React.Component { <div className='col-sm-10'> <div className={urlClass}> <OverlayTrigger + delayShow={Constants.OVERLAY_TIME_DELAY} placement='top' overlay={urlTooltip} > diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx index 70a4b1bfe..365e8ed21 100644 --- a/webapp/components/channel_header.jsx +++ b/webapp/components/channel_header.jsx @@ -478,7 +478,7 @@ export default class ChannelHeader extends React.Component { aria-expanded='true' > <strong className='heading'><StatusIcon status={this.getTeammateStatus()}/>{channelTitle} </strong> - <span className='glyphicon glyphicon-chevron-down header-dropdown__icon'/> + <span className='fa fa-chevron-down header-dropdown__icon'/> </a> <ul className='dropdown-menu' diff --git a/webapp/components/channel_invite_button.jsx b/webapp/components/channel_invite_button.jsx index ed013bb26..979e029ae 100644 --- a/webapp/components/channel_invite_button.jsx +++ b/webapp/components/channel_invite_button.jsx @@ -65,7 +65,7 @@ export default class ChannelInviteButton extends React.Component { onClick={this.handleClick} spinning={this.state.addingUser} > - <i className='glyphicon glyphicon-envelope'/> + <i className='fa fa-envelope fa-margin--right'/> <FormattedMessage id='channel_invite.add' defaultMessage=' Add' diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx index 4e88a538f..508fb36cb 100644 --- a/webapp/components/create_post.jsx +++ b/webapp/components/create_post.jsx @@ -85,7 +85,7 @@ class CreatePost extends React.Component { submitting: false, initialText: draft.messageText, ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'), - centerTextbox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED, + fullWidthTextBox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN, showTutorialTip: false, showPostDeletedModal: false, typing: false @@ -325,7 +325,7 @@ class CreatePost extends React.Component { // wait to load these since they may have changed since the component was constructed (particularly in the case of skipping the tutorial) this.setState({ ctrlSend: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'), - centerTextbox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED, + fullWidthTextBox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN, showTutorialTip: tutorialStep === TutorialSteps.POST_POPOVER }); } @@ -381,7 +381,7 @@ class CreatePost extends React.Component { this.setState({ showTutorialTip: tutorialStep === TutorialSteps.POST_POPOVER, ctrlSend: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'), - centerTextbox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED + fullWidthTextBox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN }); } @@ -503,7 +503,7 @@ class CreatePost extends React.Component { } let centerClass = ''; - if (this.state.centerTextbox) { + if (!this.state.fullWidthTextBox) { centerClass = 'center'; } diff --git a/webapp/components/create_team/components/display_name.jsx b/webapp/components/create_team/components/display_name.jsx index a4d47477a..b30aadd77 100644 --- a/webapp/components/create_team/components/display_name.jsx +++ b/webapp/components/create_team/components/display_name.jsx @@ -100,7 +100,7 @@ export default class TeamSignupDisplayNamePage extends React.Component { <FormattedMessage id='create_team.display_name.next' defaultMessage='Next' - /><i className='glyphicon glyphicon-chevron-right'></i> + /><i className='fa fa-chevron-right'></i> </button> <div className='margin--extra'> <Link to='/select_team'> diff --git a/webapp/components/file_attachment.jsx b/webapp/components/file_attachment.jsx index d5bbae4c9..a3dd7ff1d 100644 --- a/webapp/components/file_attachment.jsx +++ b/webapp/components/file_attachment.jsx @@ -206,7 +206,11 @@ class FileAttachment extends React.Component { className='post-image__name' rel='noopener noreferrer' > - <i className='glyphicon glyphicon-paperclip'/>{trimmedFilename} + <span + className='icon' + dangerouslySetInnerHTML={{__html: Constants.ATTACHMENT_ICON_SVG}} + /> + {trimmedFilename} </a> </OverlayTrigger> ); diff --git a/webapp/components/file_preview.jsx b/webapp/components/file_preview.jsx index 40c8b81d6..46ce43a6f 100644 --- a/webapp/components/file_preview.jsx +++ b/webapp/components/file_preview.jsx @@ -57,7 +57,7 @@ export default class FilePreview extends React.Component { className='file-preview__remove' onClick={this.handleRemove} > - <i className='glyphicon glyphicon-remove'/> + <i className='fa fa-remove'/> </a> </div> ); @@ -73,7 +73,7 @@ export default class FilePreview extends React.Component { className='file-preview__remove' onClick={this.handleRemove} > - <i className='glyphicon glyphicon-remove'/> + <i className='fa fa-remove'/> </a> </div> ); @@ -96,7 +96,7 @@ export default class FilePreview extends React.Component { className='file-preview__remove' onClick={this.handleRemove} > - <i className='glyphicon glyphicon-remove'/> + <i className='fa fa-remove'/> </a> </div> ); diff --git a/webapp/components/file_upload.jsx b/webapp/components/file_upload.jsx index 16ee096ed..89b184ea6 100644 --- a/webapp/components/file_upload.jsx +++ b/webapp/components/file_upload.jsx @@ -318,9 +318,10 @@ class FileUpload extends React.Component { ref='input' className='btn btn-file' > - <span> - <i className='glyphicon glyphicon-paperclip'/> - </span> + <span + className='icon' + dangerouslySetInnerHTML={{__html: Constants.ATTACHMENT_ICON_SVG}} + /> <input ref='fileInput' type='file' diff --git a/webapp/components/get_link_modal.jsx b/webapp/components/get_link_modal.jsx index c04ebb957..0f41b3b29 100644 --- a/webapp/components/get_link_modal.jsx +++ b/webapp/components/get_link_modal.jsx @@ -16,18 +16,30 @@ export default class GetLinkModal extends React.Component { this.onHide = this.onHide.bind(this); this.copyLink = this.copyLink.bind(this); + this.selectLinkOnClick = this.selectLinkOnClick.bind(this); this.state = { copiedLink: false }; } + componntWillUnmount() { + $(this.refs.textarea).off('click'); + } + onHide() { this.setState({copiedLink: false}); this.props.onHide(); } + selectLinkOnClick() { + $(this.refs.textarea).on('click', function selectLinkOnClick() { + $(this).select(); + this.setSelectionRange(0, this.value.length); + }); + } + copyLink() { var copyTextarea = $(ReactDOM.findDOMNode(this.refs.textarea)); copyTextarea.select(); @@ -76,7 +88,6 @@ export default class GetLinkModal extends React.Component { const linkText = ( <textarea className='form-control no-resize min-height' - readOnly='true' ref='textarea' value={this.props.link} /> @@ -99,6 +110,7 @@ export default class GetLinkModal extends React.Component { <Modal show={this.props.show} onHide={this.onHide} + onEntered={this.selectLinkOnClick} > <Modal.Header closeButton={true}> <h4 className='modal-title'>{this.props.title}</h4> diff --git a/webapp/components/navbar.jsx b/webapp/components/navbar.jsx index 3bed4c477..c8fa29e34 100644 --- a/webapp/components/navbar.jsx +++ b/webapp/components/navbar.jsx @@ -387,7 +387,7 @@ export default class Navbar extends React.Component { aria-expanded='true' > <span className='heading'><StatusIcon status={this.getTeammateStatus()}/>{channelTitle} </span> - <span className='glyphicon glyphicon-chevron-down header-dropdown__icon'></span> + <span className='fa fa-chevron-down header-dropdown__icon'></span> </a> <ul className='dropdown-menu' @@ -628,7 +628,7 @@ export default class Navbar extends React.Component { className='navbar-toggle pull-right' onClick={this.showSearch} > - <span className='glyphicon glyphicon-search icon--white'/> + <span className='fa fa-search icon-search icon--white'/> </button> ); diff --git a/webapp/components/needs_team.jsx b/webapp/components/needs_team.jsx index 5aabcb55c..19ad38887 100644 --- a/webapp/components/needs_team.jsx +++ b/webapp/components/needs_team.jsx @@ -122,7 +122,7 @@ export default class NeedsTeam extends React.Component { <ErrorBar/> <div className='container-fluid'> <SidebarRight/> - <SidebarRightMenu/> + <SidebarRightMenu teamType={this.state.team.type}/> {content} <GetPostLinkModal/> diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx index 6633bd9b9..0a4840050 100644 --- a/webapp/components/post_view/components/post.jsx +++ b/webapp/components/post_view/components/post.jsx @@ -104,6 +104,11 @@ export default class Post extends React.Component { type = 'Comment'; } + let hideControls = ''; + if (post.state === Constants.POST_DELETED || post.state === Constants.POST_FAILED) { + hideControls = 'post--hide-controls'; + } + const commentCount = this.props.commentCount; let rootUser; @@ -113,13 +118,6 @@ export default class Post extends React.Component { rootUser = 'other--root'; } - let postType = ''; - if (type !== 'Post') { - postType = 'post--comment'; - } else if (commentCount > 0) { - postType = 'post--root'; - } - let currentUserCss = ''; if (this.props.currentUser.id === post.user_id && !post.props.from_webhook && !PostUtils.isSystemMessage(post)) { currentUserCss = 'current--user'; @@ -142,9 +140,22 @@ export default class Post extends React.Component { shouldHighlightClass = 'post--highlight'; } + let postType = ''; + if (type !== 'Post') { + postType = 'post--comment'; + } else if (commentCount > 0) { + postType = 'post--root'; + sameUserClass = ''; + rootUser = ''; + } + let systemMessageClass = ''; if (PostUtils.isSystemMessage(post)) { systemMessageClass = 'post--system'; + sameUserClass = ''; + currentUserCss = ''; + postType = ''; + rootUser = ''; } let profilePic = ( @@ -170,18 +181,20 @@ export default class Post extends React.Component { } let compactClass = ''; + let profilePicContainer = (<div className='post__img'>{profilePic}</div>); if (this.props.compactDisplay) { compactClass = 'post--compact'; + profilePicContainer = ''; } return ( <div> <div id={'post_' + post.id} - className={'post ' + sameUserClass + ' ' + compactClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss + ' ' + shouldHighlightClass + ' ' + systemMessageClass} + className={'post ' + sameUserClass + ' ' + compactClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss + ' ' + shouldHighlightClass + ' ' + systemMessageClass + ' ' + hideControls} > <div className={'post__content ' + centerClass}> - <div className='post__img'>{profilePic}</div> + {profilePicContainer} <div> <PostHeader ref='header' diff --git a/webapp/components/post_view/components/post_body.jsx b/webapp/components/post_view/components/post_body.jsx index 561860b65..a98c92017 100644 --- a/webapp/components/post_view/components/post_body.jsx +++ b/webapp/components/post_view/components/post_body.jsx @@ -4,6 +4,7 @@ import FileAttachmentList from 'components/file_attachment_list.jsx'; import UserStore from 'stores/user_store.jsx'; import * as Utils from 'utils/utils.jsx'; +import * as GlobalActions from 'actions/global_actions.jsx'; import Constants from 'utils/constants.jsx'; import * as TextFormatting from 'utils/text_formatting.jsx'; import PostBodyAdditionalContent from './post_body_additional_content.jsx'; @@ -16,6 +17,11 @@ import loadingGif from 'images/load.gif'; import React from 'react'; export default class PostBody extends React.Component { + constructor(props) { + super(props); + + this.removePost = this.removePost.bind(this); + } shouldComponentUpdate(nextProps) { if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) { return true; @@ -44,6 +50,10 @@ export default class PostBody extends React.Component { return false; } + removePost() { + GlobalActions.emitRemovePost(this.props.post); + } + render() { const post = this.props.post; const filenames = this.props.post.filenames; @@ -144,12 +154,27 @@ export default class PostBody extends React.Component { } let message; + let removeButton; if (this.props.post.state === Constants.POST_DELETED) { + removeButton = ( + <a + href='#' + className='post__remove theme' + type='button' + onClick={this.removePost} + > + {'×'} + </a> + ); + message = ( - <FormattedMessage - id='post_body.deleted' - defaultMessage='(message deleted)' - /> + <p> + <FormattedMessage + id='post_body.deleted' + defaultMessage='(message deleted)' + /> + {removeButton} + </p> ); } else { message = ( diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx index 2a5ea6395..76d4df1cc 100644 --- a/webapp/components/post_view/components/post_info.jsx +++ b/webapp/components/post_view/components/post_info.jsx @@ -20,7 +20,6 @@ export default class PostInfo extends React.Component { this.dropdownPosition = this.dropdownPosition.bind(this); this.handlePermalink = this.handlePermalink.bind(this); - this.removePost = this.removePost.bind(this); } dropdownPosition(e) { var position = $('#post-list').height() - $(e.target).offset().top; @@ -165,25 +164,6 @@ export default class PostInfo extends React.Component { GlobalActions.showGetPostLinkModal(this.props.post); } - removePost() { - GlobalActions.emitRemovePost(this.props.post); - } - createRemovePostButton(post) { - if (!Utils.isPostEphemeral(post)) { - return null; - } - - return ( - <a - href='#' - className='post__remove theme' - type='button' - onClick={this.removePost} - > - {'×'} - </a> - ); - } render() { var post = this.props.post; var comments = ''; @@ -232,7 +212,6 @@ export default class PostInfo extends React.Component { {dropdown} </div> {comments} - {this.createRemovePostButton(post)} </li> </ul> ); diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx index 7b754c04f..249d3f14a 100644 --- a/webapp/components/rhs_comment.jsx +++ b/webapp/components/rhs_comment.jsx @@ -194,9 +194,19 @@ export default class RhsComment extends React.Component { ); } + let profilePic = ( + <img + src={Client.getUsersRoute() + '/' + post.user_id + '/image?time=' + timestamp} + height='36' + width='36' + /> + ); + let compactClass = ''; + let profilePicContainer = (<div className='post__img'>{profilePic}</div>); if (this.props.compactDisplay) { compactClass = 'post--compact'; + profilePicContainer = ''; } var dropdown = this.createDropdown(); @@ -216,13 +226,7 @@ export default class RhsComment extends React.Component { return ( <div className={'post post--thread ' + currentUserCss + ' ' + compactClass}> <div className='post__content'> - <div className='post__img'> - <img - src={Client.getUsersRoute() + '/' + post.user_id + '/image?time=' + timestamp} - height='36' - width='36' - /> - </div> + {profilePicContainer} <div> <ul className='post__header'> <li className='col col__name'> diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx index b70b284d9..230e4bb2d 100644 --- a/webapp/components/rhs_root_post.jsx +++ b/webapp/components/rhs_root_post.jsx @@ -230,8 +230,10 @@ export default class RhsRootPost extends React.Component { } let compactClass = ''; + let profilePicContainer = (<div className='post__img'>{profilePic}</div>); if (this.props.compactDisplay) { compactClass = 'post--compact'; + profilePicContainer = ''; } const messageWrapper = ( @@ -246,9 +248,7 @@ export default class RhsRootPost extends React.Component { <div className={'post post--root post--thread ' + userCss + ' ' + systemMessageClass + ' ' + compactClass}> <div className='post-right-channel__name'>{channelName}</div> <div className='post__content'> - <div className='post__img'> - {profilePic} - </div> + {profilePicContainer} <div> <ul className='post__header'> <li className='col__name'>{userProfile}</li> diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx index 6ebb9cfdc..d8725a7aa 100644 --- a/webapp/components/search_bar.jsx +++ b/webapp/components/search_bar.jsx @@ -142,7 +142,7 @@ class SearchBar extends React.Component { render() { var isSearching = null; if (this.state.isSearching) { - isSearching = <span className={'glyphicon glyphicon-refresh glyphicon-refresh-animate'}></span>; + isSearching = <span className={'fa fa-refresh fa-refresh-animate icon--refresh icon--rotate'}></span>; } let helpClass = 'search-help-popover'; @@ -174,7 +174,7 @@ class SearchBar extends React.Component { style={{overflow: 'visible'}} autoComplete='off' > - <span className='glyphicon glyphicon-search sidebar__search-icon'/> + <span className='fa fa-search sidebar__search-icon'/> <SuggestionBox ref='search' className='form-control search-bar' diff --git a/webapp/components/select_team/select_team.jsx b/webapp/components/select_team/select_team.jsx index 5fcaeb4de..e013a56c6 100644 --- a/webapp/components/select_team/select_team.jsx +++ b/webapp/components/select_team/select_team.jsx @@ -69,7 +69,7 @@ export default class SelectTeam extends React.Component { > <span className='signup-team-dir__name'>{team.display_name}</span> <span - className='glyphicon glyphicon-menu-right right signup-team-dir__arrow' + className='fa fa-angle-right right signup-team-dir__arrow' aria-hidden='true' /> </Link> @@ -93,7 +93,7 @@ export default class SelectTeam extends React.Component { > <span className='signup-team-dir__name'>{openTeam.display_name}</span> <span - className='glyphicon glyphicon-menu-right right signup-team-dir__arrow' + className='fa fa-angle-right right signup-team-dir__arrow' aria-hidden='true' /> </Link> diff --git a/webapp/components/sidebar_right_menu.jsx b/webapp/components/sidebar_right_menu.jsx index 8cb8733d7..2cf758f00 100644 --- a/webapp/components/sidebar_right_menu.jsx +++ b/webapp/components/sidebar_right_menu.jsx @@ -175,7 +175,7 @@ export default class SidebarRightMenu extends React.Component { href='#' onClick={GlobalActions.showGetTeamInviteLinkModal} > - <i className='icon glyphicon glyphicon-link'></i> + <i className='icon fa fa-link'></i> <FormattedMessage id='sidebar_right_menu.teamLink' defaultMessage='Get Team Invite Link' diff --git a/webapp/components/team_settings_modal.jsx b/webapp/components/team_settings_modal.jsx index fedf34ab5..8ac924cf8 100644 --- a/webapp/components/team_settings_modal.jsx +++ b/webapp/components/team_settings_modal.jsx @@ -68,11 +68,11 @@ class TeamSettingsModal extends React.Component { render() { const {formatMessage} = this.props.intl; const tabs = []; - tabs.push({name: 'general', uiName: formatMessage(holders.generalTab), icon: 'glyphicon glyphicon-cog'}); - tabs.push({name: 'import', uiName: formatMessage(holders.importTab), icon: 'glyphicon glyphicon-upload'}); + tabs.push({name: 'general', uiName: formatMessage(holders.generalTab), icon: 'icon fa fa-cog'}); + tabs.push({name: 'import', uiName: formatMessage(holders.importTab), icon: 'icon fa fa-upload'}); // To enable export uncomment this line - //tabs.push({name: 'export', uiName: formatMessage(holders.exportTab), icon: 'glyphicon glyphicon-download'}); + //tabs.push({name: 'export', uiName: formatMessage(holders.exportTab), icon: 'fa fa-download'}); return ( <div diff --git a/webapp/components/textbox.jsx b/webapp/components/textbox.jsx index 41db38837..40e6aec4a 100644 --- a/webapp/components/textbox.jsx +++ b/webapp/components/textbox.jsx @@ -130,7 +130,7 @@ export default class Textbox extends React.Component { const helpText = ( <div - style={{visibility: hasText ? 'visible' : 'hidden', opacity: hasText ? '0.3' : '0'}} + style={{visibility: hasText ? 'visible' : 'hidden', opacity: hasText ? '0.45' : '0'}} className='help__format-text' > <b> @@ -155,18 +155,18 @@ export default class Textbox extends React.Component { </strike> {'~~ '} </span> - <code> + <span> <FormattedMessage id='textbox.inlinecode' defaultMessage='`inline code`' /> - </code> - <code> + </span> + <span> <FormattedMessage id='textbox.preformatted' defaultMessage='```preformatted```' /> - </code> + </span> <span> <FormattedMessage id='textbox.quote' diff --git a/webapp/components/user_settings/user_settings_advanced.jsx b/webapp/components/user_settings/user_settings_advanced.jsx index cc5d2ee6d..7d4d0ebc2 100644 --- a/webapp/components/user_settings/user_settings_advanced.jsx +++ b/webapp/components/user_settings/user_settings_advanced.jsx @@ -243,7 +243,7 @@ export default class AdvancedSettingsDisplay extends React.Component { return ( <FormattedMessage id='user.settings.advance.embed_preview' - defaultMessage='Show preview snippet of links below message' + defaultMessage='Show experimental previews of link content, when available' /> ); default: diff --git a/webapp/components/user_settings/user_settings_display.jsx b/webapp/components/user_settings/user_settings_display.jsx index 1b6ce3343..78a499b51 100644 --- a/webapp/components/user_settings/user_settings_display.jsx +++ b/webapp/components/user_settings/user_settings_display.jsx @@ -189,7 +189,7 @@ export default class UserSettingsDisplay extends React.Component { <br/> <FormattedMessage id='user.settings.display.collapseDesc' - defaultMessage='Toggle whether to automatically collapse all image previews.' + defaultMessage='Expand links to show a preview of content, when available.' /> </div> </div> @@ -200,7 +200,7 @@ export default class UserSettingsDisplay extends React.Component { title={ <FormattedMessage id='user.settings.display.collapseDisplay' - defaultMessage='Auto Collapse Previews' + defaultMessage='Link previews' /> } inputs={inputs} @@ -518,6 +518,13 @@ export default class UserSettingsDisplay extends React.Component { id='user.settings.display.messageDisplayClean' defaultMessage='Standard' /> + {': '} + <span className='font-weight--normal'> + <FormattedMessage + id='user.settings.display.messageDisplayCleanDes' + defaultMessage='Easy to scan and read.' + /> + </span> </label> <br/> </div> @@ -533,6 +540,13 @@ export default class UserSettingsDisplay extends React.Component { id='user.settings.display.messageDisplayCompact' defaultMessage='Compact' /> + {': '} + <span className='font-weight--normal'> + <FormattedMessage + id='user.settings.display.messageDisplayCompactDes' + defaultMessage='Fit as many messages on the screen as we can.' + /> + </span> </label> <br/> </div> @@ -599,7 +613,7 @@ export default class UserSettingsDisplay extends React.Component { if (this.props.activeSection === Preferences.CHANNEL_DISPLAY_MODE) { const channelDisplayMode = [false, false]; - if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_CENTERED) { + if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN) { channelDisplayMode[0] = true; } else { channelDisplayMode[1] = true; @@ -613,11 +627,11 @@ export default class UserSettingsDisplay extends React.Component { type='radio' name='channelDisplayMode' checked={channelDisplayMode[0]} - onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_CENTERED)} + onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN)} /> <FormattedMessage - id='user.settings.display.fixedWidthCentered' - defaultMessage='Fixed width, centered' + id='user.settings.display.fullScreen' + defaultMessage='Full width' /> </label> <br/> @@ -628,11 +642,11 @@ export default class UserSettingsDisplay extends React.Component { type='radio' name='channelDisplayMode' checked={channelDisplayMode[1]} - onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN)} + onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_CENTERED)} /> <FormattedMessage - id='user.settings.display.fullScreen' - defaultMessage='Full width' + id='user.settings.display.fixedWidthCentered' + defaultMessage='Fixed width, centered' /> </label> <br/> @@ -666,18 +680,18 @@ export default class UserSettingsDisplay extends React.Component { ); } else { let describe; - if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_CENTERED) { + if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN) { describe = ( <FormattedMessage - id='user.settings.display.fixedWidthCentered' - defaultMessage='Fixed width, centered' + id='user.settings.display.fullScreen' + defaultMessage='Full width' /> ); } else { describe = ( <FormattedMessage - id='user.settings.display.fullScreen' - defaultMessage='Full width' + id='user.settings.display.fixedWidthCentered' + defaultMessage='Fixed width, centered' /> ); } diff --git a/webapp/components/user_settings/user_settings_modal.jsx b/webapp/components/user_settings/user_settings_modal.jsx index 4ceb85bb8..de4745aac 100644 --- a/webapp/components/user_settings/user_settings_modal.jsx +++ b/webapp/components/user_settings/user_settings_modal.jsx @@ -211,15 +211,15 @@ class UserSettingsModal extends React.Component { } var tabs = []; - tabs.push({name: 'general', uiName: formatMessage(holders.general), icon: 'glyphicon glyphicon-cog'}); - tabs.push({name: 'security', uiName: formatMessage(holders.security), icon: 'glyphicon glyphicon-lock'}); - tabs.push({name: 'notifications', uiName: formatMessage(holders.notifications), icon: 'glyphicon glyphicon-exclamation-sign'}); + tabs.push({name: 'general', uiName: formatMessage(holders.general), icon: 'icon fa fa-gear'}); + tabs.push({name: 'security', uiName: formatMessage(holders.security), icon: 'icon fa fa-lock'}); + tabs.push({name: 'notifications', uiName: formatMessage(holders.notifications), icon: 'icon fa fa-exclamation-circle'}); if (global.window.mm_config.EnableOAuthServiceProvider === 'true') { - tabs.push({name: 'developer', uiName: formatMessage(holders.developer), icon: 'glyphicon glyphicon-th'}); + tabs.push({name: 'developer', uiName: formatMessage(holders.developer), icon: 'icon fa fa-th'}); } - tabs.push({name: 'display', uiName: formatMessage(holders.display), icon: 'glyphicon glyphicon-eye-open'}); - tabs.push({name: 'advanced', uiName: formatMessage(holders.advanced), icon: 'glyphicon glyphicon-list-alt'}); + tabs.push({name: 'display', uiName: formatMessage(holders.display), icon: 'icon fa fa-eye'}); + tabs.push({name: 'advanced', uiName: formatMessage(holders.advanced), icon: 'icon fa fa-list-alt'}); return ( <Modal |