121 lines
No EOL
4.7 KiB
HTML
121 lines
No EOL
4.7 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}File Browser - Flask Files{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
/* Additional page-specific styles if needed */
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
<div class="browser-container">
|
|
<div class="browser-header">
|
|
<div class="browser-title">
|
|
<i class="fas fa-folder-open"></i>
|
|
<h2>{% if current_folder %}{{ current_folder.name }}{% else %}My Files{% endif %}</h2>
|
|
</div>
|
|
<div class="browser-actions">
|
|
<div class="search-container">
|
|
<form action="{{ url_for('files.browser') }}" method="get">
|
|
<input type="text" name="q" placeholder="Search files..."
|
|
value="{{ request.args.get('q', '') }}">
|
|
<button type="submit" class="search-btn">
|
|
<i class="fas fa-search"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<div class="view-toggle">
|
|
<button id="grid-view-btn" class="view-btn active" title="Grid View">
|
|
<i class="fas fa-th"></i>
|
|
</button>
|
|
<button id="list-view-btn" class="view-btn" title="List View">
|
|
<i class="fas fa-list"></i>
|
|
</button>
|
|
</div>
|
|
<a href="{% if current_folder %}{{ url_for('files.upload', folder_id=current_folder.id) }}{% else %}{{ url_for('files.upload') }}{% endif %}"
|
|
class="btn primary">
|
|
<i class="fas fa-upload"></i> Upload
|
|
</a>
|
|
<button id="new-folder-btn" class="btn secondary">
|
|
<i class="fas fa-folder-plus"></i> New Folder
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="breadcrumbs">
|
|
<a href="{{ url_for('files.browser') }}" class="breadcrumb-item">
|
|
<i class="fas fa-home"></i> Home
|
|
</a>
|
|
{% if breadcrumbs %}
|
|
{% for folder in breadcrumbs %}
|
|
<span class="breadcrumb-separator">/</span>
|
|
<a href="{{ url_for('files.browser', folder_id=folder.id) }}" class="breadcrumb-item">
|
|
{{ folder.name }}
|
|
</a>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div id="files-container" class="files-container grid-view">
|
|
{% include 'files/partials/folder_contents.html' %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- New Folder Modal -->
|
|
<div id="new-folder-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Create New Folder</h3>
|
|
<button class="modal-close">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="new-folder-form" action="{{ url_for('files.create_folder') }}" method="post">
|
|
<div class="form-group">
|
|
<label for="folder-name">Folder Name</label>
|
|
<input type="text" id="folder-name" name="name" required placeholder="Enter folder name">
|
|
<input type="hidden" id="parent-folder-id" name="parent_id"
|
|
value="{% if current_folder %}{{ current_folder.id }}{% endif %}">
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn modal-cancel">Cancel</button>
|
|
<button type="submit" class="btn primary">Create Folder</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Context Menu -->
|
|
<div id="context-menu" class="context-menu">
|
|
<div class="context-menu-item" data-action="open" data-for="folder">
|
|
<i class="fas fa-folder-open"></i> Open
|
|
</div>
|
|
<div class="context-menu-item" data-action="download" data-for="file">
|
|
<i class="fas fa-download"></i> Download
|
|
</div>
|
|
<div class="context-menu-item" data-action="share" data-for="file">
|
|
<i class="fas fa-share-alt"></i> Share
|
|
</div>
|
|
<div class="context-menu-item" data-action="rename" data-for="all">
|
|
<i class="fas fa-pencil-alt"></i> Rename
|
|
</div>
|
|
<div class="context-menu-item" data-action="delete" data-for="all">
|
|
<i class="fas fa-trash"></i> Delete
|
|
</div>
|
|
</div>
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
// Add folder entrance animation
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const filesContainer = document.getElementById('files-container');
|
|
if (filesContainer) {
|
|
filesContainer.classList.add('folder-enter-active');
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
{% endblock %} |