Overhaul UI: new color palette, spacing, and visual hierarchy
Replace red accent with amber, add Inter font, introduce 4-level depth palette via CSS variables, expand padding/gaps, wrap sidebar and content sections in cards, add section/subsection header typography classes, and style scrollbars for dark theme. Pure visual changes — no functional or data-flow modifications. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
387
main.py
387
main.py
@@ -20,72 +20,129 @@ from tab_comfy_ng import render_comfy_monitor
|
||||
def index():
|
||||
# -- Streamlit dark theme --
|
||||
ui.dark_mode(True)
|
||||
ui.colors(primary='#FF4B4B')
|
||||
ui.colors(primary='#F59E0B')
|
||||
ui.add_head_html(
|
||||
'<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">'
|
||||
)
|
||||
ui.add_css('''
|
||||
/* === Streamlit Dark Theme === */
|
||||
/* === Dark Theme with Depth Palette === */
|
||||
:root {
|
||||
--bg-page: #0B0E14;
|
||||
--bg-surface-1: #13161E;
|
||||
--bg-surface-2: #1A1E2A;
|
||||
--bg-surface-3: #242836;
|
||||
--border: rgba(255,255,255,0.08);
|
||||
--text-primary: #EAECF0;
|
||||
--text-secondary: rgba(234,236,240,0.55);
|
||||
--accent: #F59E0B;
|
||||
--accent-subtle: rgba(245,158,11,0.12);
|
||||
--negative: #EF4444;
|
||||
}
|
||||
|
||||
/* Backgrounds */
|
||||
body.body--dark,
|
||||
.q-page.body--dark,
|
||||
.body--dark .q-page { background: #0E1117 !important; }
|
||||
.body--dark .q-drawer { background: #262730 !important; }
|
||||
.body--dark .q-card { background: #262730 !important; border-radius: 0.5rem; }
|
||||
.body--dark .q-page { background: var(--bg-page) !important; }
|
||||
.body--dark .q-drawer { background: var(--bg-surface-1) !important; }
|
||||
.body--dark .q-card {
|
||||
background: var(--bg-surface-2) !important;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
.body--dark .q-tab-panels { background: transparent !important; }
|
||||
.body--dark .q-tab-panel { background: transparent !important; }
|
||||
.body--dark .q-expansion-item { background: transparent !important; }
|
||||
|
||||
/* Text */
|
||||
.body--dark { color: #FAFAFA !important; }
|
||||
.body--dark .q-field__label { color: rgba(250,250,250,0.6) !important; }
|
||||
.body--dark .text-caption { color: rgba(250,250,250,0.6) !important; }
|
||||
.body--dark { color: var(--text-primary) !important; }
|
||||
.body--dark .q-field__label { color: var(--text-secondary) !important; }
|
||||
.body--dark .text-caption { color: var(--text-secondary) !important; }
|
||||
.body--dark .text-subtitle1,
|
||||
.body--dark .text-subtitle2 { color: #FAFAFA !important; }
|
||||
.body--dark .text-subtitle2 { color: var(--text-primary) !important; }
|
||||
|
||||
/* Inputs & textareas */
|
||||
.body--dark .q-field--outlined .q-field__control {
|
||||
background: #262730 !important;
|
||||
background: var(--bg-surface-3) !important;
|
||||
border-radius: 0.5rem !important;
|
||||
}
|
||||
.body--dark .q-field--outlined .q-field__control:before {
|
||||
border-color: rgba(250,250,250,0.2) !important;
|
||||
border-color: var(--border) !important;
|
||||
border-radius: 0.5rem !important;
|
||||
}
|
||||
.body--dark .q-field--outlined.q-field--focused .q-field__control:after {
|
||||
border-color: #FF4B4B !important;
|
||||
border-color: var(--accent) !important;
|
||||
}
|
||||
.body--dark .q-field__native,
|
||||
.body--dark .q-field__input { color: #FAFAFA !important; }
|
||||
.body--dark .q-field__input { color: var(--text-primary) !important; }
|
||||
|
||||
/* Sidebar inputs get main bg */
|
||||
/* Sidebar inputs get page bg */
|
||||
.body--dark .q-drawer .q-field--outlined .q-field__control {
|
||||
background: #0E1117 !important;
|
||||
background: var(--bg-page) !important;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.body--dark .q-btn--standard { border-radius: 0.5rem !important; }
|
||||
.body--dark .q-btn--outline {
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
.body--dark .q-btn--outline:hover {
|
||||
background: var(--accent-subtle) !important;
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.body--dark .q-tab--active { color: #FF4B4B !important; }
|
||||
.body--dark .q-tab__indicator { background: #FF4B4B !important; }
|
||||
.body--dark .q-tab--active { color: var(--accent) !important; }
|
||||
.body--dark .q-tab__indicator { background: var(--accent) !important; }
|
||||
|
||||
/* Separators */
|
||||
.body--dark .q-separator { background: rgba(250,250,250,0.2) !important; }
|
||||
.body--dark .q-separator { background: var(--border) !important; }
|
||||
|
||||
/* Expansion items */
|
||||
.body--dark .q-expansion-item__content { padding: 4px 0; }
|
||||
.body--dark .q-expansion-item__content { padding: 12px 16px; }
|
||||
.body--dark .q-item { border-radius: 0.5rem; }
|
||||
|
||||
/* Splitter */
|
||||
.body--dark .q-splitter__separator { background: rgba(250,250,250,0.2) !important; }
|
||||
.body--dark .q-splitter__separator { background: var(--border) !important; }
|
||||
.body--dark .q-splitter__before,
|
||||
.body--dark .q-splitter__after { padding: 0 8px; }
|
||||
|
||||
/* Action row wrap */
|
||||
.action-row { flex-wrap: wrap !important; gap: 4px !important; }
|
||||
.action-row { flex-wrap: wrap !important; gap: 8px !important; }
|
||||
|
||||
/* Notifications */
|
||||
.body--dark .q-notification { border-radius: 0.5rem; }
|
||||
|
||||
/* Font */
|
||||
body { font-family: "Source Sans Pro", "Source Sans 3", sans-serif !important; }
|
||||
body { font-family: "Inter", "Source Sans Pro", "Source Sans 3", sans-serif !important; }
|
||||
|
||||
/* Surface utility classes (need .body--dark to beat .body--dark .q-card specificity) */
|
||||
.body--dark .surface-1 { background: var(--bg-surface-1) !important; }
|
||||
.body--dark .surface-2 { background: var(--bg-surface-2) !important; }
|
||||
.body--dark .surface-3 { background: var(--bg-surface-3) !important; }
|
||||
|
||||
/* Typography utility classes */
|
||||
.section-header {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
.subsection-header {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255,255,255,0.12);
|
||||
border-radius: 3px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
''')
|
||||
|
||||
config = load_config()
|
||||
@@ -106,9 +163,9 @@ def index():
|
||||
'text-subtitle1 q-pa-lg')
|
||||
return
|
||||
|
||||
ui.label(f'Editing: {state.file_path.name}').classes('text-h5 q-mb-md')
|
||||
ui.label(f'Editing: {state.file_path.name}').classes('text-h5 q-mb-lg').style('font-weight: 600')
|
||||
|
||||
with ui.tabs().classes('w-full') as tabs:
|
||||
with ui.tabs().classes('w-full').style('border-bottom: 1px solid var(--border)') as tabs:
|
||||
ui.tab('batch', label='Batch Processor')
|
||||
ui.tab('timeline', label='Timeline')
|
||||
ui.tab('raw', label='Raw Editor')
|
||||
@@ -148,7 +205,7 @@ def index():
|
||||
# ------------------------------------------------------------------
|
||||
# Sidebar (rendered AFTER helpers are attached)
|
||||
# ------------------------------------------------------------------
|
||||
with ui.left_drawer(value=True).classes('q-pa-md').style('width: 300px'):
|
||||
with ui.left_drawer(value=True).classes('q-pa-md').style('width: 320px'):
|
||||
render_sidebar(state)
|
||||
|
||||
# ------------------------------------------------------------------
|
||||
@@ -165,172 +222,172 @@ def index():
|
||||
def render_sidebar(state: AppState):
|
||||
ui.label('Navigator').classes('text-h6')
|
||||
|
||||
# --- Path input ---
|
||||
path_input = ui.input(
|
||||
'Current Path',
|
||||
value=str(state.current_dir),
|
||||
).classes('w-full')
|
||||
# --- Path input + Pin ---
|
||||
with ui.card().classes('w-full q-pa-md q-mb-md'):
|
||||
path_input = ui.input(
|
||||
'Current Path',
|
||||
value=str(state.current_dir),
|
||||
).classes('w-full')
|
||||
|
||||
def on_path_enter():
|
||||
p = resolve_path_case_insensitive(path_input.value)
|
||||
if p is not None and p.is_dir():
|
||||
state.current_dir = p
|
||||
state.config['last_dir'] = str(p)
|
||||
def on_path_enter():
|
||||
p = resolve_path_case_insensitive(path_input.value)
|
||||
if p is not None and p.is_dir():
|
||||
state.current_dir = p
|
||||
state.config['last_dir'] = str(p)
|
||||
save_config(state.current_dir, state.config['favorites'], state.config)
|
||||
state.loaded_file = None
|
||||
state.file_path = None
|
||||
path_input.set_value(str(p))
|
||||
render_file_list.refresh()
|
||||
# Auto-load inside render_file_list already refreshed main content
|
||||
# if files exist; only refresh here for the empty-directory case.
|
||||
if not state.loaded_file:
|
||||
state._render_main.refresh()
|
||||
|
||||
path_input.on('keydown.enter', lambda _: on_path_enter())
|
||||
|
||||
def pin_folder():
|
||||
d = str(state.current_dir)
|
||||
if d not in state.config['favorites']:
|
||||
state.config['favorites'].append(d)
|
||||
save_config(state.current_dir, state.config['favorites'], state.config)
|
||||
render_favorites.refresh()
|
||||
|
||||
ui.button('Pin Folder', icon='push_pin', on_click=pin_folder).classes('w-full')
|
||||
|
||||
# --- Favorites ---
|
||||
with ui.card().classes('w-full q-pa-md q-mb-md'):
|
||||
ui.label('Favorites').classes('section-header')
|
||||
|
||||
@ui.refreshable
|
||||
def render_favorites():
|
||||
for fav in list(state.config['favorites']):
|
||||
with ui.row().classes('w-full items-center'):
|
||||
ui.button(
|
||||
fav,
|
||||
on_click=lambda f=fav: _jump_to(f),
|
||||
).props('flat dense').classes('col')
|
||||
ui.button(
|
||||
icon='close',
|
||||
on_click=lambda f=fav: _unpin(f),
|
||||
).props('flat dense color=negative')
|
||||
|
||||
def _jump_to(fav: str):
|
||||
state.current_dir = Path(fav)
|
||||
state.config['last_dir'] = fav
|
||||
save_config(state.current_dir, state.config['favorites'], state.config)
|
||||
state.loaded_file = None
|
||||
state.file_path = None
|
||||
path_input.set_value(str(p))
|
||||
path_input.set_value(fav)
|
||||
render_file_list.refresh()
|
||||
# Auto-load inside render_file_list already refreshed main content
|
||||
# if files exist; only refresh here for the empty-directory case.
|
||||
if not state.loaded_file:
|
||||
state._render_main.refresh()
|
||||
|
||||
path_input.on('keydown.enter', lambda _: on_path_enter())
|
||||
def _unpin(fav: str):
|
||||
if fav in state.config['favorites']:
|
||||
state.config['favorites'].remove(fav)
|
||||
save_config(state.current_dir, state.config['favorites'], state.config)
|
||||
render_favorites.refresh()
|
||||
|
||||
# --- Pin / Unpin ---
|
||||
def pin_folder():
|
||||
d = str(state.current_dir)
|
||||
if d not in state.config['favorites']:
|
||||
state.config['favorites'].append(d)
|
||||
save_config(state.current_dir, state.config['favorites'], state.config)
|
||||
render_favorites.refresh()
|
||||
|
||||
ui.button('Pin Folder', icon='push_pin', on_click=pin_folder).classes('w-full')
|
||||
|
||||
@ui.refreshable
|
||||
def render_favorites():
|
||||
for fav in list(state.config['favorites']):
|
||||
with ui.row().classes('w-full items-center'):
|
||||
ui.button(
|
||||
fav,
|
||||
on_click=lambda f=fav: _jump_to(f),
|
||||
).props('flat dense').classes('col')
|
||||
ui.button(
|
||||
icon='close',
|
||||
on_click=lambda f=fav: _unpin(f),
|
||||
).props('flat dense color=negative')
|
||||
|
||||
def _jump_to(fav: str):
|
||||
state.current_dir = Path(fav)
|
||||
state.config['last_dir'] = fav
|
||||
save_config(state.current_dir, state.config['favorites'], state.config)
|
||||
state.loaded_file = None
|
||||
state.file_path = None
|
||||
path_input.set_value(fav)
|
||||
render_file_list.refresh()
|
||||
if not state.loaded_file:
|
||||
state._render_main.refresh()
|
||||
|
||||
def _unpin(fav: str):
|
||||
if fav in state.config['favorites']:
|
||||
state.config['favorites'].remove(fav)
|
||||
save_config(state.current_dir, state.config['favorites'], state.config)
|
||||
render_favorites.refresh()
|
||||
|
||||
render_favorites()
|
||||
|
||||
ui.separator()
|
||||
render_favorites()
|
||||
|
||||
# --- Snippet Library ---
|
||||
ui.label('Snippet Library').classes('text-subtitle1 q-mt-md')
|
||||
with ui.card().classes('w-full q-pa-md q-mb-md'):
|
||||
ui.label('Snippet Library').classes('section-header')
|
||||
|
||||
with ui.expansion('Add New Snippet'):
|
||||
snip_name_input = ui.input('Name', placeholder='e.g. Cinematic').classes('w-full')
|
||||
snip_content_input = ui.textarea('Content', placeholder='4k, high quality...').classes('w-full')
|
||||
with ui.expansion('Add New Snippet'):
|
||||
snip_name_input = ui.input('Name', placeholder='e.g. Cinematic').classes('w-full')
|
||||
snip_content_input = ui.textarea('Content', placeholder='4k, high quality...').classes('w-full')
|
||||
|
||||
def save_snippet():
|
||||
name = snip_name_input.value
|
||||
content = snip_content_input.value
|
||||
if name and content:
|
||||
state.snippets[name] = content
|
||||
def save_snippet():
|
||||
name = snip_name_input.value
|
||||
content = snip_content_input.value
|
||||
if name and content:
|
||||
state.snippets[name] = content
|
||||
save_snippets(state.snippets)
|
||||
snip_name_input.set_value('')
|
||||
snip_content_input.set_value('')
|
||||
ui.notify(f"Saved '{name}'")
|
||||
render_snippet_list.refresh()
|
||||
|
||||
ui.button('Save Snippet', on_click=save_snippet).classes('w-full')
|
||||
|
||||
@ui.refreshable
|
||||
def render_snippet_list():
|
||||
if not state.snippets:
|
||||
return
|
||||
ui.label('Click to copy snippet text:').classes('text-caption')
|
||||
for name, content in list(state.snippets.items()):
|
||||
with ui.row().classes('w-full items-center'):
|
||||
async def copy_snippet(c=content):
|
||||
await ui.run_javascript(
|
||||
f'navigator.clipboard.writeText({json.dumps(c)})', timeout=3.0)
|
||||
ui.notify('Copied to clipboard')
|
||||
|
||||
ui.button(
|
||||
f'{name}',
|
||||
on_click=copy_snippet,
|
||||
).props('flat dense').classes('col')
|
||||
ui.button(
|
||||
icon='delete',
|
||||
on_click=lambda n=name: _del_snippet(n),
|
||||
).props('flat dense color=negative')
|
||||
|
||||
def _del_snippet(name: str):
|
||||
if name in state.snippets:
|
||||
del state.snippets[name]
|
||||
save_snippets(state.snippets)
|
||||
snip_name_input.set_value('')
|
||||
snip_content_input.set_value('')
|
||||
ui.notify(f"Saved '{name}'")
|
||||
render_snippet_list.refresh()
|
||||
|
||||
ui.button('Save Snippet', on_click=save_snippet).classes('w-full')
|
||||
|
||||
@ui.refreshable
|
||||
def render_snippet_list():
|
||||
if not state.snippets:
|
||||
return
|
||||
ui.label('Click to copy snippet text:').classes('text-caption')
|
||||
for name, content in list(state.snippets.items()):
|
||||
with ui.row().classes('w-full items-center'):
|
||||
async def copy_snippet(c=content):
|
||||
await ui.run_javascript(
|
||||
f'navigator.clipboard.writeText({json.dumps(c)})', timeout=3.0)
|
||||
ui.notify('Copied to clipboard')
|
||||
|
||||
ui.button(
|
||||
f'{name}',
|
||||
on_click=copy_snippet,
|
||||
).props('flat dense').classes('col')
|
||||
ui.button(
|
||||
icon='delete',
|
||||
on_click=lambda n=name: _del_snippet(n),
|
||||
).props('flat dense color=negative')
|
||||
|
||||
def _del_snippet(name: str):
|
||||
if name in state.snippets:
|
||||
del state.snippets[name]
|
||||
save_snippets(state.snippets)
|
||||
render_snippet_list.refresh()
|
||||
|
||||
render_snippet_list()
|
||||
|
||||
ui.separator()
|
||||
render_snippet_list()
|
||||
|
||||
# --- File List ---
|
||||
@ui.refreshable
|
||||
def render_file_list():
|
||||
json_files = sorted(state.current_dir.glob('*.json'))
|
||||
json_files = [f for f in json_files if f.name not in ('.editor_config.json', '.editor_snippets.json')]
|
||||
with ui.card().classes('w-full q-pa-md q-mb-md'):
|
||||
@ui.refreshable
|
||||
def render_file_list():
|
||||
json_files = sorted(state.current_dir.glob('*.json'))
|
||||
json_files = [f for f in json_files if f.name not in ('.editor_config.json', '.editor_snippets.json')]
|
||||
|
||||
if not json_files:
|
||||
ui.label('No JSON files in this folder.').classes('text-caption')
|
||||
ui.button('Generate Templates', on_click=lambda: _gen_templates()).classes('w-full')
|
||||
return
|
||||
if not json_files:
|
||||
ui.label('No JSON files in this folder.').classes('text-caption')
|
||||
ui.button('Generate Templates', on_click=lambda: _gen_templates()).classes('w-full')
|
||||
return
|
||||
|
||||
with ui.expansion('Create New JSON'):
|
||||
new_fn_input = ui.input('Filename', placeholder='my_prompt_vace').classes('w-full')
|
||||
with ui.expansion('Create New JSON'):
|
||||
new_fn_input = ui.input('Filename', placeholder='my_prompt_vace').classes('w-full')
|
||||
|
||||
def create_new():
|
||||
fn = new_fn_input.value
|
||||
if not fn:
|
||||
return
|
||||
if not fn.endswith('.json'):
|
||||
fn += '.json'
|
||||
path = state.current_dir / fn
|
||||
first_item = DEFAULTS.copy()
|
||||
first_item[KEY_SEQUENCE_NUMBER] = 1
|
||||
save_json(path, {KEY_BATCH_DATA: [first_item]})
|
||||
new_fn_input.set_value('')
|
||||
render_file_list.refresh()
|
||||
def create_new():
|
||||
fn = new_fn_input.value
|
||||
if not fn:
|
||||
return
|
||||
if not fn.endswith('.json'):
|
||||
fn += '.json'
|
||||
path = state.current_dir / fn
|
||||
first_item = DEFAULTS.copy()
|
||||
first_item[KEY_SEQUENCE_NUMBER] = 1
|
||||
save_json(path, {KEY_BATCH_DATA: [first_item]})
|
||||
new_fn_input.set_value('')
|
||||
render_file_list.refresh()
|
||||
|
||||
ui.button('Create', on_click=create_new).classes('w-full')
|
||||
ui.button('Create', on_click=create_new).classes('w-full')
|
||||
|
||||
ui.label('Select File').classes('text-subtitle2 q-mt-sm')
|
||||
file_names = [f.name for f in json_files]
|
||||
ui.radio(
|
||||
file_names,
|
||||
value=file_names[0] if file_names else None,
|
||||
on_change=lambda e: state._load_file(e.value) if e.value else None,
|
||||
).classes('w-full')
|
||||
ui.label('Select File').classes('subsection-header q-mt-sm')
|
||||
file_names = [f.name for f in json_files]
|
||||
ui.radio(
|
||||
file_names,
|
||||
value=file_names[0] if file_names else None,
|
||||
on_change=lambda e: state._load_file(e.value) if e.value else None,
|
||||
).classes('w-full')
|
||||
|
||||
# Auto-load first file if nothing loaded yet
|
||||
if file_names and not state.loaded_file:
|
||||
state._load_file(file_names[0])
|
||||
# Auto-load first file if nothing loaded yet
|
||||
if file_names and not state.loaded_file:
|
||||
state._load_file(file_names[0])
|
||||
|
||||
def _gen_templates():
|
||||
generate_templates(state.current_dir)
|
||||
render_file_list.refresh()
|
||||
def _gen_templates():
|
||||
generate_templates(state.current_dir)
|
||||
render_file_list.refresh()
|
||||
|
||||
render_file_list()
|
||||
|
||||
ui.separator()
|
||||
render_file_list()
|
||||
|
||||
# --- Comfy Monitor toggle ---
|
||||
def on_monitor_toggle(e):
|
||||
|
||||
Reference in New Issue
Block a user