🚀 Release of the V2.0.0.

- ✨ Allow recursivity for input. - ✨ Add listen when files added in inputs. - ✨ Add live refresh in UI. - 💄 UI improvments. - 💄 New app icon. - 🚚 Clean and split CSS files (optimising). - 🩹 change RwLock to async, adapt code for it. - ⬆️ Dependencies upgrades.
Jimskapt · Apr 27, 2024 · 85c175c · 85c175c
1 parent f32921c
commit 85c175c
Show file tree

Hide file tree

Showing 26 changed files with 928 additions and 459 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/common/src/lib.rs b/common/src/lib.rs
@@ -25,6 +25,7 @@ impl Default for Settings {
 					FileFilter::Extension(String::from("tif")),
 					FileFilter::Extension(String::from("tiff")),
 				],
+				recursivity: Some(false),
 			}],
 			exclude_paths: vec![],
 			output_folders: vec![OutputFolder {
@@ -43,6 +44,7 @@ pub struct InputFolder {
 	pub path: PathBuf,
 	pub name: Option<String>,
 	pub filters: Vec<FileFilter>,
+	pub recursivity: Option<bool>,
 }
 impl InputFolder {
 	pub fn filter(&self, path: &std::path::Path) -> bool {

diff --git a/src-front/ai_prompt.css b/src-front/ai_prompt.css
@@ -0,0 +1,5 @@
+/** @format */
+
+#ai_prompt_page #ai_prompt {
+	white-space: pre-wrap;
+}
diff --git a/src-front/ai_prompt.html b/src-front/ai_prompt.html
@@ -5,6 +5,7 @@
 	<head>
 		<meta charset="UTF-8" />
 		<link rel="stylesheet" href="styles.css" />
+		<link rel="stylesheet" href="ai_prompt.css" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>A.I. prompt</title>
 		<script src="/ai_prompt.js" defer></script>

diff --git a/src-front/index.css b/src-front/index.css
@@ -0,0 +1,118 @@
+/** @format */
+
+body#index {
+	margin: 0;
+	padding: 0.5em;
+	width: calc(100vw - 2 * 0.5em);
+	height: calc(100vh - 2 * 0.5em);
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: center;
+}
+
+body#index nav,
+body#index #move-bar,
+body#index #current-path {
+	width: 95vw;
+	margin: 0;
+	text-align: center;
+	z-index: 50;
+}
+
+body#index nav .spacer {
+	margin: 0 1.5vw;
+	color: #aaa;
+	font-size: 0.5em;
+}
+
+body#index nav button,
+body#index #move-bar button,
+body#index #current-path {
+	border: 1px solid rgba(0, 0, 0, 0);
+	border-radius: 0.5vw;
+	padding: 0.3vw;
+	margin: 0.2em 0.1em;
+	opacity: 0.75;
+}
+
+body#index nav button:disabled,
+body#index #move-bar button:disabled,
+body#index #current-path:disabled {
+	opacity: 0.1;
+}
+
+body#index nav button:hover:not(:disabled),
+body#index #move-bar button:hover:not(:disabled),
+body#index #current-path:hover:not(:disabled) {
+	border: 1px solid rgba(0, 0, 0, 1);
+	opacity: 1;
+}
+
+body#index nav button:hover,
+body#index #move-bar button:hover {
+	cursor: pointer;
+}
+
+body#index #position_counter {
+	font-family: monospace, consolas;
+}
+
+#index #previous,
+#index #next {
+	position: absolute;
+	z-index: 20;
+	top: 45vh;
+	height: 10vh;
+	min-width: 3em;
+	cursor: pointer;
+	padding: 0;
+	text-align: center;
+}
+
+#index #previous {
+	left: 1vw;
+}
+
+#index #next {
+	right: 1vw;
+}
+
+#index #preview_container {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+#index #preview_container #preview {
+	max-width: 95%;
+	max-height: 75vh;
+}
+
+/* --------------------------------------------------- */
+
+#index #ai_prompt #ai_content {
+	visibility: hidden;
+	background-color: black;
+	opacity: 0.9;
+	color: #fff;
+	border-radius: 1em;
+	padding: 1em;
+
+	position: fixed;
+	top: 10vh;
+	left: 10vw;
+	width: 80vw;
+	height: 80vh;
+	z-index: 100;
+
+	white-space: pre-wrap;
+}
+
+#index #ai_prompt:hover #ai_content {
+	visibility: visible;
+}
diff --git a/src-front/index.html b/src-front/index.html
@@ -5,26 +5,59 @@
 	<head>
 		<meta charset="UTF-8" />
 		<link rel="stylesheet" href="styles.css" />
+		<link rel="stylesheet" href="index.css" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Tauri App</title>
 		<script src="./index.js" defer></script>
 	</head>
 
 	<body id="index">
-		<a href="/settings.html" id="settings_btn">⚙️</a>
-		<div id="move_bar"></div>
-		<button id="previous">◀</button>
-		<p id="preview_container">
-			<img src="http://image.localhost/" alt="" id="preview" />
-		</p>
-		<button id="next">▶</button>
-		<span id="bottom_tools">
+		<input type="text" id="current-path" value="⏳ loading path ..." />
+		<nav>
+			<a href="/settings.html">
+				<button id="settings" title="change settings of this program">
+					⚙️
+				</button>
+			</a>
+			<span class="spacer">|</span>
+			<span id="position_counter">? / ?</span>
+			<span class="spacer">|</span>
+			<button id="go-previous" title="go to previous image">◀️</button>
+			<button id="go-random" title="go to a random position">🔀</button>
+			<button id="go-next" title="go to next image">▶️</button>
+			<span class="spacer">|</span>
+			<button id="open-folder" title="open parent folder of this file" disabled>
+				📁
+			</button>
+			<button id="open-file" title="open this file with O.S. viewer" disabled>
+				🖼️
+			</button>
 			<a href="/ai_prompt.html" id="ai_prompt">
