From 9bbeef208fe9769618d2de3b69f0eb417eb007f8 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Thu, 6 Aug 2015 20:07:14 -0700 Subject: Added handlers for dragging and dropping files onto the center pane or RHS --- web/react/components/file_upload.jsx | 38 ++++++++++++++++++++++++++++++++++++ web/react/components/post_list.jsx | 6 ++++++ 2 files changed, 44 insertions(+) diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index b90fa4fd3..aaf45c1ef 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -84,7 +84,45 @@ module.exports = React.createClass({ var inputDiv = this.refs.input.getDOMNode(); var self = this; +<<<<<<< HEAD document.addEventListener('paste', function(e) { +======= + $('body').on('dragover', '.app__content', function(e) { + e.preventDefault(); + e.stopPropagation(); + //e.target.style + console.log("HERE!: drag center"); + }); + $('body').on('dragover', '.sidebar--right', function(e) { + e.preventDefault(); + e.stopPropagation(); + //e.target.style + console.log("HERE!: drag right"); + }); + $('body').on('dragenter', '.app__content', function(e) { + e.preventDefault(); + e.stopPropagation(); + //e.target.style + console.log("HERE!: dragenter center"); + }); + $('body').on('dragenter', '.sidebar--right', function(e) { + e.preventDefault(); + e.stopPropagation(); + //e.target.style + console.log("HERE!: dragenter right"); + }); + $('body').on('drop', '.app__content', function(e) { + if (e.originalEvent.dataTransfer) + e.preventDefault(); + console.log("HERE!: drop center"); + }); + $('body').on('drop', '.sidebar--right', function(e) { + e.preventDefault(); + console.log("HERE!: drop right"); + }); + + document.addEventListener("paste", function(e) { +>>>>>>> Added handlers for dragging and dropping files onto the center pane or RHS var textarea = $(inputDiv.parentNode.parentNode).find('.custom-textarea')[0]; if (textarea !== e.target && !$.contains(textarea, e.target)) { diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 83f806b79..5724dbd62 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -125,6 +125,12 @@ module.exports = React.createClass({ } }); + //$('body').on('drop drag') + /*window.document.addEventListener("drop", function(e) { + e.preventDefault(); + var centerPostList = $(inputDiv.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode).find('.post-list')[0]; + console.log("HERE!: " + centerPostList); + });*/ }, componentDidUpdate: function() { this.resize(); -- cgit v1.2.3-1-g7c22 From 1fa436b4f99d482bc2adb926b93d0c0b832d9288 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Fri, 7 Aug 2015 14:24:09 -0700 Subject: Users can now drop files into the center pane or the rhs respectively to upload images and other files --- web/react/components/create_comment.jsx | 4 +- web/react/components/create_post.jsx | 4 +- web/react/components/file_upload.jsx | 104 ++++++++++++++++++++----------- web/react/components/post_list.jsx | 7 --- web/sass-files/sass/partials/_files.scss | 14 ++--- 5 files changed, 79 insertions(+), 54 deletions(-) diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index 78e06c532..c954229ae 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -222,7 +222,9 @@ module.exports = React.createClass({ getFileCount={this.getFileCount} onUploadStart={this.handleUploadStart} onFileUpload={this.handleFileUploadComplete} - onUploadError={this.handleUploadError} /> + onUploadError={this.handleUploadError} + postType='comment' + channelId={this.props.channelId} />
diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 9ca1d5388..137420440 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -262,7 +262,9 @@ module.exports = React.createClass({ getFileCount={this.getFileCount} onUploadStart={this.handleUploadStart} onFileUpload={this.handleFileUploadComplete} - onUploadError={this.handleUploadError} /> + onUploadError={this.handleUploadError} + postType='post' + channelId='' />
{postError} diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index aaf45c1ef..eb461ae9c 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -80,49 +80,77 @@ module.exports = React.createClass({ } } catch(e) {} }, + handleDrop: function(e) { + this.props.onUploadError(null); + + var files = e.originalEvent.dataTransfer.files; + if (files.length) { + var numFiles = files.length; + var numToUpload = this.props.setUploads(numFiles); + + for (var i = 0; i < numFiles && i < numToUpload; i++) { + var file = files[i]; + var channelId = this.props.channelId || ChannelStore.getCurrentId(); + + var formData = new FormData(); + formData.append('channel_id', channelId); + formData.append('files', file, file.name); + + client.uploadFile(formData, + function(data) { + var parsedData = $.parseJSON(data); + this.props.onFileUpload(parsedData.filenames, channelId); + }.bind(this), + function(err) { + this.props.onUploadError(err); + }.bind(this) + ); + } + } + }, componentDidMount: function() { var inputDiv = this.refs.input.getDOMNode(); var self = this; -<<<<<<< HEAD - document.addEventListener('paste', function(e) { -======= - $('body').on('dragover', '.app__content', function(e) { - e.preventDefault(); - e.stopPropagation(); - //e.target.style - console.log("HERE!: drag center"); - }); - $('body').on('dragover', '.sidebar--right', function(e) { - e.preventDefault(); - e.stopPropagation(); - //e.target.style - console.log("HERE!: drag right"); - }); - $('body').on('dragenter', '.app__content', function(e) { - e.preventDefault(); - e.stopPropagation(); - //e.target.style - console.log("HERE!: dragenter center"); - }); - $('body').on('dragenter', '.sidebar--right', function(e) { - e.preventDefault(); - e.stopPropagation(); - //e.target.style - console.log("HERE!: dragenter right"); - }); - $('body').on('drop', '.app__content', function(e) { - if (e.originalEvent.dataTransfer) - e.preventDefault(); - console.log("HERE!: drop center"); - }); - $('body').on('drop', '.sidebar--right', function(e) { - e.preventDefault(); - console.log("HERE!: drop right"); - }); + if (this.props.postType === 'post') { + $('body').on('dragover', '.app__content', function(e) { + e.preventDefault(); + e.stopPropagation(); + }); + $('body').on('dragenter', '.app__content', function(e) { + e.preventDefault(); + e.stopPropagation(); + }); + $('body').on('dragend dragleave', '.app__content', function(e) { + e.preventDefault(); + e.stopPropagation(); + }); + $('body').on('drop', '.app__content', function(e) { + e.preventDefault(); + e.stopPropagation(); + self.handleDrop(e); + }); + } else if (this.props.postType === 'comment') { + $('body').on('dragover', '.sidebar--right', function(e) { + e.preventDefault(); + e.stopPropagation(); + }); + $('body').on('dragenter', '.sidebar--right', function(e) { + e.preventDefault(); + e.stopPropagation(); + }); + $('body').on('dragend dragleave', '.sidebar--right', function(e) { + e.preventDefault(); + e.stopPropagation(); + }); + $('body').on('drop', '.sidebar--right', function(e) { + e.preventDefault(); + e.stopPropagation(); + self.handleDrop(e); + }); + } - document.addEventListener("paste", function(e) { ->>>>>>> Added handlers for dragging and dropping files onto the center pane or RHS + document.addEventListener('paste', function(e) { var textarea = $(inputDiv.parentNode.parentNode).find('.custom-textarea')[0]; if (textarea !== e.target && !$.contains(textarea, e.target)) { diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 5724dbd62..4df78817a 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -124,13 +124,6 @@ module.exports = React.createClass({ $(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--comment'); } }); - - //$('body').on('drop drag') - /*window.document.addEventListener("drop", function(e) { - e.preventDefault(); - var centerPostList = $(inputDiv.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode).find('.post-list')[0]; - console.log("HERE!: " + centerPostList); - });*/ }, componentDidUpdate: function() { this.resize(); diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index 65775f01e..34409d563 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -194,11 +194,11 @@ border-right: 1px solid #ddd; vertical-align: center; - // helper to center the image icon in the preview window - .file-details__preview-helper { - height: 100%; - display: inline-block; - vertical-align: middle; - } - } + // helper to center the image icon in the preview window + .file-details__preview-helper { + height: 100%; + display: inline-block; + vertical-align: middle; } + } +} -- cgit v1.2.3-1-g7c22 From 81d7599f75b11d619f8ee9440394de3f9f86f39f Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Sun, 9 Aug 2015 13:04:24 -0700 Subject: Working on adding overlays for file drag and drop --- web/react/components/file_upload.jsx | 18 +++++------------- web/react/components/post_list.jsx | 11 ++++++++++- web/react/components/post_right.jsx | 11 ++++++++++- web/sass-files/sass/partials/_post.scss | 5 +++++ web/sass-files/sass/partials/_post_right.scss | 6 ++++++ 5 files changed, 36 insertions(+), 15 deletions(-) diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index eb461ae9c..a479883c9 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -113,39 +113,31 @@ module.exports = React.createClass({ var self = this; if (this.props.postType === 'post') { - $('body').on('dragover', '.app__content', function(e) { + $('body').on('dragover', '.post-list__table', function(e) { e.preventDefault(); - e.stopPropagation(); }); - $('body').on('dragenter', '.app__content', function(e) { + $('body').on('dragenter', '.post-list__table', function(e) { e.preventDefault(); - e.stopPropagation(); }); - $('body').on('dragend dragleave', '.app__content', function(e) { + $('body').on('dragleave', '.post-list__table', function(e) { e.preventDefault(); - e.stopPropagation(); }); - $('body').on('drop', '.app__content', function(e) { + $('body').on('drop', '.post-list__table', function(e) { e.preventDefault(); - e.stopPropagation(); self.handleDrop(e); }); } else if (this.props.postType === 'comment') { $('body').on('dragover', '.sidebar--right', function(e) { e.preventDefault(); - e.stopPropagation(); }); $('body').on('dragenter', '.sidebar--right', function(e) { e.preventDefault(); - e.stopPropagation(); }); - $('body').on('dragend dragleave', '.sidebar--right', function(e) { + $('body').on('dragleave', '.sidebar--right', function(e) { e.preventDefault(); - e.stopPropagation(); }); $('body').on('drop', '.sidebar--right', function(e) { e.preventDefault(); - e.stopPropagation(); self.handleDrop(e); }); } diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 4df78817a..cf0c4c663 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -280,6 +280,10 @@ module.exports = React.createClass({ } ); }, + handleDragEnter: function() { + console.log("HERE ENTER"); + this.setState({fileDrag: true}); + }, getInitialState: function() { return getStateFromStores(); }, @@ -461,9 +465,14 @@ module.exports = React.createClass({ postCtls.push(); } + var fileDragOverlay = ''; + if (this.state.fileDrag) { + fileDragOverlay = 'post-list-file-overlay'; + } + return (
-
+
{ more_messages } { postCtls } diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx index ad8b54012..f7f5ed509 100644 --- a/web/react/components/post_right.jsx +++ b/web/react/components/post_right.jsx @@ -243,6 +243,10 @@ module.exports = React.createClass({ this.refs[id].forceUpdate(); } }, + handleDragEnter: function() { + console.log("HERE ENTER RIGHT"); + this.setState({fileDrag: true}); + }, getInitialState: function() { return getStateFromStores(); }, @@ -294,8 +298,13 @@ module.exports = React.createClass({ var currentId = UserStore.getCurrentId(); var searchForm = currentId == null ? null : ; + var fileDragOverlay = ''; + if (this.state.fileDrag) { + fileDragOverlay = 'post-right-file-overlay'; + } + return ( -
+
{searchForm}
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 98b17120d..093e10ee0 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -107,6 +107,11 @@ body.ios { } #post-list { + .post-list-file-overlay { + width: 100%; + height: 100%; + background:rgba(255,255,255,0.5); + } .post-list-holder-by-time { background: #fff; overflow-y: scroll; diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss index 4cf3e32a1..1b98d62f9 100644 --- a/web/sass-files/sass/partials/_post_right.scss +++ b/web/sass-files/sass/partials/_post_right.scss @@ -1,5 +1,11 @@ .post-right__container { + .post-right-file-overlay { + width: 100%; + height: 100%; + background:rgba(255,255,255,0.5); + } + .post-right-root-message { padding: 1em 1em 0; } -- cgit v1.2.3-1-g7c22 From 9baafdb372d92c96a4063f11531f4fb5d9e7059e Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Tue, 11 Aug 2015 09:48:25 -0700 Subject: Changed structure to keep code contained to file_upload.jsx --- web/react/components/file_upload.jsx | 26 ++++++++++++++------------ web/react/components/post_list.jsx | 6 +----- web/react/components/post_right.jsx | 6 +----- web/sass-files/sass/partials/_files.scss | 12 ++++++++++++ web/sass-files/sass/partials/_post_right.scss | 6 ------ 5 files changed, 28 insertions(+), 28 deletions(-) diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index a479883c9..e082abcd2 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -113,31 +113,33 @@ module.exports = React.createClass({ var self = this; if (this.props.postType === 'post') { - $('body').on('dragover', '.post-list__table', function(e) { + $('body').on('dragover dragleave', '.app__content', function(e) { e.preventDefault(); }); - $('body').on('dragenter', '.post-list__table', function(e) { + $('body').on('dragenter', '.app__content', function(e) { e.preventDefault(); + console.log('HERE'); + $('.app__content').addClass('center-file-overlay'); + $('.post-right__container').removeClass('right-file-overlay'); }); - $('body').on('dragleave', '.post-list__table', function(e) { - e.preventDefault(); - }); - $('body').on('drop', '.post-list__table', function(e) { + $('body').on('drop', '.app__content', function(e) { e.preventDefault(); + $('.app__content').removeClass('center-file-overlay'); self.handleDrop(e); }); } else if (this.props.postType === 'comment') { - $('body').on('dragover', '.sidebar--right', function(e) { - e.preventDefault(); - }); - $('body').on('dragenter', '.sidebar--right', function(e) { + $('body').on('dragover dragleave', '.post-right__container', function(e) { e.preventDefault(); }); - $('body').on('dragleave', '.sidebar--right', function(e) { + $('body').on('dragenter', '.post-right__container', function(e) { e.preventDefault(); + console.log('HERE RIGHT'); + $('.post-right__container').addClass('right-file-overlay'); + $('.app__content').removeClass('center-file-overlay'); }); - $('body').on('drop', '.sidebar--right', function(e) { + $('body').on('drop', '.post-right__container', function(e) { e.preventDefault(); + $('.post-right__container').removeClass('right-file-overlay'); self.handleDrop(e); }); } diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index cf0c4c663..826d34a7d 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -280,10 +280,6 @@ module.exports = React.createClass({ } ); }, - handleDragEnter: function() { - console.log("HERE ENTER"); - this.setState({fileDrag: true}); - }, getInitialState: function() { return getStateFromStores(); }, @@ -472,7 +468,7 @@ module.exports = React.createClass({ return (
-
+
{ more_messages } { postCtls } diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx index f7f5ed509..ad993aee1 100644 --- a/web/react/components/post_right.jsx +++ b/web/react/components/post_right.jsx @@ -243,10 +243,6 @@ module.exports = React.createClass({ this.refs[id].forceUpdate(); } }, - handleDragEnter: function() { - console.log("HERE ENTER RIGHT"); - this.setState({fileDrag: true}); - }, getInitialState: function() { return getStateFromStores(); }, @@ -304,7 +300,7 @@ module.exports = React.createClass({ } return ( -
+
{searchForm}
diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index 34409d563..83c87132b 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -202,3 +202,15 @@ } } } + +.center-file-overlay { + width: 100%; + height: 100%; + background:rgba(255,255,255,0.5); +} + +.right-file-overlay { + width: 100%; + height: 100%; + background:rgba(255,255,255,0.5); +} diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss index 1b98d62f9..4cf3e32a1 100644 --- a/web/sass-files/sass/partials/_post_right.scss +++ b/web/sass-files/sass/partials/_post_right.scss @@ -1,11 +1,5 @@ .post-right__container { - .post-right-file-overlay { - width: 100%; - height: 100%; - background:rgba(255,255,255,0.5); - } - .post-right-root-message { padding: 1em 1em 0; } -- cgit v1.2.3-1-g7c22 From 9f9d93e6133ffd2523546e27e9099e2e6f436506 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Tue, 11 Aug 2015 11:42:31 -0700 Subject: Switched to using the jquery-dragster library to implement more consistent drag and drop support, rather than using the inconsistent html5 implementation --- web/react/components/file_upload.jsx | 48 ++++++------- web/static/js/jquery-dragster/LICENSE | 21 ++++++ web/static/js/jquery-dragster/README.md | 17 +++++ web/static/js/jquery-dragster/bower.json | 25 +++++++ web/static/js/jquery-dragster/jquery.dragster.js | 85 ++++++++++++++++++++++++ web/templates/head.html | 2 + 6 files changed, 172 insertions(+), 26 deletions(-) create mode 100644 web/static/js/jquery-dragster/LICENSE create mode 100644 web/static/js/jquery-dragster/README.md create mode 100644 web/static/js/jquery-dragster/bower.json create mode 100644 web/static/js/jquery-dragster/jquery.dragster.js diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index e082abcd2..f382b848a 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -113,34 +113,30 @@ module.exports = React.createClass({ var self = this; if (this.props.postType === 'post') { - $('body').on('dragover dragleave', '.app__content', function(e) { - e.preventDefault(); - }); - $('body').on('dragenter', '.app__content', function(e) { - e.preventDefault(); - console.log('HERE'); - $('.app__content').addClass('center-file-overlay'); - $('.post-right__container').removeClass('right-file-overlay'); - }); - $('body').on('drop', '.app__content', function(e) { - e.preventDefault(); - $('.app__content').removeClass('center-file-overlay'); - self.handleDrop(e); + $('.app__content').dragster({ + enter: function(dragsterEvent, e) { + $('.app__content').addClass('center-file-overlay'); + }, + leave: function(dragsterEvent, e) { + $('.app__content').removeClass('center-file-overlay'); + }, + drop: function(dragsterEvent, e) { + $('.app__content').removeClass('center-file-overlay'); + self.handleDrop(e); + } }); } else if (this.props.postType === 'comment') { - $('body').on('dragover dragleave', '.post-right__container', function(e) { - e.preventDefault(); - }); - $('body').on('dragenter', '.post-right__container', function(e) { - e.preventDefault(); - console.log('HERE RIGHT'); - $('.post-right__container').addClass('right-file-overlay'); - $('.app__content').removeClass('center-file-overlay'); - }); - $('body').on('drop', '.post-right__container', function(e) { - e.preventDefault(); - $('.post-right__container').removeClass('right-file-overlay'); - self.handleDrop(e); + $('.post-right__container').dragster({ + enter: function(dragsterEvent, e) { + $('.post-right__container').addClass('right-file-overlay'); + }, + leave: function(dragsterEvent, e) { + $('.post-right__container').removeClass('right-file-overlay'); + }, + drop: function(dragsterEvent, e) { + $('.post-right__container').removeClass('right-file-overlay'); + self.handleDrop(e); + } }); } diff --git a/web/static/js/jquery-dragster/LICENSE b/web/static/js/jquery-dragster/LICENSE new file mode 100644 index 000000000..b8b51dc0b --- /dev/null +++ b/web/static/js/jquery-dragster/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2015 Jan Martin + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/web/static/js/jquery-dragster/README.md b/web/static/js/jquery-dragster/README.md new file mode 100644 index 000000000..1c28adaf0 --- /dev/null +++ b/web/static/js/jquery-dragster/README.md @@ -0,0 +1,17 @@ +Include [jquery.dragster.js](https://rawgithub.com/catmanjan/jquery-dragster/master/jquery.dragster.js) in page. + +Works in IE. + +```javascript +$('.element').dragster({ + enter: function (dragsterEvent, event) { + $(this).addClass('hover'); + }, + leave: function (dragsterEvent, event) { + $(this).removeClass('hover'); + }, + drop: function (dragsterEvent, event) { + $(this).removeClass('hover'); + } +}); +``` \ No newline at end of file diff --git a/web/static/js/jquery-dragster/bower.json b/web/static/js/jquery-dragster/bower.json new file mode 100644 index 000000000..a3cf7ed16 --- /dev/null +++ b/web/static/js/jquery-dragster/bower.json @@ -0,0 +1,25 @@ +{ + "name": "jquery-dragster", + "version": "1.0.3", + "homepage": "https://github.com/catmanjan/jquery-dragster", + "authors": [ + "catmanjan" + ], + "description": "Unified drag and drop listener", + "main": "jquery.dragster.js", + "keywords": [ + "jquery", + "dragster", + "dragenter", + "dragleave", + "drop" + ], + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ] +} diff --git a/web/static/js/jquery-dragster/jquery.dragster.js b/web/static/js/jquery-dragster/jquery.dragster.js new file mode 100644 index 000000000..db73fe3f0 --- /dev/null +++ b/web/static/js/jquery-dragster/jquery.dragster.js @@ -0,0 +1,85 @@ +// 1.0.3 +/* +The MIT License (MIT) + +Copyright (c) 2015 Jan Martin + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. +*/ +(function ($) { + + $.fn.dragster = function (options) { + var settings = $.extend({ + enter: $.noop, + leave: $.noop, + over: $.noop, + drop: $.noop + }, options); + + return this.each(function () { + var first = false, + second = false, + $this = $(this); + + $this.on({ + dragenter: function (event) { + if (first) { + second = true; + return; + } else { + first = true; + $this.trigger('dragster:enter', event); + } + event.preventDefault(); + }, + dragleave: function (event) { + if (second) { + second = false; + } else if (first) { + first = false; + } + if (!first && !second) { + $this.trigger('dragster:leave', event); + } + event.preventDefault(); + }, + dragover: function (event) { + $this.trigger('dragster:over', event); + event.preventDefault(); + }, + drop: function (event) { + if (second) { + second = false; + } else if (first) { + first = false; + } + if (!first && !second) { + $this.trigger('dragster:drop', event); + } + event.preventDefault(); + }, + 'dragster:enter': settings.enter, + 'dragster:leave': settings.leave, + 'dragster:over': settings.over, + 'dragster:drop': settings.drop + }); + }); + }; + +}(jQuery)); diff --git a/web/templates/head.html b/web/templates/head.html index 7a7d4fe8e..dd5e9f46e 100644 --- a/web/templates/head.html +++ b/web/templates/head.html @@ -32,6 +32,8 @@ + + -- cgit v1.2.3-1-g7c22 From 6f091f0f6d17b74a5d87517ef35f89cd46e1bcb4 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Tue, 11 Aug 2015 15:31:07 -0700 Subject: Added check to make sure files are not strings --- web/react/components/file_upload.jsx | 8 ++++++-- web/react/components/post_list.jsx | 6 +----- web/react/components/post_right.jsx | 7 +------ web/sass-files/sass/partials/_files.scss | 4 ---- web/sass-files/sass/partials/_post.scss | 5 ----- 5 files changed, 8 insertions(+), 22 deletions(-) diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index f382b848a..05c883ffc 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -84,13 +84,17 @@ module.exports = React.createClass({ this.props.onUploadError(null); var files = e.originalEvent.dataTransfer.files; - if (files.length) { + if (!files.length) { + files = e.originalEvent.dataTransfer.getData('URL'); + } + var channelId = this.props.channelId || ChannelStore.getCurrentId(); + + if (typeof files !== 'string' && files.length) { var numFiles = files.length; var numToUpload = this.props.setUploads(numFiles); for (var i = 0; i < numFiles && i < numToUpload; i++) { var file = files[i]; - var channelId = this.props.channelId || ChannelStore.getCurrentId(); var formData = new FormData(); formData.append('channel_id', channelId); diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 826d34a7d..83f806b79 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -124,6 +124,7 @@ module.exports = React.createClass({ $(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--comment'); } }); + }, componentDidUpdate: function() { this.resize(); @@ -461,11 +462,6 @@ module.exports = React.createClass({ postCtls.push(); } - var fileDragOverlay = ''; - if (this.state.fileDrag) { - fileDragOverlay = 'post-list-file-overlay'; - } - return (
diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx index ad993aee1..ad8b54012 100644 --- a/web/react/components/post_right.jsx +++ b/web/react/components/post_right.jsx @@ -294,13 +294,8 @@ module.exports = React.createClass({ var currentId = UserStore.getCurrentId(); var searchForm = currentId == null ? null : ; - var fileDragOverlay = ''; - if (this.state.fileDrag) { - fileDragOverlay = 'post-right-file-overlay'; - } - return ( -
+
{searchForm}
diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index 83c87132b..3736f9303 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -204,13 +204,9 @@ } .center-file-overlay { - width: 100%; - height: 100%; background:rgba(255,255,255,0.5); } .right-file-overlay { - width: 100%; - height: 100%; background:rgba(255,255,255,0.5); } diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 093e10ee0..98b17120d 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -107,11 +107,6 @@ body.ios { } #post-list { - .post-list-file-overlay { - width: 100%; - height: 100%; - background:rgba(255,255,255,0.5); - } .post-list-holder-by-time { background: #fff; overflow-y: scroll; -- cgit v1.2.3-1-g7c22 From 596e76d40418465c80fadb640450ee4d37bc4e1e Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Wed, 12 Aug 2015 08:30:03 -0700 Subject: Fixed issue with uploading files from RHS when trying to upload after opening the RHS and then switching channels --- web/react/components/file_upload.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index 05c883ffc..7918b42ec 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -14,7 +14,7 @@ module.exports = React.createClass({ var element = $(this.refs.fileInput.getDOMNode()); var files = element.prop('files'); - var channelId = ChannelStore.getCurrentId(); + var channelId = this.props.channelId || ChannelStore.getCurrentId(); this.props.onUploadError(null); @@ -192,14 +192,13 @@ module.exports = React.createClass({ continue; } - var channelId = ChannelStore.getCurrentId(); + var channelId = this.props.channelId || ChannelStore.getCurrentId(); // generate a unique id that can be used by other components to refer back to this file upload var clientId = utils.generateId(); var formData = new FormData(); formData.append('channel_id', channelId); - var d = new Date(); var hour; if (d.getHours() < 10) { -- cgit v1.2.3-1-g7c22 From 0f1c9917271d8e28c55b8d930ac9057ef19e5862 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Wed, 12 Aug 2015 12:47:29 -0700 Subject: Updated feature to work with new upload cancel logic --- web/react/components/file_upload.jsx | 39 +++++++++++++++++++++++++++++------- 1 file changed, 32 insertions(+), 7 deletions(-) diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index 7918b42ec..641a888c7 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -91,24 +91,49 @@ module.exports = React.createClass({ if (typeof files !== 'string' && files.length) { var numFiles = files.length; - var numToUpload = this.props.setUploads(numFiles); - for (var i = 0; i < numFiles && i < numToUpload; i++) { - var file = files[i]; + var numToUpload = Math.min(Constants.MAX_UPLOAD_FILES - this.props.getFileCount(channelId), numFiles); + if (numFiles > numToUpload) { + this.props.onUploadError('Uploads limited to ' + Constants.MAX_UPLOAD_FILES + ' files maximum. Please use additional posts for more files.'); + } + + for (var i = 0; i < files.length && i < numToUpload; i++) { + if (files[i].size > Constants.MAX_FILE_SIZE) { + this.props.onUploadError('Files must be no more than ' + Constants.MAX_FILE_SIZE / 1000000 + ' MB'); + continue; + } + + // generate a unique id that can be used by other components to refer back to this file upload + var clientId = utils.generateId(); + + // Prepare data to be uploaded. var formData = new FormData(); formData.append('channel_id', channelId); - formData.append('files', file, file.name); + formData.append('files', files[i], files[i].name); + formData.append('client_ids', clientId); - client.uploadFile(formData, + var request = client.uploadFile(formData, function(data) { var parsedData = $.parseJSON(data); - this.props.onFileUpload(parsedData.filenames, channelId); + this.props.onFileUpload(parsedData['filenames'], parsedData['client_ids'], channelId); + + var requests = this.state.requests; + for (var i = 0; i < parsedData['client_ids'].length; i++) { + delete requests[parsedData['client_ids'][i]]; + } + this.setState({requests: requests}); }.bind(this), function(err) { - this.props.onUploadError(err); + this.props.onUploadError(err, clientId); }.bind(this) ); + + var requests = this.state.requests; + requests[clientId] = request; + this.setState({requests: requests}); + + this.props.onUploadStart([clientId], channelId); } } }, -- cgit v1.2.3-1-g7c22 From 14c121dc0cccdd36f97b0b13cde6dd3a5802bb9e Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Wed, 12 Aug 2015 14:12:17 -0700 Subject: Implements better markup for css changes to be made, including an overlay of the dropzones and help pic/text --- web/react/components/file_upload.jsx | 18 ++++++++++++------ web/react/components/post_list.jsx | 16 +++++++++++----- web/react/components/post_right.jsx | 4 ++++ web/sass-files/sass/partials/_files.scss | 7 ------- web/sass-files/sass/partials/_post.scss | 23 +++++++++++++++++++++++ web/sass-files/sass/partials/_post_right.scss | 23 +++++++++++++++++++++++ web/static/js/jquery-dragster/bower.json | 25 ------------------------- 7 files changed, 73 insertions(+), 43 deletions(-) delete mode 100644 web/static/js/jquery-dragster/bower.json diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index 641a888c7..adf0a9fa8 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -144,26 +144,32 @@ module.exports = React.createClass({ if (this.props.postType === 'post') { $('.app__content').dragster({ enter: function(dragsterEvent, e) { - $('.app__content').addClass('center-file-overlay'); + $('.center-file-overlay').removeClass('invisible'); + $('.center-file-overlay').addClass('visible'); }, leave: function(dragsterEvent, e) { - $('.app__content').removeClass('center-file-overlay'); + $('.center-file-overlay').removeClass('visible'); + $('.center-file-overlay').addClass('invisible'); }, drop: function(dragsterEvent, e) { - $('.app__content').removeClass('center-file-overlay'); + $('.center-file-overlay').removeClass('visible'); + $('.center-file-overlay').addClass('invisible'); self.handleDrop(e); } }); } else if (this.props.postType === 'comment') { $('.post-right__container').dragster({ enter: function(dragsterEvent, e) { - $('.post-right__container').addClass('right-file-overlay'); + $('.right-file-overlay').removeClass('invisible'); + $('.right-file-overlay').addClass('visible'); }, leave: function(dragsterEvent, e) { - $('.post-right__container').removeClass('right-file-overlay'); + $('.right-file-overlay').removeClass('visible'); + $('.right-file-overlay').addClass('invisible'); }, drop: function(dragsterEvent, e) { - $('.post-right__container').removeClass('right-file-overlay'); + $('.right-file-overlay').removeClass('visible'); + $('.right-file-overlay').addClass('invisible'); self.handleDrop(e); } }); diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 83f806b79..756ed521d 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -463,11 +463,17 @@ module.exports = React.createClass({ } return ( -
-
-
- { more_messages } - { postCtls } +
+
+ Drop a file to upload it. + +
+
+
+
+ { more_messages } + { postCtls } +
diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx index ad8b54012..49c12ad9c 100644 --- a/web/react/components/post_right.jsx +++ b/web/react/components/post_right.jsx @@ -296,6 +296,10 @@ module.exports = React.createClass({ return (
+
+ Drop a file to upload it. + +
{searchForm}
diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index 3736f9303..9bf6fd83a 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -203,10 +203,3 @@ } } -.center-file-overlay { - background:rgba(255,255,255,0.5); -} - -.right-file-overlay { - background:rgba(255,255,255,0.5); -} diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 98b17120d..0af5c01e2 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -107,6 +107,29 @@ body.ios { } #post-list { + .center-file-overlay { + top: 0px; + height: 100%; + width: 59.7%; + position: fixed; + z-index: 2147483646; + -moz-box-shadow: 0px 0px 3px #8a8a8a; + -webkit-box-shadow: 0px 0px 3px #8a8a8a; + box-shadow: 0px 0px 3px #8a8a8a; + + .invisible { + visibility: hidden; + } + .visible { + visibility: visible; + } + .center-file-help-text { + + } + .center-file-help-picture { + + } + } .post-list-holder-by-time { background: #fff; overflow-y: scroll; diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss index 4cf3e32a1..41b7aaada 100644 --- a/web/sass-files/sass/partials/_post_right.scss +++ b/web/sass-files/sass/partials/_post_right.scss @@ -1,5 +1,28 @@ .post-right__container { + .right-file-overlay { + height: 100%; + width: 100%; + position: fixed; + z-index: 2147483646; + -moz-box-shadow: 0px 0px 3px #8a8a8a; + -webkit-box-shadow: 0px 0px 3px #8a8a8a; + box-shadow: 0px 0px 3px #8a8a8a; + + .invisible { + visibility: hidden; + } + .visible { + visibility: visible; + } + .right-file-help-text { + + } + .right-file-help-picture { + + } + } + .post-right-root-message { padding: 1em 1em 0; } diff --git a/web/static/js/jquery-dragster/bower.json b/web/static/js/jquery-dragster/bower.json deleted file mode 100644 index a3cf7ed16..000000000 --- a/web/static/js/jquery-dragster/bower.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "jquery-dragster", - "version": "1.0.3", - "homepage": "https://github.com/catmanjan/jquery-dragster", - "authors": [ - "catmanjan" - ], - "description": "Unified drag and drop listener", - "main": "jquery.dragster.js", - "keywords": [ - "jquery", - "dragster", - "dragenter", - "dragleave", - "drop" - ], - "license": "MIT", - "ignore": [ - "**/.*", - "node_modules", - "bower_components", - "test", - "tests" - ] -} -- cgit v1.2.3-1-g7c22 From 097257ade8b01a6f4ce4766cb844d06533bb74cf Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 13 Aug 2015 23:11:01 +0500 Subject: UI Upgrades to file overlay for uploads --- web/react/components/post_list.jsx | 6 ++-- web/react/components/post_right.jsx | 8 +++-- web/sass-files/sass/partials/_post.scss | 50 ++++++++++++++++----------- web/sass-files/sass/partials/_post_right.scss | 23 ------------ web/sass-files/sass/partials/_responsive.scss | 6 ++++ 5 files changed, 45 insertions(+), 48 deletions(-) diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 756ed521d..53e8d0761 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -465,8 +465,10 @@ module.exports = React.createClass({ return (
- Drop a file to upload it. - +
+ + Drop a file to upload it. +
diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx index 49c12ad9c..b772c7ee8 100644 --- a/web/react/components/post_right.jsx +++ b/web/react/components/post_right.jsx @@ -296,9 +296,11 @@ module.exports = React.createClass({ return (
-
- Drop a file to upload it. - +
+
+ + Drop a file to upload it. +
{searchForm}
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 0af5c01e2..614fc085b 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -106,30 +106,40 @@ body.ios { } } -#post-list { - .center-file-overlay { - top: 0px; - height: 100%; - width: 59.7%; - position: fixed; - z-index: 2147483646; - -moz-box-shadow: 0px 0px 3px #8a8a8a; - -webkit-box-shadow: 0px 0px 3px #8a8a8a; - box-shadow: 0px 0px 3px #8a8a8a; +.center-file-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.8); + text-align: center; + color: #FFF; + display: table; + font-size: 1.7em; + font-weight: 600; + z-index: 6; - .invisible { - visibility: hidden; - } - .visible { - visibility: visible; - } - .center-file-help-text { + > div { + display: table-cell; + vertical-align: middle; + } - } - .center-file-help-picture { + .fa { + display: block; + font-size: 2em; + margin: 0 0 0.3em; + } - } + .invisible { + visibility: hidden; + } + .visible { + visibility: visible; } +} + +#post-list { .post-list-holder-by-time { background: #fff; overflow-y: scroll; diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss index 41b7aaada..4cf3e32a1 100644 --- a/web/sass-files/sass/partials/_post_right.scss +++ b/web/sass-files/sass/partials/_post_right.scss @@ -1,28 +1,5 @@ .post-right__container { - .right-file-overlay { - height: 100%; - width: 100%; - position: fixed; - z-index: 2147483646; - -moz-box-shadow: 0px 0px 3px #8a8a8a; - -webkit-box-shadow: 0px 0px 3px #8a8a8a; - box-shadow: 0px 0px 3px #8a8a8a; - - .invisible { - visibility: hidden; - } - .visible { - visibility: visible; - } - .right-file-help-text { - - } - .right-file-help-picture { - - } - } - .post-right-root-message { padding: 1em 1em 0; } diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 47b2b6bd7..52bb5eae6 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -189,6 +189,9 @@ } @media screen and (max-width: 960px) { + .center-file-overlay { + font-size: 1.5em; + } .post { .post-header .post-header-col.post-header__reply { .comment-icon__container__hide { @@ -240,6 +243,9 @@ } } @media screen and (max-width: 768px) { + .center-file-overlay { + font-size: 1.3em; + } .date-separator, .new-separator { &.hovered--after { &:before { -- cgit v1.2.3-1-g7c22 From 6ca6072f478f556ba2d25c9762f0d73c9e84c7f6 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 13 Aug 2015 23:33:18 +0500 Subject: Updating UI to cover RHS and the centre channel separately --- web/react/components/post_list.jsx | 2 +- web/react/components/post_right.jsx | 2 +- web/sass-files/sass/partials/_base.scss | 1 + web/sass-files/sass/partials/_post.scss | 6 +++--- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 53e8d0761..f45650279 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -464,7 +464,7 @@ module.exports = React.createClass({ return (
-
+
Drop a file to upload it. diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx index b772c7ee8..09cd8cb56 100644 --- a/web/react/components/post_right.jsx +++ b/web/react/components/post_right.jsx @@ -296,7 +296,7 @@ module.exports = React.createClass({ return (
-
+
Drop a file to upload it. diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index 78006ff18..5b68b488f 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -24,6 +24,7 @@ body { height: 100%; > .row.main { height: 100%; + position: relative; } } > .container-fluid { diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 614fc085b..bbf36ea93 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -106,13 +106,13 @@ body.ios { } } -.center-file-overlay { - position: fixed; +.file-overlay { + position: absolute; top: 0; left: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.8); + background-color: rgba(0, 0, 0, 0.6); text-align: center; color: #FFF; display: table; -- cgit v1.2.3-1-g7c22 From 912ca8e8dd2f69d8a15429f3ab4bbb7ac178ab8a Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Thu, 13 Aug 2015 12:07:32 -0700 Subject: Changed location of file upload overlay --- web/react/components/file_upload_overlay.jsx | 16 ++++++++++++++++ web/react/components/post_list.jsx | 18 +++++------------- web/react/pages/channel.jsx | 6 ++++++ web/templates/channel.html | 1 + 4 files changed, 28 insertions(+), 13 deletions(-) create mode 100644 web/react/components/file_upload_overlay.jsx diff --git a/web/react/components/file_upload_overlay.jsx b/web/react/components/file_upload_overlay.jsx new file mode 100644 index 000000000..5f8ef0b0c --- /dev/null +++ b/web/react/components/file_upload_overlay.jsx @@ -0,0 +1,16 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +module.exports = React.createClass({ + displayName: 'FileUploadOverlay', + render: function() { + return ( +
+
+ + Drop a file to upload it. +
+
+ ); + } +}); diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index f45650279..83f806b79 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -463,19 +463,11 @@ module.exports = React.createClass({ } return ( -
-
-
- - Drop a file to upload it. -
-
-
-
-
- { more_messages } - { postCtls } -
+
+
+
+ { more_messages } + { postCtls }
diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx index 90d90b29f..922e61d1a 100644 --- a/web/react/pages/channel.jsx +++ b/web/react/pages/channel.jsx @@ -35,6 +35,7 @@ var ChannelInfoModal = require('../components/channel_info_modal.jsx'); var AccessHistoryModal = require('../components/access_history_modal.jsx'); var ActivityLogModal = require('../components/activity_log_modal.jsx'); var RemovedFromChannelModal = require('../components/removed_from_channel_modal.jsx') +var FileUploadOverlay = require('../components/file_upload_overlay.jsx'); var Constants = require('../utils/constants.jsx'); @@ -223,4 +224,9 @@ global.window.setup_channel_page = function(team_name, team_type, team_id, chann document.getElementById('removed_from_channel_modal') ); + React.render( + , + document.getElementById('file_upload_overlay') + ); + }; diff --git a/web/templates/channel.html b/web/templates/channel.html index da6fed97d..9bfd1fa35 100644 --- a/web/templates/channel.html +++ b/web/templates/channel.html @@ -14,6 +14,7 @@
+
-- cgit v1.2.3-1-g7c22 From 6f68c508ee3fd8c54fc1ba314cc60bae3f0b2600 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Thu, 13 Aug 2015 15:44:38 -0700 Subject: Better error checking along with other fixes --- web/react/components/create_comment.jsx | 18 +++++++++++------- web/react/components/create_post.jsx | 18 +++++++++++------- web/react/components/file_upload.jsx | 7 +++---- web/react/components/file_upload_overlay.jsx | 22 +++++++++++----------- 4 files changed, 36 insertions(+), 29 deletions(-) diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index c954229ae..885efab7a 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -122,16 +122,20 @@ module.exports = React.createClass({ this.setState({uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']}); }, handleUploadError: function(err, clientId) { - var draft = PostStore.getCommentDraft(this.props.rootId); + if (clientId !== -1) { + var draft = PostStore.getCommentDraft(this.props.rootId); - var index = draft['uploadsInProgress'].indexOf(clientId); - if (index !== -1) { - draft['uploadsInProgress'].splice(index, 1); - } + var index = draft['uploadsInProgress'].indexOf(clientId); + if (index !== -1) { + draft['uploadsInProgress'].splice(index, 1); + } - PostStore.storeCommentDraft(this.props.rootId, draft); + PostStore.storeCommentDraft(this.props.rootId, draft); - this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err}); + this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err}); + } else { + this.setState({serverError: err}); + } }, clearPreviews: function() { this.setState({previews: []}); diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 137420440..377e7bd34 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -145,16 +145,20 @@ module.exports = React.createClass({ this.setState({uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']}); }, handleUploadError: function(err, clientId) { - var draft = PostStore.getDraft(this.state.channelId); + if (clientId !== -1) { + var draft = PostStore.getDraft(this.state.channelId); - var index = draft['uploadsInProgress'].indexOf(clientId); - if (index !== -1) { - draft['uploadsInProgress'].splice(index, 1); - } + var index = draft['uploadsInProgress'].indexOf(clientId); + if (index !== -1) { + draft['uploadsInProgress'].splice(index, 1); + } - PostStore.storeDraft(this.state.channelId, draft); + PostStore.storeDraft(this.state.channelId, draft); - this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err}); + this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err}); + } else { + this.setState({serverError: err}); + } }, removePreview: function(id) { var previews = this.state.previews; diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index f1a06c361..2bce1b537 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -91,9 +91,6 @@ module.exports = React.createClass({ this.props.onUploadError(null); var files = e.originalEvent.dataTransfer.files; - if (!files.length) { - files = e.originalEvent.dataTransfer.getData('URL'); - } var channelId = this.props.channelId || ChannelStore.getCurrentId(); if (typeof files !== 'string' && files.length) { @@ -142,6 +139,8 @@ module.exports = React.createClass({ this.props.onUploadStart([clientId], channelId); } + } else { + this.props.onUploadError('Invalid file upload', -1); } }, componentDidMount: function() { @@ -149,7 +148,7 @@ module.exports = React.createClass({ var self = this; if (this.props.postType === 'post') { - $('.app__content').dragster({ + $('.row.main').dragster({ enter: function(dragsterEvent, e) { $('.center-file-overlay').removeClass('invisible'); $('.center-file-overlay').addClass('visible'); diff --git a/web/react/components/file_upload_overlay.jsx b/web/react/components/file_upload_overlay.jsx index 5f8ef0b0c..a82f02af1 100644 --- a/web/react/components/file_upload_overlay.jsx +++ b/web/react/components/file_upload_overlay.jsx @@ -2,15 +2,15 @@ // See License.txt for license information. module.exports = React.createClass({ - displayName: 'FileUploadOverlay', - render: function() { - return ( -
-
- - Drop a file to upload it. -
-
- ); - } + displayName: 'FileUploadOverlay', + render: function() { + return ( +
+
+ + Drop a file to upload it. +
+
+ ); + } }); -- cgit v1.2.3-1-g7c22 From 3a55cc6dcb8e45b65debd7569a49961faa55b402 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Thu, 13 Aug 2015 16:00:55 -0700 Subject: Minor refactoring for better maintainibility --- web/react/components/file_upload_overlay.jsx | 12 +++++++++++- web/react/components/post_right.jsx | 9 +++------ web/react/pages/channel.jsx | 3 ++- 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/web/react/components/file_upload_overlay.jsx b/web/react/components/file_upload_overlay.jsx index a82f02af1..28d66d817 100644 --- a/web/react/components/file_upload_overlay.jsx +++ b/web/react/components/file_upload_overlay.jsx @@ -3,9 +3,19 @@ module.exports = React.createClass({ displayName: 'FileUploadOverlay', + propTypes: { + overlayType: React.PropTypes.string + }, render: function() { + var overlayClass = 'file-overlay invisible'; + if (this.props.overlayType === 'right') { + overlayClass += ' right-file-overlay'; + } else if (this.props.overlayType === 'center') { + overlayClass += ' center-file-overlay'; + } + return ( -
+
Drop a file to upload it. diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx index 09cd8cb56..e46979ff7 100644 --- a/web/react/components/post_right.jsx +++ b/web/react/components/post_right.jsx @@ -11,6 +11,7 @@ var SearchBox =require('./search_bar.jsx'); var CreateComment = require( './create_comment.jsx' ); var Constants = require('../utils/constants.jsx'); var FileAttachmentList = require('./file_attachment_list.jsx'); +var FileUploadOverlay = require('./file_upload_overlay.jsx'); var ActionTypes = Constants.ActionTypes; RhsHeaderPost = React.createClass({ @@ -296,12 +297,8 @@ module.exports = React.createClass({ return (
-
-
- - Drop a file to upload it. -
-
+
{searchForm}
diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx index 922e61d1a..3ef6817f3 100644 --- a/web/react/pages/channel.jsx +++ b/web/react/pages/channel.jsx @@ -225,7 +225,8 @@ global.window.setup_channel_page = function(team_name, team_type, team_id, chann ); React.render( - , + , document.getElementById('file_upload_overlay') ); -- cgit v1.2.3-1-g7c22 From bcea7ae74fab36d7633db3b06a13f0a221fb0ed0 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Thu, 13 Aug 2015 16:26:48 -0700 Subject: Minor cosmetic refactoring of file_upload.jsx --- web/react/components/file_upload.jsx | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index 2bce1b537..bc0cf70c8 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -12,7 +12,9 @@ module.exports = React.createClass({ onUploadError: React.PropTypes.func, getFileCount: React.PropTypes.func, onFileUpload: React.PropTypes.func, - onUploadStart: React.PropTypes.func + onUploadStart: React.PropTypes.func, + channelId: React.PropTypes.string, + postType: React.PropTypes.string }, getInitialState: function() { return {requests: {}}; @@ -61,8 +63,8 @@ module.exports = React.createClass({ this.props.onFileUpload(parsedData.filenames, parsedData.client_ids, channelId); var requests = this.state.requests; - for (var i = 0; i < parsedData.client_ids.length; i++) { - delete requests[parsedData.client_ids[i]]; + for (var j = 0; j < parsedData.client_ids.length; j++) { + delete requests[parsedData.client_ids[j]]; } this.setState({requests: requests}); }.bind(this), @@ -120,11 +122,11 @@ module.exports = React.createClass({ var request = client.uploadFile(formData, function(data) { var parsedData = $.parseJSON(data); - this.props.onFileUpload(parsedData['filenames'], parsedData['client_ids'], channelId); + this.props.onFileUpload(parsedData.filenames, parsedData.client_ids, channelId); var requests = this.state.requests; - for (var i = 0; i < parsedData['client_ids'].length; i++) { - delete requests[parsedData['client_ids'][i]]; + for (var j = 0; j < parsedData.client_ids.length; j++) { + delete requests[parsedData.client_ids[j]]; } this.setState({requests: requests}); }.bind(this), @@ -149,11 +151,11 @@ module.exports = React.createClass({ if (this.props.postType === 'post') { $('.row.main').dragster({ - enter: function(dragsterEvent, e) { + enter: function() { $('.center-file-overlay').removeClass('invisible'); $('.center-file-overlay').addClass('visible'); }, - leave: function(dragsterEvent, e) { + leave: function() { $('.center-file-overlay').removeClass('visible'); $('.center-file-overlay').addClass('invisible'); }, @@ -165,11 +167,11 @@ module.exports = React.createClass({ }); } else if (this.props.postType === 'comment') { $('.post-right__container').dragster({ - enter: function(dragsterEvent, e) { + enter: function() { $('.right-file-overlay').removeClass('invisible'); $('.right-file-overlay').addClass('visible'); }, - leave: function(dragsterEvent, e) { + leave: function() { $('.right-file-overlay').removeClass('visible'); $('.right-file-overlay').addClass('invisible'); }, @@ -254,8 +256,8 @@ module.exports = React.createClass({ self.props.onFileUpload(parsedData.filenames, parsedData.client_ids, channelId); var requests = self.state.requests; - for (var i = 0; i < parsedData.client_ids.length; i++) { - delete requests[parsedData.client_ids[i]]; + for (var j = 0; j < parsedData.client_ids.length; j++) { + delete requests[parsedData.client_ids[j]]; } self.setState({requests: requests}); }, -- cgit v1.2.3-1-g7c22 From 2c098d7711eda893f903329ab64528a7d387a6e8 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Fri, 14 Aug 2015 10:00:24 -0700 Subject: Small changes to css to clean up code --- web/react/components/file_upload.jsx | 18 ++++++------------ web/react/components/file_upload_overlay.jsx | 2 +- web/react/pages/channel.jsx | 2 +- web/sass-files/sass/partials/_post.scss | 7 ------- web/sass-files/sass/partials/_sidebar--left.scss | 1 + 5 files changed, 9 insertions(+), 21 deletions(-) diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index bc0cf70c8..7497ec330 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -152,32 +152,26 @@ module.exports = React.createClass({ if (this.props.postType === 'post') { $('.row.main').dragster({ enter: function() { - $('.center-file-overlay').removeClass('invisible'); - $('.center-file-overlay').addClass('visible'); + $('.center-file-overlay').removeClass('hidden'); }, leave: function() { - $('.center-file-overlay').removeClass('visible'); - $('.center-file-overlay').addClass('invisible'); + $('.center-file-overlay').addClass('hidden'); }, drop: function(dragsterEvent, e) { - $('.center-file-overlay').removeClass('visible'); - $('.center-file-overlay').addClass('invisible'); + $('.center-file-overlay').addClass('hidden'); self.handleDrop(e); } }); } else if (this.props.postType === 'comment') { $('.post-right__container').dragster({ enter: function() { - $('.right-file-overlay').removeClass('invisible'); - $('.right-file-overlay').addClass('visible'); + $('.right-file-overlay').removeClass('hidden'); }, leave: function() { - $('.right-file-overlay').removeClass('visible'); - $('.right-file-overlay').addClass('invisible'); + $('.right-file-overlay').addClass('hidden'); }, drop: function(dragsterEvent, e) { - $('.right-file-overlay').removeClass('visible'); - $('.right-file-overlay').addClass('invisible'); + $('.right-file-overlay').addClass('hidden'); self.handleDrop(e); } }); diff --git a/web/react/components/file_upload_overlay.jsx b/web/react/components/file_upload_overlay.jsx index 28d66d817..f35556371 100644 --- a/web/react/components/file_upload_overlay.jsx +++ b/web/react/components/file_upload_overlay.jsx @@ -7,7 +7,7 @@ module.exports = React.createClass({ overlayType: React.PropTypes.string }, render: function() { - var overlayClass = 'file-overlay invisible'; + var overlayClass = 'file-overlay hidden'; if (this.props.overlayType === 'right') { overlayClass += ' right-file-overlay'; } else if (this.props.overlayType === 'center') { diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx index 3ef6817f3..1f07cb519 100644 --- a/web/react/pages/channel.jsx +++ b/web/react/pages/channel.jsx @@ -225,7 +225,7 @@ global.window.setup_channel_page = function(team_name, team_type, team_id, chann ); React.render( - , document.getElementById('file_upload_overlay') ); diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index bbf36ea93..56b31205b 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -130,13 +130,6 @@ body.ios { font-size: 2em; margin: 0 0 0.3em; } - - .invisible { - visibility: hidden; - } - .visible { - visibility: visible; - } } #post-list { diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss index 5d866715e..2376c9212 100644 --- a/web/sass-files/sass/partials/_sidebar--left.scss +++ b/web/sass-files/sass/partials/_sidebar--left.scss @@ -6,6 +6,7 @@ border-right: $border-gray; padding: 0 0 2em 0; background: #fafafa; + z-index: 5; &.sidebar--padded { padding-top: 44px; } -- cgit v1.2.3-1-g7c22