summaryrefslogtreecommitdiffstats
path: root/web/react
diff options
context:
space:
mode:
Diffstat (limited to 'web/react')
-rw-r--r--web/react/components/create_comment.jsx15
-rw-r--r--web/react/components/create_post.jsx23
-rw-r--r--web/react/components/file_upload_overlay.jsx16
-rw-r--r--web/react/components/more_direct_channels.jsx11
-rw-r--r--web/react/components/rhs_thread.jsx27
-rw-r--r--web/react/components/search_results.jsx27
-rw-r--r--web/react/components/sidebar.jsx29
-rw-r--r--web/react/utils/emoticons.jsx1
-rw-r--r--web/react/utils/utils.jsx12
9 files changed, 117 insertions, 44 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));
diff --git a/web/react/utils/emoticons.jsx b/web/react/utils/emoticons.jsx
index 94bb91503..7b43e48b4 100644
--- a/web/react/utils/emoticons.jsx
+++ b/web/react/utils/emoticons.jsx
@@ -3,6 +3,7 @@
const emoticonPatterns = {
smile: /(^|\s)(:-?\))($|\s)/g, // :)
+ wink: /(^|\s)(;-?\))($|\s)/g, // ;)
open_mouth: /(^|\s)(:o)($|\s)/gi, // :o
scream: /(^|\s)(:-o)($|\s)/gi, // :-o
smirk: /(^|\s)(:-?])($|\s)/g, // :]
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index 38ac68d58..5f266bba3 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -519,11 +519,11 @@ export function applyTheme(theme) {
changeCss('.modal .custom-textarea:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
changeCss('.channel-intro, .settings-modal .settings-table .settings-content .divider-dark, hr, .settings-modal .settings-table .settings-links', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
changeCss('.post.current--user .post-body, .post.post--comment.other--root.current--user .post-comment, pre', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
- changeCss('.post.current--user .post-body, .post.post--comment.other--root.current--user .post-comment, .post.post--comment.other--root .post-comment, .post.same--root .post-body, .modal .more-channel-table tbody>tr td, .member-div:first-child, .member-div, .access-history__table .access__report, .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2);
+ changeCss('.post.current--user .post-body, .post.post--comment.other--root.current--user .post-comment, .post.post--comment.other--root .post-comment, .post.same--root .post-body, .modal .more-table tbody>tr td, .member-div:first-child, .member-div, .access-history__table .access__report, .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2);
changeCss('@media(max-width: 1440px){.post.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
changeCss('@media(max-width: 1440px){.post.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
changeCss('@media(max-width: 1800px){.inner__wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
- changeCss('.post:hover, .modal .more-channel-table tbody>tr:hover td, .sidebar--right .sidebar--right__header, .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
+ changeCss('.post:hover, .modal .more-table tbody>tr:hover td, .sidebar--right .sidebar--right__header, .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
changeCss('.date-separator.hovered--before:after, .date-separator.hovered--after:before, .new-separator.hovered--after:before, .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
changeCss('.command-name:hover, .mentions-name:hover, .mentions-focus, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
changeCss('code', 'background:' + changeOpacity(theme.centerChannelColor, 0.1), 1);
@@ -968,3 +968,11 @@ export function getShortenedTeamURL() {
}
return teamURL + '/';
}
+
+export function windowWidth() {
+ return $(window).width();
+}
+
+export function windowHeight() {
+ return $(window).height();
+}
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-10-30 12:18:17 +0000