diff options
50 files changed, 471 insertions, 341 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 diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 95f267740..02d11e484 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -1366,7 +1366,7 @@ "tutorial_tip.out": "Opt out of these tips.", "tutorial_tip.seen": "Seen this before? ", "upload_overlay.info": "Drop a file to upload it.", - "user.settings.advance.embed_preview": "Show preview snippet of links below message", + "user.settings.advance.embed_preview": "Show experimental previews of link content, when available", "user.settings.advance.embed_toggle": "Show toggle for all embed previews", "user.settings.advance.enabledFeatures": "{count, number} {count, plural, one {Feature} other {Features}} Enabled", "user.settings.advance.formattingDesc": "If enabled, posts will be formatted to create links, show emoji, style the text, and add line breaks. By default, this setting is enabled. Changing this setting requires the page to be refreshed.", @@ -1412,8 +1412,8 @@ "user.settings.display.channelDisplayTitle": "Channel Display Mode", "user.settings.display.channeldisplaymode": "Select the width of the center channel.", "user.settings.display.clockDisplay": "Clock Display", - "user.settings.display.collapseDesc": "Toggle whether to automatically collapse all image previews.", - "user.settings.display.collapseDisplay": "Auto Collapse Previews", + "user.settings.display.collapseDesc": "Expand links to show a preview of content, when available.", + "user.settings.display.collapseDisplay": "Link previews", "user.settings.display.collapseOff": "Off", "user.settings.display.collapseOn": "On", "user.settings.display.fixedWidthCentered": "Fixed width, centered", @@ -1422,7 +1422,9 @@ "user.settings.display.fullScreen": "Full width", "user.settings.display.language": "Language", "user.settings.display.messageDisplayClean": "Standard", + "user.settings.display.messageDisplayCleanDes": "Easy to scan and read.", "user.settings.display.messageDisplayCompact": "Compact", + "user.settings.display.messageDisplayCompactDes": "Fit as many messages on the screen as we can.", "user.settings.display.messageDisplayDescription": "Select how messages in a channel should be displayed.", "user.settings.display.messageDisplayTitle": "Message Display", "user.settings.display.militaryClock": "24-hour clock (example: 16:00)", diff --git a/webapp/sass/base/_typography.scss b/webapp/sass/base/_typography.scss index f5795d862..f595e0ed9 100644 --- a/webapp/sass/base/_typography.scss +++ b/webapp/sass/base/_typography.scss @@ -25,3 +25,17 @@ body { .word-break--all { word-break: break-all; } + +.fa { + &.fa-margin--left { + margin-left: 2px; + } + + &.fa-margin--right { + margin-right: 2px; + } +} + +.font-weight--normal { + font-weight: normal; +} diff --git a/webapp/sass/components/_files.scss b/webapp/sass/components/_files.scss index 854a5902b..9a65693da 100644 --- a/webapp/sass/components/_files.scss +++ b/webapp/sass/components/_files.scss @@ -71,6 +71,7 @@ i { color: $white; cursor: pointer; + font-size: 16px; opacity: inherit; position: absolute; right: 5px; diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index 6e41dff39..73651a320 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -140,7 +140,7 @@ border: 1px solid $light-gray; color: $white; min-height: 56px; - padding: 15px 15px 11px; + padding: 14px 15px 11px; .modal-title { color: $bg--gray; diff --git a/webapp/sass/components/_save-button.scss b/webapp/sass/components/_save-button.scss index 12f793aa1..dedef3255 100644 --- a/webapp/sass/components/_save-button.scss +++ b/webapp/sass/components/_save-button.scss @@ -1,7 +1,7 @@ @charset 'UTF-8'; .save-button { - .glyphicon { + .icon { margin-right: 10px; } -}
\ No newline at end of file +} diff --git a/webapp/sass/components/_scrollbar.scss b/webapp/sass/components/_scrollbar.scss index b868c0bf0..06ee37dc9 100644 --- a/webapp/sass/components/_scrollbar.scss +++ b/webapp/sass/components/_scrollbar.scss @@ -11,7 +11,7 @@ ::-webkit-scrollbar-thumb { @include border-radius($border-rad * 2); - background: rgba(0, 0, 0, .4); + background: rgba(0, 0, 0, .2); } body { diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss index a7ca8d540..d259cfc20 100644 --- a/webapp/sass/components/_search.scss +++ b/webapp/sass/components/_search.scss @@ -11,7 +11,7 @@ padding: 12px 8px 0 0; } -.glyphicon-refresh-animate { +.icon--rotate { @include animation(spin .7s infinite linear); } @@ -88,7 +88,7 @@ } } - .glyphicon-refresh-animate { + .icon--refresh { @include opacity(0.5); position: absolute; right: 27px; diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index cc9f0f713..56f7cd6e8 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -97,8 +97,10 @@ .header-dropdown__icon { color: inherit; - font-size: 11px; - top: 3px; + font-size: 12px; + margin-left: 1px; + position: relative; + top: 1px; } .channel-header__info { diff --git a/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss index 50d144b9c..751171412 100644 --- a/webapp/sass/layout/_navigation.scss +++ b/webapp/sass/layout/_navigation.scss @@ -46,8 +46,10 @@ width: 21px; } - .glyphicon-search { - top: -1px; + .icon-search { + font-size: 17px; + position: relative; + top: -2px; } .icon--white { @@ -80,7 +82,8 @@ } .header-dropdown__icon { - top: 1px; + margin-left: 0; + top: -1px; } .dropdown-toggle { diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss index 1040a324e..f1fe0cac3 100644 --- a/webapp/sass/layout/_post-right.scss +++ b/webapp/sass/layout/_post-right.scss @@ -1,152 +1,156 @@ @charset 'UTF-8'; -.post-right__container { - @include display-flex; - @include flex-direction(column); - height: 100%; - - .post-right-root-message { - padding: 1em 1em 0; - } +.app__body { + .post-right__container { + @include display-flex; + @include flex-direction(column); + height: 100%; + + .post-right-root-message { + padding: 1em 1em 0; + } - .post-right-comments-container { - position: relative; + .post-right-comments-container { + position: relative; - .post { - &:first-child { - padding-top: 15px; + .post { + &:first-child { + padding-top: 15px; + } } } - } - .help_format_text { - bottom: -63px; - right: auto; - } + .help_format_text { + bottom: -63px; + right: auto; + } - .post { - &.post--root { - border-bottom: 1px solid #ddd; - padding-bottom: 1em; + .post { + &.post--root { + border-bottom: 1px solid #ddd; + padding-bottom: 1em; - .post__body { - background: transparent !important; + .post__body { + background: transparent !important; + } } - } - .post__header { - .col__reply { - text-align: right; - top: 0; + .post__header { + .col__reply { + background: transparent !important; + border: none !important; + text-align: right; + top: 0; + } } - } - .post__body { - width: 100%; + .post__body { + width: 100%; + } } - } - hr { - border: none; - margin-bottom: 0; - } + hr { + border: none; + margin-bottom: 0; + } - .post-create__container { - width: 100%; + .post-create__container { + width: 100%; - .textarea-wrapper { - min-height: 100px; - } + .textarea-wrapper { + min-height: 100px; + } - .btn { - margin-bottom: 10px; - } + .btn { + margin-bottom: 10px; + } - .custom-textarea { - min-height: 100px; - } + .custom-textarea { + min-height: 100px; + } - .msg-typing { - @include opacity(.7); - display: block; - float: left; - font-size: 13px; - height: 20px; - line-height: 20px; - margin-top: 3px; - max-width: 230px; - min-width: 1px; - } + .msg-typing { + @include opacity(.7); + display: block; + float: left; + font-size: 13px; + height: 20px; + line-height: 20px; + margin-top: 3px; + max-width: 230px; + min-width: 1px; + } - .post-create-footer { - padding: 5px 0 10px; - width: 100%; - } + .post-create-footer { + padding: 5px 0 10px; + width: 100%; + } - .post-right-comments-upload-in-progress { - color: #a8adb7; - margin-right: 10px; - padding: 6px 0; + .post-right-comments-upload-in-progress { + color: #a8adb7; + margin-right: 10px; + padding: 6px 0; + } } } -} -.post-right-header { - border-bottom: $border-gray; - color: #999; - font-size: 1em; - font-weight: 400; - height: 39px; - padding: 10px 10px 0 15px; - text-transform: uppercase; -} + .post-right-header { + border-bottom: $border-gray; + color: #999; + font-size: 1em; + font-weight: 400; + height: 39px; + padding: 10px 10px 0 15px; + text-transform: uppercase; + } -.post-right-root-container { - border-bottom: $border-gray; - padding: 5px 10px; + .post-right-root-container { + border-bottom: $border-gray; + padding: 5px 10px; - ul { - margin-bottom: 2px; - padding-left: 0; + ul { + margin-bottom: 2px; + padding-left: 0; + } } -} -.post-right-channel__name { - font-weight: 600; - margin: 0 0 15px; -} + .post-right-channel__name { + font-weight: 600; + margin: 0 0 15px; + } -.post-right-root-container li { - display: inline; - list-style-type: none; - padding-right: 3px; -} + .post-right-root-container li { + display: inline; + list-style-type: none; + padding-right: 3px; + } -.post-right-root-time { - color: #a8adb7; -} + .post-right-root-time { + color: #a8adb7; + } -.post-right-create-comment-container { - bottom: 0; - left: 0; - margin-bottom: 18px; - padding: 5px; - position: absolute; - width: 100%; -} + .post-right-create-comment-container { + bottom: 0; + left: 0; + margin-bottom: 18px; + padding: 5px; + position: absolute; + width: 100%; + } -.post-right__scroll { - @include flex(1 1 auto); - -webkit-overflow-scrolling: touch; - overflow: auto; - position: relative; + .post-right__scroll { + @include flex(1 1 auto); + -webkit-overflow-scrolling: touch; + overflow: auto; + position: relative; - .file-preview__container { - margin-top: 5px; + .file-preview__container { + margin-top: 5px; + } } -} -.post-right-comment-time { - color: #a8adb7; + .post-right-comment-time { + color: #a8adb7; + } } diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index baca9a127..ab7c851ea 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -86,8 +86,19 @@ body.ios { b, i, + span { + margin: 0 2px; + position: relative; + top: -1px; + } + + b { + @include opacity(.9); + } + code { - margin-right: 3px; + background: transparent; + padding: 0; } .textbox-preview-link { @@ -402,6 +413,11 @@ body.ios { right: 0; top: 1px; + svg { + height: 18px; + width: 18px; + } + &:hover, &:active { @include opacity(.9); @@ -452,7 +468,7 @@ body.ios { .dropdown-menu { &.bottom { - bottom: 25px; + bottom: 19px; top: auto; } } @@ -483,6 +499,14 @@ body.ios { background-color: beige; } + &.post--hide-controls { + .post__header { + .col__reply { + display: none; + } + } + } + &.post--compact { &.post--thread { .post__header { @@ -557,6 +581,16 @@ body.ios { padding: 0; width: 100%; + svg { + display: inline-block; + height: 13px; + margin: 5px 4px 0 0; + opacity: .5; + position: relative; + vertical-align: top; + width: 13px; + } + > div { display: none; } @@ -596,6 +630,10 @@ body.ios { } } + .post--fail { + position: relative; + } + p { font-size: .97em; line-height: 1.6em; @@ -634,33 +672,6 @@ body.ios { &.same--user { padding: 0 .5em 0 1em; - &.post--system { - padding: 8px .5em 0 1em; - - .post__header { - height: auto; - margin-bottom: 2px; - - .col__name { - display: inline-block; - } - - .col__reply { - - } - } - - .post__time { - @include opacity(.6); - font-size: .9em; - left: inherit; - line-height: inherit; - position: inherit; - text-rendering: inherit; - top: inherit; - } - } - &:hover { .post__time { @include opacity(.5); @@ -682,7 +693,7 @@ body.ios { } .col__reply { - top: 6px; + top: -1px; } } } @@ -721,7 +732,7 @@ body.ios { .post__header { .col__reply { - top: 53px; + top: -4px; } } } @@ -775,11 +786,14 @@ body.ios { } .col__reply { + border: 1px solid transparent; + border-radius: 2px; + min-width: 70px; + padding: 2px 5px; position: absolute; right: 0; - top: 30px; + top: -4px; white-space: nowrap; - width: 65px; } .permalink-popover { @@ -841,6 +855,7 @@ body.ios { min-width: 130px; padding: 2px 0; right: 0; + top: 20px; li { display: block; @@ -864,15 +879,15 @@ body.ios { @include opacity(.5); color: inherit; display: inline-block; + float: right; font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: 600; height: 20px; line-height: 20px; position: relative; - right: 15px; + right: -10px; text-decoration: none; - top: -5px; vertical-align: top; visibility: hidden; width: 20px; @@ -885,9 +900,8 @@ body.ios { .post__body { @include legacy-pie-clearfix; padding: .2em .5em; - width: calc(100% - 75px); + width: 100%; word-wrap: break-word; - position: relative; p { margin: 0 0 .4em; @@ -1013,12 +1027,8 @@ body.ios { } .post__time { - font-size: .9em; - } - - .post__time, - &.post--system .post__body { @include opacity(.6); + font-size: .9em; } .post-loading-gif { diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index ba72a8119..9db962ec1 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -85,8 +85,9 @@ margin-bottom: 0; .col__reply { - top: 0; + top: -3px; width: 65px; + z-index: auto; } .col__name { @@ -146,7 +147,7 @@ &.post--comment { .post__header { .col__reply { - top: 0; + top: -3px; } } } @@ -158,6 +159,12 @@ } } + &.current--user { + .post__link { + margin: 0 0 8px; + } + } + &.same--root { &.same--user { .post__header { @@ -355,9 +362,10 @@ margin-top: 10px; } - button.close { + .close { font-size: 27px; font-weight: normal; + margin-top: -2px; } .modal-title { @@ -453,8 +461,8 @@ } &.minimize-settings { - padding: 0; display: none; + padding: 0; .user-settings { padding: 70px 20px 30px; @@ -469,13 +477,12 @@ .nav { > li { > a { - border-top: 1px solid #dddddd; + border-top: 1px solid transparent; font-size: 1.1em; line-height: 2.7; - color: #555555; - .glyphicon { - margin-left: 7px; + .icon { + margin: 0 7px; } } } @@ -667,7 +674,8 @@ padding: 7px 20px 0 49px; position: relative; - .glyphicon-refresh-animate { + .icon--refresh { + @include opacity(.6); color: $black; right: 33px; top: 15px; @@ -793,7 +801,6 @@ @include translate3d(100%, 0, 0); right: 0; width: 100%; - z-index: 5; .sidebar__collapse, .sidebar__search-icon { diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index 69443aafc..d58e99969 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -16,7 +16,6 @@ .sidebar--right { @include single-transition(all, .5s, ease); @include translateX(100%); - z-index: 5; &.move--left { -webkit-transform: translateX(0) !important; @@ -113,22 +112,25 @@ .post { &.post--compact { - &:not(.post--thread) { - padding: 5px .5em 0 70px; - - .post__link { - margin: 4px 0 7px; - vertical-align: bottom; - } + .channel__wrap & { .post__time { font-size: .85em; left: -70px; position: absolute; text-align: right; - top: 4px; + top: 6px; width: 60px; } + } + + &:not(.post--thread) { + padding: 5px .5em 0 70px; + + .post__link { + margin: 4px 0 7px; + vertical-align: bottom; + } span { p { @@ -156,7 +158,7 @@ } .col__reply { - top: 2px; + top: -1px; } } @@ -176,7 +178,7 @@ &.post--comment { .post__header { .col__reply { - top: 0; + top: -1px; } } } @@ -191,7 +193,7 @@ } .post__content { - padding-right: 85px; + padding-right: 45px; } } @@ -202,7 +204,7 @@ .post__header { .col__reply { - top: 4px; + top: -1px; } } @@ -211,6 +213,18 @@ display: none; } } + + &.post--root { + .post__img { + img { + display: block; + } + } + + .post__time { + @include opacity(.6); + } + } } &.post--comment { @@ -241,26 +255,16 @@ &.same--user { .post__time { @include opacity(0); - font-size: 11px; - left: -4px; - line-height: 37px; - position: absolute; - text-rendering: auto; - top: -2px; } - &.post--compact { - &.post--system { - .post__time { - position: absolute; - top: 3px; - } - } - + &:not(.post--compact) { .post__time { - font-size: .85em; - left: -70px; - top: -5px; + font-size: 11px; + left: -4px; + line-height: 37px; + position: absolute; + text-rendering: auto; + top: -2px; } } } diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss index 2a10fc486..4dba1558c 100644 --- a/webapp/sass/routes/_admin-console.scss +++ b/webapp/sass/routes/_admin-console.scss @@ -283,9 +283,22 @@ padding: 10px; .category-icon { + font-size: 15px; + margin-right: 7px; + overflow: hidden; right: 12px; + text-align: center; top: 6px; - width: 17px; + vertical-align: bottom; + width: 16px; + + &.fa-user { + font-size: 14px; + } + + &.fa-bar-chart { + font-size: 16px; + } } } diff --git a/webapp/sass/routes/_settings.scss b/webapp/sass/routes/_settings.scss index 5b8c36c5c..f67d1b49b 100644 --- a/webapp/sass/routes/_settings.scss +++ b/webapp/sass/routes/_settings.scss @@ -342,13 +342,16 @@ a { border-radius: 0; - color: #777; + color: $gray; padding: 8px 5px 8px 15px; } - .glyphicon { + .icon { + font-size: 15px; + margin-right: 10px; + text-align: center; top: 2px; - width: 25px; + width: 14px; } &:hover { diff --git a/webapp/sass/routes/_signup.scss b/webapp/sass/routes/_signup.scss index d3fe0363f..4dc0dce42 100644 --- a/webapp/sass/routes/_signup.scss +++ b/webapp/sass/routes/_signup.scss @@ -291,21 +291,23 @@ color: #444444; } - .glyphicon { - &.glyphicon-ok, - &.glyphicon-refresh { + .fa { + position: relative; + + &.fa-check, + &.fa-refresh { font-size: .9em; left: -2px; margin-right: .5em; } - &.glyphicon-chevron-right { + &.fa-chevron-right { font-size: .8em; - right: -2px; - top: 0px; + right: -5px; + top: 0; } - &.glyphicon-chevron-left { + &.fa-chevron-left { font-size: .8em; left: -2px; top: 0px; @@ -443,19 +445,21 @@ } .signup-team-dir__arrow { - color: #999999; + color: $dark-gray; float: right; - font-size: .9em; - line-height: 3.5em; + font-size: 1.5em; + line-height: 25px; + position: relative; + top: .66em; } } .authorize-box { + border: 1px solid $black; + height: 280px; margin: 100px auto; width: 500px; - height: 280px; - border: 1px solid black; } .authorize-inner { @@ -467,6 +471,6 @@ } .verify_panel { - margin: 60px auto auto auto; + margin: 60px auto auto; max-width: 380px; } diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx index e748cae4b..0934e8de9 100644 --- a/webapp/utils/constants.jsx +++ b/webapp/utils/constants.jsx @@ -279,6 +279,7 @@ export default { OPEN_TEAM: 'O', MAX_POST_LEN: 4000, EMOJI_SIZE: 16, + ATTACHMENT_ICON_SVG: "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 48 48' enable-background='new 0 0 48 48' xml:space='preserve'><g><path d='M43.922,6.653c-2.643-2.644-6.201-4.107-9.959-4.069c-3.774,0.019-7.32,1.497-9.983,4.161l-12.3,12.3l-8.523,8.521 c-4.143,4.144-4.217,10.812-0.167,14.862c1.996,1.996,4.626,2.989,7.277,2.989c2.73,0,5.482-1.055,7.583-3.156l15.547-15.545 c0.002-0.002,0.002-0.004,0.004-0.005l5.358-5.358c1.394-1.393,2.176-3.24,2.201-5.2c0.026-1.975-0.716-3.818-2.09-5.192 c-2.834-2.835-7.496-2.787-10.394,0.108L9.689,29.857c-0.563,0.563-0.563,1.474,0,2.036c0.281,0.28,0.649,0.421,1.018,0.421 c0.369,0,0.737-0.141,1.018-0.421l18.787-18.788c1.773-1.774,4.609-1.824,6.322-0.11c0.82,0.82,1.263,1.928,1.247,3.119 c-0.017,1.205-0.497,2.342-1.357,3.201l-5.55,5.551c-0.002,0.002-0.002,0.004-0.004,0.005L15.814,40.225 c-3.02,3.02-7.86,3.094-10.789,0.167c-2.928-2.929-2.854-7.77,0.167-10.791l0.958-0.958c0.001-0.002,0.004-0.002,0.005-0.004 L26.016,8.78c2.123-2.124,4.951-3.303,7.961-3.317c2.998,0.02,5.814,1.13,7.91,3.226c4.35,4.351,4.309,11.472-0.093,15.873 L25.459,40.895c-0.563,0.562-0.563,1.473,0,2.035c0.281,0.281,0.65,0.422,1.018,0.422c0.369,0,0.737-0.141,1.018-0.422 L43.83,26.596C49.354,21.073,49.395,12.126,43.922,6.653z'></path></g></svg>", MATTERMOST_ICON_SVG: "<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'viewBox='0 0 500 500' style='enable-background:new 0 0 500 500;' xml:space='preserve'> <style type='text/css'> .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#222222;} </style> <g id='XMLID_1_'> <g id='XMLID_3_'> <path id='XMLID_4_' class='st0' d='M396.9,47.7l2.6,53.1c43,47.5,60,114.8,38.6,178.1c-32,94.4-137.4,144.1-235.4,110.9 S51.1,253.1,83,158.7C104.5,95.2,159.2,52,222.5,40.5l34.2-40.4C150-2.8,49.3,63.4,13.3,169.9C-31,300.6,39.1,442.5,169.9,486.7 s272.6-25.8,316.9-156.6C522.7,223.9,483.1,110.3,396.9,47.7z'/> </g> <path id='XMLID_2_' class='st0' d='M335.6,204.3l-1.8-74.2l-1.5-42.7l-1-37c0,0,0.2-17.8-0.4-22c-0.1-0.9-0.4-1.6-0.7-2.2 c0-0.1-0.1-0.2-0.1-0.3c0-0.1-0.1-0.2-0.1-0.2c-0.7-1.2-1.8-2.1-3.1-2.6c-1.4-0.5-2.9-0.4-4.2,0.2c0,0-0.1,0-0.1,0 c-0.2,0.1-0.3,0.1-0.4,0.2c-0.6,0.3-1.2,0.7-1.8,1.3c-3,3-13.7,17.2-13.7,17.2l-23.2,28.8l-27.1,33l-46.5,57.8 c0,0-21.3,26.6-16.6,59.4s29.1,48.7,48,55.1c18.9,6.4,48,8.5,71.6-14.7C336.4,238.4,335.6,204.3,335.6,204.3z'/> </g> </svg>", ONLINE_ICON_SVG: "<svg version='1.1'id='Layer_1' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#' xmlns:svg='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:cc='http://creativecommons.org/ns#' inkscape:version='0.48.4 r9939' sodipodi:docname='TRASH_1_4.svg'xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='-243 245 12 12'style='enable-background:new -243 245 12 12;' xml:space='preserve'> <sodipodi:namedview inkscape:cx='26.358185' inkscape:zoom='1.18' bordercolor='#666666' pagecolor='#ffffff' borderopacity='1' objecttolerance='10' inkscape:cy='139.7898' gridtolerance='10' guidetolerance='10' showgrid='false' showguides='true' id='namedview6' inkscape:pageopacity='0' inkscape:pageshadow='2' inkscape:guide-bbox='true' inkscape:window-width='1366' inkscape:current-layer='Layer_1' inkscape:window-height='705' inkscape:window-y='-8' inkscape:window-maximized='1' inkscape:window-x='-8'> <sodipodi:guide position='50.036793,85.991376' orientation='1,0' id='guide2986'></sodipodi:guide> <sodipodi:guide position='58.426196,66.216355' orientation='0,1' id='guide3047'></sodipodi:guide> </sodipodi:namedview> <g> <path class='online--icon' d='M-236,250.5C-236,250.5-236,250.5-236,250.5C-236,250.5-236,250.5-236,250.5C-236,250.5-236,250.5-236,250.5z'/> <ellipse class='online--icon' cx='-238.5' cy='248' rx='2.5' ry='2.5'/> </g> <path class='online--icon' d='M-238.9,253.8c0-0.4,0.1-0.9,0.2-1.3c-2.2-0.2-2.2-2-2.2-2s-1,0.1-1.2,0.5c-0.4,0.6-0.6,1.7-0.7,2.5c0,0.1-0.1,0.5,0,0.6 c0.2,1.3,2.2,2.3,4.4,2.4c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0C-238.7,255.7-238.9,254.8-238.9,253.8z'/> <g> <g> <path class='online--icon' d='M-232.3,250.1l1.3,1.3c0,0,0,0.1,0,0.1l-4.1,4.1c0,0,0,0-0.1,0c0,0,0,0,0,0l-2.7-2.7c0,0,0-0.1,0-0.1l1.2-1.2 c0,0,0.1,0,0.1,0l1.4,1.4l2.9-2.9C-232.4,250.1-232.3,250.1-232.3,250.1z'/> </g> </g> </svg>", AWAY_ICON_SVG: "<svg version='1.1'id='Layer_1' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#' xmlns:svg='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:cc='http://creativecommons.org/ns#' inkscape:version='0.48.4 r9939' sodipodi:docname='TRASH_1_4.svg'xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='-299 391 12 12'style='enable-background:new -299 391 12 12;' xml:space='preserve'> <sodipodi:namedview inkscape:cx='26.358185' inkscape:zoom='1.18' bordercolor='#666666' pagecolor='#ffffff' borderopacity='1' objecttolerance='10' inkscape:cy='139.7898' gridtolerance='10' guidetolerance='10' showgrid='false' showguides='true' id='namedview6' inkscape:pageopacity='0' inkscape:pageshadow='2' inkscape:guide-bbox='true' inkscape:window-width='1366' inkscape:current-layer='Layer_1' inkscape:window-height='705' inkscape:window-y='-8' inkscape:window-maximized='1' inkscape:window-x='-8'> <sodipodi:guide position='50.036793,85.991376' orientation='1,0' id='guide2986'></sodipodi:guide> <sodipodi:guide position='58.426196,66.216355' orientation='0,1' id='guide3047'></sodipodi:guide> </sodipodi:namedview> <g> <ellipse class='away--icon' cx='-294.6' cy='394' rx='2.5' ry='2.5'/> <path class='away--icon' d='M-293.8,399.4c0-0.4,0.1-0.7,0.2-1c-0.3,0.1-0.6,0.2-1,0.2c-2.5,0-2.5-2-2.5-2s-1,0.1-1.2,0.5c-0.4,0.6-0.6,1.7-0.7,2.5 c0,0.1-0.1,0.5,0,0.6c0.2,1.3,2.2,2.3,4.4,2.4c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0.7,0,1.4-0.1,2-0.3 C-293.3,401.5-293.8,400.5-293.8,399.4z'/> </g> <path class='away--icon' d='M-287,400c0,0.1-0.1,0.1-0.1,0.1l-4.9,0c-0.1,0-0.1-0.1-0.1-0.1v-1.6c0-0.1,0.1-0.1,0.1-0.1l4.9,0c0.1,0,0.1,0.1,0.1,0.1 V400z'/> </svg>", @@ -548,7 +549,7 @@ export default { CHANNEL_DISPLAY_MODE: 'channel_display_mode', CHANNEL_DISPLAY_MODE_CENTERED: 'centered', CHANNEL_DISPLAY_MODE_FULL_SCREEN: 'full', - CHANNEL_DISPLAY_MODE_DEFAULT: 'centered', + CHANNEL_DISPLAY_MODE_DEFAULT: 'full', MESSAGE_DISPLAY: 'message_display', MESSAGE_DISPLAY_CLEAN: 'clean', MESSAGE_DISPLAY_COMPACT: 'compact', diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 9fc342cb1..65a203ab0 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -587,6 +587,7 @@ export function applyTheme(theme) { } if (theme.centerChannelBg) { + changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply', 'background:' + theme.centerChannelBg, 1); changeCss('.app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .post.post--compact .post-image__column', 'background:' + theme.centerChannelBg, 1); changeCss('#post-list .post-list-holder-by-time', 'background:' + theme.centerChannelBg, 1); changeCss('#post-create', 'background:' + theme.centerChannelBg, 1); @@ -607,7 +608,9 @@ export function applyTheme(theme) { if (theme.centerChannelColor) { changeCss('.app__body .post-list__arrows', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1); + changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2); changeCss('.app__body .sidebar--left, .app__body .sidebar--right .sidebar--right__header, .app__body .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.app__body .post.post--system .post__body', 'color:' + changeOpacity(theme.centerChannelColor, 0.6), 1); changeCss('.app__body .input-group-addon, .app__body .app__content, .app__body .post-create__container .post-create-body .btn-file, .app__body .post-create__container .post-create-footer .msg-typing, .app__body .suggestion-list__content .command, .app__body .modal .modal-content, .app__body .dropdown-menu, .app__body .popover, .app__body .mentions__name, .app__body .tip-overlay, .app__body .form-control[disabled], .app__body .form-control[readonly], .app__body fieldset[disabled] .form-control', 'color:' + theme.centerChannelColor, 1); changeCss('.app__body .post .post__link', 'color:' + changeOpacity(theme.centerChannelColor, 0.65), 1); changeCss('.app__body #archive-link-home, .video-div .video-thumbnail__error', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); @@ -658,7 +661,7 @@ export function applyTheme(theme) { changeCss('.app__body .search-help-popover .search-autocomplete__item.selected', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); changeCss('::-webkit-scrollbar-thumb', 'background:' + changeOpacity(theme.centerChannelColor, 0.4), 1); changeCss('body', 'scrollbar-arrow-color:' + theme.centerChannelColor, 4); - changeCss('.app__body .modal .about-modal .about-modal__logo svg, .app__body .post .post__img svg', 'fill:' + theme.centerChannelColor, 1); + changeCss('.app__body .post-create__container .post-create-body .btn-file svg, .app__body .post.post--compact .post-image__column .post-image__details svg, .app__body .modal .about-modal .about-modal__logo svg, .app__body .post .post__img svg', 'fill:' + theme.centerChannelColor, 1); changeCss('.app__body .scrollbar--horizontal, .app__body .scrollbar--vertical', 'background:' + changeOpacity(theme.centerChannelColor, 0.5), 2); changeCss('.app__body .post-list__new-messages-below', 'background:' + changeColor(theme.centerChannelColor, 0.5), 2); changeCss('.app__body .post.post--comment .post__body', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); |