Merge pull request #119 from RickyDane/design/settings_ui

Design/settings UI

README.md

@@ -81,6 +81,8 @@ CoDriver does not use path caching to access files and folders, so the performan
 
 ### Linux
 
+- openssl1.1
+
 #### Debian / Ubuntu
 ```
 sudo apt update
@@ -108,6 +110,20 @@ sudo apt install libwebkit2gtk-4.0-dev \
     libayatana-appindicator3-dev \
     librsvg2-dev
 ```
+
+#### Fedora
+```
+sudo dnf check-update
+sudo dnf install openssl1.1 \
+    webkit2gtk4.0-devel \
+    openssl-devel \
+    curl \
+    wget \
+    file \
+    libappindicator-gtk3-devel \
+    librsvg2-devel
+sudo dnf group install "C Development Tools and Libraries"
+```
 </details>
 <br/>
 

src-tauri/Cargo.toml

@@ -1,7 +1,7 @@
 # cargo-features = ["profile-rustflags"]
 [package]
 name = "CoDriver"
-version = "0.4.79"
+version = "0.4.8"
 description = "A simple file explorer"
 authors = ["Ricky Dane Perlick"]
 license = "none"

src-tauri/src/main.rs

@@ -125,7 +125,8 @@ fn main() {
             stop_searching,
             get_file_content,
             open_config_location,
-            log
+            log,
+            get_config_location
         ])
         .plugin(tauri_plugin_drag::init())
         .run(tauri::generate_context!())
@@ -920,7 +921,13 @@ async fn extract_item(from_path: String, app_window: Window) {
         let file = PathBuf::from(&from_path);
         let _ = create_dir(&from_path.strip_suffix(&file_ext).unwrap());
         let new_dir = PathBuf::from(&from_path.strip_suffix(&file_ext).unwrap());
-        zip_extract(&file, &new_dir).unwrap();
+        let extract = zip_extract(&file, &new_dir);
+        if extract.is_err() {
+            let _ = app_window.eval("showToast('Archive couldnt be extracted')");
+            remove_action(app_window, action_id);
+            err_log(extract.unwrap_err().to_string());
+            return;
+        }
     } else if file_ext == ".rar" {
         let mut archive = Archive::new(&from_path).open_for_processing().unwrap();
         while let Some(header) = archive.read_header().unwrap() {
@@ -1683,6 +1690,11 @@ async fn open_config_location() {
     let _ = open::that(config_dir().unwrap().join("com.codriver.dev"));
 }
 
+#[tauri::command]
+async fn get_config_location() -> String {
+    config_dir().unwrap().join("com.codriver.dev").to_str().unwrap().to_string()
+}
+
 #[tauri::command]
 async fn log(log: String) {
     let log_file_path = config_dir().unwrap().join("com.codriver.dev").join("log.txt");

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "CoDriver",
-    "version": "0.4.79"
+    "version": "0.4.8"
   },
   "tauri": {
     "bundle": {

ui/index.html

@@ -131,7 +131,7 @@ <h3 class="settings-ui-headline">Theme</h3>
                         <div style="display: flex; gap: 10px; align-items: center;">
                             <i class="fa-solid fa-refresh" style="cursor: pointer;" onclick="checkAppConfig(true)"></i>
                             <select style="min-width: 0 !important;" class="select theme-select" onchange="saveConfig(true, true)"></select>
-                            <button class="icon-button" onclick="invoke('open_config_location')">
+                            <button class="icon-button" onclick="openConfigLocation()">
                                 <span class="button-icon"><i class="fa-solid fa-folder"></i></span>
                                 Open config location
                             </button>
@@ -149,10 +149,10 @@ <h3 class="settings-ui-headline">Shortcuts</h3>
                     <br />
                     <h3 class="settings-ui-headline">Search settings</h3>
                     <p>Search depth (higher = slower) | Standard: 10</p>
-                    <input style="width: 100px;" type="number" class="settings-ui-input number-input search-depth-input"
+                    <input style="width: 100px;" type="number" class="text-input number-input search-depth-input"
                         placeholder="0 = off" />
                     <p>Max count of items to find (higher = slower) | Standard: 1000</p>
-                    <input style="width: 100px;" type="number" class="settings-ui-input number-input max-items-input"
+                    <input style="width: 100px;" type="number" class="text-input number-input max-items-input"
                         placeholder="0 = off" />
                     <p>Path to launch at start</p>
                     <input type="text" class="settings-ui-input text-input launch-path-input" placeholder="/home" />

ui/main_logic.js

@@ -486,7 +486,7 @@ document.onkeydown = async (e) => {
 			e.key == "c"
 		) {
 			await writeText(CurrentDir);
-			showToast("Info", "Current dir path copied", "success");
+			showToast("Current dir path copied", "success");
 			return;
 		}
 		// Check if cmd / ctrl + f is pressed
@@ -1952,10 +1952,10 @@ async function deleteItems() {
 		IsCopyToCut = false;
 		await listDirectories();
 		ArrSelectedItems = [];
-		showToast("Deletion", "Deletion of items is done", "success");
+		showToast("Deletion of items is done", "success");
 		removeAction(actionId);
 	} else {
-		showToast("Deletion", "Deletion of items was canceled", "info");
+		showToast("Deletion of items was canceled", "info");
 	}
 }
 
@@ -1996,7 +1996,7 @@ async function extractItem(item) {
 		if (extractFileName != "") {
 			let fromPath = extractFilePath.toString();
 			await invoke("extract_item", { fromPath, appWindow });
-			showToast("Extraction", "Extraction done", "success");
+			showToast("Extraction done", "success");
 			await listDirectories();
 		}
 	}
@@ -2106,7 +2106,7 @@ async function compressItem(arrItems, compressionLevel = 3) {
 				appWindow
 			});
 			await listDirectories();
-			showToast("Compression", "Compressing done", "success");
+			showToast("Compressing done", "success");
 		}
 	}
 }
