From 9ed5ca3ccb9b90fb5ceb18fad2f354727116044d Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 14 Aug 2015 13:20:39 +0100 Subject: [PATCH] implement a pretty droptarget when uploading files --- skins/base/css/organisms/RoomView.css | 36 +++++++++++++++++++++++++ skins/base/img/upload-big.png | Bin 0 -> 1598 bytes skins/base/views/organisms/RoomView.js | 13 +++++++-- src/controllers/organisms/RoomView.js | 15 ++++++++++- 4 files changed, 61 insertions(+), 3 deletions(-) create mode 100644 skins/base/img/upload-big.png diff --git a/skins/base/css/organisms/RoomView.css b/skins/base/css/organisms/RoomView.css index 7206a6e93d..bdcf8ac7bf 100644 --- a/skins/base/css/organisms/RoomView.css +++ b/skins/base/css/organisms/RoomView.css @@ -40,6 +40,42 @@ limitations under the License. flex: 0 0 88px; } +.mx_RoomView_fileDropTarget { + min-width: 0px; + max-width: 720px; + width: 100%; + font-size: 20px; + text-align: center; + + pointer-events: none; + + padding-left: 12px; + padding-right: 12px; + margin-left: -12px; + + -webkit-border-top-left-radius: 10px; + -webkit-border-top-right-radius: 10px; + -moz-border-radius-topleft: 10px; + -moz-border-radius-topright: 10px; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + + background-color: rgba(255, 255, 255, 0.9); + border: 2px dashed #80cef4; + border-bottom: none; + position: absolute; + top: 88px; + bottom: 0px; + z-index: 3000; +} + +.mx_RoomView_fileDropTargetLabel { + top: 50%; + width: 100%; + margin-top: -50px; + position: absolute; +} + .mx_RoomView_auxPanel { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; diff --git a/skins/base/img/upload-big.png b/skins/base/img/upload-big.png new file mode 100644 index 0000000000000000000000000000000000000000..7754f587175b09469539ba955a9ed21f8513f690 GIT binary patch literal 1598 zcmV-E2EqA>P)Px)_(?=TRA>e5nrmnrRTRh1JomkuG)c6Vmhb7uE$wwq)- zvzeV%*!yK(_n!Nk|D1E~ojbz;mgm2ps&l$ruX2#QQ%OQOowK^|9L#B|vMac~EM$dk zj-Xv`=TEm*O1|p?g6NSrE9_oklDTJQ2FjcY}y7c zqEpIQy;Zw;=x&ld4q19DI23uzL~vIYe1(&ThgxK}ON7^gL*XY_y~}NF2PYsI!QJAL^5qVMZ@7=#b^dzu{{pM!t4 zHxzmKss$%7p5uVV5$5)^-_zpol*!yvM}{JOtHHCIUG2Ix=g}XuOXUiL*=O+%k`9f4x-ysxx_<9LXo$zA`1t-jV<7{ zn6D?I8pPE+vJ)A?XXkp#KHW`{x7x)YK(~4Kf&PAh-Kj0$eT@zn!?&T~um;1kDyp9kd+C~zPD>akQbJWYTfqrq5lJgCSZi@=%X0S;-s*dF ze^GpSc<1-UXfzJVqJd8=X!@u~BV%qMl~tos=Qd6sTMn+`BR&3C9L}OE5OQa&1Y0qq zSY0f&m_X=HM&tNKpBilF@qRv*fEXU$Tw!TfV3{@Y-H*=4VH^jV-15ytLLYo~R7ts) z3O=?ZkI!S!96cAyK;r}{14J`EDyJqD_<9_p%0Ld!G|scLX7IVV2Ja*ER4kR(ZdotF z4dt1US4gL7G4a?nuT;#@eshc@7qrx!^ zUJBy1l!C$kL0=}NBTB0Kn-Hv{dO0+M+lkk<1XA#4=QQ{jgP4N3&{7ci1swT~j>I6U zrn+rI*VtJj=VhQF|E@X-T70Q4&tv8p7>Pryz*Ko{chW#5oET%0MK*0tUC)Vha4XSw+v&Or$LcO#=+6X|&Kx@4f~Zs+_4dlZ#2+ z<-!Sb@P@&Eo>nlZ62P+bwdk*Rn}lXJM^n}=oNTR2r_E^$ZVK{Q_83{kJX=HH^yc!_ zcp_t_)z8Cj^j9-VXBww>=)JP5$pI|Slj7g~osRU}$}1cj0++BB8&qf>y$Ai2{B^B` zp!YY*`uYmlsz|$!5xa(ld{Xw%CI^rze)cwN#JYhxw2F0jbILX?3K=biz{wcF`?H2} zqa7HjM^7(c(zfwiG(uowof5c>V(VR%6fY@mP=S)G7!=B~Y9+-jlhUA}lHvx1vaDKB z6kqxXXc^}+Lq!3n7vccUwQ0s)?_;~{^(AHcEK-b8968dY#eydD zMFlU0(#&QFoGD?~_J66kfd9VnxV$kvZ*mpME>&0RXF*N!F;)AMPXhPFnOW8NO3X^u zY&tiNAH<>xBwlLw|H|XXx2J!YOoUHQDazHVJgw-`H_;DA;}KQW9wVLf(INeBZ6EzS wN&g|*B%tAL1dfYh<&dhX&jq*pzomx%0j)v0<*?_>rT_o{07*qoM6N<$f^0ns(*OVf literal 0 HcmV?d00001 diff --git a/skins/base/views/organisms/RoomView.js b/skins/base/views/organisms/RoomView.js index 722a254fec..430f751f4f 100644 --- a/skins/base/views/organisms/RoomView.js +++ b/skins/base/views/organisms/RoomView.js @@ -155,15 +155,23 @@ module.exports = React.createClass({ } var roomEdit = null; - if (this.state.editingRoomSettings) { roomEdit = ; } - if (this.state.uploadingRoomSettings) { roomEdit = ; } + var fileDropTarget = null; + if (this.state.draggingFile) { + fileDropTarget =
+
+ Drop File Here
+ Drop File Here +
+
; + } + return (
+ { fileDropTarget }
    2. diff --git a/src/controllers/organisms/RoomView.js b/src/controllers/organisms/RoomView.js index d41bc40210..d3feff69f6 100644 --- a/src/controllers/organisms/RoomView.js +++ b/src/controllers/organisms/RoomView.js @@ -52,7 +52,8 @@ module.exports = { messageCap: INITIAL_SIZE, editingRoomSettings: false, uploadingRoomSettings: false, - numUnreadMessages: 0 + numUnreadMessages: 0, + draggingFile: false, } }, @@ -69,6 +70,8 @@ module.exports = { var messageWrapper = this.refs.messageWrapper.getDOMNode(); messageWrapper.removeEventListener('drop', this.onDrop); messageWrapper.removeEventListener('dragover', this.onDragOver); + messageWrapper.removeEventListener('dragleave', this.onDragLeaveOrEnd); + messageWrapper.removeEventListener('dragend', this.onDragLeaveOrEnd); } dis.unregister(this.dispatcherRef); if (MatrixClientPeg.get()) { @@ -173,6 +176,8 @@ module.exports = { messageWrapper.addEventListener('drop', this.onDrop); messageWrapper.addEventListener('dragover', this.onDragOver); + messageWrapper.addEventListener('dragleave', this.onDragLeaveOrEnd); + messageWrapper.addEventListener('dragend', this.onDragLeaveOrEnd); messageWrapper.scrollTop = messageWrapper.scrollHeight; @@ -272,6 +277,7 @@ module.exports = { var items = ev.dataTransfer.items; if (items.length == 1) { if (items[0].kind == 'file') { + this.setState({ draggingFile : true }); ev.dataTransfer.dropEffect = 'copy'; } } @@ -280,12 +286,19 @@ module.exports = { onDrop: function(ev) { ev.stopPropagation(); ev.preventDefault(); + this.setState({ draggingFile : false }); var files = ev.dataTransfer.files; if (files.length == 1) { this.uploadFile(files[0]); } }, + onDragLeaveOrEnd: function(ev) { + ev.stopPropagation(); + ev.preventDefault(); + this.setState({ draggingFile : false }); + }, + uploadFile: function(file) { this.setState({ upload: {