+
+ {empty && !drop ?
+
+
Drag directories to add
+
: null
+ }
+
Directory
@@ -79,18 +91,29 @@ class Sidebar extends Component {
currentIndex={currentDirIndex}
editIndex={editDirIndex}
editItem={editItem}
- /> :null
+ /> : null
}
+ {drop ?
+
+
+
Drag directories to add
+
+
: null
+ }
+
);
}
}
function mapStateToProps(state) {
+ const {drop} = state.window;
const {directories, currentDirIndex, editDirIndex, editItem} = state.directories;
+
return {
+ drop,
directories,
currentDirIndex,
editDirIndex,
diff --git a/app/components/Sidebar/Sidebar.scss b/app/components/Sidebar/Sidebar.scss
index 2e85ffb..97139e0 100644
--- a/app/components/Sidebar/Sidebar.scss
+++ b/app/components/Sidebar/Sidebar.scss
@@ -28,3 +28,50 @@
}
+.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%);
+ }
+ }
+}
+
+.sidebar_drop {
+ .part {
+ 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%);
+ }
+}
diff --git a/app/reducers/window.js b/app/reducers/window.js
index 942e53f..d302222 100644
--- a/app/reducers/window.js
+++ b/app/reducers/window.js
@@ -13,7 +13,8 @@ const initialState = {
scroll: {
top: 0,
left: 0,
- }
+ },
+ drop: false,
};
function window(state = initialState, {type, payload}) {
@@ -45,7 +46,12 @@ function window(state = initialState, {type, payload}) {
...state,
scroll,
};
-
+ case 'saveDrop':
+ const drop = payload;
+ return {
+ ...state,
+ drop,
+ };
default:
return state;
}
diff --git a/app/routes.js b/app/routes.js
index 855c15c..4547bee 100644
--- a/app/routes.js
+++ b/app/routes.js
@@ -22,6 +22,9 @@ export default () => (
+
+ {/**/}
+ {/**/}
diff --git a/app/routes/ImagePage.js b/app/routes/ImagePage.js
index 8a092e6..48c13c2 100644
--- a/app/routes/ImagePage.js
+++ b/app/routes/ImagePage.js
@@ -9,6 +9,8 @@ import ContentLayout from '../components/MainLayout/ContentLayout';
import ImageTop from '../components/Image/ImageTop';
import ImageWrapper from '../components/Image/ImageWrapper';
+import MainPage from './MainPage';
+
import {TITLE_BAR_HEIGHT, CONTENT_TOP_HEIGHT} from '../constants'
class ImagePage extends Component {
@@ -21,7 +23,6 @@ class ImagePage extends Component {
handleOpenMenu, handleCopyImages, handleConfirmDeleteImages
} = this.props;
return (
-
}
hideX={false}
@@ -46,7 +47,6 @@ class ImagePage extends Component {
/> : null
}
-
);
}
}
diff --git a/app/routes/IndexPage.js b/app/routes/IndexPage.js
index 4a1c836..50b9614 100644
--- a/app/routes/IndexPage.js
+++ b/app/routes/IndexPage.js
@@ -8,6 +8,8 @@ import ContentLayout from '../components/MainLayout/ContentLayout';
import ImagesTop from '../components/Images/ImagesTop';
import ImageList from '../components/Images/ImageList';
+import MainPage from './MainPage';
+
class IndexPage extends Component {
handleListScroll = (data) => {
@@ -19,12 +21,17 @@ class IndexPage extends Component {
render() {
const {
- path, imageWidth, isScroll, selectImages, showImages, menu, size, sidebarWidth, offsetX, scroll, directories, currentDirIndex,
+ path, exist, imageWidth, isScroll, selectImages, showImages, menu, size, sidebarWidth, offsetX, scroll, drop, directories, currentDirIndex,
handlePinchContent, handleOpenMenu, handleClickBlank, handleClickImage, handleDoubleClickImage, handleRightClickImage,
handleCopyImages, handlePasteImages, handleConfirmDeleteImages, handleSelectAllImages
} = this.props;
+
+ const error = directories && directories.length > 0 && !directories[currentDirIndex].exist;
return (
+
0 ?
: null
}
@@ -57,20 +64,23 @@ class IndexPage extends Component {
/> : null
}
+
);
}
}
function mapStateToProps(state) {
- const {path, images, selectImages, column, imageWidth, isScroll, showImages, menu} = state.images;
- const {size, sidebarWidth, offsetX, scroll} = state.window;
+ const {path, exist, images, selectImages, column, imageWidth, isScroll, showImages, menu} = state.images;
+ const {size, sidebarWidth, offsetX, scroll, drop} = state.window;
const {directories, currentDirIndex} = state.directories;
return {
path,
+ exist,
size,
sidebarWidth,
offsetX,
scroll,
+ drop,
images,
selectImages,
column,
diff --git a/app/routes/MainPage.js b/app/routes/MainPage.js
index 669d973..5ce3344 100644
--- a/app/routes/MainPage.js
+++ b/app/routes/MainPage.js
@@ -102,7 +102,7 @@ class MainPage extends Component {
};
render() {
- const {children, directories, existWarning, deleteConfirm, handleDeleteImages, handleCloseWarning, handleCloseConfirm} = this.props;
+ const {children, existWarning, deleteConfirm, handleDeleteImages, handleCloseWarning, handleCloseConfirm} = this.props;
return (
@@ -111,7 +111,6 @@ class MainPage extends Component {
sidebar={}
handleDropDirectories={this.handleDropDirectories}
handleDropImages={this.handleDropImages}
- empty={!directories || directories.length === 0}
>
{children}
@@ -155,7 +154,6 @@ function mapStateToProps(state) {
location,
existWarning,
deleteConfirm,
- directories
};
}