more commits..
This commit is contained in:
pika
parent
6dda02141e
commit
7823be6481
20 changed files with 1835 additions and 631 deletions
|
|
@ -3,65 +3,69 @@
|
|||
{% block title %}File Browser - Flask Files{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
/* Additional page-specific styles if needed */
|
||||
</style>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/context-menu.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="{{ url_for('static', filename='js/browser.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/context-menu.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/upload.js') }}"></script>
|
||||
{% 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 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="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
|
||||
<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>
|
||||
</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>
|
||||
<!-- File upload button and hidden input -->
|
||||
<input type="file" id="file-upload" multiple style="display: none">
|
||||
<button class="btn primary" id="upload-button">
|
||||
<i class="fas fa-upload"></i> Upload
|
||||
</button>
|
||||
|
||||
<div id="files-container" class="files-container grid-view">
|
||||
{% include 'files/partials/folder_contents.html' %}
|
||||
<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>
|
||||
|
||||
<!-- New Folder Modal -->
|
||||
|
|
@ -88,34 +92,51 @@
|
|||
</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
|
||||
<!-- Rename Modal -->
|
||||
<div id="rename-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>Rename Item</h3>
|
||||
<button class="modal-close">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="rename-form" action="{{ url_for('files.rename_item') }}" method="post">
|
||||
<div class="form-group">
|
||||
<label for="new-name">New Name</label>
|
||||
<input type="text" id="new-name" name="new_name" required placeholder="Enter new name">
|
||||
<input type="hidden" id="item-id" name="item_id">
|
||||
<input type="hidden" id="item-type" name="item_type">
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn modal-cancel">Cancel</button>
|
||||
<button type="submit" class="btn primary">Rename</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</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 %}
|
||||
<!-- Delete Modal -->
|
||||
<div id="delete-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>Delete Item</h3>
|
||||
<button class="modal-close">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Are you sure you want to delete this item? This action cannot be undone.</p>
|
||||
<form id="delete-form" action="{{ url_for('files.delete_item', item_id='placeholder') }}" method="post">
|
||||
<input type="hidden" id="delete-item-id" name="item_id">
|
||||
<input type="hidden" id="delete-item-type" name="item_type">
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn modal-cancel">Cancel</button>
|
||||
<button type="submit" class="btn danger">Delete</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Context Menu -->
|
||||
<div id="context-menu" class="context-menu"></div>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue