Add dialog functionality and improve the favourite feature

Added a new dialog.js file to handle dialog based interactions. The favourite feature has been enhanced, removing the need for users to manually enter the path while adding elements to favourites. Instead, a dialog box opens for users to select the directory. Furthermore, a confirmation is now prompted when users try to remove a favourite, improving UX and preventing accidental deletions. These changes were reflected in index.html and favourites.js.
This commit is contained in:
Ian Wijma 2023-11-27 23:59:41 +11:00
parent 6378dadea9
commit 00a7c6e684
3 changed files with 21 additions and 9 deletions

View File

@ -28,7 +28,6 @@
<div class="h-full flex"> <div class="h-full flex">
<dialog data-ui="favourite-dialog" class="flex flex-col gap-2 bg-green-500 backdrop-blur-lg mt-16 w-44"> <dialog data-ui="favourite-dialog" class="flex flex-col gap-2 bg-green-500 backdrop-blur-lg mt-16 w-44">
<input type="text" aria-label="Name" data-ui="favourite-name" /> <input type="text" aria-label="Name" data-ui="favourite-name" />
<input type="text" aria-label="Path" data-ui="favourite-path" />
<div class="w-44 flex"> <div class="w-44 flex">
<button data-ui="favourite-submit" class="bg-white w-1/2">Add</button> <button data-ui="favourite-submit" class="bg-white w-1/2">Add</button>
<button data-ui="favourite-close" class="bg-white w-1/2">Close</button> <button data-ui="favourite-close" class="bg-white w-1/2">Close</button>

9
src/libs/dialog.js Normal file
View File

@ -0,0 +1,9 @@
import {tauriDialog} from "./tauri.js";
export const {
ask,
confirm,
message,
open,
save,
} = tauriDialog;

View File

@ -2,6 +2,8 @@ import {getElements, getOneElementOrThrow} from "../libs/element.js";
import {addFavourite, getFavourites, removeFavouriteByIndex} from "../libs/config.js"; import {addFavourite, getFavourites, removeFavouriteByIndex} from "../libs/config.js";
import {getTemplate} from "../libs/template.js"; import {getTemplate} from "../libs/template.js";
import {navigate} from "../libs/navigation.js"; import {navigate} from "../libs/navigation.js";
import {ask, open} from "../libs/dialog.js";
import {basename} from "../libs/path.js";
export const renderFavourite = () => { export const renderFavourite = () => {
const favouriteList = getOneElementOrThrow(document, '[data-ui=favourites]'); const favouriteList = getOneElementOrThrow(document, '[data-ui=favourites]');
@ -20,10 +22,13 @@ export const renderFavourite = () => {
if (system) { if (system) {
removeEl.remove(); removeEl.remove();
} else { } else {
removeEl.addEventListener('click', () => { removeEl.addEventListener('click', async () => {
const confirm = await ask(`Remove ${name} from favourites?`);
if (confirm) {
removeFavouriteByIndex(index); removeFavouriteByIndex(index);
renderFavourite(); renderFavourite();
}
}); });
} }
@ -37,18 +42,18 @@ export const renderFavourite = () => {
*/ */
const dialog = getOneElementOrThrow(document, '[data-ui=favourite-dialog]'); const dialog = getOneElementOrThrow(document, '[data-ui=favourite-dialog]');
dialog.close(); dialog.close();
addEl.addEventListener('click', () => { addEl.addEventListener('click', async () => {
const nameEl = getOneElementOrThrow(dialog, '[data-ui=favourite-name]'); const nameEl = getOneElementOrThrow(dialog, '[data-ui=favourite-name]');
const pathEl = getOneElementOrThrow(dialog, '[data-ui=favourite-path]');
const submitEl = getOneElementOrThrow(dialog, '[data-ui=favourite-submit]'); const submitEl = getOneElementOrThrow(dialog, '[data-ui=favourite-submit]');
const closeEl = getOneElementOrThrow(dialog, '[data-ui=favourite-close]'); const closeEl = getOneElementOrThrow(dialog, '[data-ui=favourite-close]');
const path = await open({ directory: true })
nameEl.value = await basename(path);
dialog.showModal(); dialog.showModal();
const handleClose = () => { const handleClose = () => {
nameEl.value = ''; nameEl.value = '';
pathEl.value = '';
dialog.close(); dialog.close();
} }
@ -56,7 +61,6 @@ export const renderFavourite = () => {
submitEl.addEventListener('click', () => { submitEl.addEventListener('click', () => {
const { value: name } = nameEl; const { value: name } = nameEl;
const { value: path } = pathEl;
if (name.trim() && path.trim()) { if (name.trim() && path.trim()) {
const favourites = getFavourites(); const favourites = getFavourites();