separate modals from room template
This commit is contained in:
30
templates/components/delete_confirm_modal.html
Normal file
30
templates/components/delete_confirm_modal.html
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
<!-- Delete Confirmation Modal -->
|
||||||
|
<div id="deleteConfirmModal" class="modal fade" tabindex="-1" aria-labelledby="deleteConfirmLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="deleteConfirmLabel">Move to Trash</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="d-flex align-items-center gap-3 mb-3">
|
||||||
|
<i class="fas fa-trash text-danger" style="font-size: 2rem;"></i>
|
||||||
|
<div>
|
||||||
|
<h6 class="mb-1">Move to Trash</h6>
|
||||||
|
<p class="text-muted mb-0" id="deleteFileName"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-info">
|
||||||
|
<i class="fas fa-info-circle me-2"></i>
|
||||||
|
This item will be moved to trash. You can restore it from the trash page within 30 days.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||||
|
<button type="button" class="btn btn-danger" id="confirmDeleteBtn" style="background-color: #b91c1c; border-color: #b91c1c;">
|
||||||
|
<i class="fas fa-trash me-1"></i>Move to Trash
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
24
templates/components/move_modal.html
Normal file
24
templates/components/move_modal.html
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
<!-- Move Modal -->
|
||||||
|
<div class="modal fade" id="moveModal" tabindex="-1" aria-labelledby="moveModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="moveModalLabel">Move File</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="moveTargetFolder" class="form-label">Select Target Folder</label>
|
||||||
|
<select class="form-select" id="moveTargetFolder">
|
||||||
|
<option value="">Root Folder</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div id="moveError" class="text-danger"></div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||||
|
<button type="button" class="btn btn-primary" id="confirmMoveBtn" style="background-color:#16767b; border:1px solid #16767b;">Move</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
19
templates/components/new_folder_modal.html
Normal file
19
templates/components/new_folder_modal.html
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
<!-- New Folder Modal -->
|
||||||
|
<div id="newFolderModal" class="modal fade" tabindex="-1" aria-labelledby="newFolderLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="newFolderLabel">Create New Folder</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<input type="text" id="folderNameInput" class="form-control" placeholder="Folder name" autocomplete="off" />
|
||||||
|
<div id="folderError" class="text-danger mt-2"></div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||||
|
<button type="button" class="btn btn-primary" id="createFolderBtn" style="background-color: #16767b; border-color: #16767b;">Create</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
20
templates/components/overwrite_confirm_modal.html
Normal file
20
templates/components/overwrite_confirm_modal.html
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<!-- Overwrite Confirmation Modal -->
|
||||||
|
<div id="overwriteConfirmModal" class="modal fade" tabindex="-1" aria-labelledby="overwriteConfirmLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="overwriteConfirmLabel">Overwrite File?</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<p id="overwriteFileMsg">A file with this name already exists. Do you want to overwrite <span id="overwriteFileName" class="fw-bold"></span>?</p>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" id="skipOverwriteBtn">Skip</button>
|
||||||
|
<button type="button" class="btn btn-secondary" id="skipAllOverwriteBtn">Skip All</button>
|
||||||
|
<button type="button" class="btn btn-danger" id="confirmOverwriteBtn" style="background-color: #b91c1c; border-color: #b91c1c;">Overwrite</button>
|
||||||
|
<button type="button" class="btn btn-danger" id="confirmAllOverwriteBtn" style="background-color: #b91c1c; border-color: #b91c1c;">Overwrite All</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
19
templates/components/rename_modal.html
Normal file
19
templates/components/rename_modal.html
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
<!-- Rename Modal -->
|
||||||
|
<div id="renameModal" class="modal fade" tabindex="-1" aria-labelledby="renameLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="renameLabel">Rename</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div id="renameInputGroup"></div>
|
||||||
|
<div id="renameError" class="text-danger mt-2"></div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||||
|
<button type="button" class="btn btn-primary" id="confirmRenameBtn" style="background-color: #16767b; border-color: #16767b;">Rename</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -88,136 +88,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="deleteConfirmModal" class="modal fade" tabindex="-1" aria-labelledby="deleteConfirmLabel" aria-hidden="true">
|
{% include 'components/delete_confirm_modal.html' %}
|
||||||
<div class="modal-dialog modal-dialog-centered">
|
{% include 'components/new_folder_modal.html' %}
|
||||||
<div class="modal-content">
|
{% include 'components/rename_modal.html' %}
|
||||||
<div class="modal-header">
|
{% include 'components/details_modal.html' %}
|
||||||
<h5 class="modal-title" id="deleteConfirmLabel">Move to Trash</h5>
|
{% include 'components/overwrite_confirm_modal.html' %}
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
{% include 'components/move_modal.html' %}
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="d-flex align-items-center gap-3 mb-3">
|
|
||||||
<i class="fas fa-trash text-danger" style="font-size: 2rem;"></i>
|
|
||||||
<div>
|
|
||||||
<h6 class="mb-1">Move to Trash</h6>
|
|
||||||
<p class="text-muted mb-0" id="deleteFileName"></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="alert alert-info">
|
|
||||||
<i class="fas fa-info-circle me-2"></i>
|
|
||||||
This item will be moved to trash. You can restore it from the trash page within 30 days.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
||||||
<button type="button" class="btn btn-danger" id="confirmDeleteBtn" style="background-color: #b91c1c; border-color: #b91c1c;">
|
|
||||||
<i class="fas fa-trash me-1"></i>Move to Trash
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="newFolderModal" class="modal fade" tabindex="-1" aria-labelledby="newFolderLabel" aria-hidden="true">
|
|
||||||
<div class="modal-dialog modal-dialog-centered">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h5 class="modal-title" id="newFolderLabel">Create New Folder</h5>
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<input type="text" id="folderNameInput" class="form-control" placeholder="Folder name" autocomplete="off" />
|
|
||||||
<div id="folderError" class="text-danger mt-2"></div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
||||||
<button type="button" class="btn btn-primary" id="createFolderBtn" style="background-color: #16767b; border-color: #16767b;">Create</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="renameModal" class="modal fade" tabindex="-1" aria-labelledby="renameLabel" aria-hidden="true">
|
|
||||||
<div class="modal-dialog modal-dialog-centered">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h5 class="modal-title" id="renameLabel">Rename</h5>
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<div id="renameInputGroup"></div>
|
|
||||||
<div id="renameError" class="text-danger mt-2"></div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
||||||
<button type="button" class="btn btn-primary" id="confirmRenameBtn" style="background-color: #16767b; border-color: #16767b;">Rename</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Details Modal -->
|
|
||||||
<div id="detailsModal" class="modal fade" tabindex="-1" aria-labelledby="detailsModalLabel" aria-hidden="true">
|
|
||||||
<div class="modal-dialog modal-dialog-centered">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h5 class="modal-title" id="detailsModalLabel">Item Details</h5>
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body" id="detailsModalBody">
|
|
||||||
<!-- Populated by JS -->
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="overwriteConfirmModal" class="modal fade" tabindex="-1" aria-labelledby="overwriteConfirmLabel" aria-hidden="true">
|
|
||||||
<div class="modal-dialog modal-dialog-centered">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h5 class="modal-title" id="overwriteConfirmLabel">Overwrite File?</h5>
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<p id="overwriteFileMsg">A file with this name already exists. Do you want to overwrite <span id="overwriteFileName" class="fw-bold"></span>?</p>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button type="button" class="btn btn-secondary" id="skipOverwriteBtn">Skip</button>
|
|
||||||
<button type="button" class="btn btn-secondary" id="skipAllOverwriteBtn">Skip All</button>
|
|
||||||
<button type="button" class="btn btn-danger" id="confirmOverwriteBtn" style="background-color: #b91c1c; border-color: #b91c1c;">Overwrite</button>
|
|
||||||
<button type="button" class="btn btn-danger" id="confirmAllOverwriteBtn" style="background-color: #b91c1c; border-color: #b91c1c;">Overwrite All</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Move Modal -->
|
|
||||||
<div class="modal fade" id="moveModal" tabindex="-1" aria-labelledby="moveModalLabel" aria-hidden="true">
|
|
||||||
<div class="modal-dialog modal-dialog-centered">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h5 class="modal-title" id="moveModalLabel">Move File</h5>
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="moveTargetFolder" class="form-label">Select Target Folder</label>
|
|
||||||
<select class="form-select" id="moveTargetFolder">
|
|
||||||
<option value="">Root Folder</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div id="moveError" class="text-danger"></div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
||||||
<button type="button" class="btn btn-primary" id="confirmMoveBtn" style="background-color:#16767b; border:1px solid #16767b;">Move</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Define showDetailsModal function first
|
// Define showDetailsModal function first
|
||||||
|
|||||||
Reference in New Issue
Block a user