Merge pull request #22 from Robinsstudio/experiment

Améliorations ergonomiques diverses

Author: Robinsstudio

src/ExplorerView.js

@@ -11,10 +11,14 @@ class ExplorerView extends Component {
 		this.state = {
 			contextMenu: { visible: false },
 			sessionView: { visible: false, sessions: [] },
-			displayByList: false
+			displayByList: false,
+			copiedFile: null
 		};
 
 		this.createFolder = this.createFolder.bind(this);
+		this.copyFile = this.copyFile.bind(this);
+		this.dropFile = this.dropFile.bind(this);
+		this.pasteFile = this.pasteFile.bind(this);
 		this.handleContextMenu = this.handleContextMenu.bind(this);
 		this.hideContextMenu = this.hideContextMenu.bind(this);
 
@@ -30,6 +34,25 @@ class ExplorerView extends Component {
 		this.props.requestFolder(_id);
 	}
 
+	copyFile(_id) {
+		this.setState({ copiedFile: _id });
+	}
+
+	pasteFile() {
+		const { props: { folder: { active: { _id } }, refresh }, state: { copiedFile } } = this;
+		request('Paste', { _id: copiedFile, idParent: _id }).then(() => refresh());
+	}
+
+	dropFile(event, _id) {
+		const { refresh } = this.props;
+		['folder', 'question', 'qcm'].forEach(type => {
+			if (event.dataTransfer.types.includes(type)) {
+				const file = JSON.parse(event.dataTransfer.getData(type));
+				request('Move', { _id: file._id, idParent: _id }).then(() => refresh());
+			}
+		});
+	}
+
 	handleContextMenu(event, items = []) {
 		const { pageX, pageY, screenX, screenY } = event;
 		const x = screenX - window.screenX;
@@ -43,6 +66,7 @@ class ExplorerView extends Component {
 	buildMenuItems(items) {
 		const { create, folder, refresh } = this.props;
 		return items.concat(
+			{ label: 'Coller', onClick: this.pasteFile },
 			{ label: 'Nouveau dossier', onClick: () => {
 				Modals.showPromptModal('Nouveau dossier', 'Entrez un nom de dossier ici...').then(name => this.createFolder(name)).catch(() => {});
 			}},
@@ -64,6 +88,8 @@ class ExplorerView extends Component {
 				folder={folder}
 				file={file}
 				edit={edit}
+				copyFile={this.copyFile}
+				dropFile={this.dropFile}
 				requestFolder={requestFolder}
 				refresh={refresh}
 				handleContextMenu={handleContextMenu}
@@ -75,6 +101,20 @@ class ExplorerView extends Component {
 	toggleDisplay(displayByList) {
 		this.setState({ displayByList });
 	}
+
+	handleDragOver(event) {
+		event.target.classList.add('dropZone');
+		event.preventDefault();
+	}
+
+	handleDragLeave(event) {
+		event.target.classList.remove('dropZone');
+	}
+
+	handleDrop(event, _id) {
+		this.dropFile(event, _id);
+		event.target.classList.remove('dropZone');
+	}
 
 	render() {
 		const {
@@ -93,7 +133,12 @@ class ExplorerView extends Component {
 					<div id="path">
 						{[].concat(...[{ name: 'Explorer' }, ...path].map(folder => {
 							return [
-								<span onClick={() => this.goBack(folder._id)}>{folder.name}</span>,
+								<span
+									onClick={() => this.goBack(folder._id)}
+									onDragOver={this.handleDragOver}
+									onDragLeave={this.handleDragLeave}
+									onDrop={e => this.handleDrop(e, folder._id)}
+								>{folder.name}</span>,
 								<div className="arrow"/>
 							]
 						})).slice(0, -1)}

src/File.js

@@ -6,7 +6,10 @@ import request from './request';
 class File extends Component {
 	constructor(props) {
 		super(props);
-		this.state = { renaming: false };
+		this.state = {
+			renaming: false,
+			dragging: false
+		};
 
 		this.open = this.open.bind(this);
 		this.rename = this.rename.bind(this);
@@ -15,6 +18,10 @@ class File extends Component {
 		this.stopRenaming = this.stopRenaming.bind(this);
 		this.handleContextMenu = this.handleContextMenu.bind(this);
 		this.handleDragStart = this.handleDragStart.bind(this);
+		this.handleDragEnd = this.handleDragEnd.bind(this);
+		this.handleDragOver = this.handleDragOver.bind(this);
+		this.handleDragLeave = this.handleDragLeave.bind(this);
+		this.handleDrop = this.handleDrop.bind(this);
 	}
 
 	open() {
@@ -65,6 +72,7 @@ class File extends Component {
 	handleContextMenu(event) {
 		const {
 			file: { name, type, url, sessions, _id },
+			copyFile,
 			refresh,
 			updateSessionView
 		} = this.props;
@@ -89,7 +97,8 @@ class File extends Component {
 				label: 'Supprimer',
 				onClick: () => Modals.showConfirmModal('Supprimer', `Voulez-vous vraiment supprimer ${name} ?`)
 					.then(this.remove).catch(() => {})
-			}
+			},
+			{ label: 'Copier', onClick: () => copyFile(_id) }
 		]
 		.concat(type === 'qcm' ? sharedLinkItem : [])
 		.concat(type === 'qcm' ? resultsItem : []);
@@ -99,15 +108,53 @@ class File extends Component {
 
 	handleDragStart(event) {
 		const { file } = this.props;
-		if (file.type === 'question') {
-			event.dataTransfer.setData('question', JSON.stringify(file));
+		event.dataTransfer.setData(file.type, JSON.stringify(file));
+		this.setState({ dragging: true });
+	}
+
+	handleDragEnd() {
+		this.setState({ dragging: false });
+	}
+
+	handleDragOver(event) {
+		const { dragging } = this.state;
+		const element = event.target;
+		if (!dragging && element.classList.contains('folder')) {
+			element.classList.add('grow');
+		}
+		event.preventDefault();
+	}
+
+	handleDragLeave(event) {
+		const element = event.target;
+		element.classList.remove('grow');
+	}
+
+	handleDrop(event) {
+		const { props: { file: { _id }, dropFile }, state: { dragging } } = this;
+		const element = event.target;
+
+		if (!dragging && element.classList.contains('folder')) {
+			dropFile(event, _id);
+			element.classList.remove('grow');
 		}
 	}
 
 	render() {
 		const { props: { file: { type, name } }, state: { renaming } } = this;
+
 		return (
-			<div className={`file ${renaming ? 'renaming' : ''}`} onDoubleClick={this.open} onContextMenu={this.handleContextMenu} onDragStart={this.handleDragStart} draggable>
+			<div
+				className={`file ${renaming ? 'renaming' : ''}`}
+				onDoubleClick={this.open}
+				onContextMenu={this.handleContextMenu}
+				onDragStart={this.handleDragStart}
+				onDragEnd={this.handleDragEnd}
+				onDragOver={this.handleDragOver}
+				onDragLeave={this.handleDragLeave}
+				onDrop={this.handleDrop}
+				draggable
+			>
 				<div className={type}/>
 				<div className="fileName">
 					{(renaming) ? <AutoFocusInput value={name} onStopEditing={this.stopRenaming}/> : name}

src/style/editor.css

@@ -13,9 +13,4 @@
 
 .stretch {
 	flex-grow: 1;
-}
-
-.dropZone {
-	border: 1px blue dotted;
-	background-color: rgba(98, 156, 201, .5);
 }

src/style/explorer.css

@@ -69,6 +69,12 @@
 .folder, .question, .qcm {
 	width: 100px;
 	height: 100px;
+	transition: transform .2s ease-in-out;
+}
+
+.folder.grow {
+	transform: scale(1.2);
+	transition: transform .2s ease-in-out;
 }
 
 .list .folder, .list .question, .list .qcm {
@@ -102,6 +108,7 @@
 .renaming .fileName {
 	width: auto;
 	overflow: visible;
+	z-index: 1;
 }
 
 .list .fileName {

src/style/global.css

@@ -44,4 +44,9 @@
 	flex: 1 0;
 	padding: 5px;
 	overflow: auto;
+}
+
+.dropZone {
+	border: 1px blue dotted;
+	background-color: rgba(98, 156, 201, .5);
 }