natty
/
fox-send
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #296 from mozilla/ui 

restyle delete popup
This commit is contained in:
Daniela Arcese 2017-07-24 17:42:06 -04:00 committed by GitHub
parent 5db8a20b9d 84e8abf2c5
commit faaa8afe17
4 changed files with 2113 additions and 326 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/upload.js
View File

@ -307,7 +307,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');
@ -461,15 +460,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);
@ -485,7 +485,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 =
@ -535,7 +535,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}

53
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;
} }
@ -212,6 +216,7 @@ td {
color: #4a4a4a; color: #4a4a4a;
padding: 17px 19px 0; padding: 17px 19px 0;
line-height: 23px; line-height: 23px;
position: relative;
} }
table { table {
@ -221,6 +226,7 @@ table {
tbody { tbody {
word-wrap: break-word; word-wrap: break-word;
word-break: break-all;
} }
#uploaded-files { #uploaded-files {
@ -236,28 +242,28 @@ tbody {
/* Popup container */ /* Popup container */
.popup { .popup {
position: relative; position: absolute;
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; min-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: 8px;
left: 50%; right: -28px;
margin-left: -88px;
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 */
@ -265,11 +271,11 @@ tbody {
content: ""; content: "";
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 50%; right: 30px;
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,29 @@ tbody {
opacity: 1; opacity: 1;
} }
.popup-message {
margin-bottom: 4px;
}
.popup-yes {
color: #fff;
background-color: #0297f8;
border-radius: 5px;
padding: 2px 11px;
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;