Skip to content
This repository has been archived by the owner on May 22, 2021. It is now read-only.

Modify popup delete dialog #327

Merged
merged 2 commits into from
Jul 27, 2017
Merged

Modify popup delete dialog #327

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cd8b09f
modify popup delete dialog
youwenliang Jul 27, 2017
9d3f668
Update main.css
youwenliang Jul 27, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions frontend/src/upload.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -464,12 +464,14 @@ $(document).ready(function() {
popupDiv.classList.add('popup');
const $popupMessage = $('<div>', { class: 'popup-message' });
$popupMessage.attr('data-l10n-id', 'deletePopupText');
const $popupDelSpan = $('<span>', { class: 'popup-yes' });
$popupDelSpan.attr('data-l10n-id', 'deletePopupYes');
const $popupAction = $('<div>', { class: 'popup-action' });
const $popupNvmSpan = $('<span>', { class: 'popup-no' });
$popupNvmSpan.attr('data-l10n-id', 'deletePopupCancel');
const $popupDelSpan = $('<span>', { class: 'popup-yes' });
$popupDelSpan.attr('data-l10n-id', 'deletePopupYes');

$popupText.html([$popupMessage, $popupDelSpan, $popupNvmSpan]);
$popupText.html([$popupMessage, $popupAction]);
$popupAction.html([$popupNvmSpan, $popupDelSpan]);

// add data cells to table row
row.appendChild(name);
Expand Down
91 changes: 73 additions & 18 deletions public/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,33 +275,39 @@ tbody {
/* The actual popup (appears on top) */
.popup .popuptext {
visibility: hidden;
min-width: 115px;
min-width: 204px;
min-height: 105px;
background-color: #fff;
color: #000;
border: 1px solid #0297f8;
border: 1px solid #d7d7db;
padding: 15px 24px;
box-sizing: content-box;
text-align: center;
border-radius: 5px;
padding: 7px 8px;
position: absolute;
z-index: 1;
bottom: 8px;
right: -28px;
bottom: 20px;
left: -40px;
transition: opacity 0.5s;
opacity: 0;
outline: 0;
box-shadow: 3px 3px 7px #888;
box-shadow: 3px 3px 7px rgba(136, 136, 136, 0.3);
}

/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
right: 30px;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #0297f8 transparent transparent;
bottom: -11px;
left: 20px;
background-color: #fff;
display: block;
width: 20px;
height: 20px;
transform: rotate(45deg);
border-radius: 0 0 5px;
border-right: 1px solid #d7d7db;
border-bottom: 1px solid #d7d7db;
}

.popup .show {
Expand All @@ -310,15 +316,39 @@ tbody {
}

.popup-message {
margin-bottom: 4px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px #ebebeb solid;
color: #0c0c0d;
font-size: 15px;
font-weight: normal;
padding-bottom: 15px;
white-space: nowrap;
width: calc(100% + 48px);
margin-left: -24px;
}

.popup-action {
margin-top: 15px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}

.popup-yes {
color: #fff;
background-color: #0297f8;
border-radius: 5px;
padding: 2px 11px;
padding: 5px 25px;
font-weight: normal;
cursor: pointer;
min-width: 94px;
box-sizing: border-box;
white-space: nowrap;
margin-left: 12px;
}

.popup-yes:hover {
Expand All @@ -327,9 +357,19 @@ tbody {

.popup-no {
color: #4a4a4a;
border-radius: 6px;
padding: 3px 5px;
background-color: #fbfbfb;
border: 1px #c1c1c1 solid;
border-radius: 5px;
padding: 5px 25px;
font-weight: normal;
min-width: 94px;
box-sizing: border-box;
cursor: pointer;
white-space: nowrap;
}

.popup-no:hover {
background-color: #efeff1;
}

/** upload-progress **/
Expand Down Expand Up @@ -662,8 +702,7 @@ tbody {
.social-links {
display: flex;
justify-content: space-between;
width: 9vw;
max-width: 94px;
width: 94px;
}

.social-links > a {
Expand All @@ -681,6 +720,18 @@ tbody {
margin-bottom: -5px;
}

@media (max-device-width: 992px), (max-width: 992px) {
.popup .popuptext {
left: auto;
right: -40px;
}

.popup .popuptext::after {
left: auto;
right: 36px;
}
}

@media (max-device-width: 768px), (max-width: 768px) {
.description {
margin: 0 auto 25px;
Expand Down Expand Up @@ -733,6 +784,10 @@ tbody {

.feedback {
margin-top: 10px;
min-width: 30px;
max-width: 300px;
text-indent: 2px;
padding: 5px 5px 5px 20px;
}

#copy {
Expand Down