LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

fixed dropzone preview

Browse source
This commit is contained in:
bill bittner 2018-06-01 15:15:48 -07:00
parent f1ae2e5bc7
commit a287bf9492
5 changed files with 38 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
client/build/components/DropzonePreview/index.js → client/build/components/DropzonePreviewImage/index.js
View file

@ -100,9 +100,8 @@ function (_React$Component) {
key: "render", key: "render",
value: function render() { value: function render() {
return _react.default.createElement("img", { return _react.default.createElement("img", {
id: "dropzone-preview",
src: this.state.imgSource, src: this.state.imgSource,
className: this.props.dimPreview ? 'publish-preview-dim' : '', className: 'dropzone-preview-image ' + (this.props.dimPreview ? 'publish-preview-dim' : ''),
alt: "publish preview" alt: "publish preview"
}); });
} }

12
client/build/containers/Dropzone/view.js
View file

@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
var _file = require("../../utils/file"); var _file = require("../../utils/file");
var _DropzonePreview = _interopRequireDefault(require("@components/DropzonePreview")); var _DropzonePreviewImage = _interopRequireDefault(require("@components/DropzonePreviewImage"));
var _DropzoneDropItDisplay = _interopRequireDefault(require("@components/DropzoneDropItDisplay")); var _DropzoneDropItDisplay = _interopRequireDefault(require("@components/DropzoneDropItDisplay"));
@ -179,13 +179,17 @@ function (_React$Component) {
onMouseEnter: this.handleMouseEnter, onMouseEnter: this.handleMouseEnter,
onMouseLeave: this.handleMouseLeave, onMouseLeave: this.handleMouseLeave,
onClick: this.handleClick onClick: this.handleClick
}, this.props.file ? _react.default.createElement("div", null, _react.default.createElement(_DropzonePreview.default, { }, this.props.file ? _react.default.createElement("div", {
className: 'dropzone-preview-wrapper'
}, _react.default.createElement(_DropzonePreviewImage.default, {
dimPreview: this.state.dimPreview, dimPreview: this.state.dimPreview,
file: this.props.file, file: this.props.file,
thumbnail: this.props.thumbnail thumbnail: this.props.thumbnail
}), this.state.dragOver ? _react.default.createElement(_DropzoneDropItDisplay.default, null) : null, this.state.mouseOver ? _react.default.createElement(_DropzoneInstructionsDisplay.default, { }), _react.default.createElement("div", {
className: 'dropzone-preview-overlay'
}, this.state.dragOver ? _react.default.createElement(_DropzoneDropItDisplay.default, null) : null, this.state.mouseOver ? _react.default.createElement(_DropzoneInstructionsDisplay.default, {
fileError: this.props.fileError fileError: this.props.fileError
}) : null) : this.state.dragOver ? _react.default.createElement(_DropzoneDropItDisplay.default, null) : _react.default.createElement(_DropzoneInstructionsDisplay.default, { }) : null)) : this.state.dragOver ? _react.default.createElement(_DropzoneDropItDisplay.default, null) : _react.default.createElement(_DropzoneInstructionsDisplay.default, {
fileError: this.props.fileError fileError: this.props.fileError
}))); })));
} }

18
client/scss/containers/_dropzone.scss
View file

@ -30,9 +30,25 @@
text-align: center; text-align: center;
} }
#dropzone-preview { .dropzone-preview-image {
display: block; display: block;
padding: 1em; padding: 1em;
width: calc(100% - 2em); width: calc(100% - 2em);
} }
.dropzone-preview-wrapper {
position: relative;
.dropzone-preview-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
justify-content: center;
}
}

3
client/src/components/DropzonePreview/index.jsx → client/src/components/DropzonePreviewImage/index.jsx
View file

@ -44,9 +44,8 @@ class PublishPreview extends React.Component {
render () { render () {
return ( return (
<img <img
id='dropzone-preview'
src={this.state.imgSource} src={this.state.imgSource}
className={this.props.dimPreview ? 'publish-preview-dim' : ''} className={'dropzone-preview-image ' + (this.props.dimPreview ? 'publish-preview-dim' : '')}
alt='publish preview' alt='publish preview'
/> />
); );

8
client/src/containers/Dropzone/view.jsx
View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { validateFile } from '../../utils/file'; import { validateFile } from '../../utils/file';
import DropzonePreview from '@components/DropzonePreview'; import DropzonePreviewImage from '@components/DropzonePreviewImage';
import DropzoneDropItDisplay from '@components/DropzoneDropItDisplay'; import DropzoneDropItDisplay from '@components/DropzoneDropItDisplay';
import DropzoneInstructionsDisplay from '@components/DropzoneInstructionsDisplay'; import DropzoneInstructionsDisplay from '@components/DropzoneInstructionsDisplay';
@ -105,12 +105,13 @@ class Dropzone extends React.Component {
onMouseLeave={this.handleMouseLeave} onMouseLeave={this.handleMouseLeave}
onClick={this.handleClick}> onClick={this.handleClick}>
{this.props.file ? ( {this.props.file ? (
<div> <div className={'dropzone-preview-wrapper'}>
<DropzonePreview <DropzonePreviewImage
dimPreview={this.state.dimPreview} dimPreview={this.state.dimPreview}
file={this.props.file} file={this.props.file}
thumbnail={this.props.thumbnail} thumbnail={this.props.thumbnail}
/> />
<div className={'dropzone-preview-overlay'}>
{ this.state.dragOver ? <DropzoneDropItDisplay /> : null } { this.state.dragOver ? <DropzoneDropItDisplay /> : null }
{ this.state.mouseOver ? ( { this.state.mouseOver ? (
<DropzoneInstructionsDisplay <DropzoneInstructionsDisplay
@ -118,6 +119,7 @@ class Dropzone extends React.Component {
/> />
) : null } ) : null }
</div> </div>
</div>
) : ( ) : (
this.state.dragOver ? <DropzoneDropItDisplay /> : ( this.state.dragOver ? <DropzoneDropItDisplay /> : (
<DropzoneInstructionsDisplay <DropzoneInstructionsDisplay