diff --git a/public/css/style.less b/public/css/style.less index 02a11e43fb..5cd6887afd 100644 --- a/public/css/style.less +++ b/public/css/style.less @@ -549,26 +549,34 @@ body .navbar .nodebb-inline-block { } #imagedrop { - background: rgba(64, 64, 64, 0.95); - padding: 0.5em; - display: block; - width: 90%; - min-height:25px; - margin: 1em auto; - resize: none; - color:white; - font-size:20px; - - div { - margin-right:10px; - } - span { - line-height:20px; - float:left; - } - button { - padding-left:5px; - } + text-align:center; + color:white; + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height:230px; + line-height:230px; + font-size:20px; + vertical-align: middle; + } + + #imagelist { + position: absolute; + bottom: 5px; + left: 0px; + padding-left:2em; + + div { + margin-right:5px; + } + span { + line-height:20px; + float:left; + } + button { + padding-left:5px; + } } } } diff --git a/public/src/modules/composer.js b/public/src/modules/composer.js index 97c4861f33..3e97fdb92d 100644 --- a/public/src/modules/composer.js +++ b/public/src/modules/composer.js @@ -10,6 +10,7 @@ define(['taskbar'], function(taskbar) { function loadFile(file) { var reader = new FileReader(); var dropDiv = $('#imagedrop'); + var imagelist = $('#imagelist'); var uuid = dropDiv.parents('[data-uuid]').attr('data-uuid'); var posts = composer.posts[uuid]; @@ -33,15 +34,11 @@ define(['taskbar'], function(taskbar) { if(index !== -1) { posts.images.splice(index, 1); } - - if(!dropDiv.children().length) { - dropDiv.html('Drag and drop images here'); - } }); imageLabel.append(closeButton); - dropDiv.append(imageLabel); - + imagelist.append(imageLabel); + dropDiv.hide(); }); reader.readAsDataURL(file); @@ -73,9 +70,6 @@ define(['taskbar'], function(taskbar) { var dt = e.dataTransfer; var files = dt.files; - if(!posts.images.length) - drop.html(''); - for (var i=0; i<files.length; i++) { loadFile(files[i]); } @@ -107,8 +101,11 @@ define(['taskbar'], function(taskbar) { '<button class="btn" data-action="discard" tabIndex="5"><i class="icon-remove"></i> Discard</button>' + '</div>' + '</div>' + - '<div id="imagedrop" style="display:none;"></div>'+ - '<textarea tabIndex="2"></textarea>' + + '<div style="position:relative;">'+ + '<div id="imagedrop" class=""><div>Drag and Drop Images Here</div></div>'+ + '<textarea tabIndex="2"></textarea>' + + '<div id="imagelist"></div>'+ + '</div>'+ '</div>'; document.body.insertBefore(composer.postContainer, taskbar); @@ -246,9 +243,12 @@ define(['taskbar'], function(taskbar) { btnRect = taskbarBtn.getBoundingClientRect(), taskbarRect = document.getElementById('taskbar').getBoundingClientRect(), dropDiv = $(composer.postContainer).find('#imagedrop'), + imagelist = $(composer.postContainer).find('#imagelist'), windowRect, leftPos; - dropDiv.html('Drag and drop images here').hide(); + dropDiv.hide(); + imagelist.empty(); + composer.postContainer.style.display = 'block'; windowRect = postWindowEl.getBoundingClientRect();