From 1415560d52eee7bb4f5bdf8b6d433e591273847a Mon Sep 17 00:00:00 2001 From: nickago Date: Tue, 11 Aug 2015 14:58:43 -0700 Subject: [PATCH 01/13] get public link now displays in the same window pane on mobile, but in a new tab on desktop. Also added proptypes --- web/react/components/view_image.jsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index dc85b53e5a..0bed4eaa4e 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -6,6 +6,13 @@ var utils = require('../utils/utils.jsx'); module.exports = React.createClass({ displayName: 'ViewImageModal', + propTypes: { + filenames: React.PropTypes.array, + modalId: React.PropTypes.string, + channelId: React.PropTypes.string, + userId: React.PropTypes.string, + startId: React.PropTypes.number + }, canSetState: false, handleNext: function() { var id = this.state.imgId + 1; @@ -118,7 +125,11 @@ module.exports = React.createClass({ data.filename = this.props.filenames[this.state.imgId]; Client.getPublicLink(data, function(serverData) { - window.open(serverData.public_link); + if (utils.isMobile()) { + window.location.href = serverData.public_link; + } else { + window.open(serverData.public_link); + } }, function() { } @@ -145,7 +156,7 @@ module.exports = React.createClass({ getInitialState: function() { var loaded = []; var progress = []; - for (var i = 0; i < this.props.filenames.length; i ++) { + for (var i = 0; i < this.props.filenames.length; i++) { loaded.push(false); progress.push(0); } @@ -213,7 +224,7 @@ module.exports = React.createClass({ content = (
- { percentage > 0 ? + {percentage > 0 ? {'Previewing ' + percentage + '%'} : ''}
From 9bbeef208fe9769618d2de3b69f0eb417eb007f8 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Thu, 6 Aug 2015 20:07:14 -0700 Subject: [PATCH 02/13] 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 b90fa4fd37..aaf45c1ef6 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 83f806b791..5724dbd622 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(); From 1fa436b4f99d482bc2adb926b93d0c0b832d9288 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Fri, 7 Aug 2015 14:24:09 -0700 Subject: [PATCH 03/13] 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 78e06c5320..c954229aec 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 9ca1d53888..137420440a 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 aaf45c1ef6..eb461ae9ca 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 5724dbd622..4df78817aa 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 65775f01ee..34409d5637 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; } + } +} From 81d7599f75b11d619f8ee9440394de3f9f86f39f Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Sun, 9 Aug 2015 13:04:24 -0700 Subject: [PATCH 04/13] 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 eb461ae9ca..a479883c9b 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 4df78817aa..cf0c4c6639 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 ad8b54012d..f7f5ed509b 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 98b17120d4..093e10ee05 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 4cf3e32a17..1b98d62f9d 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; } From 9baafdb372d92c96a4063f11531f4fb5d9e7059e Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Tue, 11 Aug 2015 09:48:25 -0700 Subject: [PATCH 05/13] 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 a479883c9b..e082abcd25 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) { + $('body').on('dragover dragleave', '.post-right__container', function(e) { e.preventDefault(); }); - $('body').on('dragenter', '.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('dragleave', '.sidebar--right', function(e) { - e.preventDefault(); - }); - $('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 cf0c4c6639..826d34a7dd 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 f7f5ed509b..ad993aee19 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 34409d5637..83c87132b6 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 1b98d62f9d..4cf3e32a17 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; } From 9f9d93e6133ffd2523546e27e9099e2e6f436506 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Tue, 11 Aug 2015 11:42:31 -0700 Subject: [PATCH 06/13] 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 ++++++ .../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 e082abcd25..f382b848a4 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 0000000000..b8b51dc0bc --- /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 0000000000..1c28adaf09 --- /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 0000000000..a3cf7ed16d --- /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 0000000000..db73fe3f09 --- /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 7a7d4fe8e8..dd5e9f46e6 100644 --- a/web/templates/head.html +++ b/web/templates/head.html @@ -32,6 +32,8 @@ + + From 6f091f0f6d17b74a5d87517ef35f89cd46e1bcb4 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Tue, 11 Aug 2015 15:31:07 -0700 Subject: [PATCH 07/13] 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 f382b848a4..05c883ffc9 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 826d34a7dd..83f806b791 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 ad993aee19..ad8b54012d 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 83c87132b6..3736f93038 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 093e10ee05..98b17120d4 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; From 596e76d40418465c80fadb640450ee4d37bc4e1e Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Wed, 12 Aug 2015 08:30:03 -0700 Subject: [PATCH 08/13] 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 05c883ffc9..7918b42ec7 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) { From 0f1c9917271d8e28c55b8d930ac9057ef19e5862 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Wed, 12 Aug 2015 12:47:29 -0700 Subject: [PATCH 09/13] 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 7918b42ec7..641a888c7e 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); } } }, From 14c121dc0cccdd36f97b0b13cde6dd3a5802bb9e Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Wed, 12 Aug 2015 14:12:17 -0700 Subject: [PATCH 10/13] 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 641a888c7e..adf0a9fa89 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 83f806b791..756ed521d2 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 ad8b54012d..49c12ad9c6 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 3736f93038..9bf6fd83a5 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 98b17120d4..0af5c01e2a 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 4cf3e32a17..41b7aaada2 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 a3cf7ed16d..0000000000 --- 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" - ] -} From 2dfc9206f352671753e21757e9ebec80b9bea08a Mon Sep 17 00:00:00 2001 From: nickago Date: Thu, 13 Aug 2015 08:28:35 -0700 Subject: [PATCH 11/13] Added cosmetic refactoring --- web/react/components/view_image.jsx | 40 +++++++++++++++++------------ 1 file changed, 23 insertions(+), 17 deletions(-) diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index 0bed4eaa4e..20a02b5957 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -63,8 +63,8 @@ module.exports = React.createClass({ progress[id] = img.completedPercentage; self.setState({progress: progress}); }); - img.onload = function(imgid) { - return function() { + img.onload = function onload(imgid) { + return function onloadReturn() { var loaded = self.state.loaded; loaded[imgid] = true; self.setState({loaded: loaded}); @@ -90,21 +90,21 @@ module.exports = React.createClass({ }, componentDidMount: function() { var self = this; - $('#' + this.props.modalId).on('shown.bs.modal', function() { + $('#' + this.props.modalId).on('shown.bs.modal', function onModalShow() { self.setState({viewed: true}); self.loadImage(self.state.imgId); }); - $(this.refs.modal.getDOMNode()).click(function(e) { + $(this.refs.modal.getDOMNode()).click(function onModalClick(e) { if (e.target === this || e.target === self.refs.imageBody.getDOMNode()) { $('.image_modal').modal('hide'); } }); $(this.refs.imageWrap.getDOMNode()).hover( - function() { + function onModalHover() { $(self.refs.imageFooter.getDOMNode()).addClass('footer--show'); - }, function() { + }, function offModalHover() { $(self.refs.imageFooter.getDOMNode()).removeClass('footer--show'); } ); @@ -124,14 +124,14 @@ module.exports = React.createClass({ data.user_id = this.props.userId; data.filename = this.props.filenames[this.state.imgId]; Client.getPublicLink(data, - function(serverData) { + function sucess(serverData) { if (utils.isMobile()) { window.location.href = serverData.public_link; } else { window.open(serverData.public_link); } }, - function() { + function error() { } ); }, @@ -209,7 +209,7 @@ module.exports = React.createClass({ if (!(filename in this.state.fileSizes)) { var self = this; - utils.getFileSize(utils.getFileUrl(filename), function(fileSize) { + utils.getFileSize(utils.getFileUrl(filename), function fileSizeOp(fileSize) { if (self.canSetState) { var fileSizes = self.state.fileSizes; fileSizes[filename] = fileSize; @@ -221,14 +221,20 @@ module.exports = React.createClass({ } else { // display a progress indicator when the preview for an image is still loading var percentage = Math.floor(this.state.progress[this.state.imgId]); - content = ( -
- - {percentage > 0 ? - {'Previewing ' + percentage + '%'} - : ''} -
- ); + if (percentage) { + content = ( +
+ + {'Previewing ' + percentage + '%'} +
+ ); + } else { + content = ( +
+ +
+ ); + } bgClass = 'black-bg'; } From 097257ade8b01a6f4ce4766cb844d06533bb74cf Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 13 Aug 2015 23:11:01 +0500 Subject: [PATCH 12/13] 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 | 54 +++++++++++-------- web/sass-files/sass/partials/_post_right.scss | 23 -------- web/sass-files/sass/partials/_responsive.scss | 6 +++ 5 files changed, 47 insertions(+), 50 deletions(-) diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 756ed521d2..53e8d0761f 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 49c12ad9c6..b772c7ee8f 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 0af5c01e2a..614fc085bd 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 { - - } - .center-file-help-picture { - - } + > div { + display: table-cell; + vertical-align: middle; } + + .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 41b7aaada2..4cf3e32a17 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 47b2b6bd74..52bb5eae64 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 { From 6ca6072f478f556ba2d25c9762f0d73c9e84c7f6 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 13 Aug 2015 23:33:18 +0500 Subject: [PATCH 13/13] 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 53e8d0761f..f456502796 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 b772c7ee8f..09cd8cb568 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 78006ff189..5b68b488f5 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 614fc085bd..bbf36ea934 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;