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;
}
#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{
color: #777;
font-size: 1em;
display: inline;
white-space: normal;
}
#deletelink {
@ -124,6 +143,10 @@ body.loading {
margin-bottom: 10px;
}
#filewrap {
transition: background-color 0.75s ease-out;
}
.comment {
border-left: 1px solid #ccc;
padding: 5px 0 5px 10px;
@ -131,7 +154,7 @@ body.loading {
transition: background-color 0.75s ease-out;
}
.comment.highlight {
.highlight {
background-color: #ffdd86;
transition: background-color 0.2s ease-in;
}

View file

@ -115,10 +115,29 @@ h3.title {
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{
color: #777;
font-size: 1em;
display: inline;
white-space: normal;
}
#status {
@ -405,6 +424,15 @@ h4.title {
.commentdate { color: #bfcede; }
#filewrap {
transition: background-color 0.75s ease-out;
}
.highlight {
background-color: #ffdd86;
transition: background-color 0.2s ease-in;
}
img.vizhash {
width: 16px;
height: 16px;

View file

@ -22,6 +22,27 @@
/** global: showdown */
/** 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
jQuery(document).ready(function() {
'use strict';
@ -2492,7 +2513,8 @@ jQuery.PrivateBin = (function($, RawDeflate) {
file,
$fileInput,
$dragAndDropFileName,
attachmentHasPreview = false;
attachmentHasPreview = false,
$dropzone;
/**
* sets the attachment but does not yet show it
@ -2714,7 +2736,9 @@ jQuery.PrivateBin = (function($, RawDeflate) {
// revert loading status…
me.hideAttachment();
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;
}
@ -2728,17 +2752,21 @@ jQuery.PrivateBin = (function($, RawDeflate) {
file = loadedFile;
if (typeof loadedFile !== 'undefined') {
fileReader.onload = function (event) {
const dataURL = event.target.result;
attachmentData = dataURL;
if (Editor.isPreview()) {
me.setAttachment(dataURL, loadedFile.name || '');
me.handleAttachmentPreview($attachmentPreview, dataURL);
$attachmentPreview.removeClass('hidden');
}
TopNav.highlightFileupload();
};
fileReader.readAsDataURL(loadedFile);
}
}
/**
* handle the preview of files decoded to blob that can either be an image, video, audio or pdf element
@ -2780,8 +2808,21 @@ jQuery.PrivateBin = (function($, RawDeflate) {
.attr('src', blobUrl))
);
} 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
var clientHeight = $(window).height();
const clientHeight = $(window).height();
$targetElement.html(
$(document.createElement('embed'))
@ -2808,12 +2849,12 @@ jQuery.PrivateBin = (function($, RawDeflate) {
return;
}
const ignoreDragDrop = function(event) {
const handleDragEnterOrOver = function(event) {
event.stopPropagation();
event.preventDefault();
};
const drop = function(event) {
const handleDrop = function(event) {
const evt = event.originalEvent;
evt.stopPropagation();
evt.preventDefault();
@ -2830,9 +2871,19 @@ jQuery.PrivateBin = (function($, RawDeflate) {
}
};
$(document).on('drop', drop);
$(document).on('dragenter', ignoreDragDrop);
$(document).on('dragover', ignoreDragDrop);
$(document).draghover().on({
'draghoverstart': function() {
// 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 () {
readFileData();
});
@ -2920,6 +2971,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {
$attachmentLink = $('#attachment a');
$attachmentPreview = $('#attachmentPreview');
$dragAndDropFileName = $('#dragAndDropFileName');
$dropzone = $('#dropzone');
$fileInput = $('#file');
addDragDropHandler();
@ -3741,6 +3793,25 @@ jQuery.PrivateBin = (function($, RawDeflate) {
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
*
@ -4479,7 +4550,9 @@ jQuery.PrivateBin = (function($, RawDeflate) {
// log detailed error, but display generic translation
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
Prompt.reset();
@ -4548,8 +4621,8 @@ jQuery.PrivateBin = (function($, RawDeflate) {
* @param {object} document
* @class
*/
var InitialCheck = (function () {
var me = {};
const InitialCheck = (function () {
const me = {};
/**
* 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?
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;
}
}

View file

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

View file

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