Ethanfel/Comfyui-JSON-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix UI readability and clipping issues

Browse Source 
Add page/sidebar background contrast, wrap action button rows,
ensure dark text in inputs, and improve timeline card highlight colors.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ethanfel
2026-02-25 11:30:44 +01:00
parent f6d5ebfe34
commit d5fbfe765e
3 changed files with 32 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
main.py
View File

@@ -17,6 +17,16 @@ from tab_comfy_ng import render_comfy_monitor
@ui.page('/') @ui.page('/')
def index(): def index():
# -- Global styling for readability --
ui.query('body').classes('bg-grey-2')
ui.add_css('''
.q-expansion-item__content { padding: 4px 0; }
.action-row { flex-wrap: wrap !important; gap: 4px !important; }
.q-tab-panels { background: transparent !important; }
.q-textarea .q-field__native { color: #1a1a1a !important; }
.q-input .q-field__native { color: #1a1a1a !important; }
''')
config = load_config() config = load_config()
state = AppState( state = AppState(
config=config, config=config,
@@ -35,25 +45,26 @@ def index():
'text-subtitle1 q-pa-lg') 'text-subtitle1 q-pa-lg')
return return
ui.label(f'Editing: {state.file_path.name}').classes('text-h5 q-mb-md') with ui.card().classes('w-full q-pa-md'):
ui.label(f'Editing: {state.file_path.name}').classes('text-h5 q-mb-md')
with ui.tabs().classes('w-full') as tabs: with ui.tabs().classes('w-full') as tabs:
ui.tab('batch', label='Batch Processor') ui.tab('batch', label='Batch Processor')
ui.tab('timeline', label='Timeline') ui.tab('timeline', label='Timeline')
ui.tab('raw', label='Raw Editor') ui.tab('raw', label='Raw Editor')
with ui.tab_panels(tabs, value='batch').classes('w-full'): with ui.tab_panels(tabs, value='batch').classes('w-full'):
with ui.tab_panel('batch'): with ui.tab_panel('batch'):
render_batch_processor(state) render_batch_processor(state)
with ui.tab_panel('timeline'): with ui.tab_panel('timeline'):
render_timeline_tab(state) render_timeline_tab(state)
with ui.tab_panel('raw'): with ui.tab_panel('raw'):
render_raw_editor(state) render_raw_editor(state)
if state.show_comfy_monitor: if state.show_comfy_monitor:
ui.separator() with ui.card().classes('w-full q-pa-md q-mt-md'):
with ui.expansion('ComfyUI Monitor', icon='dns').classes('w-full'): with ui.expansion('ComfyUI Monitor', icon='dns').classes('w-full'):
render_comfy_monitor(state) render_comfy_monitor(state)
def load_file(file_name: str): def load_file(file_name: str):
"""Load a JSON file and refresh the main content.""" """Load a JSON file and refresh the main content."""
@@ -77,7 +88,7 @@ def index():
# ------------------------------------------------------------------ # ------------------------------------------------------------------
# Sidebar (rendered AFTER helpers are attached) # Sidebar (rendered AFTER helpers are attached)
# ------------------------------------------------------------------ # ------------------------------------------------------------------
with ui.left_drawer().classes('q-pa-md').style('width: 350px'): with ui.left_drawer().classes('q-pa-md bg-grey-1').style('width: 350px'):
render_sidebar(state) render_sidebar(state)
# ------------------------------------------------------------------ # ------------------------------------------------------------------

5
tab_batch_ng.py
View File

@@ -284,9 +284,10 @@ def _render_sequence_card(i, seq, batch_list, data, file_path, state,
else: else:
label = f'Sequence #{seq_num}' label = f'Sequence #{seq_num}'
with ui.expansion(label, icon='movie').classes('w-full'): with ui.card().classes('w-full q-mb-sm'), \
ui.expansion(label, icon='movie').classes('w-full'):
# --- Action row --- # --- Action row ---
with ui.row().classes('w-full q-gutter-sm'): with ui.row().classes('w-full q-gutter-sm action-row'):
# Copy from source # Copy from source
def copy_source(idx=i, sn=seq_num): def copy_source(idx=i, sn=seq_num):
item = DEFAULTS.copy() item = DEFAULTS.copy()

4
tab_timeline_ng.py
View File

@@ -92,8 +92,8 @@ def render_timeline_tab(state: AppState):
with ui.card().classes( with ui.card().classes(
'w-full q-mb-sm' + 'w-full q-mb-sm' +
(' bg-yellow-1' if is_head else '') + (' bg-amber-2' if is_head else '') +
(' bg-red-1' if is_selected else '') (' bg-red-2' if is_selected else '')
): ):
with ui.row().classes('w-full items-center'): with ui.row().classes('w-full items-center'):
if selection_mode.value: if selection_mode.value: