diff options
Diffstat (limited to 'web')
19 files changed, 178 insertions, 79 deletions
diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx index 90a776791..0254d0e82 100644 --- a/web/react/components/channel_header.jsx +++ b/web/react/components/channel_header.jsx @@ -105,7 +105,7 @@ module.exports = React.createClass({ if (!utils.areStatesEqual(newState, this.state)) { this.setState(newState); } - $('.channel-header__info .description').popover({placement: 'bottom', trigger: 'hover', html: true, delay: {show: 500, hide: 500}}); + $('.channel-header__info .description').popover({placement: 'bottom', trigger: 'hover click', html: true, delay: {show: 500, hide: 500}}); }, onSocketChange: function(msg) { if (msg.action === 'new_user') { diff --git a/web/react/components/channel_info_modal.jsx b/web/react/components/channel_info_modal.jsx index 18addb52f..6d999870a 100644 --- a/web/react/components/channel_info_modal.jsx +++ b/web/react/components/channel_info_modal.jsx @@ -32,7 +32,7 @@ module.exports = React.createClass({ <div className="modal-content"> <div className="modal-header"> <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> - <h4 className="modal-title" id="myModalLabel">{channel.display_name}</h4> + <h4 className="modal-title" id="myModalLabel"><span className="name">{channel.display_name}</span></h4> </div> <div className="modal-body"> <div className="row form-group"> diff --git a/web/react/components/channel_invite_modal.jsx b/web/react/components/channel_invite_modal.jsx index d90522e8c..e446167ec 100644 --- a/web/react/components/channel_invite_modal.jsx +++ b/web/react/components/channel_invite_modal.jsx @@ -138,7 +138,7 @@ export default class ChannelInviteModal extends React.Component { <div className='modal-content'> <div className='modal-header'> <button type='button' className='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button> - <h4 className='modal-title'>Add New Members to {this.state.channelName}</h4> + <h4 className='modal-title'>Add New Members to <span className='name'>{this.state.channel_name}</span></h4> </div> <div className='modal-body'> {inviteError} diff --git a/web/react/components/channel_members.jsx b/web/react/components/channel_members.jsx index cfb8ed41c..db4bec400 100644 --- a/web/react/components/channel_members.jsx +++ b/web/react/components/channel_members.jsx @@ -126,7 +126,7 @@ module.exports = React.createClass({ <div className="modal-content"> <div className="modal-header"> <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> - <h4 className="modal-title">{this.state.channel_name + " Members"}</h4> + <h4 className="modal-title"><span className="name">{this.state.channel_name}</span> Members</h4> <a className="btn btn-md btn-primary" data-toggle="modal" data-target="#channel_invite"><i className="glyphicon glyphicon-envelope"/> Add New Members</a> </div> <div ref="modalBody" className="modal-body"> diff --git a/web/react/components/channel_notifications.jsx b/web/react/components/channel_notifications.jsx index cd477feb7..884bad9d2 100644 --- a/web/react/components/channel_notifications.jsx +++ b/web/react/components/channel_notifications.jsx @@ -300,7 +300,7 @@ export default class ChannelNotifications extends React.Component { <span aria-hidden='true'>×</span> <span className='sr-only'>Close</span> </button> - <h4 className='modal-title'>{'Notification Preferences for ' + this.state.title}</h4> + <h4 className='modal-title'>Notification Preferences for <span className='name'>{this.state.title}</span></h4> </div> <div className='modal-body'> <div className='settings-table'> diff --git a/web/react/components/edit_channel_modal.jsx b/web/react/components/edit_channel_modal.jsx index dcff5b89d..1a633b193 100644 --- a/web/react/components/edit_channel_modal.jsx +++ b/web/react/components/edit_channel_modal.jsx @@ -56,7 +56,7 @@ module.exports = React.createClass({ <div className="modal-content"> <div className="modal-header"> <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> - <h4 className="modal-title" ref="title">Edit {this.state.title} Description</h4> + <h4 className="modal-title" ref="title">Edit Description for {this.state.title}</h4> </div> <div className="modal-body"> <textarea className="form-control no-resize" rows="6" ref="channelDesc" maxLength="1024" value={this.state.description} onChange={this.handleUserInput}></textarea> diff --git a/web/react/components/find_team.jsx b/web/react/components/find_team.jsx index 91a842ffc..d896a1f12 100644 --- a/web/react/components/find_team.jsx +++ b/web/react/components/find_team.jsx @@ -47,7 +47,7 @@ module.exports = React.createClass({ return ( <div> <h4>{"Find Your " + utils.toTitleCase(strings.Team)}</h4> - <p>{"An email was sent with links to any " + strings.TeamPlural}</p> + <p>{"An email was sent with links to any " + strings.TeamPlural + " to which you are a member."}</p> </div> ); } @@ -56,7 +56,7 @@ module.exports = React.createClass({ <div> <h4>Find Your Team</h4> <form onSubmit={this.handleSubmit}> - <p>{"We'll send you an email with links to your " + strings.TeamPlural + "."}</p> + <p>{"Get an email with links to any " + strings.TeamPlural + " to which you are a member."}</p> <div className="form-group"> <label className='control-label'>Email</label> <div className={ email_error ? "form-group has-error" : "form-group" }> diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx index 5261ed6a7..2b2c8b68d 100644 --- a/web/react/components/more_channels.jsx +++ b/web/react/components/more_channels.jsx @@ -14,11 +14,21 @@ function getStateFromStores() { }; } -module.exports = React.createClass({ - displayName: 'MoreChannelsModal', +export default class MoreChannels extends React.Component { + constructor(props) { + super(props); - componentDidMount: function() { - ChannelStore.addMoreChangeListener(this._onChange); + this.onListenerChange = this.onListenerChange.bind(this); + this.handleJoin = this.handleJoin.bind(this); + this.handleNewChannel = this.handleNewChannel.bind(this); + + var initState = getStateFromStores(); + initState.channelType = ''; + initState.joiningChannel = -1; + this.state = initState; + } + componentDidMount() { + ChannelStore.addMoreChangeListener(this.onListenerChange); $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function shown() { asyncClient.getMoreChannels(true); }); @@ -28,43 +38,42 @@ module.exports = React.createClass({ var button = e.relatedTarget; self.setState({channelType: $(button).attr('data-channeltype')}); }); - }, - componentWillUnmount: function() { - ChannelStore.removeMoreChangeListener(this._onChange); - }, - _onChange: function() { + } + componentWillUnmount() { + ChannelStore.removeMoreChangeListener(this.onListenerChange); + } + onListenerChange() { var newState = getStateFromStores(); if (!utils.areStatesEqual(newState.channels, this.state.channels)) { this.setState(newState); } - }, - getInitialState: function() { - var initState = getStateFromStores(); - initState.channelType = ''; - return initState; - }, - handleJoin: function(id) { - client.joinChannel(id, - function() { + } + handleJoin(channel, channelIndex) { + this.setState({joiningChannel: channelIndex}); + client.joinChannel(channel.id, + function joinSuccess() { $(this.refs.modal.getDOMNode()).modal('hide'); - asyncClient.getChannel(id); + asyncClient.getChannel(channel.id); + utils.switchChannel(channel); + this.setState({joiningChannel: -1}); }.bind(this), - function(err) { + function joinFail(err) { + this.setState({joiningChannel: -1}); this.state.serverError = err.message; this.setState(this.state); }.bind(this) ); - }, - handleNewChannel: function() { + } + handleNewChannel() { $(this.refs.modal.getDOMNode()).modal('hide'); - }, - render: function() { + } + render() { var serverError; if (this.state.serverError) { serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>; } - var outter = this; + var self = this; var moreChannels; if (this.state.channels != null) { @@ -74,14 +83,29 @@ module.exports = React.createClass({ moreChannels = ( <table className='more-channel-table table'> <tbody> - {channels.map(function cMap(channel) { + {channels.map(function cMap(channel, index) { + var joinButton; + if (self.state.joiningChannel === index) { + joinButton = (<img + className='join-channel-loading-gif' + src='/static/images/load.gif' + />); + } else { + joinButton = (<button + onClick={self.handleJoin.bind(self, channel, index)} + className='btn btn-primary'>Join + </button>); + } + return ( <tr key={channel.id}> <td> <p className='more-channel-name'>{channel.display_name}</p> <p className='more-channel-description'>{channel.description}</p> </td> - <td className='td--action'><button onClick={outter.handleJoin.bind(outter, channel.id)} className='btn btn-primary'>Join</button></td> + <td className='td--action'> + {joinButton} + </td> </tr> ); })} @@ -102,23 +126,47 @@ module.exports = React.createClass({ } return ( - <div className='modal fade' id='more_channels' ref='modal' tabIndex='-1' role='dialog' aria-hidden='true'> + <div + className='modal fade' + id='more_channels' + ref='modal' + tabIndex='-1' + role='dialog' + aria-hidden='true' + > <div className='modal-dialog'> <div className='modal-content'> <div className='modal-header'> - <button type='button' className='close' data-dismiss='modal'> + <button + type='button' + className='close' + data-dismiss='modal' + > <span aria-hidden='true'>×</span> <span className='sr-only'>Close</span> </button> <h4 className='modal-title'>More Channels</h4> - <button data-toggle='modal' data-target='#new_channel' data-channeltype={this.state.channelType} type='button' className='btn btn-primary channel-create-btn' onClick={this.handleNewChannel}>Create New Channel</button> + <button + data-toggle='modal' + data-target='#new_channel' + data-channeltype={this.state.channelType} + type='button' + className='btn btn-primary channel-create-btn' + onClick={this.handleNewChannel}>Create New Channel + </button> </div> <div className='modal-body'> {moreChannels} {serverError} </div> <div className='modal-footer'> - <button type='button' className='btn btn-default' data-dismiss='modal'>Close</button> + <button + type='button' + className='btn btn-default' + data-dismiss='modal' + > + Close + </button> </div> </div> </div> @@ -126,4 +174,4 @@ module.exports = React.createClass({ ); } -}); +} diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx index 3e0a66e92..06c373e5d 100644 --- a/web/react/components/navbar.jsx +++ b/web/react/components/navbar.jsx @@ -152,6 +152,8 @@ module.exports = React.createClass({ var channelMenuDropdown = null; if (channel) { + var viewInfoOption = <li role='presentation'><a role='menuitem' data-toggle='modal' data-target='#channel_info' data-channelid={channel.id} href='#'>View Info</a></li> + var addMembersOption = null; if (!isDirect && !ChannelStore.isDefault(channel)) { addMembersOption = <li role='presentation'><a role='menuitem' data-toggle='modal' data-target='#channel_invite' href='#'>Add Members</a></li>; @@ -192,6 +194,7 @@ module.exports = React.createClass({ <span className='glyphicon glyphicon-chevron-down header-dropdown__icon'></span> </a> <ul className='dropdown-menu' role='menu' aria-labelledby='channel_header_dropdown'> + {viewInfoOption} {addMembersOption} {manageMembersOption} {setChannelDescriptionOption} diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 8b60f0251..7748f5c2a 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -75,6 +75,7 @@ module.exports = React.createClass({ utils.changeCss('.mention-link', 'color: ' + user.props.theme + ';'); utils.changeCss('@media(max-width: 768px){.search-bar__container', 'background: ' + user.props.theme + ';}'); utils.changeCss('.search-item-container:hover', 'background: ' + utils.changeOpacity(user.props.theme, 0.05) + ';'); + utils.changeCss('.nav-pills__unread-indicator', 'background: ' + utils.changeOpacity(user.props.theme, 0.05) + ';'); } if (user.props.theme !== '#000000' && user.props.theme !== '#585858') { @@ -377,8 +378,8 @@ module.exports = React.createClass({ <strong><UserProfile userId={teammate.id} /></strong> </div> <p className='channel-intro-text'> - {'This is the start of your private message history with ' + teammateName + '.'}<br/> - {'Private messages and files shared here are not shown to people outside this area.'} + This is the start of your private message history with <strong>{teammateName}</strong>.<br/> + Private messages and files shared here are not shown to people outside this area. </p> <a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className='fa fa-pencil'></i>Set a description</a> </div> @@ -416,9 +417,9 @@ module.exports = React.createClass({ <div className='channel-intro'> <h4 className='channel-intro__title'>Beginning of {uiName}</h4> <p className='channel-intro__content'> - Welcome to {uiName}! + Welcome to <strong>{uiName}</strong>! <br/><br/> - {'This is the first channel ' + strings.Team + 'mates see when they'} + This is the first channel {strings.Team}mates see when they <br/> sign up - use it for posting updates everyone needs to know. <br/><br/> @@ -434,7 +435,7 @@ module.exports = React.createClass({ <div className='channel-intro'> <h4 className='channel-intro__title'>Beginning of {uiName}</h4> <p className='channel-intro__content'> - {'This is the start of ' + uiName + ', a channel for non-work-related conversations.'} + This is the start of <strong>{uiName}</strong>, a channel for non-work-related conversations. <br/> </p> <a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={uiName} data-channelid={channel.id}><i className='fa fa-pencil'></i>Set a description</a> @@ -453,7 +454,7 @@ module.exports = React.createClass({ var createMessage; if (creatorName !== '') { - createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created by ' + creatorName + ' on ' + utils.displayDate(channel.create_at) + '.'; + createMessage = (<span>This is the start of the <strong>{uiName}</strong> {uiType}, created by <strong>{creatorName}</strong> on <strong>{utils.displayDate(channel.create_at)}</strong></span>); } else { createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created on ' + utils.displayDate(channel.create_at) + '.'; } diff --git a/web/react/components/removed_from_channel_modal.jsx b/web/react/components/removed_from_channel_modal.jsx index a8889a92a..4a49e1c98 100644 --- a/web/react/components/removed_from_channel_modal.jsx +++ b/web/react/components/removed_from_channel_modal.jsx @@ -20,7 +20,7 @@ module.exports = React.createClass({ var townSquare = ChannelStore.getByName("town-square"); utils.switchChannel(townSquare); - this.setState({channelName: "", remover: ""}) + this.setState({channelName: "", remover: ""}); }, componentDidMount: function() { $(this.getDOMNode()).on('show.bs.modal',this.handleShow); @@ -40,18 +40,18 @@ module.exports = React.createClass({ if (currentUser != null) { return ( - <div className="modal fade" ref="modal" id="removed_from_channel" tabIndex="-1" role="dialog" aria-hidden="true"> - <div className="modal-dialog"> - <div className="modal-content"> - <div className="modal-header"> - <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> - <h4 className="modal-title">Removed from {channelName}</h4> + <div className='modal fade' ref='modal' id='removed_from_channel' tabIndex='-1' role='dialog' aria-hidden='true'> + <div className='modal-dialog'> + <div className='modal-content'> + <div className='modal-header'> + <button type='button' className='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button> + <h4 className='modal-title'>Removed from <span className='name'>{channelName}</span></h4> </div> - <div className="modal-body"> + <div className='modal-body'> <p>{remover} removed you from {channelName}</p> </div> - <div className="modal-footer"> - <button type="button" className="btn btn-primary" data-dismiss="modal">Okay</button> + <div className='modal-footer'> + <button type='button' className='btn btn-primary' data-dismiss='modal'>Okay</button> </div> </div> </div> diff --git a/web/react/components/setting_upload.jsx b/web/react/components/setting_upload.jsx index 870710850..83b6d85fc 100644 --- a/web/react/components/setting_upload.jsx +++ b/web/react/components/setting_upload.jsx @@ -67,7 +67,7 @@ module.exports = React.createClass({ <li className='setting-list-item'> {serverError} {clientError} - <span className='btn btn-sm btn-primary btn-file sel-btn'>SelectFile<input ref='uploadinput' accept={this.props.fileTypesAccepted} type='file' onChange={this.onFileSelect}/></span> + <span className='btn btn-sm btn-primary btn-file sel-btn'>Select File<input ref='uploadinput' accept={this.props.fileTypesAccepted} type='file' onChange={this.onFileSelect}/></span> <a className={'btn btn-sm btn-primary'} onClick={this.doSubmit}>Import</a> <a className='btn btn-sm theme' href='#' onClick={this.doCancel}>Cancel</a> </li> diff --git a/web/react/components/team_import_tab.jsx b/web/react/components/team_import_tab.jsx index 131add999..ae7f875cb 100644 --- a/web/react/components/team_import_tab.jsx +++ b/web/react/components/team_import_tab.jsx @@ -39,12 +39,12 @@ module.exports = React.createClass({ break; case 'done': messageSection = ( - <p>Import sucessfull: <a href={this.state.link} download='MattermostImportSummery.txt'>View Summery</a></p> + <p>Import sucessfull: <a href={this.state.link} download='MattermostImportSummary.txt'>View Summary</a></p> ); break; case 'fail': messageSection = ( - <p>Import failure: <a href={this.state.link} download='MattermostImportSummery.txt'>View Summery</a></p> + <p>Import failure: <a href={this.state.link} download='MattermostImportSummary.txt'>View Summary</a></p> ); break; } diff --git a/web/react/components/user_settings_security.jsx b/web/react/components/user_settings_security.jsx index 568d3fe99..39d707d90 100644 --- a/web/react/components/user_settings_security.jsx +++ b/web/react/components/user_settings_security.jsx @@ -62,11 +62,9 @@ module.exports = React.createClass({ this.setState({confirmPassword: e.target.value}); }, handleHistoryOpen: function() { - this.setState({willReturn: true}); $("#user_settings").modal('hide'); }, handleDevicesOpen: function() { - this.setState({willReturn: true}); $("#user_settings").modal('hide'); }, handleClose: function() { @@ -75,11 +73,7 @@ module.exports = React.createClass({ }); this.setState({currentPassword: '', newPassword: '', confirmPassword: '', serverError: null, passwordError: null}); - if (!this.state.willReturn) { - this.props.updateTab('general'); - } else { - this.setState({willReturn: false}); - } + this.props.updateTab('general'); }, componentDidMount: function() { $('#user_settings').on('hidden.bs.modal', this.handleClose); @@ -89,7 +83,7 @@ module.exports = React.createClass({ this.props.updateSection(''); }, getInitialState: function() { - return {currentPassword: '', newPassword: '', confirmPassword: '', willReturn: false}; + return {currentPassword: '', newPassword: '', confirmPassword: ''}; }, render: function() { var serverError = this.state.serverError ? this.state.serverError : null; diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index 2b7f64030..6077c4ebc 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -109,6 +109,26 @@ module.exports = React.createClass({ } ); + if (this.refs.previewArrowLeft) { + $(this.refs.previewArrowLeft.getDOMNode()).hover( + function onModalHover() { + $(self.refs.imageFooter.getDOMNode()).addClass('footer--show'); + }, function offModalHover() { + $(self.refs.imageFooter.getDOMNode()).removeClass('footer--show'); + } + ); + } + + if (this.refs.previewArrowRight) { + $(this.refs.previewArrowRight.getDOMNode()).hover( + function onModalHover() { + $(self.refs.imageFooter.getDOMNode()).addClass('footer--show'); + }, function offModalHover() { + $(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 @@ -252,13 +272,21 @@ module.exports = React.createClass({ var rightArrow = ''; if (this.props.filenames.length > 1) { leftArrow = ( - <a className='modal-prev-bar' href='#' onClick={this.handlePrev}> + <a + ref='previewArrowLeft' + 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}> + <a + ref='previewArrowRight' + className='modal-next-bar' + href='#' + onClick={this.handleNext}> <i className='image-control image-next'/> </a> ); diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss index da648a170..571c7ff1f 100644 --- a/web/sass-files/sass/partials/_headers.scss +++ b/web/sass-files/sass/partials/_headers.scss @@ -65,6 +65,9 @@ } .channel-intro-img { float:left; + img { + @include border-radius(100px); + } } .channel-intro__title { font-weight:600; diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index 014f834ed..dec08b567 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -50,6 +50,13 @@ @include clearfix; .modal-title { float: left; + font-size: 17px; + line-height: 27px; + color: #f4f4f4; + .name { + font-weight: 600; + color: #fff; + } } .modal-action { padding: 0; diff --git a/web/sass-files/sass/partials/_popover.scss b/web/sass-files/sass/partials/_popover.scss index 5008331b4..126d239ec 100644 --- a/web/sass-files/sass/partials/_popover.scss +++ b/web/sass-files/sass/partials/_popover.scss @@ -1,3 +1,8 @@ +.channel-header__info .popover-content { + max-height: 250px; + overflow: auto; +} + .user-popover { cursor: pointer; display: inline-block; @@ -13,4 +18,5 @@ overflow: hidden; text-overflow: ellipsis; display: block; -}
\ No newline at end of file +} + diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss index 6d9f2ad8b..6b827eaee 100644 --- a/web/sass-files/sass/partials/_sidebar--left.scss +++ b/web/sass-files/sass/partials/_sidebar--left.scss @@ -38,24 +38,25 @@ height: 100%; position: relative; overflow: auto; - } .nav-pills__unread-indicator { position: absolute; left: 0; right: 0; - width: 70%; - background-color: darken($primary-color, 5%); - color: white; + width: 72%; + color: #777; + background: #DCF0FF; + @include border-radius(50px); margin: 0 auto; - padding: 2px; + padding: 3px 0 4px; + font-size: 13.5px; text-align: center; z-index: 1; } .nav-pills__unread-indicator-top { - top: 56px; + top: 66px; } .nav-pills__unread-indicator-bottom { bottom: 0px; @@ -124,7 +125,15 @@ } .channel-loading-gif { - height:15px; - width:15px; - margin-top:2px; + height: 15px; + width: 15px; + margin-top: 2px; +} + +.join-channel-loading-gif { + margin-top: 5px; + margin-left: 10px; + height: 25px; + width: 25px; + } |