File drop UI fixes and improvements

res/css/structures/_MainSplit.scss

@@ -22,22 +22,30 @@ limitations under the License.
 }
 
 .mx_MainSplit > .mx_RightPanel_ResizeWrapper {
-    padding: 5px;
-    // margin left to not allow the handle to not encroach on the space for the scrollbar
-    margin-left: 8px;
+    padding: 0 5px 5px 0px;
     height: calc(100vh - 51px); // height of .mx_RoomHeader.light-panel
 
+    .mx_RightPanel_ResizeHandle {
+        width: 9px;
+    }
+
     &:hover .mx_RightPanel_ResizeHandle {
-        // Need to use important to override element style attributes
-        // set by re-resizable
-        top: 50% !important;
-        transform: translate(0, -50%);
+        &::before {
+            position: absolute;
+            left: 6px;
+            top: 50%;
+            transform: translate(0, -50%);
+
+            height: 64px;
+            width: 4px;
+            border-radius: 4px;
+
+            content: ' ';
 
-        height: 64px !important; // to match width of the ones on roomlist
-        width: 4px !important;
-        border-radius: 4px !important;
+            background-color: $primary-fg-color;
+            opacity: 0.8;
 
-        background-color: $primary-fg-color;
-        opacity: 0.8;
+            margin-left: -10px;
+        }
     }
 }

res/css/structures/_RoomView.scss

