ian
/
file-browser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
file-browser/src/index.html

97 lines
2.9 KiB
HTML
Raw Normal View History

Add initial project setup for a File Browser system This commit includes the setup of a new File Browser system. The system uses Tailwind CSS for styling alongside Tauri for a Rust backend. It also includes a new HTML index file, several JavaScript files for application logic e.g. favourite handling as well as new CSS files for custom styles. Git ignore file is added to exclude unnecessary files to be tracked by git. This setup is necessary to start developing File Browsing features and provides a base project structure to work on.
2023-11-27 05:08:17 +00:00
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./index.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="module" src="./index.js" defer></script>
<title>File Browser</title>
</head>
Add file browsing, viewing functionalities and enhance navigation Introduced new functionalities in the file manager application for browsing, listing and opening files. We have added a new command 'get_files' in 'main.rs', which reads entries in a directory and fetches associated metadata. This allows users to view files in a selected directory. Additionally, the command 'open_file' has been added for opening files. Simultaneously, frontend changes have been made such as: new templates for file lists, handlers for view switching in 'files.js', and rendered files in each mode. The 'navigation.js' error handling has been improved for invalid navigation. Improved user experience by adding a breadcrumbs feature for better navigation. This is performed by the newly introduced 'breadcrumbs.js' file which maintains the history of navigated directories. Overall, these enhanced functionalities improve navigation and file management efficiency for end-users.
2023-11-27 12:36:35 +00:00
<body class="h-screen max-h-screen flex flex-col overflow-hidden">
Add initial project setup for a File Browser system This commit includes the setup of a new File Browser system. The system uses Tailwind CSS for styling alongside Tauri for a Rust backend. It also includes a new HTML index file, several JavaScript files for application logic e.g. favourite handling as well as new CSS files for custom styles. Git ignore file is added to exclude unnecessary files to be tracked by git. This setup is necessary to start developing File Browsing features and provides a base project structure to work on.
2023-11-27 05:08:17 +00:00
<header class="bg-amber-500 w-screen h-12 flex items-center justify-between">
<span class="flex">
<button>Back</button>
<button>Forward</button>
</span>
<span class="flex">
Add breadcrumbs feature for improved navigation The commit introduces a new breadcrumbs.js file, which creates a breadcrumb functionality to improve the app's navigation. The rendered breadcrumbs allow users to keep track of their current directory path and navigate back to previous directories by clicking on the breadcrumb links. This function is also integrated into the main application in index.js. In addition, changes have been made in 'navigation.js' to include 'exists' method for better directory existence checking before navigation. Some updates are made in 'favourites.js' to simplify and improve the rendering of favourites. Modifications in 'index.html' support the new breadcrumb feature. Overall, these changes significantly improve user experience and navigation efficiency.
2023-11-27 05:34:30 +00:00
<div data-ui="breadcrumbs" class="flex gap-0 before:content-['/']"></div>
Add initial project setup for a File Browser system This commit includes the setup of a new File Browser system. The system uses Tailwind CSS for styling alongside Tauri for a Rust backend. It also includes a new HTML index file, several JavaScript files for application logic e.g. favourite handling as well as new CSS files for custom styles. Git ignore file is added to exclude unnecessary files to be tracked by git. This setup is necessary to start developing File Browsing features and provides a base project structure to work on.
2023-11-27 05:08:17 +00:00
<button>Search</button>
</span>
<span class="flex">
Add breadcrumbs feature for improved navigation The commit introduces a new breadcrumbs.js file, which creates a breadcrumb functionality to improve the app's navigation. The rendered breadcrumbs allow users to keep track of their current directory path and navigate back to previous directories by clicking on the breadcrumb links. This function is also integrated into the main application in index.js. In addition, changes have been made in 'navigation.js' to include 'exists' method for better directory existence checking before navigation. Some updates are made in 'favourites.js' to simplify and improve the rendering of favourites. Modifications in 'index.html' support the new breadcrumb feature. Overall, these changes significantly improve user experience and navigation efficiency.
2023-11-27 05:34:30 +00:00
<button data-ui="view-list">List</button>
<button data-ui="view-panel">Panel</button>
<button data-ui="view-column">Column</button>
Add initial project setup for a File Browser system This commit includes the setup of a new File Browser system. The system uses Tailwind CSS for styling alongside Tauri for a Rust backend. It also includes a new HTML index file, several JavaScript files for application logic e.g. favourite handling as well as new CSS files for custom styles. Git ignore file is added to exclude unnecessary files to be tracked by git. This setup is necessary to start developing File Browsing features and provides a base project structure to work on.
2023-11-27 05:08:17 +00:00
</span>
</header>
<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">
<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">
<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>
</div>
</dialog>
<menu class="bg-blue-500 h-full min-w-[250px] flex flex-col" data-ui="favourites">
<li class="order-last">
<button data-ui="add-favourite">+ Add favourite</button>
</li>
</menu>
Add breadcrumbs feature for improved navigation The commit introduces a new breadcrumbs.js file, which creates a breadcrumb functionality to improve the app's navigation. The rendered breadcrumbs allow users to keep track of their current directory path and navigate back to previous directories by clicking on the breadcrumb links. This function is also integrated into the main application in index.js. In addition, changes have been made in 'navigation.js' to include 'exists' method for better directory existence checking before navigation. Some updates are made in 'favourites.js' to simplify and improve the rendering of favourites. Modifications in 'index.html' support the new breadcrumb feature. Overall, these changes significantly improve user experience and navigation efficiency.
2023-11-27 05:34:30 +00:00
<main class="bg-red-500 h-full w-full" data-ui="files"></main>
Add initial project setup for a File Browser system This commit includes the setup of a new File Browser system. The system uses Tailwind CSS for styling alongside Tauri for a Rust backend. It also includes a new HTML index file, several JavaScript files for application logic e.g. favourite handling as well as new CSS files for custom styles. Git ignore file is added to exclude unnecessary files to be tracked by git. This setup is necessary to start developing File Browsing features and provides a base project structure to work on.
2023-11-27 05:08:17 +00:00
</div>
<template data-template="favourites">
<li data-el="added" class="h-8 flex">
<button data-el="action" class="w-full text-left"></button>
<button data-el="remove" class="w-8">x</button>
</li>
</template>
Add breadcrumbs feature for improved navigation The commit introduces a new breadcrumbs.js file, which creates a breadcrumb functionality to improve the app's navigation. The rendered breadcrumbs allow users to keep track of their current directory path and navigate back to previous directories by clicking on the breadcrumb links. This function is also integrated into the main application in index.js. In addition, changes have been made in 'navigation.js' to include 'exists' method for better directory existence checking before navigation. Some updates are made in 'favourites.js' to simplify and improve the rendering of favourites. Modifications in 'index.html' support the new breadcrumb feature. Overall, these changes significantly improve user experience and navigation efficiency.
2023-11-27 05:34:30 +00:00
<template data-template="breadcrumbs">
<button data-el="action" class="after:content-['/']"></button>
</template>
Add file browsing, viewing functionalities and enhance navigation Introduced new functionalities in the file manager application for browsing, listing and opening files. We have added a new command 'get_files' in 'main.rs', which reads entries in a directory and fetches associated metadata. This allows users to view files in a selected directory. Additionally, the command 'open_file' has been added for opening files. Simultaneously, frontend changes have been made such as: new templates for file lists, handlers for view switching in 'files.js', and rendered files in each mode. The 'navigation.js' error handling has been improved for invalid navigation. Improved user experience by adding a breadcrumbs feature for better navigation. This is performed by the newly introduced 'breadcrumbs.js' file which maintains the history of navigated directories. Overall, these enhanced functionalities improve navigation and file management efficiency for end-users.
2023-11-27 12:36:35 +00:00
<template data-template="files-list">
<div class="w-full h-full overflow-y-scroll">
<table class="w-full">
<thead>
<tr class="sticky top-0 bg-red-500">
<th>Name</th>
<th>Size</th>
<th>Permissions</th>
<th>Modified</th>
</tr>
</thead>
<tbody data-el="body"></tbody>
</table>
</div>
</template>
<template data-template="files-list-item">
<tr data-el="action">
<td data-el="name"></td>
<td data-el="size"></td>
<td data-el="permission"></td>
<td data-el="modified"></td>
</tr>
</template>
<template data-template="files-panel">
</template>
<template data-template="files-panel-item">
</template>
<template data-template="files-column">
</template>
<template data-template="files-column-item">
</template>
Add initial project setup for a File Browser system This commit includes the setup of a new File Browser system. The system uses Tailwind CSS for styling alongside Tauri for a Rust backend. It also includes a new HTML index file, several JavaScript files for application logic e.g. favourite handling as well as new CSS files for custom styles. Git ignore file is added to exclude unnecessary files to be tracked by git. This setup is necessary to start developing File Browsing features and provides a base project structure to work on.
2023-11-27 05:08:17 +00:00
</body>
</html>