Skip to content

Commit

Permalink
Merge pull request #120 from RickyDane/design/settings_ui
Browse files Browse the repository at this point in the history 
Changed confirm popup to custom implementation
  • Loading branch information
@RickyDane
RickyDane authored Aug 15, 2024
2 parents aa74112 + d2b02fe commit 02d7950
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 20 deletions.
2 changes: 1 addition & 1 deletion src-tauri/src/main.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ async fn check_app_config() -> AppConfig {
is_dual_pane_active: "0".to_string(),
search_depth: 10,
max_items: 1000,
is_image_preview: "0".to_string(),
is_image_preview: "1".to_string(),
is_select_mode: "1".to_string(),
arr_favorites: vec![],
current_theme: "0".to_string(),
Expand Down
102 changes: 86 additions & 16 deletions ui/main_logic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,7 @@ function closeAllPopups() {
resetProgressBar();
closeInputDialogs();
unSelectAllItems();
closeConfirmPopup();
IsPopUpOpen = false;
IsInputFocused = false;
IsDisableShortcuts = false;
Expand All @@ -228,6 +229,10 @@ document.addEventListener("mousedown", (e) => {
!e.target.classList.contains("context-item") &&
!e.target.classList.contains("open-with-item") &&
!e.target.classList.contains("input-dialog") &&
!e.target.classList.contains("confirm-popup") &&
!e.target.classList.contains("uni-popup") &&
!e.target.classList.contains("popup-body") &&
!e.target.classList.contains("popup-body-content") &&
!e.target.classList.contains("directory-item-entry") &&
!e.target.classList.contains("directory-entry") &&
!e.target.classList.contains("disk-item") &&
Expand Down Expand Up @@ -1933,20 +1938,21 @@ async function setCurrentDir(currentDir = "", dualPaneSide = "") {

async function deleteItems() {
ContextMenu.style.display = "none";
let msg = "Do you really want to delete: ";
let msg = "Do you really want to delete:<br/><br/>";
for (let i = 0; i < ArrSelectedItems.length; i++) {
if (i == 0) {
msg += ArrSelectedItems[i].getAttribute("itemname");
msg += "<span class='confirm-popup-item'>" + ArrSelectedItems[i].getAttribute("itemname") + "</span>";
} else {
msg += ", " + ArrSelectedItems[i].getAttribute("itemname");
msg += "<br/><span class='confirm-popup-item'>" + ArrSelectedItems[i].getAttribute("itemname") + "</span>";
}
}
let isConfirm = await confirm(msg);
let arr = ArrSelectedItems.map((item) => item.getAttribute("itempath"));
let isConfirm = await confirmPopup(msg, "delete");
if (isConfirm == true) {
let actionId = new Date().getMilliseconds();
createNewAction(actionId, "Deleting", "Delete Items", "Delete Items");
for (let i = 0; i < ArrSelectedItems.length; i++) {
let actFileName = ArrSelectedItems[i].getAttribute("itempath");
for (let i = 0; i < arr.length; i++) {
let actFileName = arr[i];
await invoke("delete_item", { actFileName });
}
IsCopyToCut = false;
Expand Down Expand Up @@ -1986,9 +1992,8 @@ async function copyItem(item, toCut = false, fromInternal = false) {
async function extractItem(item) {
let compressFilePath = item.getAttribute("itempath");
let compressFileName = compressFilePath.split("/")[compressFilePath.split("/").length - 1].replace("'", "");
let isExtracting = await confirm(
"Do you want to extract " + compressFileName + "?",
);
ContextMenu.style.display = "none";
let isExtracting = await confirmPopup("Do you want to extract " + compressFileName + "?", "extract");
if (isExtracting == true) {
ContextMenu.style.display = "none";
let extractFilePath = item.getAttribute("itempath");
Expand Down Expand Up @@ -2022,12 +2027,10 @@ async function showCompressPopup(item) {
if (compressFileName != "") {
let popup = document.createElement("div");
popup.innerHTML = `
<h4 class="popup-header">
<div style="display: flex; gap: 10px; align-items: center;">
<div class="popup-header">
<i class="fa-solid fa-compress"></i>
Compression options
<h3>Compression options</h3>
</div>
</h4>
<div style="padding: 10px; border-bottom: 1px solid var(--tertiaryColor);">
<p class="text-2">Selected item</p>
<h5>${compressFileName}</h5>
Expand Down Expand Up @@ -2090,7 +2093,7 @@ async function compressItem(arrItems, compressionLevel = 3) {
appWindow
});
await listDirectories();
showToast("Compression", "Compressing done", "success");
showToast("Compressing done", "success");
} else {
let item = arrItems[0];
let compressFilePath = item.getAttribute("itempath");
Expand Down Expand Up @@ -2259,7 +2262,7 @@ async function pasteItem(copyToPath = "") {
await listDirectories(true);
}
if (arr.length >= 1) {
showToast("Copy", "Done copying some files", "success");
showToast("Done copying some files", "success");
}
}

Expand Down Expand Up @@ -2812,7 +2815,6 @@ async function openItem(element, dualPaneSide, shortcutDirPath = null) {
SelectedItemPaneSide = dualPaneSide;
await listDirectories();
}
await setCurrentDir(path, SelectedItemPaneSide);
} else {
alert("Could not open directory");
return;
Expand Down Expand Up @@ -4530,6 +4532,74 @@ async function openConfigLocation() {
closeAllPopups();
}

async function confirmPopup(message = "Nothing to see here!", type = "") {
let confirmationButton = "";
switch (type) {
case "confirm":
confirmationButton = `
<button class="icon-button">
<div class="button-icon"><i class="fa-solid fa-check"></i></div>
Confirm
</button>
`;
break;
case "extract":
confirmationButton = `
<button class="icon-button">
<div class="button-icon"><i class="fa-solid fa-maximize"></i></div>
Extract
</button>
`;
break;
case "delete":
confirmationButton = `
<button class="icon-button delete-button">
<div class="button-icon"><i class="fa-solid fa-trash"></i></div>
Delete
</button>
`;
break;
}
let popup = document.createElement("div");
popup.className = "uni-popup confirm-popup";
popup.innerHTML = `
<div class="popup-header">
<div style="display: flex; gap: 10px; align-items: center;">
<i class="fa-solid fa-check"></i>
<h3>Confirm</h3>
</div>
</div>
<div class="popup-body">
<p class="popup-body-content">${message}</p>
</div>
<div class="popup-controls">
<button class="icon-button">
<div class="button-icon"><i class="fa-solid fa-xmark"></i></div>
Cancel
</button>
${confirmationButton}
</div>
`;
document.body.appendChild(popup);
document.querySelector(".confirm-popup button:last-child").focus();
IsPopUpOpen = true;
return new Promise((resolve) => {
document.querySelector(".confirm-popup button:first-child").onclick = () => {
closeConfirmPopup();
resolve(false);
};
document.querySelector(".confirm-popup button:last-child").onclick = () => {
closeConfirmPopup();
resolve(true);
};
});
}

function closeConfirmPopup() {
document.querySelector(".confirm-popup")?.remove();
IsPopUpOpen = false;
}


insertSiteNavButtons();
checkAppConfig();
Expand Down
42 changes: 39 additions & 3 deletions ui/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -816,7 +816,6 @@ button > svg {
width: fit-content;
max-width: 100%;
top: calc(48px + 10px);
/* background-color: var(--primaryColor); */
font-size: var(--fontSize);
padding: 2px 7px;
line-height: 16px;
Expand All @@ -826,7 +825,6 @@ button > svg {
text-align: center !important;
text-overflow: ellipsis;
margin-top: 5px;
/* border: 1px solid var(--tertiaryColor); */
}

.item-button > div {
Expand Down Expand Up @@ -1012,6 +1010,8 @@ button > svg {
padding-left: 5px;
border: 1px solid var(--tertiaryColor);
color: var(--textColor);
font-size: var(--fontSize);
font-weight: bolder !important;
}

.icon-button:hover {
Expand Down Expand Up @@ -1708,12 +1708,21 @@ button > svg {
align-items: center;
padding: 10px 10px 10px 15px;
border-top: 1px solid var(--tertiaryColor);
color: var(--textColor);
}

.popup-header > h3 {
font-weight: bolder !important;
}

.popup-header > div > h3 {
font-weight: bolder !important;
}

.popup-body {
padding: 10px;
border-top: 1px solid var(--tertiaryColor);
color: var(--textColor);
}

.popup-controls {
Expand All @@ -1723,6 +1732,8 @@ button > svg {
gap: 5px;
padding: 5px;
border-top: 1px solid var(--tertiaryColor);
box-shadow: 0px 0px 10px 1px var(--transparentColor);
color: var(--textColor);
}

.popup-body-col-section {
Expand Down Expand Up @@ -1828,7 +1839,7 @@ button > svg {
.toast-container {
position: fixed;
bottom: 55px;
right: 10px;
right: 35px;
display: flex;
flex-flow: column;
gap: 10px;
Expand Down Expand Up @@ -1990,3 +2001,28 @@ button > svg {
background: var(--transparentColor) !important;
border: 1px solid var(--tertiaryColor) !important;
}

.confirm-popup {
min-width: 30%;
width: fit-content;
height: fit-content;
}
.confirm-popup > .popup-body {
padding: 20px;
max-height: 30vh;
overflow-y: auto;
}
.confirm-popup-item {
font-weight: bold !important;
}

.delete-button {
color: white;
background-color: red !important;
}
.delete-button:hover {
background-color: rgb(200, 0, 0) !important;
}
.delete-button:focus {
outline: 2px dotted var(--selectColor2) !important;
}

0 comments on commit 02d7950

Please sign in to comment.