Ethanfel/sorting-sorted
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update gallery_app.py

Browse Source
This commit is contained in:
Ethanfel
2026-01-19 19:59:55 +01:00
parent b5794e9db5
commit 1cbad1a3ed
1 changed files with 33 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
gallery_app.py
View File

@@ -157,11 +157,18 @@ def action_apply_page(mode="Copy", cleanup="Keep"):
# ========================================== # ==========================================
def open_zoom_dialog(path): def open_zoom_dialog(path):
with ui.dialog() as dialog, ui.card().classes('w-full max-w-4xl'): # 'w-full max-w-screen-xl' makes it nearly full width on large monitors
ui.label(os.path.basename(path)).classes('text-lg font-bold') with ui.dialog() as dialog, ui.card().classes('w-full max-w-screen-xl p-0 gap-0 bg-black'):
# Use the /full_res route for high quality
ui.image(f"/full_res?path={path}").classes('w-full rounded') # Header Bar inside the dialog
ui.button('Close', on_click=dialog.close).classes('w-full') with ui.row().classes('w-full justify-between items-center p-2 bg-gray-900 text-white'):
ui.label(os.path.basename(path)).classes('text-lg font-bold truncate')
ui.button(icon='close', on_click=dialog.close).props('flat round dense color=white')
# Image area - remove restrictions so it fills the card
# We use a high-res request
ui.image(f"/full_res?path={path}").classes('w-full h-auto object-contain')
dialog.open() dialog.open()
def render_sidebar(): def render_sidebar():
@@ -306,34 +313,36 @@ def handle_key(e):
if e.key.arrow_right: set_page(state.page + 1) if e.key.arrow_right: set_page(state.page + 1)
# Add number keys 1-9 to set category or tag quickly? # Add number keys 1-9 to set category or tag quickly?
# ========================================== ## ==========================================
# 6. MAIN LAYOUT # 6. MAIN LAYOUT
# ========================================== # ==========================================
# 1. HEADER (Adaptive Color + Dark Mode Toggle) # 1. HEADER (Adaptive & Stretchy Inputs)
# We removed 'bg-white' so it respects dark mode. with ui.header().classes('items-center justify-between bg-slate-900 text-white border-b border-gray-700').style('height: 70px'):
with ui.header().classes('items-center justify-between bg-slate-900 text-white').style('height: 70px'):
with ui.row().classes('items-center gap-2'): # We use a single row with 'no-wrap' to keep everything on one line
ui.label('🖼️ Sorter').classes('text-xl font-bold mr-4') with ui.row().classes('w-full items-center gap-4 no-wrap'):
# WIDER INPUTS (w-96 is approx 400px) # Logo
# We use 'props' to set specific dark mode styling for inputs ui.label('🖼️ Sorter').classes('text-xl font-bold shrink-0')
# INPUTS: 'flex-grow' makes them stretch to fill ALL available space
# We wrap them in a flexible row so they share the space 50/50
with ui.row().classes('flex-grow gap-4'):
ui.input('Source').bind_value(state, 'source_dir') \ ui.input('Source').bind_value(state, 'source_dir') \
.classes('w-96').props('dark dense outlined') .classes('flex-grow').props('dark dense outlined input-class="text-green-300"')
ui.input('Output').bind_value(state, 'output_dir') \ ui.input('Output').bind_value(state, 'output_dir') \
.classes('w-96').props('dark dense outlined') .classes('flex-grow').props('dark dense outlined input-class="text-blue-300"')
ui.button('Load', on_click=load_images).props('dense flat color=white') # Buttons (shrink-0 prevents them from getting squished)
ui.button('Load', on_click=load_images).props('dense flat color=white').classes('shrink-0')
# Right side: Dark Mode Toggle # Dark Mode Toggle
with ui.row().classes('items-center'):
# Toggle switch for Dark Mode
dark = ui.dark_mode() dark = ui.dark_mode()
dark.enable() # Enable by default dark.enable()
ui.switch('Dark', value=True, on_change=lambda e: dark.set_value(e.value)) \ ui.switch('Dark', value=True, on_change=lambda e: dark.set_value(e.value)) \
.props('color=green') .props('color=green').classes('shrink-0')
# 2. LEFT SIDEBAR # 2. LEFT SIDEBAR
with ui.left_drawer(value=True).classes('bg-gray-900 p-4 border-r border-gray-700').props('width=320') as drawer: with ui.left_drawer(value=True).classes('bg-gray-900 p-4 border-r border-gray-700').props('width=320') as drawer: