Restructure ORA editor into modular blueprints with browse dialog
- Split app.py into route blueprints (files, layers, images, polygon, mask, krita) - Create services layer (polygon_storage, comfyui, file_browser) - Extract config constants to config.py - Split templates into Jinja partials (base, components, modals) - Add browse dialog for visual file navigation - Add /api/browse endpoint for directory listing
This commit is contained in:
68
tools/ora_editor/templates/modals/browse.html
Normal file
68
tools/ora_editor/templates/modals/browse.html
Normal file
@@ -0,0 +1,68 @@
|
||||
<!-- 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Directory listing -->
|
||||
<div class="flex-1 overflow-auto bg-gray-700 rounded mb-4 p-2" style="min-height: 300px;">
|
||||
<!-- Parent directory -->
|
||||
<div
|
||||
x-show="browsePath"
|
||||
@click="navigateBrowseParent()"
|
||||
class="flex items-center gap-2 p-2 hover:bg-gray-600 rounded cursor-pointer text-gray-300"
|
||||
>
|
||||
<span class="text-lg">📁</span>
|
||||
<span>..</span>
|
||||
</div>
|
||||
|
||||
<!-- Directories -->
|
||||
<template x-for="dir in browseDirectories" :key="'dir-' + dir.path">
|
||||
<div
|
||||
@click="navigateBrowseDirectory(dir.path)"
|
||||
class="flex items-center gap-2 p-2 hover:bg-gray-600 rounded cursor-pointer"
|
||||
>
|
||||
<span class="text-lg">📁</span>
|
||||
<span x-text="dir.name"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Files -->
|
||||
<template x-for="file in browseFiles" :key="'file-' + file.path">
|
||||
<div
|
||||
@click="selectBrowseFile(file)"
|
||||
@dblclick="openBrowseFile(file)"
|
||||
class="flex items-center gap-2 p-2 hover:bg-gray-600 rounded cursor-pointer"
|
||||
:class="{ 'bg-blue-600': browseSelectedPath === file.path }"
|
||||
>
|
||||
<span class="text-lg" x-text="file.type === 'ora' ? '📄' : '🖼️'"></span>
|
||||
<span x-text="file.name"></span>
|
||||
<span class="text-xs text-gray-400 ml-auto uppercase" x-text="file.type"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div x-show="browseDirectories.length === 0 && browseFiles.length === 0" class="text-gray-400 text-center py-8">
|
||||
No PNG or ORA files in this directory
|
||||
</div>
|
||||
</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>
|
||||
<button
|
||||
@click="openSelectedFile()"
|
||||
:disabled="!browseSelectedPath"
|
||||
class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-4 py-2 rounded transition"
|
||||
>
|
||||
Open Selected
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user