-				<span id="ai_icon"></span>
+				<button
+					id="ai_icon"
+					title="A.I. prompt detected, click to display"
+					disabled
+				>
+					🧠
+				</button>
 				<pre id="ai_content"></pre>
 			</a>
-			<span id="position_counter"></span>
-		</span>
-		<input id="preview_path" value="loading" />
+		</nav>
+		<div id="move-bar">
+			<button
+				id="restore-origin"
+				title="restore this file into its origin path"
+				disabled
+			>
+				↩️ restore
+			</button>
+		</div>
+
+		<button id="previous">◀</button>
+		<button id="next">▶</button>
+
+		<div id="preview_container">
+			<img src="http://image.localhost/" alt="" id="preview" />
+		</div>
 	</body>
 </html>
diff --git a/src-front/index.js b/src-front/index.js
@@ -1,32 +1,57 @@
 /** @format */
 
 const { invoke } = window.__TAURI__.core;
+const { listen } = window.__TAURI__.event;
 
 async function refresh() {
 	document.querySelector('#preview').src =
 		'http://image.localhost/?rand=' + Math.random() * 9999999;
-	document.querySelector('#preview_path').value = await invoke(
+	document.querySelector('#current-path').value = await invoke(
 		'get_current_path'
 	);
 
 	var position = await invoke('get_current_position');
 	if (position === null || position === undefined) {
 		position = '?';
+
+		document.querySelector('#open-folder').setAttribute('disabled', 'disabled');
+		document.querySelector('#open-file').setAttribute('disabled', 'disabled');
 	} else {
 		position += 1;
+
+		document.querySelector('#open-folder').removeAttribute('disabled');
+		document.querySelector('#open-file').removeAttribute('disabled');
+	}
+
+	if (await invoke('current_can_be_restored')) {
+		document.querySelector('#restore-origin').removeAttribute('disabled');
+	} else {
+		document
+			.querySelector('#restore-origin')
+			.setAttribute('disabled', 'disabled');
+	}
+
+	let display_position = position;
+	if (position < 10) {
+		display_position = '0' + display_position;
+	}
+	if (position < 100) {
+		display_position = '0' + display_position;
 	}
 
 	document.querySelector('#position_counter').innerText =
-		position + ' / ' + (await invoke('get_images_length'));
+		display_position + ' / ' + (await invoke('get_images_length'));
 
 	let ai_prompt = await invoke('get_ai_prompt');
 	if (ai_prompt != null && ai_prompt != undefined) {
 		document.querySelector('#ai_prompt #ai_content').innerText =
 			'🧠 A.I. prompt detected :\n\n' + ai_prompt;
-		document.querySelector('#ai_prompt #ai_icon').innerText = '🧠';
+		document.querySelector('#ai_prompt #ai_icon').removeAttribute('disabled');
 	} else {
 		document.querySelector('#ai_prompt #ai_content').innerText = '';
-		document.querySelector('#ai_prompt #ai_icon').innerText = '';
+		document
+			.querySelector('#ai_prompt #ai_icon')
+			.setAttribute('disabled', 'disabled');
 	}
 }
 
@@ -61,18 +86,15 @@ window.addEventListener('keyup', async function (event) {
 window.addEventListener('DOMContentLoaded', async function (event) {
 	refresh().await;
 
-	const move_bar = document.querySelector('#move_bar');
+	const move_bar = document.querySelector('#move-bar');
 
-	let move_button = document.createElement('button');
-	move_button.innerText = '↩️ restore';
-	move_button.addEventListener('click', async function () {
+	let restore_button = document.querySelector('#restore-origin');
+	restore_button.addEventListener('click', async function () {
 		if (await invoke('do_move', { name: '' })) {
 			refresh().await;
 		}
 	});
 
-	move_bar.appendChild(move_button);
-
 	const move_actions = await invoke('get_move_actions');
 	for (let i = 0; i < move_actions.length; i++) {
 		const move_action = move_actions[i];
@@ -88,16 +110,53 @@ window.addEventListener('DOMContentLoaded', async function (event) {
 		move_bar.appendChild(move_button);
 	}
 
-	document.querySelector('#preview_path').addEventListener('blur', change_path);
+	document.querySelector('#current-path').addEventListener('blur', change_path);
+
 	document
 		.querySelector('#previous')
 		.addEventListener('click', async function () {
 			await change_position(-1);
 		});
+	document
+		.querySelector('#go-previous')
+		.addEventListener('click', async function () {
+			await change_position(-1);
+		});
+
 	document.querySelector('#next').addEventListener('click', async function () {
 		await change_position(+1);
 	});
+	document
+		.querySelector('#go-next')
+		.addEventListener('click', async function () {
+			await change_position(+1);
+		});
+
+	document
+		.querySelector('#go-random')
+		.addEventListener('click', async function () {
+			let changed = await invoke('set_random_position');
+
+			if (changed) {
+				refresh().await;
+			}
+		});
+
+	document
+		.querySelector('#open-folder')
+		.addEventListener('click', async function () {
+			await invoke('os_open', { openTarget: 'folder' });
+		});
+	document
+		.querySelector('#open-file')
+		.addEventListener('click', async function () {
+			await invoke('os_open', { openTarget: 'file' });
+		});
 
 	await invoke('update_files_list');
 	this.setTimeout(refresh, 500);
+
+	listen('request-ui-refresh', async function () {
+		await refresh();
+	});
 });