@@ -23,32 +23,33 @@ limitations under the License.
 .mx_RoomView_fileDropTarget {
     min-width: 0px;
     width: 100%;
+    height: 100%;
+
     font-size: $font-18px;
     text-align: center;
 
     pointer-events: none;
 
-    padding-left: 12px;
-    padding-right: 12px;
-    margin-left: -12px;
-
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
 
     background-color: $droptarget-bg-color;
-    border: 2px #e1dddd solid;
-    border-bottom: none;
+
     position: absolute;
-    top: 52px;
-    bottom: 0px;
     z-index: 3000;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .mx_RoomView_fileDropTargetLabel {
-    top: 50%;
-    width: 100%;
-    margin-top: -50px;
     position: absolute;
+
+    border-radius: 10px;
+    padding: 10px;
+
+    background-color: $menu-bg-color;
 }
 
 .mx_RoomView_auxPanel {
@@ -116,16 +117,23 @@ limitations under the License.
     height: 50px;
 }
 
-.mx_RoomView_body {
+.mx_RoomView_container {
     position: relative; //for .mx_RoomView_auxPanel_fullHeight
     display: flex;
     flex-direction: column;
+}
+
+.mx_RoomView_body {
+    display: flex;
+    flex-direction: column;
     flex: 1;
     min-width: 0;
 
     .mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner {
         order: 2;
     }
+
+    margin-right: 10px;
 }
 
 .mx_RoomView_body .mx_RoomView_timeline {

src/components/structures/RoomView.tsx

@@ -187,6 +187,7 @@ export interface IState {
     rejecting?: boolean;
     rejectError?: Error;
     hasPinnedWidgets?: boolean;
+    dragCounter: number;
 }
 
 export default class RoomView extends React.Component<IProps, IState> {
@@ -237,6 +238,7 @@ export default class RoomView extends React.Component<IProps, IState> {
             canReply: false,
             useIRCLayout: SettingsStore.getValue("useIRCLayout"),
             matrixClientIsReady: this.context && this.context.isInitialSyncComplete(),
+            dragCounter: 0,
         };
 
         this.dispatcherRef = dis.register(this.onAction);
@@ -525,8 +527,8 @@ export default class RoomView extends React.Component<IProps, IState> {
             if (!roomView.ondrop) {
                 roomView.addEventListener('drop', this.onDrop);
                 roomView.addEventListener('dragover', this.onDragOver);
-                roomView.addEventListener('dragleave', this.onDragLeaveOrEnd);
-                roomView.addEventListener('dragend', this.onDragLeaveOrEnd);
+                roomView.addEventListener('dragenter', this.onDragEnter);
+                roomView.addEventListener('dragleave', this.onDragLeave);
             }
         }
 
@@ -570,8 +572,8 @@ export default class RoomView extends React.Component<IProps, IState> {
             const roomView = this.roomView.current;
             roomView.removeEventListener('drop', this.onDrop);
             roomView.removeEventListener('dragover', this.onDragOver);
-            roomView.removeEventListener('dragleave', this.onDragLeaveOrEnd);
-            roomView.removeEventListener('dragend', this.onDragLeaveOrEnd);
+            roomView.removeEventListener('dragenter', this.onDragEnter);
+            roomView.removeEventListener('dragleave', this.onDragLeave);
         }
         dis.unregister(this.dispatcherRef);
         if (this.context) {
@@ -1108,14 +1110,38 @@ export default class RoomView extends React.Component<IProps, IState> {
         this.updateTopUnreadMessagesBar();
     };
 
+    private onDragEnter = ev => {
+        ev.stopPropagation();
+        ev.preventDefault();
+
+        this.setState({
+            dragCounter: this.state.dragCounter + 1,
+            draggingFile: true,
+        });
+    };
+
+    private onDragLeave = ev => {
+        ev.stopPropagation();
+        ev.preventDefault();
+
+        this.setState({
+            dragCounter: this.state.dragCounter - 1,
+        });
+
+        if (this.state.dragCounter == 0) {
+            this.setState({
+                draggingFile: false,
+            });
+        }
+    };
+
     private onDragOver = ev => {
         ev.stopPropagation();
         ev.preventDefault();
 
         ev.dataTransfer.dropEffect = 'none';
 
         if (ev.dataTransfer.types.includes("Files") || ev.dataTransfer.types.includes("application/x-moz-file")) {
-            this.setState({ draggingFile: true });
             ev.dataTransfer.dropEffect = 'copy';
         }
     };
@@ -1126,14 +1152,12 @@ export default class RoomView extends React.Component<IProps, IState> {
         ContentMessages.sharedInstance().sendContentListToRoom(
             ev.dataTransfer.files, this.state.room.roomId, this.context,
         );
-        this.setState({ draggingFile: false });
         dis.fire(Action.FocusComposer);
-    };
 
-    private onDragLeaveOrEnd = ev => {
-        ev.stopPropagation();
-        ev.preventDefault();
-        this.setState({ draggingFile: false });
+        this.setState({
+            draggingFile: false,
+            dragCounter: this.state.dragCounter - 1,
+        });
     };
 
     private injectSticker(url, info, text) {
@@ -2003,22 +2027,24 @@ export default class RoomView extends React.Component<IProps, IState> {
                             appsShown={this.state.showApps}
                         />
                         <MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier}>
-                            <div className="mx_RoomView_body">
+                            <div className={"mx_RoomView_container"}>
                                 {auxPanel}
-                                <div className={timelineClasses}>
-                                    {topUnreadMessagesBar}
-                                    {jumpToBottom}
-                                    {messagePanel}
-                                    {searchResultsPanel}
-                                </div>
-                                <div className={statusBarAreaClass}>
-                                    <div className="mx_RoomView_statusAreaBox">
-                                        <div className="mx_RoomView_statusAreaBox_line" />
-                                        {statusBar}
+                                <div className="mx_RoomView_body">
+                                    <div className={timelineClasses}>
+                                        {topUnreadMessagesBar}
+                                        {jumpToBottom}
+                                        {messagePanel}
+                                        {searchResultsPanel}
+                                    </div>
+                                    <div className={statusBarAreaClass}>
+                                        <div className="mx_RoomView_statusAreaBox">
+                                            <div className="mx_RoomView_statusAreaBox_line" />
+                                            {statusBar}
+                                        </div>
                                     </div>
+                                    {previewBar}
+                                    {messageComposer}
                                 </div>
-                                {previewBar}
-                                {messageComposer}
                             </div>
                         </MainSplit>
                     </ErrorBoundary>

src/contexts/RoomContext.ts

@@ -42,6 +42,7 @@ const RoomContext = createContext<IState>({
     canReply: false,
     useIRCLayout: false,
     matrixClientIsReady: false,
+    dragCounter: 0,
 });
 RoomContext.displayName = "RoomContext";
 export default RoomContext;