restyle delete popup
This commit is contained in:
parent
9136694d29
commit
4043d35c8b
@ -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, ' ', ' ', 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
2362
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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}
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user