changes
This commit is contained in:
@@ -1,14 +1,25 @@
|
||||
<!-- Browse modal for file selection -->
|
||||
|
||||
<div x-show="showBrowseModal" @keydown.escape.window="closeBrowseModal()"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
|
||||
<div class="bg-gray-800 rounded-lg p-6 max-w-2xl w-full mx-4 border border-gray-600" style="max-height: 80vh; display: flex; flex-direction: column;">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-xl font-bold">Open File</h2>
|
||||
<div class="text-sm text-gray-400">
|
||||
Current: <span x-text="browsePath || '/'"></span>
|
||||
class="fixed inset-0 z-[50] pt-12 lg:pt-0">
|
||||
<!-- Backdrop (below content, allows clicks to close) -->
|
||||
<div @click="closeBrowseModal()" class="absolute inset-0 bg-black bg-opacity-75 lg:bg-opacity-75"></div>
|
||||
|
||||
<!-- Close button (top right, above backdrop) -->
|
||||
<button
|
||||
@click="closeBrowseModal()"
|
||||
class="absolute top-4 right-4 z-[51] bg-gray-700 hover:bg-gray-600 rounded-full w-10 h-10 flex items-center justify-center text-xl min-h-[2.5rem] touch-manipulation lg:top-4"
|
||||
>✕</button>
|
||||
|
||||
<!-- Modal content - above backdrop, full screen on mobile, centered on desktop -->
|
||||
<div class="absolute inset-0 pt-12 lg:pt-0 overflow-auto p-4 z-[51]">
|
||||
<div class="max-w-2xl mx-auto h-full flex flex-col lg:bg-gray-800 lg:rounded-lg lg:p-6 lg:max-h-[80vh] lg:border lg:border-gray-600 lg:my-auto">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-xl font-bold">Open File</h2>
|
||||
<div class="text-sm text-gray-400">
|
||||
Current: <span x-text="browsePath || '/'"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Directory listing -->
|
||||
<div class="flex-1 overflow-auto bg-gray-700 rounded mb-4 p-2" style="min-height: 300px;">
|
||||
@@ -54,15 +65,16 @@
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex gap-4 justify-end">
|
||||
<button @click="closeBrowseModal()" class="bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded transition">Cancel</button>
|
||||
<div class="flex gap-4 justify-end lg:flex lg:justify-end flex-col">
|
||||
<button
|
||||
@click="openSelectedFile()"
|
||||
:disabled="!browseSelectedPath"
|
||||
class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-4 py-2 rounded transition"
|
||||
class="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-4 py-2 rounded transition min-h-[2.5rem] touch-manipulation"
|
||||
>
|
||||
Open Selected
|
||||
</button>
|
||||
<button @click="closeBrowseModal()" class="w-full bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded transition min-h-[2.5rem] touch-manipulation">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user