Wire up drag-drop file uploads for the thread view (#7860)

res/css/_components.scss

@@ -10,6 +10,7 @@
 @import "./structures/_ContextualMenu.scss";
 @import "./structures/_CreateRoom.scss";
 @import "./structures/_CustomRoomTagPanel.scss";
+@import "./structures/_FileDropTarget.scss";
 @import "./structures/_FilePanel.scss";
 @import "./structures/_GenericErrorPage.scss";
 @import "./structures/_GroupFilterPanel.scss";
@@ -141,11 +142,11 @@
 @import "./views/elements/_Dropdown.scss";
 @import "./views/elements/_EditableItemList.scss";
 @import "./views/elements/_ErrorBoundary.scss";
-@import "./views/elements/_GenericEventListSummary.scss";
 @import "./views/elements/_EventTilePreview.scss";
 @import "./views/elements/_ExternalLink.scss";
 @import "./views/elements/_FacePile.scss";
 @import "./views/elements/_Field.scss";
+@import "./views/elements/_GenericEventListSummary.scss";
 @import "./views/elements/_ImageView.scss";
 @import "./views/elements/_InfoTooltip.scss";
 @import "./views/elements/_InlineSpinner.scss";
@@ -183,9 +184,9 @@
 @import "./views/messages/_CallEvent.scss";
 @import "./views/messages/_CreateEvent.scss";
 @import "./views/messages/_DateSeparator.scss";
-@import "./views/messages/_JumpToDatePicker.scss";
 @import "./views/messages/_EventTileBubble.scss";
 @import "./views/messages/_HiddenBody.scss";
+@import "./views/messages/_JumpToDatePicker.scss";
 @import "./views/messages/_MEmoteBody.scss";
 @import "./views/messages/_MFileBody.scss";
 @import "./views/messages/_MImageBody.scss";

res/css/structures/_FileDropTarget.scss

@@ -0,0 +1,65 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@keyframes mx_FileDropTarget_animation {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 0.95;
+    }
+}
+
+.mx_FileDropTarget {
+    min-width: 0;
+    width: 100%;
+    height: 100%;
+
+    font-size: $font-18px;
+    text-align: center;
+
+    pointer-events: none;
+
+    background-color: $background;
+    opacity: 0.95;
+
+    position: absolute;
+    z-index: 3000;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    animation: mx_FileDropTarget_animation;
+    animation-duration: 0.5s;
+}
+
+@keyframes mx_FileDropTarget_image_animation {
+    from {
+        transform: scaleX(0);
+    }
+    to {
+        transform: scaleX(1);
+    }
+}
+
+.mx_FileDropTarget_image {
+    width: 32px;
+    animation: mx_FileDropTarget_image_animation;
+    animation-duration: 0.5s;
+    margin-bottom: 16px;
+}

res/css/structures/_RoomView.scss

@@ -32,56 +32,6 @@ limitations under the License.
     position: relative;
 }
 
-@keyframes mx_RoomView_fileDropTarget_animation {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 0.95;
-    }
-}
-
-.mx_RoomView_fileDropTarget {
-    min-width: 0px;
-    width: 100%;
-    height: 100%;
-
-    font-size: $font-18px;
-    text-align: center;
-
-    pointer-events: none;
-
-    background-color: $background;
-    opacity: 0.95;
-
-    position: absolute;
-    z-index: 3000;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    animation: mx_RoomView_fileDropTarget_animation;
-    animation-duration: 0.5s;
-}
-
-@keyframes mx_RoomView_fileDropTarget_image_animation {
-    from {
-        transform: scaleX(0);
-    }
-    to {
-        transform: scaleX(1);
-    }
-}
-
-.mx_RoomView_fileDropTarget_image {
-    width: 32px;
-    animation: mx_RoomView_fileDropTarget_image_animation;
-    animation-duration: 0.5s;
-    margin-bottom: 16px;
-}
-
 .mx_RoomView_auxPanel {
     min-width: 0px;
     width: 100%;

res/css/views/right_panel/_ThreadPanel.scss

@@ -106,11 +106,18 @@ limitations under the License.
         padding-right: 16px;
     }
 
-    &.mx_ThreadView .mx_AutoHideScrollbar {
+    &.mx_ThreadView .mx_ThreadView_timelinePanelWrapper {
         /* the scrollbar is 8px wide, and we want a 12px gap with the side of the
         panel. Hence the magic number, 8+4=12 */
         width: calc(100% - 4px);
         padding-right: 4px;
+        position: relative;
+        min-height: 0; // don't displace the composer
+        flex-grow: 1;
+
+        .mx_FileDropTarget {
+            border-radius: 8px;
+        }
     }
 
     .mx_RoomView_MessageList {