diff options
Diffstat (limited to 'web/react/components')
-rw-r--r-- | web/react/components/create_comment.jsx | 15 | ||||
-rw-r--r-- | web/react/components/create_post.jsx | 23 | ||||
-rw-r--r-- | web/react/components/file_upload_overlay.jsx | 16 | ||||
-rw-r--r-- | web/react/components/more_direct_channels.jsx | 11 | ||||
-rw-r--r-- | web/react/components/rhs_thread.jsx | 27 | ||||
-rw-r--r-- | web/react/components/search_results.jsx | 27 | ||||
-rw-r--r-- | web/react/components/sidebar.jsx | 29 |
7 files changed, 106 insertions, 42 deletions
diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index 73d5e27a6..435c7d542 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -35,6 +35,7 @@ export default class CreateComment extends React.Component { this.removePreview = this.removePreview.bind(this); this.handleSubmit = this.handleSubmit.bind(this); this.getFileCount = this.getFileCount.bind(this); + this.handleResize = this.handleResize.bind(this); PostStore.clearCommentDraftUploads(); @@ -43,13 +44,23 @@ export default class CreateComment extends React.Component { messageText: draft.message, uploadsInProgress: draft.uploadsInProgress, previews: draft.previews, - submitting: false + submitting: false, + windowWidth: Utils.windowWidth() }; } + componentDidMount() { + window.addEventListener('resize', this.handleResize); + } + componentWillUnmount() { + window.removeEventListener('resize', this.handleResize); + } + handleResize() { + this.setState({windowWidth: Utils.windowWidth()}); + } componentDidUpdate(prevProps, prevState) { if (prevState.uploadsInProgress < this.state.uploadsInProgress) { $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight); - if ($(window).width() > 768) { + if (this.state.windowWidth > 768) { $('.post-right__scroll').perfectScrollbar('update'); } } diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 2581bdcca..035899592 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -37,6 +37,7 @@ export default class CreatePost extends React.Component { this.onChange = this.onChange.bind(this); this.getFileCount = this.getFileCount.bind(this); this.handleArrowUp = this.handleArrowUp.bind(this); + this.handleResize = this.handleResize.bind(this); PostStore.clearDraftUploads(); @@ -48,9 +49,17 @@ export default class CreatePost extends React.Component { uploadsInProgress: draft.uploadsInProgress, previews: draft.previews, submitting: false, - initialText: draft.messageText + initialText: draft.messageText, + windowWidth: Utils.windowWidth(), + windowHeigth: Utils.windowHeight() }; } + handleResize() { + this.setState({ + windowWidth: Utils.windowWidth(), + windowHeight: Utils.windowHeight() + }); + } componentDidUpdate(prevProps, prevState) { if (prevState.previews.length !== this.state.previews.length) { this.resizePostHolder(); @@ -61,6 +70,11 @@ export default class CreatePost extends React.Component { this.resizePostHolder(); return; } + + if (prevState.windowWidth !== this.state.windowWidth || prevState.windowHeight !== this.state.windowHeigth) { + this.resizePostHolder(); + return; + } } getCurrentDraft() { const draft = PostStore.getCurrentDraft(); @@ -194,10 +208,9 @@ export default class CreatePost extends React.Component { PostStore.storeCurrentDraft(draft); } resizePostHolder() { - const height = $(window).height() - $(ReactDOM.findDOMNode(this.refs.topDiv)).height() - 50; + const height = this.state.windowHeigth - $(ReactDOM.findDOMNode(this.refs.topDiv)).height() - 50; $('.post-list-holder-by-time').css('height', `${height}px`); - $(window).trigger('resize'); - if ($(window).width() > 960) { + if (this.state.windowWidth > 960) { $('#post_textbox').focus(); } } @@ -274,9 +287,11 @@ export default class CreatePost extends React.Component { componentDidMount() { ChannelStore.addChangeListener(this.onChange); this.resizePostHolder(); + window.addEventListener('resize', this.handleResize); } componentWillUnmount() { ChannelStore.removeChangeListener(this.onChange); + window.removeEventListener('resize', this.handleResize); } onChange() { const channelId = ChannelStore.getCurrentId(); diff --git a/web/react/components/file_upload_overlay.jsx b/web/react/components/file_upload_overlay.jsx index 4fcee6cb0..d991dd625 100644 --- a/web/react/components/file_upload_overlay.jsx +++ b/web/react/components/file_upload_overlay.jsx @@ -12,9 +12,19 @@ export default class FileUploadOverlay extends React.Component { return ( <div className={overlayClass}> - <div> - <i className='fa fa-upload'></i> - <span>Drop a file to upload it.</span> + <div className='overlay__circle'> + <img + className='overlay__files' + src='/static/images/filesOverlay.png' + alt='Files' + /> + <span><i className='fa fa-upload'></i>{'Drop a file to upload it.'}</span> + <img + className='overlay__logo' + src='/static/images/logoWhite.png' + width='100' + alt='Logo' + /> </div> </div> ); diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx index 105199035..d5b44d86b 100644 --- a/web/react/components/more_direct_channels.jsx +++ b/web/react/components/more_direct_channels.jsx @@ -140,12 +140,11 @@ export default class MoreDirectChannels extends React.Component { if (user.nickname) { const separator = fullName ? ' - ' : ''; details.push( - <p + <span key={`${user.nickname}__nickname`} - className='more-description' > {separator + user.nickname} - </p> + </span> ); } @@ -184,7 +183,9 @@ export default class MoreDirectChannels extends React.Component { <div className='more-name'> {user.username} </div> - {details} + <div className='more-description'> + {details} + </div> </td> <td className='td--action lg'> {joinButton} @@ -242,7 +243,7 @@ export default class MoreDirectChannels extends React.Component { onHide={this.handleHide} > <Modal.Header closeButton={true}> - <Modal.Title>{'Team Directory'}</Modal.Title> + <Modal.Title>{'Direct Messages'}</Modal.Title> </Modal.Header> <Modal.Body> <div className='row filter-row'> diff --git a/web/react/components/rhs_thread.jsx b/web/react/components/rhs_thread.jsx index 467d74681..bcdec2870 100644 --- a/web/react/components/rhs_thread.jsx +++ b/web/react/components/rhs_thread.jsx @@ -4,7 +4,7 @@ var PostStore = require('../stores/post_store.jsx'); var UserStore = require('../stores/user_store.jsx'); var PreferenceStore = require('../stores/preference_store.jsx'); -var utils = require('../utils/utils.jsx'); +var Utils = require('../utils/utils.jsx'); var SearchBox = require('./search_bar.jsx'); var CreateComment = require('./create_comment.jsx'); var RhsHeaderPost = require('./rhs_header_post.jsx'); @@ -20,8 +20,12 @@ export default class RhsThread extends React.Component { this.onChange = this.onChange.bind(this); this.onChangeAll = this.onChangeAll.bind(this); this.forceUpdateInfo = this.forceUpdateInfo.bind(this); + this.handleResize = this.handleResize.bind(this); - this.state = this.getStateFromStores(); + const state = this.getStateFromStores(); + state.windowWidth = Utils.windowWidth(); + state.windowHeight = Utils.windowHeight(); + this.state = state; } getStateFromStores() { var postList = PostStore.getSelectedPost(); @@ -47,9 +51,7 @@ export default class RhsThread extends React.Component { PostStore.addChangeListener(this.onChangeAll); PreferenceStore.addChangeListener(this.forceUpdateInfo); this.resize(); - $(window).resize(function resize() { - this.resize(); - }.bind(this)); + window.addEventListener('resize', this.handleResize); } componentDidUpdate() { if ($('.post-right__scroll')[0]) { @@ -61,6 +63,7 @@ export default class RhsThread extends React.Component { PostStore.removeSelectedPostChangeListener(this.onChange); PostStore.removeChangeListener(this.onChangeAll); PreferenceStore.removeChangeListener(this.forceUpdateInfo); + window.removeEventListener('resize', this.handleResize); } forceUpdateInfo() { if (this.state.postList) { @@ -71,9 +74,15 @@ export default class RhsThread extends React.Component { } } } + handleResize() { + this.setState({ + windowWidth: Utils.windowWidth(), + windowHeight: Utils.windowHeight() + }); + } onChange() { var newState = this.getStateFromStores(); - if (!utils.areStatesEqual(newState, this.state)) { + if (!Utils.areStatesEqual(newState, this.state)) { this.setState(newState); } } @@ -103,15 +112,15 @@ export default class RhsThread extends React.Component { } var newState = this.getStateFromStores(); - if (!utils.areStatesEqual(newState, this.state)) { + if (!Utils.areStatesEqual(newState, this.state)) { this.setState(newState); } } resize() { - var height = $(window).height() - $('#error_bar').outerHeight() - 100; + var height = this.state.windowHeight - $('#error_bar').outerHeight() - 100; $('.post-right__scroll').css('height', height + 'px'); $('.post-right__scroll').scrollTop(100000); - if ($(window).width() > 768) { + if (this.state.windowWidth > 768) { $('.post-right__scroll').perfectScrollbar(); $('.post-right__scroll').perfectScrollbar('update'); } diff --git a/web/react/components/search_results.jsx b/web/react/components/search_results.jsx index e55fd3752..30e15d0ad 100644 --- a/web/react/components/search_results.jsx +++ b/web/react/components/search_results.jsx @@ -4,7 +4,7 @@ var PostStore = require('../stores/post_store.jsx'); var UserStore = require('../stores/user_store.jsx'); var SearchBox = require('./search_bar.jsx'); -var utils = require('../utils/utils.jsx'); +var Utils = require('../utils/utils.jsx'); var SearchResultsHeader = require('./search_results_header.jsx'); var SearchResultsItem = require('./search_results_item.jsx'); @@ -20,18 +20,19 @@ export default class SearchResults extends React.Component { this.onChange = this.onChange.bind(this); this.resize = this.resize.bind(this); + this.handleResize = this.handleResize.bind(this); - this.state = getStateFromStores(); + const state = getStateFromStores(); + state.windowWidth = Utils.windowWidth(); + state.windowHeight = Utils.windowHeight(); + this.state = state; } componentDidMount() { this.mounted = true; PostStore.addSearchChangeListener(this.onChange); this.resize(); - var self = this; - $(window).resize(function resize() { - self.resize(); - }); + window.addEventListener('resize', this.handleResize); } componentDidUpdate() { @@ -41,22 +42,30 @@ export default class SearchResults extends React.Component { componentWillUnmount() { PostStore.removeSearchChangeListener(this.onChange); this.mounted = false; + window.removeEventListener('resize', this.handleResize); + } + + handleResize() { + this.setState({ + windowWidth: Utils.windowWidth(), + windowHeight: Utils.windowHeight() + }); } onChange() { if (this.mounted) { var newState = getStateFromStores(); - if (!utils.areStatesEqual(newState, this.state)) { + if (!Utils.areStatesEqual(newState, this.state)) { this.setState(newState); } } } resize() { - var height = $(window).height() - $('#error_bar').outerHeight() - 100; + var height = this.state.windowHeight - $('#error_bar').outerHeight() - 100; $('#search-items-container').css('height', height + 'px'); $('#search-items-container').scrollTop(0); - if ($(window).width() > 768) { + if (this.state.windowWidth > 768) { $('#search-items-container').perfectScrollbar(); } } diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index f88522fb9..d1fe37300 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -29,9 +29,10 @@ export default class Sidebar extends React.Component { this.onChange = this.onChange.bind(this); this.onScroll = this.onScroll.bind(this); - this.onResize = this.onResize.bind(this); this.updateUnreadIndicators = this.updateUnreadIndicators.bind(this); this.handleLeaveDirectChannel = this.handleLeaveDirectChannel.bind(this); + this.updateScrollbar = this.updateScrollbar.bind(this); + this.handleResize = this.handleResize.bind(this); this.showNewChannelModal = this.showNewChannelModal.bind(this); this.hideNewChannelModal = this.hideNewChannelModal.bind(this); @@ -46,6 +47,7 @@ export default class Sidebar extends React.Component { state.newChannelModalType = ''; state.showDirectChannelsModal = false; state.loadingDMChannel = -1; + state.windowWidth = Utils.windowWidth(); this.state = state; } @@ -129,14 +131,11 @@ export default class Sidebar extends React.Component { TeamStore.addChangeListener(this.onChange); PreferenceStore.addChangeListener(this.onChange); - if ($(window).width() > 768) { - $('.nav-pills__container').perfectScrollbar(); - } - this.updateTitle(); this.updateUnreadIndicators(); + this.updateScrollbar(); - $(window).on('resize', this.onResize); + window.addEventListener('resize', this.handleResize); } shouldComponentUpdate(nextProps, nextState) { if (!Utils.areStatesEqual(nextProps, this.props)) { @@ -151,9 +150,10 @@ export default class Sidebar extends React.Component { componentDidUpdate() { this.updateTitle(); this.updateUnreadIndicators(); + this.updateScrollbar(); } componentWillUnmount() { - $(window).off('resize', this.onResize); + window.removeEventListener('resize', this.handleResize); ChannelStore.removeChangeListener(this.onChange); UserStore.removeChangeListener(this.onChange); @@ -161,6 +161,18 @@ export default class Sidebar extends React.Component { TeamStore.removeChangeListener(this.onChange); PreferenceStore.removeChangeListener(this.onChange); } + handleResize() { + this.setState({ + windowWidth: Utils.windowWidth(), + windowHeight: Utils.windowHeight() + }); + } + updateScrollbar() { + if (this.state.windowWidth > 768) { + $('.nav-pills__container').perfectScrollbar(); + $('.nav-pills__container').perfectScrollbar('update'); + } + } onChange() { var newState = this.getStateFromStores(); if (!Utils.areStatesEqual(newState, this.state)) { @@ -186,9 +198,6 @@ export default class Sidebar extends React.Component { onScroll() { this.updateUnreadIndicators(); } - onResize() { - this.updateUnreadIndicators(); - } updateUnreadIndicators() { const container = $(ReactDOM.findDOMNode(this.refs.container)); |