mentos1386/send
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions 1

restyle delete popup

Browse source
This commit is contained in:
Daniela Arcese 2017-07-24 15:43:19 -04:00
parent 9136694d29
commit 4043d35c8b
4 changed files with 2110 additions and 322 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/upload.js
View file

@ -303,7 +303,6 @@ $(document).ready(function() {
}) })
.catch(err => { .catch(err => {
Raven.captureException(err); Raven.captureException(err);
console.log(err);
$('#page-one').attr('hidden', true); $('#page-one').attr('hidden', true);
$('#upload-progress').attr('hidden', true); $('#upload-progress').attr('hidden', true);
$('#upload-error').removeAttr('hidden'); $('#upload-error').removeAttr('hidden');
@ -457,15 +456,16 @@ $(document).ready(function() {
// create popup // create popup
popupDiv.classList.add('popup'); popupDiv.classList.add('popup');
const popupDelSpan = document.createElement('span'); const $popupMessage = $('<div>', { class: 'popup-message' });
$(popupDelSpan).addClass('del-file'); $popupMessage.attr('data-l10n-id', 'deletePopupText');
$(popupDelSpan).attr('data-l10n-id', 'sentFilesTitle4');
const popupNvmSpan = document.createElement('span'); const $popupDelSpan = $('<span>', { class: 'popup-yes' });
$(popupNvmSpan).addClass('nvm'); $popupDelSpan.attr('data-l10n-id', 'deletePopupYes');
$(popupNvmSpan).attr('data-l10n-id', 'nevermindButton');
$popupText.html([popupDelSpan, '&nbsp;', '&nbsp;', popupNvmSpan]); const $popupNvmSpan = $('<span>', { class: 'popup-no' });
$popupNvmSpan.attr('data-l10n-id', 'deletePopupCancel');
$popupText.html([$popupMessage, $popupDelSpan, $popupNvmSpan]);
// add data cells to table row // add data cells to table row
row.appendChild(name); row.appendChild(name);
@ -481,7 +481,7 @@ $(document).ready(function() {
const unexpiredFiles = storage.numFiles; const unexpiredFiles = storage.numFiles;
// delete file // delete file
$popupText.find('.del-file').click(e => { $popupText.find('.popup-yes').click(e => {
FileSender.delete(file.fileId, file.deleteToken).then(() => { FileSender.delete(file.fileId, file.deleteToken).then(() => {
$(e.target).parents('tr').remove(); $(e.target).parents('tr').remove();
const timeToExpiry = const timeToExpiry =
@ -531,7 +531,7 @@ $(document).ready(function() {
$popupText.focus(); $popupText.focus();
}); });
// hide popup // hide popup
$popupText.find('.nvm').click(function(e) { $popupText.find('.popup-no').click(function(e) {
e.stopPropagation(); e.stopPropagation();
$popupText.removeClass('show'); $popupText.removeClass('show');
}); });

2362
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

4
public/locales/send.en-US.ftl
View file

@ -83,7 +83,9 @@ sentFilesTitle2 = Copy URL
sentFilesTitle3 = Expires In sentFilesTitle3 = Expires In
sentFilesTitle4 = Delete sentFilesTitle4 = Delete
nevermindButton = Nevermind deletePopupText = Delete this file?
deletePopupYes = Yes
deletePopupCancel = Cancel
deleteButtonHover.title = {sentFilesTitle4} deleteButtonHover.title = {sentFilesTitle4}
copyUrlHover.title = {sentFilesTitle2} copyUrlHover.title = {sentFilesTitle2}

46
public/main.css
View file

@ -183,6 +183,10 @@ a {
cursor: pointer; cursor: pointer;
} }
#browse:hover {
background-color: #0287e8;
}
input[type="file"] { input[type="file"] {
display: none; display: none;
} }
@ -221,6 +225,7 @@ table {
tbody { tbody {
word-wrap: break-word; word-wrap: break-word;
word-break: break-all;
} }
#uploaded-files { #uploaded-files {
@ -238,26 +243,27 @@ tbody {
.popup { .popup {
position: relative; position: relative;
display: inline-block; display: inline-block;
cursor: pointer;
} }
/* The actual popup (appears on top) */ /* The actual popup (appears on top) */
.popup .popuptext { .popup .popuptext {
visibility: hidden; visibility: hidden;
width: 160px; width: 115px;
background-color: #555; background-color: #fff;
color: #fff; color: #000;
border: 1px solid #0297f8;
text-align: center; text-align: center;
border-radius: 6px; border-radius: 5px;
padding: 8px 0; padding: 7px 8px;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
bottom: 20px; bottom: 20px;
left: 50%; left: 50%;
margin-left: -88px; margin-left: -74.5px;
transition: opacity 0.5s; transition: opacity 0.5s;
opacity: 0; opacity: 0;
outline: 0; outline: 0;
box-shadow: 3px 3px 7px #888;
} }
/* Popup arrow */ /* Popup arrow */
@ -269,7 +275,7 @@ tbody {
margin-left: -5px; margin-left: -5px;
border-width: 5px; border-width: 5px;
border-style: solid; border-style: solid;
border-color: #555 transparent transparent; border-color: #0297f8 transparent transparent;
} }
.popup .show { .popup .show {
@ -277,6 +283,30 @@ tbody {
opacity: 1; opacity: 1;
} }
.popup-message {
margin-bottom: 4px;
}
.popup-yes {
color: #fff;
background-color: #0297f8;
border: 1px solid #0297f8;
border-radius: 5px;
padding: 1px 10px;
cursor: pointer;
}
.popup-yes:hover {
background-color: #0287e8;
}
.popup-no {
color: #4a4a4a;
border-radius: 6px;
padding: 3px 5px;
cursor: pointer;
}
/** upload-progress **/ /** upload-progress **/
.progress-bar { .progress-bar {
margin-top: 3px; margin-top: 3px;