diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview.js b/js/components/ascribe_uploader/file_drag_and_drop_preview.js index 4f3980c3..2842f925 100644 --- a/js/components/ascribe_uploader/file_drag_and_drop_preview.js +++ b/js/components/ascribe_uploader/file_drag_and_drop_preview.js @@ -1,3 +1,5 @@ +'use strict'; + import React from 'react'; import FileDragAndDropPreviewImage from './file_drag_and_drop_preview_image'; @@ -6,7 +8,7 @@ import FileDragAndDropPreviewOther from './file_drag_and_drop_preview_other'; let FileDragAndDropPreview = React.createClass({ - propsTypes: { + propTypes: { file: React.PropTypes.shape({ url: React.PropTypes.string, type: React.PropTypes.string @@ -28,20 +30,20 @@ let FileDragAndDropPreview = React.createClass({ render() { let previewElement; - // Decide wether an image or a placeholder picture should be displayed + // Decide whether an image or a placeholder picture should be displayed if(this.props.file.type.split('/')[0] === 'image') { - previewElement = (); } else { - previewElement = (); } return ( -
{previewElement}
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview_image.js b/js/components/ascribe_uploader/file_drag_and_drop_preview_image.js index 53790191..f2a12c36 100644 --- a/js/components/ascribe_uploader/file_drag_and_drop_preview_image.js +++ b/js/components/ascribe_uploader/file_drag_and_drop_preview_image.js @@ -1,3 +1,5 @@ +'use strict'; + import React from 'react'; import ProgressBar from 'react-progressbar'; @@ -18,6 +20,7 @@ let FileDragAndDropPreviewImage = React.createClass({ className="file-drag-and-drop-preview-image" style={imageStyle}> + ); } diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js b/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js index 18f4031c..96661c67 100644 --- a/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js +++ b/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js @@ -1,3 +1,5 @@ +'use strict'; + import React from 'react'; import ProgressBar from 'react-progressbar'; @@ -8,12 +10,13 @@ let FileDragAndDropPreviewOther = React.createClass({ }, render() { - return( -
+ {'.' + this.props.type}
diff --git a/js/components/register_piece.js b/js/components/register_piece.js index b12d2c2b..5ed7b0ba 100644 --- a/js/components/register_piece.js +++ b/js/components/register_piece.js @@ -179,7 +179,7 @@ let FileUploader = React.createClass( { } return name; }} - multiple={false}/> + multiple={true}/> ); } }); diff --git a/sass/ascribe_react_s3_fineuploader.scss b/sass/ascribe_react_s3_fineuploader.scss deleted file mode 100644 index e6583313..00000000 --- a/sass/ascribe_react_s3_fineuploader.scss +++ /dev/null @@ -1,64 +0,0 @@ -.file-drag-and-drop { - display: table-cell; - outline: 1px dashed #616161; - cursor: pointer; - vertical-align: middle; - text-align: center; - height:208px; - width: 672px; - background-color: #FAFAFA; - transition: .1s linear background-color; -} - -.file-drag-and-drop:hover { - background-color: rgba(72, 218, 203, 0.2); -} - -.file-drag-and-drop > span { - font-size: 1.5em; -} - -.has-files { - text-align: left; - padding: 3em 0 0 0; -} - -.file-drag-and-drop-position { - display: inline-block; - margin: 0 0 3em 3em; - float:left; -} - -.file-drag-and-drop-preview-table-wrapper { - display: table; - height:94px; - width:104px; -} - -.file-drag-and-drop-preview { - overflow:hidden; - cursor: default; - background-color: #EEEEEE; - border: 1px solid #616161; -} - -.file-drag-and-drop-preview-image { - display: table; - height:104px; - width:104px; - overflow:hidden; - border: 1px solid #616161; -} - -.file-drag-and-drop-preview-other { - display: table-cell; - text-align: center; - vertical-align: middle; - -} - -.file-drag-and-drop-preview-other span { - font-size: 1.1em; - display: block; - margin-top: -10px; -} diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss index 487aa1b0..adf3bd23 100644 --- a/sass/ascribe_uploader.scss +++ b/sass/ascribe_uploader.scss @@ -56,6 +56,33 @@ width:104px; overflow:hidden; border: 1px solid #616161; + text-align: center; +} + +.file-drag-and-drop-preview-image .delete-file { + font-size: 3em; + margin-top: .5em; + color: white; + text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; + cursor: pointer; + + &:hover { + color: #d9534f; + } +} + +.file-drag-and-drop-preview-other .delete-file { + position: relative; + top: .45em; + margin-top: 0; + font-size: 3em; + color: white; + text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; + cursor: pointer; + + &:hover { + color: #d9534f; + } } .file-drag-and-drop-preview-other { @@ -65,8 +92,9 @@ } -.file-drag-and-drop-preview-other span { - font-size: 1.1em; +.file-drag-and-drop-preview-other span:not(:first-child) { + font-size: 1.2em; + font-family: mercury_light; display: block; - margin-top: -10px; + margin-top: 1.5em; } diff --git a/sass/main.scss b/sass/main.scss index 0fa799ab..0593624e 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -22,7 +22,6 @@ $BASE_URL: '<%= BASE_URL %>'; @import 'ascribe_piece_register'; @import 'offset_right'; @import 'ascribe_settings'; -@import 'ascribe_react_s3_fineuploader'; body { background-color: #FDFDFD;