@@ -2139,7 +2139,7 @@ function showInputPopup(msg) {
 		<h4 style="color: var(--textColor);">${msg}</h4>
 		<input class="text-input" placeholder="/path/to/dir" autofocus/>
 		`;
-	popup.className = "input-popup";
+	popup.className = "input-popup input-dialog";
 	popup.children[1].addEventListener("keyup", async (e) => {
 		if (e.keyCode == 13) {
 			await invoke("open_dir", { path: popup.children[1].value });
@@ -2333,10 +2333,7 @@ function createFileInputPrompt(e) {
 }
 
 function closeInputDialogs() {
-	let newFolderInput = document.querySelector(".input-dialog");
-	if (newFolderInput != null) {
-		newFolderInput.remove();
-	}
+	$(".input-dialog").remove();
 	IsDisableShortcuts = false;
 	IsPopUpOpen = false;
 }
@@ -3560,7 +3557,11 @@ function switchHiddenFiles() {
 
 function openSettings() {
 	if (IsPopUpOpen == false) {
-		document.querySelector(".settings-ui").style.display = "flex";
+		$(".settings-ui").css("display", "flex");
+		// Workaround for opacity transition
+		setTimeout(() => {
+			$(".settings-ui").css("opacity", "1");
+		});
 		IsDisableShortcuts = true;
 		IsPopUpOpen = true;
 	}
@@ -3637,7 +3638,7 @@ async function saveConfig(isToReload = true, isVerbose = true) {
 		arrFavorites: ArrFavorites,
 	});
 	if (isVerbose === true) {
-		showToast("Settings", "Settings have been saved", "success");
+		showToast("Settings have been saved", "success");
 	}
 	if (isToReload == true) {
 		checkAppConfig();
@@ -3650,7 +3651,10 @@ async function addFavorites(item) {
 }
 
 function closeSettings() {
-	document.querySelector(".settings-ui").style.display = "none";
+	$(".settings-ui").css("opacity", "0");
+	setTimeout(() => {
+		$(".settings-ui").css("display", "none");
+	}, 300)
 	IsDisableShortcuts = false;
 	IsPopUpOpen = false;
 }
@@ -4520,6 +4524,12 @@ async function openDirAndSwitch(path) {
 	await listDirectories();
 }
 
+async function openConfigLocation() {
+	let dir = await invoke("get_config_location");
+	await openDirAndSwitch(dir);
+	closeAllPopups();
+}
+
 
 insertSiteNavButtons();
 checkAppConfig();

ui/style.css

@@ -189,7 +189,6 @@ body {
     right: 0;
     height: 55px;
     padding: 5px 10px 5px 10px;
-    /* box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15); */
     z-index: 3;
     border-bottom: 1px solid var(--tertiaryColor);
     color: var(--textColor);
@@ -433,6 +432,7 @@ body {
     padding: 5px;
     background-color: var(--transparentColor);
     backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
     z-index: 1;
     border-bottom: 1px solid var(--tertiaryColor);
     box-shadow: 0px 0px 5px 0px var(--transparentColorActive);
@@ -522,9 +522,8 @@ body {
     display: none;
     flex-flow: column;
     position: fixed;
-    width: 70%;
-    height: fit-content;
-    max-height: 80vh;
+    width: 100%;
+    height: 100vh;
     top: 0;
     left: 0;
     right: 0;
@@ -536,16 +535,18 @@ body {
     box-shadow: 0px 0px 10px 1px var(--transparentColorActive);
     border: 1px solid var(--tertiaryColor);
     overflow: hidden;
+    opacity: 0;
+    transition: opacity 0.2s ease;
 }
 
 .settings-ui-header {
     position: sticky;
     top: 0;
     left: 0;
     right: 0;
-    background-color: var(--secondaryColor);
+    background-color: var(--navBarColor);
     width: 100%;
-    padding: 5px 5px 5px 15px;
+    padding: 5px 10px 5px 100px;
     font-size: large;
     font-weight: bolder !important;
     display: flex;
@@ -556,6 +557,7 @@ body {
     border-bottom: 1px solid var(--tertiaryColor);
     margin-bottom: 1px;
     color: var(--textColor);
+    height: 65px;
 }
 
 .settings-ui-body {
@@ -565,16 +567,16 @@ body {
     padding: 20px;
     overflow-y: auto;
     z-index: 3;
+    color: var(--textColor);
+}
+.settings-ui-body::-webkit-scrollbar-thumb {
+    background-color: var(--navBarColor);
 }
 
 .settings-ui-headline {
     font-weight: bolder !important;
 }
 
-.settings-ui-body{
-    color: var(--textColor);
-}
-
 .settings-ui-controls {
     display: flex;
     flex-flow: row;
@@ -594,7 +596,7 @@ body {
 }
 
 .settings-ui-input {
-    width: 100%;
+    width: 50% !important;
     padding: 10px 15px;
     background-color: var(--secondaryColor);
     border-radius: 10px;
@@ -663,6 +665,7 @@ label {
     bottom: 0;
     background-color: var(--transparentColor);
     backdrop-filter: blur(1px);
+    -webkit-backdrop-filter: blur(1px);
     z-index: 99;
 }
 
@@ -1105,7 +1108,7 @@ button > svg {
     border-radius: 10px;
     overflow: hidden;
     margin: 0 auto;
-    transition: 0.2s ease-in-out;
+    transition: 0.2s ease;
 }
 
 .file-searchbar > input {
@@ -1824,7 +1827,7 @@ button > svg {
 
 .toast-container {
     position: fixed;
-    bottom: 20px;
+    bottom: 55px;
     right: 10px;
     display: flex;
     flex-flow: column;

ui/utils.js

@@ -51,7 +51,7 @@ listen("tauri://file-drop", async (event) => {
 });
 
 /* Toasts */
-function showToast(title, message, type = "info") {
+function showToast(message, type = "info") {
   let toast = document.createElement("div");
   toast.className = `toast toast-${type}`;
   let colorClass = "";