change settings UI to use vertical tabs
This commit is contained in:
parent
1d7a31def8
commit
269f6e8676
@ -1489,41 +1489,34 @@ def create_ui():
|
|||||||
return gr.update(value=value), opts.dumpjson()
|
return gr.update(value=value), opts.dumpjson()
|
||||||
|
|
||||||
with gr.Blocks(analytics_enabled=False) as settings_interface:
|
with gr.Blocks(analytics_enabled=False) as settings_interface:
|
||||||
settings_submit = gr.Button(value="Apply settings", variant='primary', elem_id="settings_submit")
|
with gr.Row():
|
||||||
result = gr.HTML()
|
settings_submit = gr.Button(value="Apply settings", variant='primary', elem_id="settings_submit")
|
||||||
|
restart_gradio = gr.Button(value='Restart UI', variant='primary', elem_id="settings_restart_gradio")
|
||||||
|
|
||||||
settings_cols = 3
|
result = gr.HTML(elem_id="settings_result")
|
||||||
items_per_col = int(len(opts.data_labels) * 0.9 / settings_cols)
|
|
||||||
|
|
||||||
quicksettings_names = [x.strip() for x in opts.quicksettings.split(",")]
|
quicksettings_names = [x.strip() for x in opts.quicksettings.split(",")]
|
||||||
quicksettings_names = set(x for x in quicksettings_names if x != 'quicksettings')
|
quicksettings_names = set(x for x in quicksettings_names if x != 'quicksettings')
|
||||||
|
|
||||||
quicksettings_list = []
|
quicksettings_list = []
|
||||||
|
|
||||||
cols_displayed = 0
|
|
||||||
items_displayed = 0
|
|
||||||
previous_section = None
|
previous_section = None
|
||||||
column = None
|
current_tab = None
|
||||||
with gr.Row(elem_id="settings").style(equal_height=False):
|
with gr.Tabs(elem_id="settings"):
|
||||||
for i, (k, item) in enumerate(opts.data_labels.items()):
|
for i, (k, item) in enumerate(opts.data_labels.items()):
|
||||||
section_must_be_skipped = item.section[0] is None
|
section_must_be_skipped = item.section[0] is None
|
||||||
|
|
||||||
if previous_section != item.section and not section_must_be_skipped:
|
if previous_section != item.section and not section_must_be_skipped:
|
||||||
if cols_displayed < settings_cols and (items_displayed >= items_per_col or previous_section is None):
|
elem_id, text = item.section
|
||||||
if column is not None:
|
|
||||||
column.__exit__()
|
|
||||||
|
|
||||||
column = gr.Column(variant='panel')
|
if current_tab is not None:
|
||||||
column.__enter__()
|
current_tab.__exit__()
|
||||||
|
|
||||||
items_displayed = 0
|
current_tab = gr.TabItem(elem_id="settings_{}".format(elem_id), label=text)
|
||||||
cols_displayed += 1
|
current_tab.__enter__()
|
||||||
|
|
||||||
previous_section = item.section
|
previous_section = item.section
|
||||||
|
|
||||||
elem_id, text = item.section
|
|
||||||
gr.HTML(elem_id="settings_header_text_{}".format(elem_id), value='<h1 class="gr-button-lg">{}</h1>'.format(text))
|
|
||||||
|
|
||||||
if k in quicksettings_names and not shared.cmd_opts.freeze_settings:
|
if k in quicksettings_names and not shared.cmd_opts.freeze_settings:
|
||||||
quicksettings_list.append((i, k, item))
|
quicksettings_list.append((i, k, item))
|
||||||
components.append(dummy_component)
|
components.append(dummy_component)
|
||||||
@ -1533,15 +1526,14 @@ def create_ui():
|
|||||||
component = create_setting_component(k)
|
component = create_setting_component(k)
|
||||||
component_dict[k] = component
|
component_dict[k] = component
|
||||||
components.append(component)
|
components.append(component)
|
||||||
items_displayed += 1
|
|
||||||
|
|
||||||
with gr.Row():
|
if current_tab is not None:
|
||||||
request_notifications = gr.Button(value='Request browser notifications', elem_id="request_notifications")
|
current_tab.__exit__()
|
||||||
download_localization = gr.Button(value='Download localization template', elem_id="download_localization")
|
|
||||||
|
|
||||||
with gr.Row():
|
with gr.TabItem("Actions"):
|
||||||
reload_script_bodies = gr.Button(value='Reload custom script bodies (No ui updates, No restart)', variant='secondary', elem_id="settings_reload_script_bodies")
|
request_notifications = gr.Button(value='Request browser notifications', elem_id="request_notifications")
|
||||||
restart_gradio = gr.Button(value='Restart Gradio and Refresh components (Custom Scripts, ui.py, js and css only)', variant='primary', elem_id="settings_restart_gradio")
|
download_localization = gr.Button(value='Download localization template', elem_id="download_localization")
|
||||||
|
reload_script_bodies = gr.Button(value='Reload custom script bodies (No ui updates, No restart)', variant='secondary', elem_id="settings_reload_script_bodies")
|
||||||
|
|
||||||
request_notifications.click(
|
request_notifications.click(
|
||||||
fn=lambda: None,
|
fn=lambda: None,
|
||||||
@ -1578,9 +1570,6 @@ def create_ui():
|
|||||||
outputs=[],
|
outputs=[],
|
||||||
)
|
)
|
||||||
|
|
||||||
if column is not None:
|
|
||||||
column.__exit__()
|
|
||||||
|
|
||||||
interfaces = [
|
interfaces = [
|
||||||
(txt2img_interface, "txt2img", "txt2img"),
|
(txt2img_interface, "txt2img", "txt2img"),
|
||||||
(img2img_interface, "img2img", "img2img"),
|
(img2img_interface, "img2img", "img2img"),
|
||||||
|
27
style.css
27
style.css
@ -241,6 +241,33 @@ fieldset span.text-gray-500, .gr-block.gr-box span.text-gray-500, label.block s
|
|||||||
z-index: 200;
|
z-index: 200;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#settings{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings > div{
|
||||||
|
border: none;
|
||||||
|
margin-left: 10em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings > div.flex-wrap{
|
||||||
|
float: left;
|
||||||
|
display: block;
|
||||||
|
margin-left: 0;
|
||||||
|
width: 10em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings > div.flex-wrap button{
|
||||||
|
display: block;
|
||||||
|
border: none;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings_result{
|
||||||
|
height: 1.4em;
|
||||||
|
margin: 0 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
input[type="range"]{
|
input[type="range"]{
|
||||||
margin: 0.5em 0 -0.3em 0;
|
margin: 0.5em 0 -0.3em 0;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user