PLT-3418, PLT-2950, PLT-3375, PLT-3382, PLT-3446, PLT-3465: Multiple …

…UI Improvements (mattermost#3449) Improving help text margins Updating changes for get link and create post files Fixing icon for select team screen Fixing styles for select team button Adding improvements to posts UI Adding improvement to post layout Updating changes for post controls Updating z-index for sidebar--right Updating help text position Fixing code for posts Fixing css for post view Pushing improvements for posts view Updating changes for post view Updating post layout Fixing system time css Updating header for system posts Updating post css Removing opacity and changing color for system messages Simplifying root post and system post behaviour Removing images from compact view Updating help text for display Updating embed preview text for advanced option PLT-3490 - Fixing RHS issue on Edge
Revanth47 · Jul 5, 2016 · c1953d9 · c1953d9
1 parent 229bff2
commit c1953d9
Show file tree

Hide file tree

Showing 50 changed files with 471 additions and 341 deletions.
diff --git a/components/about_build_modal.jsx b/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/components/admin_console/admin_sidebar.jsx b/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/components/admin_console/brand_image_setting.jsx b/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/components/admin_console/email_connection_test.jsx b/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/components/admin_console/license_settings.jsx b/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/components/admin_console/recycle_db.jsx b/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/components/admin_console/reload_config.jsx b/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/components/admin_console/save_button.jsx b/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/components/change_url_modal.jsx b/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/components/channel_header.jsx b/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/components/channel_invite_button.jsx b/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/components/create_post.jsx b/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/components/create_team/components/display_name.jsx b/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/components/file_attachment.jsx b/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/components/file_preview.jsx b/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/components/file_upload.jsx b/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/components/get_link_modal.jsx b/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/components/navbar.jsx b/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/components/needs_team.jsx b/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/>