summaryrefslogtreecommitdiffstats
path: root/web/react
diff options
context:
space:
mode:
Diffstat (limited to 'web/react')
-rw-r--r--web/react/components/post_list.jsx4
-rw-r--r--web/react/components/settings_sidebar.jsx3
-rw-r--r--web/react/components/sidebar.jsx217
-rw-r--r--web/react/components/sidebar_header.jsx2
-rw-r--r--web/react/components/view_image.jsx223
-rw-r--r--web/react/stores/user_store.jsx447
-rw-r--r--web/react/utils/async_client.jsx2
-rw-r--r--web/react/utils/client.jsx14
8 files changed, 495 insertions, 417 deletions
diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx
index bb1b1704c..83f806b79 100644
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -439,7 +439,7 @@ module.exports = React.createClass({
currentPostDay = utils.getDateForUnixTicks(post.create_at);
if (currentPostDay.toDateString() != previousPostDay.toDateString()) {
postCtls.push(
- <div className="date-separator">
+ <div key={currentPostDay.toDateString()} className="date-separator">
<hr className="separator__hr" />
<div className="separator__text">{currentPostDay.toDateString()}</div>
</div>
@@ -449,7 +449,7 @@ module.exports = React.createClass({
if (post.create_at > last_viewed && !rendered_last_viewed) {
rendered_last_viewed = true;
postCtls.push(
- <div className="new-separator">
+ <div key="unviewed" className="new-separator">
<hr id="new_message" className="separator__hr" />
<div className="separator__text">New Messages</div>
</div>
diff --git a/web/react/components/settings_sidebar.jsx b/web/react/components/settings_sidebar.jsx
index ae8510cf2..b4d291622 100644
--- a/web/react/components/settings_sidebar.jsx
+++ b/web/react/components/settings_sidebar.jsx
@@ -4,6 +4,7 @@
var utils = require('../utils/utils.jsx');
module.exports = React.createClass({
+ displayName:'SettingsSidebar',
updateTab: function(tab) {
this.props.updateTab(tab);
$('.settings-modal').addClass('display--content');
@@ -14,7 +15,7 @@ module.exports = React.createClass({
<div className="">
<ul className="nav nav-pills nav-stacked">
{this.props.tabs.map(function(tab) {
- return <li className={self.props.activeTab == tab.name ? 'active' : ''}><a href="#" onClick={function(){self.updateTab(tab.name);}}><i className={tab.icon}></i>{tab.ui_name}</a></li>
+ return <li key={tab.name+'_li'} className={self.props.activeTab == tab.name ? 'active' : ''}><a key={tab.name + '_a'} href="#" onClick={function(){self.updateTab(tab.name);}}><i key={tab.name+'_i'} className={tab.icon}></i>{tab.ui_name}</a></li>
})}
</ul>
</div>
diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx
index 1d39f5f67..fe73cbcf7 100644
--- a/web/react/components/sidebar.jsx
+++ b/web/react/components/sidebar.jsx
@@ -56,7 +56,6 @@ function getStateFromStores() {
var channelMember = members[channel.id];
var msgCount = channel.total_msg_count - channelMember.msg_count;
if (msgCount > 0) {
- channel.unread = msgCount;
showDirectChannels.push(channel);
} else if (currentId === channel.id) {
showDirectChannels.push(channel);
@@ -70,6 +69,7 @@ function getStateFromStores() {
tempChannel.display_name = utils.getDisplayName(teammate);
tempChannel.status = UserStore.getStatus(teammate.id);
tempChannel.last_post_at = 0;
+ tempChannel.total_msg_count = 0;
readDirectChannels.push(tempChannel);
}
}
@@ -132,11 +132,17 @@ module.exports = React.createClass({
$('.nav-pills__container').perfectScrollbar();
this.updateTitle();
+ this.updateUnreadIndicators();
+
+ $(window).on('resize', this.onResize);
},
componentDidUpdate: function() {
this.updateTitle();
+ this.updateUnreadIndicators();
},
componentWillUnmount: function() {
+ $(window).off('resize', this.onResize);
+
ChannelStore.removeChangeListener(this.onChange);
UserStore.removeChangeListener(this.onChange);
UserStore.removeStatusesChangeListener(this.onChange);
@@ -157,7 +163,10 @@ module.exports = React.createClass({
}
if (UserStore.getCurrentId() !== msg.user_id) {
- var mentions = msg.props.mentions ? JSON.parse(msg.props.mentions) : [];
+ var mentions = [];
+ if (msg.props.mentions) {
+ mentions = JSON.parse(msg.props.mentions);
+ }
var channel = ChannelStore.get(msg.channel_id);
var user = UserStore.getCurrentUser();
@@ -175,7 +184,10 @@ module.exports = React.createClass({
username = UserStore.getProfile(msg.user_id).username;
}
- var title = channel ? channel.display_name : 'Posted';
+ var title = 'Posted';
+ if (channel) {
+ title = channel.display_name;
+ }
var repRegex = new RegExp('<br>', 'g');
var post = JSON.parse(msg.props.post);
@@ -235,103 +247,143 @@ module.exports = React.createClass({
}
}
},
+ onScroll: function(e) {
+ this.updateUnreadIndicators();
+ },
+ onResize: function(e) {
+ this.updateUnreadIndicators();
+ },
+ updateUnreadIndicators: function() {
+ var container = $(this.refs.container.getDOMNode());
+
+ if (this.firstUnreadChannel) {
+ var firstUnreadElement = $(this.refs[this.firstUnreadChannel].getDOMNode());
+
+ if (firstUnreadElement.position().top + firstUnreadElement.height() < 0) {
+ $(this.refs.topUnreadIndicator.getDOMNode()).css('display', 'initial');
+ } else {
+ $(this.refs.topUnreadIndicator.getDOMNode()).css('display', 'none');
+ }
+ }
+
+ if (this.lastUnreadChannel) {
+ var lastUnreadElement = $(this.refs[this.lastUnreadChannel].getDOMNode());
+
+ if (lastUnreadElement.position().top > container.height()) {
+ $(this.refs.bottomUnreadIndicator.getDOMNode()).css('bottom', '0');
+ $(this.refs.bottomUnreadIndicator.getDOMNode()).css('display', 'initial');
+ } else {
+ $(this.refs.bottomUnreadIndicator.getDOMNode()).css('display', 'none');
+ }
+ }
+ },
getInitialState: function() {
return getStateFromStores();
},
render: function() {
var members = this.state.members;
- var newsActive = window.location.pathname === '/' ? 'active' : '';
+ var activeId = this.state.active_id;
var badgesActive = false;
+
+ // keep track of the first and last unread channels so we can use them to set the unread indicators
var self = this;
- var channelItems = this.state.channels.map(function(channel) {
- if (channel.type != 'O') {
- return '';
- }
+ this.firstUnreadChannel = null;
+ this.lastUnreadChannel = null;
+ function createChannelElement(channel) {
var channelMember = members[channel.id];
- var active = channel.id === self.state.active_id ? 'active' : '';
- var msgCount = channel.total_msg_count - channelMember.msg_count;
- var titleClass = '';
- if (msgCount > 0 && channelMember.notify_level !== 'quiet') {
- titleClass = 'unread-title';
+ var linkClass = '';
+ if (channel.id === self.state.active_id) {
+ linkClass = 'active';
}
- var badge = '';
- if (channelMember.mention_count > 0) {
- badge = <span className='badge pull-right small'>{channelMember.mention_count}</span>;
- badgesActive = true;
- titleClass = 'unread-title';
+ var unread = false;
+ if (channelMember) {
+ var msgCount = channel.total_msg_count - channelMember.msg_count;
+ unread = (msgCount > 0 && channelMember.notify_level !== 'quiet') || channelMember.mention_count > 0;
}
- return (
- <li key={channel.id} className={active}><a className={'sidebar-channel ' + titleClass} href='#' onClick={function(e){e.preventDefault(); utils.switchChannel(channel);}}>{badge}{channel.display_name}</a></li>
- );
- });
+ var titleClass = '';
+ if (unread) {
+ titleClass = 'unread-title';
- var privateChannelItems = this.state.channels.map(function(channel) {
- if (channel.type !== 'P') {
- return '';
+ if (!self.firstUnreadChannel) {
+ self.firstUnreadChannel = channel.name;
+ }
+ self.lastUnreadChannel = channel.name;
}
- var channelMember = members[channel.id];
- var active = channel.id === self.state.active_id ? 'active' : '';
+ var badge = null;
+ if (channelMember) {
+ if (channel.type === 'D') {
+ // direct message channels show badges for any number of unread posts
+ var msgCount = channel.total_msg_count - channelMember.msg_count;
+ if (msgCount > 0) {
+ badge = <span className='badge pull-right small'>{msgCount}</span>;
+ badgesActive = true;
+ }
+ } else if (channelMember.mention_count > 0) {
+ // public and private channels only show badges for mentions
+ badge = <span className='badge pull-right small'>{channelMember.mention_count}</span>;
+ badgesActive = true;
+ }
+ }
- var msgCount = channel.total_msg_count - channelMember.msg_count;
- var titleClass = ''
- if (msgCount > 0 && channelMember.notify_level !== 'quiet') {
- titleClass = 'unread-title'
+ // set up status icon for direct message channels
+ var status = null;
+ if (channel.type === 'D') {
+ var statusIcon = '';
+ if (channel.status === 'online') {
+ statusIcon = Constants.ONLINE_ICON_SVG;
+ } else if (channel.status === 'away') {
+ statusIcon = Constants.ONLINE_ICON_SVG;
+ } else {
+ statusIcon = Constants.OFFLINE_ICON_SVG;
+ }
+ status = <span className='status' dangerouslySetInnerHTML={{__html: statusIcon}} />;
}
- var badge = '';
- if (channelMember.mention_count > 0) {
- badge = <span className='badge pull-right small'>{channelMember.mention_count}</span>;
- badgesActive = true;
- titleClass = 'unread-title';
+ // set up click handler to switch channels (or create a new channel for non-existant ones)
+ var clickHandler = null;
+ var href;
+ if (!channel.fake) {
+ clickHandler = function(e) {
+ e.preventDefault();
+ utils.switchChannel(channel);
+ };
+ href = '#';
+ } else {
+ href = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name;
}
return (
- <li key={channel.id} className={active}><a className={'sidebar-channel ' + titleClass} href='#' onClick={function(e){e.preventDefault(); utils.switchChannel(channel);}}>{badge}{channel.display_name}</a></li>
+ <li key={channel.name} ref={channel.name} className={linkClass}>
+ <a className={'sidebar-channel ' + titleClass} href={href} onClick={clickHandler}>
+ {status}
+ {badge}
+ {channel.display_name}
+ </a>
+ </li>
);
- });
-
- var directMessageItems = this.state.showDirectChannels.map(function(channel) {
- var badge = '';
- var titleClass = '';
+ };
- var statusIcon = '';
- if (channel.status === 'online') {
- statusIcon = Constants.ONLINE_ICON_SVG;
- } else if (channel.status === 'away') {
- statusIcon = Constants.ONLINE_ICON_SVG;
- } else {
- statusIcon = Constants.OFFLINE_ICON_SVG;
+ // create elements for all 3 types of channels
+ var channelItems = this.state.channels.filter(
+ function(channel) {
+ return channel.type === 'O';
}
+ ).map(createChannelElement);
- if (!channel.fake) {
- var active = channel.id === self.state.active_id ? 'active' : '';
-
- if (channel.unread) {
- badge = <span className='badge pull-right small'>{channel.unread}</span>;
- badgesActive = true;
- titleClass = 'unread-title';
- }
-
- function handleClick(e) {
- e.preventDefault();
- utils.switchChannel(channel, channel.teammate_username);
- }
-
- return (
- <li key={channel.name} className={active}><a className={'sidebar-channel ' + titleClass} href='#' onClick={handleClick}><span className='status' dangerouslySetInnerHTML={{__html: statusIcon}} /> {badge}{channel.display_name}</a></li>
- );
- } else {
- return (
- <li key={channel.name} className={active}><a className={'sidebar-channel ' + titleClass} href={TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name}><span className='status' dangerouslySetInnerHTML={{__html: statusIcon}} /> {badge}{channel.display_name}</a></li>
- );
+ var privateChannelItems = this.state.channels.filter(
+ function(channel) {
+ return channel.type === 'P';
}
- });
+ ).map(createChannelElement);
+
+ var directMessageItems = this.state.showDirectChannels.map(createChannelElement);
+ // update the favicon to show if there are any notifications
var link = document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
@@ -348,19 +400,26 @@ module.exports = React.createClass({
}
head.appendChild(link);
- if (channelItems.length == 0) {
- <li><small>Loading...</small></li>
+ var directMessageMore = null;
+ if (this.state.hideDirectChannels.length > 0) {
+ directMessageMore = (
+ <li>
+ <a href='#' data-toggle='modal' className='nav-more' data-target='#more_direct_channels' data-channels={JSON.stringify(this.state.hideDirectChannels)}>
+ {'More ('+this.state.hideDirectChannels.length+')'}
+ </a>
+ </li>
+ );
}
- if (privateChannelItems.length == 0) {
- <li><small>Loading...</small></li>
- }
return (
<div>
<SidebarHeader teamDisplayName={this.props.teamDisplayName} teamType={this.props.teamType} />
<SearchBox />
- <div className='nav-pills__container'>
+ <div ref='topUnreadIndicator' className='nav-pills__unread-indicator nav-pills__unread-indicator-top' style={{display: 'none'}}>Unread post(s) above</div>
+ <div ref='bottomUnreadIndicator' className='nav-pills__unread-indicator nav-pills__unread-indicator-bottom' style={{display: 'none'}}>Unread post(s) below</div>
+
+ <div ref='container' className='nav-pills__container' onScroll={this.onScroll}>
<ul className='nav nav-pills nav-stacked'>
<li><h4>Channels<a className='add-channel-btn' href='#' data-toggle='modal' data-target='#new_channel' data-channeltype='O'>+</a></h4></li>
{channelItems}
@@ -374,9 +433,7 @@ module.exports = React.createClass({
<ul className='nav nav-pills nav-stacked'>
<li><h4>Private Messages</h4></li>
{directMessageItems}
- { this.state.hideDirectChannels.length > 0 ?
- <li><a href='#' data-toggle='modal' className='nav-more' data-target='#more_direct_channels' data-channels={JSON.stringify(this.state.hideDirectChannels)}>{'More ('+this.state.hideDirectChannels.length+')'}</a></li>
- : '' }
+ {directMessageMore}
</ul>
</div>
</div>
diff --git a/web/react/components/sidebar_header.jsx b/web/react/components/sidebar_header.jsx
index 72b8547e5..cc3f255ee 100644
--- a/web/react/components/sidebar_header.jsx
+++ b/web/react/components/sidebar_header.jsx
@@ -87,7 +87,7 @@ var NavbarDropdown = React.createClass({
}
});
}
- teams.push(<li><a href={utils.getWindowLocationOrigin() + '/signup_team'}>Create a New Team</a></li>);
+ teams.push(<li key='newTeam_li'><a key='newTeam_a' href={utils.getWindowLocationOrigin() + '/signup_team' }>Create a New Team</a></li>);
return (
<ul className='nav navbar-nav navbar-right'>
diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx
index 4b2f8f650..dc85b53e5 100644
--- a/web/react/components/view_image.jsx
+++ b/web/react/components/view_image.jsx
@@ -5,113 +5,143 @@ var Client = require('../utils/client.jsx');
var utils = require('../utils/utils.jsx');
module.exports = React.createClass({
- displayName: "ViewImageModal",
+ displayName: 'ViewImageModal',
canSetState: false,
handleNext: function() {
var id = this.state.imgId + 1;
- if (id > this.props.filenames.length-1) {
+ if (id > this.props.filenames.length - 1) {
id = 0;
}
- this.setState({ imgId: id });
+ this.setState({imgId: id});
this.loadImage(id);
},
handlePrev: function() {
var id = this.state.imgId - 1;
if (id < 0) {
- id = this.props.filenames.length-1;
+ id = this.props.filenames.length - 1;
}
- this.setState({ imgId: id });
+ this.setState({imgId: id});
this.loadImage(id);
},
+ handleKeyPress: function handleKeyPress(e) {
+ if (!e) {
+ return;
+ } else if (e.keyCode === 39) {
+ this.handleNext();
+ } else if (e.keyCode === 37) {
+ this.handlePrev();
+ }
+ },
componentWillReceiveProps: function(nextProps) {
- this.setState({ imgId: nextProps.startId });
+ this.setState({imgId: nextProps.startId});
},
loadImage: function(id) {
- var imgHeight = $(window).height()-100;
- if (this.state.loaded[id] || this.state.images[id]){
- $('.modal .modal-image .image-wrapper img').css("max-height",imgHeight);
+ var imgHeight = $(window).height() - 100;
+ if (this.state.loaded[id] || this.state.images[id]) {
+ $('.modal .modal-image .image-wrapper img').css('max-height', imgHeight);
return;
- };
+ }
var filename = this.props.filenames[id];
var fileInfo = utils.splitFileLocation(filename);
var fileType = utils.getFileType(fileInfo.ext);
- if (fileType === "image") {
+ if (fileType === 'image') {
var self = this;
var img = new Image();
img.load(this.getPreviewImagePath(filename),
- function(){
+ function() {
var progress = self.state.progress;
progress[id] = img.completedPercentage;
- self.setState({ progress: progress });
- });
+ self.setState({progress: progress});
+ });
img.onload = function(imgid) {
return function() {
var loaded = self.state.loaded;
loaded[imgid] = true;
- self.setState({ loaded: loaded });
- $(self.refs.image.getDOMNode()).css("max-height",imgHeight);
+ self.setState({loaded: loaded});
+ $(self.refs.image.getDOMNode()).css('max-height', imgHeight);
};
}(id);
var images = this.state.images;
images[id] = img;
- this.setState({ images: images });
+ this.setState({images: images});
} else {
// there's nothing to load for non-image files
var loaded = this.state.loaded;
loaded[id] = true;
- this.setState({ loaded: loaded });
+ this.setState({loaded: loaded});
}
},
componentDidUpdate: function() {
if (this.state.loaded[this.state.imgId]) {
if (this.refs.imageWrap) {
- $(this.refs.imageWrap.getDOMNode()).removeClass("default");
+ $(this.refs.imageWrap.getDOMNode()).removeClass('default');
}
}
},
componentDidMount: function() {
var self = this;
- $("#"+this.props.modalId).on('shown.bs.modal', function() {
- self.setState({ viewed: true });
+ $('#' + this.props.modalId).on('shown.bs.modal', function() {
+ self.setState({viewed: true});
self.loadImage(self.state.imgId);
- })
+ });
- $(this.refs.modal.getDOMNode()).click(function(e){
- if (e.target == this || e.target == self.refs.imageBody.getDOMNode()) {
+ $(this.refs.modal.getDOMNode()).click(function(e) {
+ if (e.target === this || e.target === self.refs.imageBody.getDOMNode()) {
$('.image_modal').modal('hide');
}
});
$(this.refs.imageWrap.getDOMNode()).hover(
function() {
- $(self.refs.imageFooter.getDOMNode()).addClass("footer--show");
+ $(self.refs.imageFooter.getDOMNode()).addClass('footer--show');
}, function() {
- $(self.refs.imageFooter.getDOMNode()).removeClass("footer--show");
+ $(self.refs.imageFooter.getDOMNode()).removeClass('footer--show');
}
);
+ $(window).on('keyup', this.handleKeyPress);
+
// keep track of whether or not this component is mounted so we can safely set the state asynchronously
this.canSetState = true;
},
componentWillUnmount: function() {
this.canSetState = false;
+ $(window).off('keyup', this.handleKeyPress);
},
- getPublicLink: function(e) {
- data = {};
- data["channel_id"] = this.props.channelId;
- data["user_id"] = this.props.userId;
- data["filename"] = this.props.filenames[this.state.imgId];
+ getPublicLink: function() {
+ var data = {};
+ data.channel_id = this.props.channelId;
+ data.user_id = this.props.userId;
+ data.filename = this.props.filenames[this.state.imgId];
Client.getPublicLink(data,
- function(data) {
- window.open(data["public_link"]);
- }.bind(this),
- function(err) {
- }.bind(this)
+ function(serverData) {
+ window.open(serverData.public_link);
+ },
+ function() {
+ }
);
},
+ getPreviewImagePath: function(filename) {
+ // Returns the path to a preview image that can be used to represent a file.
+ var fileInfo = utils.splitFileLocation(filename);
+ var fileType = utils.getFileType(fileInfo.ext);
+
+ if (fileType === 'image') {
+ // This is a temporary patch to fix issue with old files using absolute paths
+ if (fileInfo.path.indexOf('/api/v1/files/get') !== -1) {
+ fileInfo.path = fileInfo.path.split('/api/v1/files/get')[1];
+ }
+ fileInfo.path = utils.getWindowLocationOrigin() + '/api/v1/files/get' + fileInfo.path;
+
+ return fileInfo.path + '_preview.jpg';
+ }
+
+ // only images have proper previews, so just use a placeholder icon for non-images
+ return utils.getPreviewImagePathForFileType(fileType);
+ },
getInitialState: function() {
var loaded = [];
var progress = [];
@@ -119,10 +149,10 @@ module.exports = React.createClass({
loaded.push(false);
progress.push(0);
}
- return { imgId: this.props.startId, viewed: false, loaded: loaded, progress: progress, images: {}, fileSizes: {} };
+ return {imgId: this.props.startId, viewed: false, loaded: loaded, progress: progress, images: {}, fileSizes: {}};
},
render: function() {
- if (this.props.filenames.length < 1 || this.props.filenames.length-1 < this.state.imgId) {
+ if (this.props.filenames.length < 1 || this.props.filenames.length - 1 < this.state.imgId) {
return <div/>;
}
@@ -132,34 +162,34 @@ module.exports = React.createClass({
var name = decodeURIComponent(utils.getFileName(filename));
var content;
- var bgClass = "";
+ var bgClass = '';
if (this.state.loaded[this.state.imgId]) {
var fileInfo = utils.splitFileLocation(filename);
var fileType = utils.getFileType(fileInfo.ext);
- if (fileType === "image") {
+ if (fileType === 'image') {
// image files just show a preview of the file
content = (
- <a href={fileUrl} target="_blank">
- <img ref="image" src={this.getPreviewImagePath(filename)}/>
+ <a href={fileUrl} target='_blank'>
+ <img ref='image' src={this.getPreviewImagePath(filename)}/>
</a>
);
} else {
// non-image files include a section providing details about the file
- var infoString = "File type " + fileInfo.ext.toUpperCase();
+ var infoString = 'File type ' + fileInfo.ext.toUpperCase();
if (this.state.fileSizes[filename] && this.state.fileSizes[filename] >= 0) {
- infoString += ", Size " + utils.fileSizeToString(this.state.fileSizes[filename]);
+ infoString += ', Size ' + utils.fileSizeToString(this.state.fileSizes[filename]);
}
content = (
- <div className="file-details__container">
- <a className={"file-details__preview"} href={fileUrl} target="_blank">
- <span className="file-details__preview-helper" />
- <img ref="image" src={this.getPreviewImagePath(filename)} />
+ <div className='file-details__container'>
+ <a className={'file-details__preview'} href={fileUrl} target='_blank'>
+ <span className='file-details__preview-helper' />
+ <img ref='image' src={this.getPreviewImagePath(filename)} />
</a>
- <div className="file-details">
- <div className="file-details__name">{name}</div>
- <div className="file-details__info">{infoString}</div>
+ <div className='file-details'>
+ <div className='file-details__name'>{name}</div>
+ <div className='file-details__info'>{infoString}</div>
</div>
</div>
);
@@ -182,68 +212,63 @@ module.exports = React.createClass({
var percentage = Math.floor(this.state.progress[this.state.imgId]);
content = (
<div>
- <img className="loader-image" src="/static/images/load.gif" />
+ <img className='loader-image' src='/static/images/load.gif' />
{ percentage > 0 ?
- <span className="loader-percent" >{"Previewing " + percentage + "%"}</span>
- : ""}
+ <span className='loader-percent' >{'Previewing ' + percentage + '%'}</span>
+ : ''}
+ </div>
+ );
+ bgClass = 'black-bg';
+ }
+
+ var publicLink = '';
+ if (config.AllowPublicLink) {
+ publicLink = (
+ <div>
+ <a href='#' className='public-link text' data-title='Public Image' onClick={this.getPublicLink}>Get Public Link</a>
+ <span className='text'> | </span>
</div>
);
- bgClass = "black-bg";
+ }
+
+ var leftArrow = '';
+ var rightArrow = '';
+ if (this.props.filenames.length > 1) {
+ leftArrow = (
+ <a className='modal-prev-bar' href='#' onClick={this.handlePrev}>
+ <i className='image-control image-prev'/>
+ </a>
+ );
+
+ rightArrow = (
+ <a className='modal-next-bar' href='#' onClick={this.handleNext}>
+ <i className='image-control image-next'/>
+ </a>
+ );
}
return (
- <div className="modal fade image_modal" ref="modal" id={this.props.modalId} tabIndex="-1" role="dialog" aria-hidden="true">
- <div className="modal-dialog modal-image">
- <div className="modal-content image-content">
- <div ref="imageBody" className="modal-body image-body">
- <div ref="imageWrap" className={"image-wrapper default " + bgClass}>
- <div className="modal-close" data-dismiss="modal"></div>
+ <div className='modal fade image_modal' ref='modal' id={this.props.modalId} tabIndex='-1' role='dialog' aria-hidden='true'>
+ <div className='modal-dialog modal-image'>
+ <div className='modal-content image-content'>
+ <div ref='imageBody' className='modal-body image-body'>
+ <div ref='imageWrap' className={'image-wrapper default ' + bgClass}>
+ <div className='modal-close' data-dismiss='modal'></div>
{content}
- <div ref="imageFooter" className="modal-button-bar">
- <span className="pull-left text">{"Image "+(this.state.imgId+1)+" of "+this.props.filenames.length}</span>
- <div className="image-links">
- { config.AllowPublicLink ?
- <div>
- <a href="#" className="public-link text" data-title="Public Image" onClick={this.getPublicLink}>Get Public Link</a>
- <span className="text"> | </span>
- </div>
- : "" }
- <a href={fileUrl} download={name} className="text">Download</a>
+ <div ref='imageFooter' className='modal-button-bar'>
+ <span className='pull-left text'>{'Image ' + (this.state.imgId + 1) + ' of ' + this.props.filenames.length}</span>
+ <div className='image-links'>
+ {publicLink}
+ <a href={fileUrl} download={name} className='text'>Download</a>
</div>
</div>
</div>
- { this.props.filenames.length > 1 ?
- <a className="modal-prev-bar" href="#" onClick={this.handlePrev}>
- <i className="image-control image-prev"/>
- </a>
- : "" }
- { this.props.filenames.length > 1 ?
- <a className="modal-next-bar" href="#" onClick={this.handleNext}>
- <i className="image-control image-next"/>
- </a>
- : "" }
+ {leftArrow}
+ {rightArrow}
</div>
</div>
</div>
</div>
);
- },
- // Returns the path to a preview image that can be used to represent a file.
- getPreviewImagePath: function(filename) {
- var fileInfo = utils.splitFileLocation(filename);
- var fileType = utils.getFileType(fileInfo.ext);
-
- if (fileType === "image") {
- // This is a temporary patch to fix issue with old files using absolute paths
- if (fileInfo.path.indexOf("/api/v1/files/get") !== -1) {
- fileInfo.path = fileInfo.path.split("/api/v1/files/get")[1];
- }
- fileInfo.path = utils.getWindowLocationOrigin() + "/api/v1/files/get" + fileInfo.path;
-
- return fileInfo.path + '_preview.jpg';
- } else {
- // only images have proper previews, so just use a placeholder icon for non-images
- return utils.getPreviewImagePathForFileType(fileType);
- }
}
});
diff --git a/web/react/stores/user_store.jsx b/web/react/stores/user_store.jsx
index aff5a0bed..f8616c6ab 100644
--- a/web/react/stores/user_store.jsx
+++ b/web/react/stores/user_store.jsx
@@ -4,7 +4,6 @@
var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
var EventEmitter = require('events').EventEmitter;
var assign = require('object-assign');
-var client = require('../utils/client.jsx');
var Constants = require('../utils/constants.jsx');
var ActionTypes = Constants.ActionTypes;
@@ -18,244 +17,248 @@ var CHANGE_EVENT_STATUSES = 'change_statuses';
var UserStore = assign({}, EventEmitter.prototype, {
- _current_id: null,
+ gCurrentId: null,
- emitChange: function(userId) {
- this.emit(CHANGE_EVENT, userId);
- },
- addChangeListener: function(callback) {
- this.on(CHANGE_EVENT, callback);
- },
- removeChangeListener: function(callback) {
- this.removeListener(CHANGE_EVENT, callback);
- },
- emitSessionsChange: function() {
- this.emit(CHANGE_EVENT_SESSIONS);
- },
- addSessionsChangeListener: function(callback) {
- this.on(CHANGE_EVENT_SESSIONS, callback);
- },
- removeSessionsChangeListener: function(callback) {
- this.removeListener(CHANGE_EVENT_SESSIONS, callback);
- },
- emitAuditsChange: function() {
- this.emit(CHANGE_EVENT_AUDITS);
- },
- addAuditsChangeListener: function(callback) {
- this.on(CHANGE_EVENT_AUDITS, callback);
- },
- removeAuditsChangeListener: function(callback) {
- this.removeListener(CHANGE_EVENT_AUDITS, callback);
- },
- emitTeamsChange: function() {
- this.emit(CHANGE_EVENT_TEAMS);
- },
- addTeamsChangeListener: function(callback) {
- this.on(CHANGE_EVENT_TEAMS, callback);
- },
- removeTeamsChangeListener: function(callback) {
- this.removeListener(CHANGE_EVENT_TEAMS, callback);
- },
- emitStatusesChange: function() {
- this.emit(CHANGE_EVENT_STATUSES);
- },
- addStatusesChangeListener: function(callback) {
- this.on(CHANGE_EVENT_STATUSES, callback);
- },
- removeStatusesChangeListener: function(callback) {
- this.removeListener(CHANGE_EVENT_STATUSES, callback);
- },
- setCurrentId: function(id) {
- this._current_id = id;
- if (id == null) {
- BrowserStore.removeGlobalItem("current_user_id");
- } else {
- BrowserStore.setGlobalItem("current_user_id", id);
- }
- },
- getCurrentId: function(skipFetch) {
- var current_id = this._current_id;
+ emitChange: function(userId) {
+ this.emit(CHANGE_EVENT, userId);
+ },
+ addChangeListener: function(callback) {
+ this.on(CHANGE_EVENT, callback);
+ },
+ removeChangeListener: function(callback) {
+ this.removeListener(CHANGE_EVENT, callback);
+ },
+ emitSessionsChange: function() {
+ this.emit(CHANGE_EVENT_SESSIONS);
+ },
+ addSessionsChangeListener: function(callback) {
+ this.on(CHANGE_EVENT_SESSIONS, callback);
+ },
+ removeSessionsChangeListener: function(callback) {
+ this.removeListener(CHANGE_EVENT_SESSIONS, callback);
+ },
+ emitAuditsChange: function() {
+ this.emit(CHANGE_EVENT_AUDITS);
+ },
+ addAuditsChangeListener: function(callback) {
+ this.on(CHANGE_EVENT_AUDITS, callback);
+ },
+ removeAuditsChangeListener: function(callback) {
+ this.removeListener(CHANGE_EVENT_AUDITS, callback);
+ },
+ emitTeamsChange: function() {
+ this.emit(CHANGE_EVENT_TEAMS);
+ },
+ addTeamsChangeListener: function(callback) {
+ this.on(CHANGE_EVENT_TEAMS, callback);
+ },
+ removeTeamsChangeListener: function(callback) {
+ this.removeListener(CHANGE_EVENT_TEAMS, callback);
+ },
+ emitStatusesChange: function() {
+ this.emit(CHANGE_EVENT_STATUSES);
+ },
+ addStatusesChangeListener: function(callback) {
+ this.on(CHANGE_EVENT_STATUSES, callback);
+ },
+ removeStatusesChangeListener: function(callback) {
+ this.removeListener(CHANGE_EVENT_STATUSES, callback);
+ },
+ setCurrentId: function(id) {
+ this.gCurrentId = id;
+ if (id == null) {
+ BrowserStore.removeGlobalItem('current_user_id');
+ } else {
+ BrowserStore.setGlobalItem('current_user_id', id);
+ }
+ },
+ getCurrentId: function() {
+ var currentId = this.gCurrentId;
- if (current_id == null) {
- current_id = BrowserStore.getGlobalItem("current_user_id");
- }
+ if (currentId == null) {
+ currentId = BrowserStore.getGlobalItem('current_user_id');
+ this.gCurrentId = currentId;
+ }
- // this is a speical case to force fetch the
- // current user if it's missing
- // it's synchronous to block rendering
- if (current_id == null && !skipFetch) {
- var me = client.getMeSynchronous();
- if (me != null) {
- this.setCurrentUser(me);
- current_id = me.id;
- }
- }
+ return currentId;
+ },
+ getCurrentUser: function() {
+ if (this.getCurrentId() == null) {
+ return null;
+ }
- return current_id;
- },
- getCurrentUser: function(skipFetch) {
- if (this.getCurrentId(skipFetch) == null) {
- return null;
- }
+ return this._getProfiles()[this.getCurrentId()];
+ },
+ setCurrentUser: function(user) {
+ this.setCurrentId(user.id);
+ this.saveProfile(user);
+ },
+ getLastEmail: function() {
+ return BrowserStore.getItem('last_email', '');
+ },
+ setLastEmail: function(email) {
+ BrowserStore.setItem('last_email', email);
+ },
+ removeCurrentUser: function() {
+ this.setCurrentId(null);
+ },
+ hasProfile: function(userId) {
+ return this._getProfiles()[userId] != null;
+ },
+ getProfile: function(userId) {
+ return this._getProfiles()[userId];
+ },
+ getProfileByUsername: function(username) {
+ return this._getProfilesUsernameMap()[username];
+ },
+ getProfilesUsernameMap: function() {
+ return this._getProfilesUsernameMap();
+ },
+ getProfiles: function() {
- return this._getProfiles()[this.getCurrentId()];
- },
- setCurrentUser: function(user) {
- this.setCurrentId(user.id);
- this.saveProfile(user);
- },
- getLastEmail: function() {
- return BrowserStore.getItem("last_email", '');
- },
- setLastEmail: function(email) {
- BrowserStore.setItem("last_email", email);
- },
- removeCurrentUser: function() {
- this.setCurrentId(null);
- },
- hasProfile: function(userId) {
- return this._getProfiles()[userId] != null;
- },
- getProfile: function(userId) {
- return this._getProfiles()[userId];
- },
- getProfileByUsername: function(username) {
- return this._getProfilesUsernameMap()[username];
- },
- getProfilesUsernameMap: function() {
- return this._getProfilesUsernameMap();
- },
- getProfiles: function() {
+ return this._getProfiles();
+ },
+ getActiveOnlyProfiles: function() {
+ var active = {};
+ var current = this._getProfiles();
- return this._getProfiles();
- },
- getActiveOnlyProfiles: function() {
- active = {};
- current = this._getProfiles();
+ for (var key in current) {
+ if (current[key].delete_at === 0) {
+ active[key] = current[key];
+ }
+ }
- for (var key in current) {
- if (current[key].delete_at == 0) {
- active[key] = current[key];
- }
- }
+ return active;
+ },
+ saveProfile: function(profile) {
+ var ps = this._getProfiles();
+ ps[profile.id] = profile;
+ this._storeProfiles(ps);
+ },
+ _storeProfiles: function(profiles) {
+ BrowserStore.setItem('profiles', profiles);
+ var profileUsernameMap = {};
+ for (var id in profiles) {
+ profileUsernameMap[profiles[id].username] = profiles[id];
+ }
+ BrowserStore.setItem('profileUsernameMap', profileUsernameMap);
+ },
+ _getProfiles: function() {
+ return BrowserStore.getItem('profiles', {});
+ },
+ _getProfilesUsernameMap: function() {
+ return BrowserStore.getItem('profileUsernameMap', {});
+ },
+ setSessions: function(sessions) {
+ BrowserStore.setItem('sessions', sessions);
+ },
+ getSessions: function() {
+ return BrowserStore.getItem('sessions', {loading: true});
+ },
+ setAudits: function(audits) {
+ BrowserStore.setItem('audits', audits);
+ },
+ getAudits: function() {
+ return BrowserStore.getItem('audits', {loading: true});
+ },
+ setTeams: function(teams) {
+ BrowserStore.setItem('teams', teams);
+ },
+ getTeams: function() {
+ return BrowserStore.getItem('teams', []);
+ },
+ getCurrentMentionKeys: function() {
+ var user = this.getCurrentUser();
- return active;
- },
- saveProfile: function(profile) {
- var ps = this._getProfiles();
- ps[profile.id] = profile;
- this._storeProfiles(ps);
- },
- _storeProfiles: function(profiles) {
- BrowserStore.setItem("profiles", profiles);
- var profileUsernameMap = {};
- for (var id in profiles) {
- profileUsernameMap[profiles[id].username] = profiles[id];
- }
- BrowserStore.setItem("profileUsernameMap", profileUsernameMap);
- },
- _getProfiles: function() {
- return BrowserStore.getItem("profiles", {});
- },
- _getProfilesUsernameMap: function() {
- return BrowserStore.getItem("profileUsernameMap", {});
- },
- setSessions: function(sessions) {
- BrowserStore.setItem("sessions", sessions);
- },
- getSessions: function() {
- return BrowserStore.getItem("sessions", {loading: true});
- },
- setAudits: function(audits) {
- BrowserStore.setItem("audits", audits);
- },
- getAudits: function() {
- return BrowserStore.getItem("audits", {loading: true});
- },
- setTeams: function(teams) {
- BrowserStore.setItem("teams", teams);
- },
- getTeams: function() {
- return BrowserStore.getItem("teams", []);
- },
- getCurrentMentionKeys: function() {
- var user = this.getCurrentUser();
+ var keys = [];
- var keys = [];
+ if (!user || !user.notify_props) {
+ return keys;
+ }
- if (!user)
- return keys;
+ if (user.notify_props.mention_keys) {
+ keys = keys.concat(user.notify_props.mention_keys.split(','));
+ }
- if (user.notify_props && user.notify_props.mention_keys) keys = keys.concat(user.notify_props.mention_keys.split(','));
- if (user.first_name && user.notify_props.first_name === "true") keys.push(user.first_name);
- if (user.notify_props.all === "true") keys.push('@all');
- if (user.notify_props.channel === "true") keys.push('@channel');
+ if (user.notify_props.first_name === 'true' && user.first_name) {
+ keys.push(user.first_name);
+ }
- return keys;
- },
- getLastVersion: function() {
- return BrowserStore.getItem("last_version", '');
- },
- setLastVersion: function(version) {
- BrowserStore.setItem("last_version", version);
- },
- setStatuses: function(statuses) {
- this._setStatuses(statuses);
- this.emitStatusesChange();
- },
- _setStatuses: function(statuses) {
- BrowserStore.setItem("statuses", statuses);
- },
- setStatus: function(user_id, status) {
- var statuses = this.getStatuses();
- statuses[user_id] = status;
- this._setStatuses(statuses);
- this.emitStatusesChange();
- },
- getStatuses: function() {
- return BrowserStore.getItem("statuses", {});
- },
- getStatus: function(id) {
- return this.getStatuses()[id];
- }
+ if (user.notify_props.all === 'true') {
+ keys.push('@all');
+ }
+
+ if (user.notify_props.channel === 'true') {
+ keys.push('@channel');
+ }
+
+ return keys;
+ },
+ getLastVersion: function() {
+ return BrowserStore.getItem('last_version', '');
+ },
+ setLastVersion: function(version) {
+ BrowserStore.setItem('last_version', version);
+ },
+ setStatuses: function(statuses) {
+ this._setStatuses(statuses);
+ this.emitStatusesChange();
+ },
+ _setStatuses: function(statuses) {
+ BrowserStore.setItem('statuses', statuses);
+ },
+ setStatus: function(userId, status) {
+ var statuses = this.getStatuses();
+ statuses[userId] = status;
+ this._setStatuses(statuses);
+ this.emitStatusesChange();
+ },
+ getStatuses: function() {
+ return BrowserStore.getItem('statuses', {});
+ },
+ getStatus: function(id) {
+ return this.getStatuses()[id];
+ }
});
UserStore.dispatchToken = AppDispatcher.register(function(payload) {
- var action = payload.action;
+ var action = payload.action;
- switch(action.type) {
- case ActionTypes.RECIEVED_PROFILES:
- for(var id in action.profiles) {
- // profiles can have incomplete data, so don't overwrite current user
- if (id === UserStore.getCurrentId()) continue;
- var profile = action.profiles[id];
- UserStore.saveProfile(profile);
- UserStore.emitChange(profile.id);
- }
- break;
- case ActionTypes.RECIEVED_ME:
- UserStore.setCurrentUser(action.me);
- UserStore.emitChange(action.me.id);
- break;
- case ActionTypes.RECIEVED_SESSIONS:
- UserStore.setSessions(action.sessions);
- UserStore.emitSessionsChange();
- break;
- case ActionTypes.RECIEVED_AUDITS:
- UserStore.setAudits(action.audits);
- UserStore.emitAuditsChange();
- break;
- case ActionTypes.RECIEVED_TEAMS:
- UserStore.setTeams(action.teams);
- UserStore.emitTeamsChange();
- break;
- case ActionTypes.RECIEVED_STATUSES:
- UserStore._setStatuses(action.statuses);
- UserStore.emitStatusesChange();
- break;
+ switch (action.type) {
+ case ActionTypes.RECIEVED_PROFILES:
+ for (var id in action.profiles) {
+ // profiles can have incomplete data, so don't overwrite current user
+ if (id === UserStore.getCurrentId()) {
+ continue;
+ }
+ var profile = action.profiles[id];
+ UserStore.saveProfile(profile);
+ UserStore.emitChange(profile.id);
+ }
+ break;
+ case ActionTypes.RECIEVED_ME:
+ UserStore.setCurrentUser(action.me);
+ UserStore.emitChange(action.me.id);
+ break;
+ case ActionTypes.RECIEVED_SESSIONS:
+ UserStore.setSessions(action.sessions);
+ UserStore.emitSessionsChange();
+ break;
+ case ActionTypes.RECIEVED_AUDITS:
+ UserStore.setAudits(action.audits);
+ UserStore.emitAuditsChange();
+ break;
+ case ActionTypes.RECIEVED_TEAMS:
+ UserStore.setTeams(action.teams);
+ UserStore.emitTeamsChange();
+ break;
+ case ActionTypes.RECIEVED_STATUSES:
+ UserStore._setStatuses(action.statuses);
+ UserStore.emitStatusesChange();
+ break;
- default:
- }
+ default:
+ }
});
UserStore.setMaxListeners(0);
diff --git a/web/react/utils/async_client.jsx b/web/react/utils/async_client.jsx
index dc4fc1096..f35b0f6cc 100644
--- a/web/react/utils/async_client.jsx
+++ b/web/react/utils/async_client.jsx
@@ -322,7 +322,7 @@ module.exports.getMe = function() {
if (isCallInProgress("getMe")) return;
callTracker["getMe"] = utils.getTimestamp();
- client.getMeSynchronous(
+ client.getMe(
function(data, textStatus, xhr) {
callTracker["getMe"] = 0;
diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx
index d979515ef..6a1f7c820 100644
--- a/web/react/utils/client.jsx
+++ b/web/react/utils/client.jsx
@@ -279,32 +279,24 @@ module.exports.getAudits = function(userId, success, error) {
});
};
-module.exports.getMeSynchronous = function(success, error) {
-
- var current_user = null;
+module.exports.getMe = function(success, error) {
$.ajax({
- async: false,
url: "/api/v1/users/me",
dataType: 'json',
contentType: 'application/json',
type: 'GET',
- success: function(data, textStatus, xhr) {
- current_user = data;
- if (success) success(data, textStatus, xhr);
- },
+ success: success,
error: function(xhr, status, err) {
var ieChecker = window.navigator.userAgent; // This and the condition below is used to check specifically for browsers IE10 & 11 to suppress a 200 'OK' error from appearing on login
if (xhr.status != 200 || !(ieChecker.indexOf("Trident/7.0") > 0 || ieChecker.indexOf("Trident/6.0") > 0)) {
if (error) {
- e = handleError("getMeSynchronous", xhr, status, err);
+ e = handleError("getMe", xhr, status, err);
error(e);
};
};
}
});
-
- return current_user;
};
module.exports.inviteMembers = function(data, success, error) {
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-09-20 13:46:02 +0000