Skip to content

Commit

Permalink
Fix error path
Browse files Browse the repository at this point in the history
  • Loading branch information
Sorumi committed Jul 17, 2017
1 parent 8887311 commit 8f68a35
Show file tree
Hide file tree
Showing 21 changed files with 290 additions and 181 deletions.
1 change: 1 addition & 0 deletions app/components/Images/ImageList.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ class ImageList extends Component {
}, delay);
} else {
self.timeoutID = clearTimeout(self.timeoutID);
console.log('db')
onDoubleClick();
}
};
Expand Down
39 changes: 39 additions & 0 deletions app/components/MainLayout/ContentLayout.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion app/components/MainLayout/ContentLayout.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

25 changes: 23 additions & 2 deletions app/components/MainLayout/ContentLayout.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,24 @@ class ContentLayout extends Component {

render() {

const {top, children, hideX, isScroll} = this.props;
const {top, children, drop, hideX, isScroll, error} = this.props;

let layoutClassName = styles.layout;
layoutClassName = drop ? layoutClassName + ' ' + styles.layout_drop : layoutClassName;

let mainClassName = styles.main;
mainClassName = hideX ? mainClassName + ' ' + styles.hide_x : mainClassName;


return (
<div className={styles.layout}>
<div className={layoutClassName}>

{error && !drop ?
<div className={styles.hint}>
<p>This directory does not exist!</p>
</div> : null
}

<div className={styles.top}>
{top}
</div>
Expand All @@ -55,6 +67,15 @@ class ContentLayout extends Component {
{children}
</div>
</div>

{drop ?
<div className={styles.drop}>
<div className={styles.drop_child}>
<p>Drag images to copy</p>
</div>
</div> : null
}

</div>
);
}
Expand Down
49 changes: 49 additions & 0 deletions app/components/MainLayout/ContentLayout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -47,3 +47,52 @@
.content_wrapper {
height: 100%;
}


.drop {
position: absolute;
width: 100%;
height: 100%;
top: 0;
padding: 10px;
pointer-events: none;
background-color: rgba(0, 0, 0, 0.03);

.drop_child {
width: 100%;
height: 100%;
border: dashed 1px $gray-color;
color: $gray-color-dark;
font-size: 14px;
text-align: center;
p {
top: 50%;
left: 50%;
display: table;
transform: translate(-50%, -50%);
}
}
}

.layout_drop {
.top, .main {
opacity: 0.3;
}
}

.hint {
position: absolute;
width: 100%;
height: 100%;
top: 0;
padding: 10px;
color: $gray-color-light;
font-size: 14px;
text-align: center;
p {
top: 50%;
left: 50%;
display: table;
transform: translate(-50%, -50%);
}
}
52 changes: 2 additions & 50 deletions app/components/MainLayout/SideLayout.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion app/components/MainLayout/SideLayout.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

68 changes: 19 additions & 49 deletions app/components/MainLayout/SideLayout.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {Component} from 'react';
import React, {Component, cloneElement} from 'react';
import {connect} from 'react-redux'
import Draggable from 'react-draggable';

Expand All @@ -17,6 +17,7 @@ class SideLayout extends Component {

componentWillMount() {
const self = this;
const {handleChangeDrop} = this.props;

window.ondragenter = function (e) {
e.preventDefault();
Expand All @@ -30,34 +31,26 @@ class SideLayout extends Component {
console.log('over');
e.dataTransfer.dropEffect = 'copy';


self.setState({
drop: true,
});
handleChangeDrop(true);
return false;
};

window.ondrop = function (e) {
e.preventDefault();

console.log('hover');
self.setState({
drop: false,
});
handleChangeDrop(false);

self.handleFileDrop(e);

return false;
};

window.ondragleave = function (e) {
e.preventDefault();

console.log('leave');
handleChangeDrop(false);

self.setState({
drop: false,
});
return false;
};
}
Expand Down Expand Up @@ -99,53 +92,23 @@ class SideLayout extends Component {
};

render() {
const {sidebar, sidebarWidth, offsetX, bounds, children, empty} = this.props;

const {drop} = this.state;
const {sidebar, sidebarWidth, offsetX, bounds, children} = this.props;

let sidebarClassName = styles.sidebar_wrapper;
sidebarClassName = drop ? sidebarClassName + ' ' + styles.siderbar_drop : sidebarClassName;

let mainClassName = styles.main_wrapper;
mainClassName = drop ? mainClassName + ' ' + styles.main_drop : mainClassName;

return (
<div className={styles.layout}>

<div
className={sidebarClassName}
className={styles.sidebar}
style={{width: sidebarWidth + offsetX}}
>
{empty && !drop ?
<div className={styles.hint}>
<p>Drag directories to add</p>
</div> : null}
<div className={styles.sidebar}>
{sidebar}
</div>
{drop ?
<div className={styles.drop}>
<div className={styles.drop_child}>
<p>Drag directories to add</p>
</div>
</div> : null
}

{sidebar}
</div>

<div className={mainClassName}
<div className={styles.main}
style={{marginLeft: sidebarWidth + offsetX}}
>
<div className={styles.main}>
{children}
</div>
{drop ?
<div className={styles.drop}>
<div className={styles.drop_child}>
<p>Drag images to copy</p>
</div>
</div> : null
}
{children}
</div>

<Draggable
Expand All @@ -167,12 +130,13 @@ class SideLayout extends Component {
}

function mapStateToProps(state) {
const {size, sidebarWidth, offsetX, bounds} = state.window;
const {size, sidebarWidth, offsetX, bounds, drop} = state.window;
return {
size,
sidebarWidth,
offsetX,
bounds
bounds,
drop
};
}

Expand All @@ -184,6 +148,12 @@ function mapDispatchToProps(dispatch, ownProps) {
payload: x
})
},
handleChangeDrop: (drop) => {
dispatch({
type: 'window/saveDrop',
payload: drop
})
},

}

Expand Down
Loading

0 comments on commit 8f68a35

Please sign in to comment.