202 lines
5.7 KiB
HTML
202 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>File Browser Demo - Yew + Uppy.js + TUS</title>
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Bootstrap Icons -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
|
|
<!-- Uppy CSS -->
|
|
<link href="https://releases.transloadit.com/uppy/v4.13.3/uppy.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
body {
|
|
background-color: #f8f9fa;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
|
|
.app {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
main {
|
|
flex: 1;
|
|
}
|
|
|
|
.file-browser {
|
|
padding: 1.5rem;
|
|
max-height: 80vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.file-browser-toolbar {
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 0.375rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.file-browser-items {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
max-height: 500px;
|
|
}
|
|
|
|
.file-browser-items .table {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.file-browser-items .table th {
|
|
background-color: #f8f9fa;
|
|
border-top: none;
|
|
font-weight: 600;
|
|
color: #495057;
|
|
}
|
|
|
|
.file-browser-items .table td {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.file-browser-items .table tbody tr:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.file-browser-upload .card {
|
|
border: 2px dashed #dee2e6;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.file-browser-upload .card-header {
|
|
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
|
|
border-bottom: 1px solid #90caf9;
|
|
}
|
|
|
|
/* Uppy Dashboard Styling */
|
|
.uppy-Dashboard {
|
|
border: none !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.uppy-Dashboard-inner {
|
|
border: 2px dashed #007bff !important;
|
|
border-radius: 0.5rem !important;
|
|
background: linear-gradient(135deg, #f8f9ff 0%, #e6f3ff 100%) !important;
|
|
}
|
|
|
|
.uppy-Dashboard-dropFilesHereHint {
|
|
color: #007bff !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
/* Progress bars */
|
|
.progress {
|
|
height: 0.5rem;
|
|
background-color: #e9ecef;
|
|
}
|
|
|
|
.progress-bar {
|
|
background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
|
|
}
|
|
|
|
/* Breadcrumb styling */
|
|
.file-browser-breadcrumb .breadcrumb {
|
|
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 0.375rem;
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
.file-browser-breadcrumb .breadcrumb-item a {
|
|
color: #007bff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.file-browser-breadcrumb .breadcrumb-item a:hover {
|
|
color: #0056b3;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Modal styling */
|
|
.modal-content {
|
|
border: none;
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.modal-header {
|
|
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
|
|
color: white;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.modal-header .btn-close {
|
|
filter: invert(1);
|
|
}
|
|
|
|
/* Button styling */
|
|
.btn-outline-primary:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 123, 255, 0.25);
|
|
}
|
|
|
|
.btn-outline-success:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 0.125rem 0.25rem rgba(40, 167, 69, 0.25);
|
|
}
|
|
|
|
.btn-outline-danger:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 0.125rem 0.25rem rgba(220, 53, 69, 0.25);
|
|
}
|
|
|
|
/* Loading spinner */
|
|
.spinner-border {
|
|
color: #007bff;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
margin-top: auto;
|
|
}
|
|
|
|
footer a {
|
|
color: #007bff !important;
|
|
}
|
|
|
|
footer a:hover {
|
|
color: #0056b3 !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
|
|
<!-- Trunk will automatically inject the WASM loading script here -->
|
|
<link data-trunk rel="rust" data-bin="file_browser_demo" />
|
|
|
|
<!-- Uppy.js (ES Modules) -->
|
|
<script type="module">
|
|
// Import Uppy modules and make them globally available
|
|
import { Uppy, Dashboard, Tus, GoogleDrive } from "https://releases.transloadit.com/uppy/v4.13.3/uppy.min.mjs";
|
|
|
|
// Make Uppy available globally for the Rust/WASM code
|
|
window.Uppy = Uppy;
|
|
window.Uppy.Dashboard = Dashboard;
|
|
window.Uppy.Tus = Tus;
|
|
window.Uppy.GoogleDrive = GoogleDrive;
|
|
|
|
console.log("Uppy.js loaded and available globally");
|
|
</script>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|