Improve file upload UX

Fix incorrect highlight logic

Fix transition on fileupload highlight

Handle drag leave

Fix draghover

Minor style improvements
This commit is contained in:
Haocen Xu 2019-08-15 19:28:42 -04:00
parent 30ddcacca6
commit 3a9730f883
No known key found for this signature in database
GPG Key ID: 3F0D955A0F6AD729
5 changed files with 168 additions and 28 deletions

View File

@ -80,10 +80,29 @@ body.loading {
margin-bottom: 20px; margin-bottom: 20px;
} }
#dropzone {
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
opacity: 0.6;
background-color: #99ccff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 25vh;
outline: 2px dashed #228bff;
outline-offset: -50px;
}
.dragAndDropFile{ .dragAndDropFile{
color:#777; color: #777;
font-size:1em; font-size: 1em;
display:inline; display: inline;
white-space: normal;
} }
#deletelink { #deletelink {
@ -124,6 +143,10 @@ body.loading {
margin-bottom: 10px; margin-bottom: 10px;
} }
#filewrap {
transition: background-color 0.75s ease-out;
}
.comment { .comment {
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
padding: 5px 0 5px 10px; padding: 5px 0 5px 10px;
@ -131,7 +154,7 @@ body.loading {
transition: background-color 0.75s ease-out; transition: background-color 0.75s ease-out;
} }
.comment.highlight { .highlight {
background-color: #ffdd86; background-color: #ffdd86;
transition: background-color 0.2s ease-in; transition: background-color 0.2s ease-in;
} }

View File

@ -115,10 +115,29 @@ h3.title {
margin-bottom: 20px; margin-bottom: 20px;
} }
#dropzone {
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
opacity: 0.6;
background-color: #99ccff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 25vh;
outline: 2px dashed #228bff;
outline-offset: -50px;
}
.dragAndDropFile{ .dragAndDropFile{
color:#777; color: #777;
font-size:1em; font-size: 1em;
display:inline; display: inline;
white-space: normal;
} }
#status { #status {
@ -405,6 +424,15 @@ h4.title {
.commentdate { color: #bfcede; } .commentdate { color: #bfcede; }
#filewrap {
transition: background-color 0.75s ease-out;
}
.highlight {
background-color: #ffdd86;
transition: background-color 0.2s ease-in;
}
img.vizhash { img.vizhash {
width: 16px; width: 16px;
height: 16px; height: 16px;

View File

@ -22,6 +22,27 @@
/** global: showdown */ /** global: showdown */
/** global: kjua */ /** global: kjua */
jQuery.fn.draghover = function() {
return this.each(function() {
let collection = $(),
self = $(this);
self.on('dragenter', function(e) {
if (collection.length === 0) {
self.trigger('draghoverstart');
}
collection = collection.add(e.target);
});
self.on('dragleave drop', function(e) {
collection = collection.not(e.target);
if (collection.length === 0) {
self.trigger('draghoverend');
}
});
});
};
// main application start, called when DOM is fully loaded // main application start, called when DOM is fully loaded
jQuery(document).ready(function() { jQuery(document).ready(function() {
'use strict'; 'use strict';
@ -2492,7 +2513,8 @@ jQuery.PrivateBin = (function($, RawDeflate) {
file, file,
$fileInput, $fileInput,
$dragAndDropFileName, $dragAndDropFileName,
attachmentHasPreview = false; attachmentHasPreview = false,
$dropzone;
/** /**
* sets the attachment but does not yet show it * sets the attachment but does not yet show it
@ -2714,7 +2736,9 @@ jQuery.PrivateBin = (function($, RawDeflate) {
// revert loading status… // revert loading status…
me.hideAttachment(); me.hideAttachment();
me.hideAttachmentPreview(); me.hideAttachmentPreview();
Alert.showError('Your browser does not support uploading encrypted files. Please use a newer browser.'); Alert.showError(
I18n._('Your browser does not support uploading encrypted files. Please use a newer browser.')
);
return; return;
} }
@ -2728,16 +2752,20 @@ jQuery.PrivateBin = (function($, RawDeflate) {
file = loadedFile; file = loadedFile;
fileReader.onload = function (event) { if (typeof loadedFile !== 'undefined') {
const dataURL = event.target.result; fileReader.onload = function (event) {
attachmentData = dataURL; const dataURL = event.target.result;
attachmentData = dataURL;
if (Editor.isPreview()) { if (Editor.isPreview()) {
me.setAttachment(dataURL, loadedFile.name || ''); me.handleAttachmentPreview($attachmentPreview, dataURL);
$attachmentPreview.removeClass('hidden'); $attachmentPreview.removeClass('hidden');
} }
};
fileReader.readAsDataURL(loadedFile); TopNav.highlightFileupload();
};
fileReader.readAsDataURL(loadedFile);
}
} }
/** /**
@ -2780,8 +2808,21 @@ jQuery.PrivateBin = (function($, RawDeflate) {
.attr('src', blobUrl)) .attr('src', blobUrl))
); );
} else if (mimeType.match(/\/pdf/i)) { } else if (mimeType.match(/\/pdf/i)) {
// PDFs are only displayed if the filesize is smaller than about 1MB (after base64 encoding).
// Bigger filesizes currently cause crashes in various browsers.
// See also: https://code.google.com/p/chromium/issues/detail?id=69227
// Firefox crashes with files that are about 1.5MB
// The performance with 1MB files is bearable
if (data.length > 1398488) {
Alert.showError(
I18n._('File too large to display a preview. Please download the attachment.')
); //TODO: is this error really neccessary?
return;
}
// Fallback for browsers, that don't support the vh unit // Fallback for browsers, that don't support the vh unit
var clientHeight = $(window).height(); const clientHeight = $(window).height();
$targetElement.html( $targetElement.html(
$(document.createElement('embed')) $(document.createElement('embed'))
@ -2808,12 +2849,12 @@ jQuery.PrivateBin = (function($, RawDeflate) {
return; return;
} }
const ignoreDragDrop = function(event) { const handleDragEnterOrOver = function(event) {
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
}; };
const drop = function(event) { const handleDrop = function(event) {
const evt = event.originalEvent; const evt = event.originalEvent;
evt.stopPropagation(); evt.stopPropagation();
evt.preventDefault(); evt.preventDefault();
@ -2830,9 +2871,19 @@ jQuery.PrivateBin = (function($, RawDeflate) {
} }
}; };
$(document).on('drop', drop); $(document).draghover().on({
$(document).on('dragenter', ignoreDragDrop); 'draghoverstart': function() {
$(document).on('dragover', ignoreDragDrop); // show dropzone to indicate drop support
$dropzone.removeClass('hidden');
},
'draghoverend': function() {
$dropzone.addClass('hidden');
}
});
$(document).on('drop', handleDrop);
$(document).on('dragenter dragover', handleDragEnterOrOver);
$fileInput.on('change', function () { $fileInput.on('change', function () {
readFileData(); readFileData();
}); });
@ -2920,6 +2971,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {
$attachmentLink = $('#attachment a'); $attachmentLink = $('#attachment a');
$attachmentPreview = $('#attachmentPreview'); $attachmentPreview = $('#attachmentPreview');
$dragAndDropFileName = $('#dragAndDropFileName'); $dragAndDropFileName = $('#dragAndDropFileName');
$dropzone = $('#dropzone');
$fileInput = $('#file'); $fileInput = $('#file');
addDragDropHandler(); addDragDropHandler();
@ -3741,6 +3793,25 @@ jQuery.PrivateBin = (function($, RawDeflate) {
retryButtonCallback = callback; retryButtonCallback = callback;
} }
/**
* Highlight file upload
*
* @name TopNav.highlightFileupload
* @function
*/
me.highlightFileupload = function()
{
// visually indicate file uploaded
const $attachDropdownToggle = $attach.children('.dropdown-toggle');
if ($attachDropdownToggle.attr('aria-expanded') === 'false') {
$attachDropdownToggle.click();
}
$fileWrap.addClass('highlight');
setTimeout(function () {
$fileWrap.removeClass('highlight');
}, 300);
}
/** /**
* init navigation manager * init navigation manager
* *
@ -4479,7 +4550,9 @@ jQuery.PrivateBin = (function($, RawDeflate) {
// log detailed error, but display generic translation // log detailed error, but display generic translation
console.error(message); console.error(message);
Alert.showError('Could not decrypt data. Did you enter a wrong password? Retry with the button at the top.'); Alert.showError(
I18n._('Could not decrypt data. Did you enter a wrong password? Retry with the button at the top.')
);
// reset password, so it can be re-entered // reset password, so it can be re-entered
Prompt.reset(); Prompt.reset();
@ -4548,8 +4621,8 @@ jQuery.PrivateBin = (function($, RawDeflate) {
* @param {object} document * @param {object} document
* @class * @class
*/ */
var InitialCheck = (function () { const InitialCheck = (function () {
var me = {}; const me = {};
/** /**
* blacklist of UserAgents (parts) known to belong to a bot * blacklist of UserAgents (parts) known to belong to a bot
@ -4762,7 +4835,9 @@ jQuery.PrivateBin = (function($, RawDeflate) {
// missing decryption key (or paste ID) in URL? // missing decryption key (or paste ID) in URL?
if (window.location.hash.length === 0) { if (window.location.hash.length === 0) {
Alert.showError('Cannot decrypt paste: Decryption key missing in URL (Did you use a redirector or an URL shortener which strips part of the URL?)'); Alert.showError(
I18n._('Cannot decrypt paste: Decryption key missing in URL (Did you use a redirector or an URL shortener which strips part of the URL?)')
);
return; return;
} }
} }

View File

@ -552,6 +552,13 @@ if ($DISCUSSION):
</div> </div>
<?php <?php
endif; endif;
?>
<?php
if ($FILEUPLOAD):
?>
<div id="dropzone" class="hidden" tabindex="-1" aria-hidden="true"></div>
<?php
endif;
?> ?>
</body> </body>
</html> </html>

View File

@ -254,6 +254,13 @@ if ($DISCUSSION):
</div> </div>
<?php <?php
endif; endif;
?>
<?php
if ($FILEUPLOAD):
?>
<div id="dropzone" class="hidden" tabindex="-1" aria-hidden="true"></div>
<?php
endif;
?> ?>
<section class="container"> <section class="container">
<div id="noscript" role="alert" class="nonworking alert alert-info noscript-hide"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"> <div id="noscript" role="alert" class="nonworking alert alert-info noscript-hide"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true">