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 (limited to 'web') 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