From b3c45d004b3871a0d6f33cea20d7ea6f505653b1 Mon Sep 17 00:00:00 2001 From: Torjus Date: Tue, 31 Jul 2018 15:24:08 +0200 Subject: [PATCH] Add overlay when holding file above drop element --- .../FileSharing/DragDropSharing.jsx | 14 ++ app/lib/components/FileSharing/index.jsx | 5 +- app/lib/components/Room.jsx | 179 +++++++++--------- app/stylus/components/FileSharing.styl | 19 ++ app/stylus/index.styl | 36 ++-- 5 files changed, 145 insertions(+), 108 deletions(-) create mode 100644 app/lib/components/FileSharing/DragDropSharing.jsx diff --git a/app/lib/components/FileSharing/DragDropSharing.jsx b/app/lib/components/FileSharing/DragDropSharing.jsx new file mode 100644 index 0000000..20ceade --- /dev/null +++ b/app/lib/components/FileSharing/DragDropSharing.jsx @@ -0,0 +1,14 @@ +import React from 'react'; +import dragDrop from 'drag-drop'; +import { shareFiles } from './index'; + +export const configureDragDrop = () => +{ + dragDrop('body', async(files) => await shareFiles(files)); +}; + +export const HoldingOverlay = () => ( +
+ Drop files here to share them +
+); \ No newline at end of file diff --git a/app/lib/components/FileSharing/index.jsx b/app/lib/components/FileSharing/index.jsx index 35c5cb1..398d0b8 100644 --- a/app/lib/components/FileSharing/index.jsx +++ b/app/lib/components/FileSharing/index.jsx @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import WebTorrent from 'webtorrent'; import createTorrent from 'create-torrent'; -import dragDrop from 'drag-drop'; import randomString from 'random-string'; import * as stateActions from '../../redux/stateActions'; import * as requestActions from '../../redux/requestActions'; @@ -26,7 +25,7 @@ const notifyPeers = (file) => store.dispatch(requestActions.sendFile(file, displayName, picture)); }; -const shareFiles = async(files) => +export const shareFiles = async(files) => { const notification = { @@ -70,8 +69,6 @@ const shareFiles = async(files) => }); }; -dragDrop('body', async(files) => await shareFiles(files)); - class FileSharing extends Component { constructor(props) diff --git a/app/lib/components/Room.jsx b/app/lib/components/Room.jsx index bfb12e9..a4d752a 100644 --- a/app/lib/components/Room.jsx +++ b/app/lib/components/Room.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import { connect } from 'react-redux'; import ReactTooltip from 'react-tooltip'; import PropTypes from 'prop-types'; @@ -18,6 +18,9 @@ import Draggable from 'react-draggable'; import { idle } from '../utils'; import Sidebar from './Sidebar'; import Filmstrip from './Filmstrip'; +import { configureDragDrop, HoldingOverlay } from './FileSharing/DragDropSharing'; + +configureDragDrop(); // Hide toolbars after 10 seconds of inactivity. const TIMEOUT = 10 * 1000; @@ -73,102 +76,106 @@ class Room extends React.Component }[room.mode]; return ( - -
- -
- + + - - - {room.advancedMode ? -
-
-

{room.state}

-
- :null - } - + + +
+ {toolAreaOpen ? + -
- - - - - + :null + } +
-
- {toolAreaOpen ? - - :null - } -
-
- + + ); } } diff --git a/app/stylus/components/FileSharing.styl b/app/stylus/components/FileSharing.styl index 736ff1b..dd158da 100644 --- a/app/stylus/components/FileSharing.styl +++ b/app/stylus/components/FileSharing.styl @@ -58,4 +58,23 @@ } } } +} + +#holding-overlay { + display: none; +} + +.drag #holding-overlay { + display: flex; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.6); + color: #FFF; + align-items: center; + justify-content: center; + font-size: 2rem; + z-index: 2000; } \ No newline at end of file diff --git a/app/stylus/index.styl b/app/stylus/index.styl index 328df97..3ae98ce 100644 --- a/app/stylus/index.styl +++ b/app/stylus/index.styl @@ -34,26 +34,26 @@ body { #multiparty-meeting { height: 100%; width: 100%; - - // Components - @import './components/Room'; - @import './components/Sidebar'; - @import './components/Me'; - @import './components/Peers'; - @import './components/Peer'; - @import './components/PeerView'; - @import './components/ScreenView'; - @import './components/Notifications'; - @import './components/Chat'; - @import './components/Settings'; - @import './components/ToolArea'; - @import './components/ParticipantList'; - @import './components/FullScreenView'; - @import './components/FullView'; - @import './components/Filmstrip'; - @import './components/FileSharing'; } +// Components +@import './components/Room'; +@import './components/Sidebar'; +@import './components/Me'; +@import './components/Peers'; +@import './components/Peer'; +@import './components/PeerView'; +@import './components/ScreenView'; +@import './components/Notifications'; +@import './components/Chat'; +@import './components/Settings'; +@import './components/ToolArea'; +@import './components/ParticipantList'; +@import './components/FullScreenView'; +@import './components/FullView'; +@import './components/Filmstrip'; +@import './components/FileSharing'; + // Hack to detect in JS the current media query #multiparty-meeting-media-query-detector { position: absolute;