diff options
Diffstat (limited to 'webapp')
-rw-r--r-- | webapp/components/create_comment.jsx | 7 | ||||
-rw-r--r-- | webapp/components/create_post.jsx | 3 | ||||
-rw-r--r-- | webapp/components/file_preview.jsx | 5 | ||||
-rw-r--r-- | webapp/components/file_upload.jsx | 19 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 9 |
5 files changed, 40 insertions, 3 deletions
diff --git a/webapp/components/create_comment.jsx b/webapp/components/create_comment.jsx index 0e9d2a41a..d9d66c8fa 100644 --- a/webapp/components/create_comment.jsx +++ b/webapp/components/create_comment.jsx @@ -331,6 +331,9 @@ export default class CreateComment extends React.Component { draft.fileInfos = draft.fileInfos.concat(fileInfos); PostStore.storeCommentDraft(this.props.rootId, draft); + // Focus on preview if needed + this.refs.preview.refs.container.scrollIntoViewIfNeeded(); + this.setState({uploadsInProgress: draft.uploadsInProgress, fileInfos: draft.fileInfos}); } @@ -355,6 +358,9 @@ export default class CreateComment extends React.Component { const fileInfos = this.state.fileInfos; const uploadsInProgress = this.state.uploadsInProgress; + // Clear previous errors + this.handleUploadError(null); + // id can either be the id of an uploaded file or the client id of an in progress upload let index = fileInfos.findIndex((info) => info.id === id); if (index === -1) { @@ -432,6 +438,7 @@ export default class CreateComment extends React.Component { fileInfos={this.state.fileInfos} onRemove={this.removePreview} uploadsInProgress={this.state.uploadsInProgress} + ref='preview' /> ); } diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx index e1b2ca059..9269633ff 100644 --- a/webapp/components/create_post.jsx +++ b/webapp/components/create_post.jsx @@ -297,6 +297,9 @@ export default class CreatePost extends React.Component { const fileInfos = Object.assign([], this.state.fileInfos); const uploadsInProgress = this.state.uploadsInProgress; + // Clear previous errors + this.handleUploadError(null); + // id can either be the id of an uploaded file or the client id of an in progress upload let index = fileInfos.findIndex((info) => info.id === id); if (index === -1) { diff --git a/webapp/components/file_preview.jsx b/webapp/components/file_preview.jsx index 53cec7f7b..624bfaf44 100644 --- a/webapp/components/file_preview.jsx +++ b/webapp/components/file_preview.jsx @@ -84,7 +84,10 @@ export default class FilePreview extends React.Component { }); return ( - <div className='file-preview__container'> + <div + className='file-preview__container' + ref='container' + > {previews} </div> ); diff --git a/webapp/components/file_upload.jsx b/webapp/components/file_upload.jsx index 9eff25ab5..36beb8c91 100644 --- a/webapp/components/file_upload.jsx +++ b/webapp/components/file_upload.jsx @@ -47,6 +47,7 @@ class FileUpload extends React.Component { this.cancelUpload = this.cancelUpload.bind(this); this.pasteUpload = this.pasteUpload.bind(this); this.keyUpload = this.keyUpload.bind(this); + this.handleMaxUploadReached = this.handleMaxUploadReached.bind(this); this.state = { requests: {} @@ -309,6 +310,16 @@ class FileUpload extends React.Component { } } + handleMaxUploadReached(e) { + e.preventDefault(); + + const {formatMessage} = this.props.intl; + + this.props.onUploadError(formatMessage(holders.limited, {count: Constants.MAX_UPLOAD_FILES})); + + return false; + } + render() { let multiple = true; if (UserAgent.isMobileApp()) { @@ -322,10 +333,14 @@ class FileUpload extends React.Component { accept = 'image/*'; } + const channelId = this.props.channelId || ChannelStore.getCurrentId(); + + const uploadsRemaining = Constants.MAX_UPLOAD_FILES - this.props.getFileCount(channelId); + return ( <span ref='input' - className='btn btn-file' + className={'btn btn-file' + (uploadsRemaining <= 0 ? ' btn-file__disabled' : '')} > <span className='icon' @@ -335,7 +350,7 @@ class FileUpload extends React.Component { ref='fileInput' type='file' onChange={this.handleChange} - onClick={this.props.onClick} + onClick={uploadsRemaining > 0 ? this.props.onClick : this.handleMaxUploadReached} multiple={multiple} accept={accept} /> diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index a04865bd8..9448ad767 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -437,6 +437,15 @@ @include opacity(.9); box-shadow: none; } + + &.btn-file__disabled { + @include opacity(.1); + + &:hover, + &:active { + @include opacity(.1); + } + } } textarea { |